jQuery操作Dom、jQuery事件机制、jQuery补充部分

jQuery操作Dom：

修改属性：

//使用attr()方法

//attr(name, value)
//name:要修改的属性的属性名
//value:对应的值

//attr方法，如果当前标签有要修改的属性，就会进行修改，如果没有，直接添加

例：$("a").attr("href","http://www.baidu.com");

修改多个属性值：

//attr(obj)

$(“img”).attr({

“title”: ”文件名称”，

“src”:”路径”，

“alt:”图片”

})

//获取属性//attr(name);

在获取不存在的属性的时候此种方法会返回undefined

移除属性：

//removeAttr(name)
//name:要删除的属性名//attr方法不能用来操作单属性 （checked  selected  disable）
//操作checked  selected disabled  这三个属性需要用到 prop
例：
<script>$(function(){$("#btn1").click(function(){$("#check").prop("checked", true);});$("#btn2").click(function(){$("#check").prop("checked",false);});})  ;
</script>
<body>
<input type="button" value="选中" id="btn1"/>
<input type="button" value="不选中" id="btn2"/>

<input type="checkbox" name="" id="check"/> </body>

jQuery操作值：

//获取表单元素的value值//val()//          console.log($("#txt").val());

//设置表单元素的value值//val(value)//value：要设置的value值
//                $("#txt").val("太阳天空照");

当用val()获得select的value值时，获得的是一个数组。（必须要选中，不然返回null）

 $(function(){var $select=$("#select>option").val();console.log($select);})</script>
</head>
<body>
<input type="text" id="txt" value="请输入内容"/>
<select name="" id="select"><option value="1">134</option><option value="2">124</option><option value="3">114</option>

