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"); });