html()方法与text()方法:

 $(function(){$("div").text("<span>这是一段内容</span>");//不会转译
//获取内容//  $("div").text()
//        $("div").html("<p>文字</p>");会进行转译});

获取尺寸：

height() width()

$(function(){$("#btn").click(function(){var width=$("div").width();var height=$("div").height();console.log(width,height);});});

jQuery操作坐标值：

offset()方法

$(function () {$("#btnGetOffset").click(function () {//offset()方法可以用来获取 当前元素距离页面坐上角的坐标//{top: 20, left: 20}var offset = $("div").offset();console.log(offset.top, offset.left);});$("#btnSetOffset").click(function () {//offset(obj)//设置当前元素距离页面左上角的坐标//obj: {top:value, left:value}$("div").offset({top: 40,left: 40});});$("#btnGetPosition").click(function () {//postion方法用来获取当前元素相对于有定位的父元素的位置，如果父元素没有设置定位，会继续往上找，直到找到body
//position方法只能够获取位置不能够修改位置var pos =  $("#inner").position();console.log(pos);});
})

scrollTop方法

设置或者获取垂直滚动条的位置

//获取滚动条的滚动距离  left scrollLeft()
//                      top   scrollTop()
$(function(){$(document).scroll(function(){var scrollLeft=$(this).scrollLeft();var scrollTop=$(this).scrollTop();console.log(scrollLeft,scrollTop);});
});

bind绑定和delegate事件

$(function(){//bind绑定事件//bind(types,eventHandler)//types事件类型，是字符串，如果有多个用空格隔开//eventHandler:事件处理函数$(function(){$("div").bind("mouseenter click",function(){alert("哈哈");});$("#btn").click(function(){$("div").append("<p>233</p>")});//delegate 事件委托//同时绑定多个时间，也可动态给元素添加事件$("div").delegate("p","mouseenter",function(){alert("事件委托");});})
});

on()绑定事件

//on方法绑定事件//on(types,selector,eventHandler)//types 事件类型多个事件用空格隔开//selector要给谁绑定就选择相应的选择器$(function(){$("div").append($("p"));$("div").on("mouseenter click","p",function(){//委托给div实现alert("哈哈");});
//       $("p").on("mouseenter",function(){//                alert("自身绑定");
//            })
       });
//on方法绑定事件//on(types,selector,eventHandler)//types 事件类型多个事件用空格隔开//selector要给谁绑定就选择相应的选择器$(function(){$("div").append($("p"));$("div").on("mouseenter click","p",function(){//委托给div实现alert("哈哈");});
//       $("p").on("mouseenter",function(){//                alert("自身绑定");
//            })});

off()解绑

//off(types)//括号内是要解绑的事件类型

//1.括号不传参数会解绑所有事件//$("p").off();

//2.不论是委托事件还是自身绑定事件都会解绑//            $("p").off("click");

             //3.解绑所有代理的click事件，元素本身的事件不会被解绑             //$(selector).off( “click”, “**” );

triggle触发事件：

 $(function(){//1.直接调用事件$("#btn").click(function(){
//                $("#txt").focus();//2.trigger(type)//括号内是指定要触发的事件类型
//              $("#txt").trigger("focus");//3.注意：这种方式触发事件，不触发浏览器默认行为， 比如:文本框获得焦点的默认行为$("#txt").triggerHandler("focus");});});

事件对象：

event.type	事件类型
event.data	存储绑定事件时传递的附加数据
event.target	点了谁就是谁
event.currentTarget	当前DOM元素，等同于this
event.delegateTarget	代理对象
screenX和screenY	对应屏幕最左上角的值
offsetX和offsetY	点击的位置距离元素的左上角的位置
clientX和clientY	距离页面左上角的位置（忽视滚动条）
pageX和pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.wich	鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键
event.keyCode	按下的键盘代码
event.stopPropagation()	阻止事件冒泡行为
event.preventDefault()	阻止浏览器默认行为

阻止事件的冒泡行为除了e. stopPropagation()还有return false;return false;还有阻止浏览器默认行为的作用，所以推荐使用这种方法。

jQuery补充部分：

链式编程：在设置操作的时候才能延续链式编程，返回的是这个对象（return this）

而在获取操作的时候得到的相应的值，不能返回this.

解决办法：使用筛选选择器 end(); 它会改变jQ对象的dom对象，恢复到上一次状态

隐式迭代：

什么是隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

//            $("li").css("backgroundColor","pink");
//         这里获取的是很多的li标签

//$("li")拿到的是10个元素//当我们执行设置操作的时候，设置的是全部的li //会对这10个元素进行遍历，然后依次执行设置方法

//            $("li").css("fontSize");//获取方法里面不会有隐式迭代

each()方法：

有了隐式迭代，为什么还要使用each函数遍历？大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。如果要对每个元素做不同的处理，这时候就用到了each方法

 //each(function(index,element){})//index就是当前正在遍历的元素的索引//element就是当前正在遍历的元素$lis.each(function (index, element) {console.log(index);
//                console.log(element);$(element).css("backgroundColor","red");});

转载于:https://www.cnblogs.com/xinjianheyi/p/5801245.html

jQuery操作Dom、jQuery事件机制、jQuery补充部分相关推荐

jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
jQuery操作DOM对象
jQuery操作DOM对象 1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设 ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
jQuery 操作 DOM
为什么80%的码农都做不了架构师?>>> 操作 DOM 使用jquery 选择器得到节点的 jquery对象.使用 jquery对象可以操作dom! 修改Text和Html ...
JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...
第四章使用jQuery操作DOM元素
一.DOM的分类: 1.DOM core 2.HTML-DOM 3.CSS-DOM 二.css操作语法: $("#div1").css("color",&qu ...
jquery 使用jquery操作Dom
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
第八章 JQuery操作DOM
一.jQuery操作样式 /* 单个样式 */ $("li:first").css("color","#009933"); /* ...

jQuery操作Dom、jQuery事件机制、jQuery补充部分

jQuery操作Dom、jQuery事件机制、jQuery补充部分相关推荐

最新文章

热门文章