JQuery 笔记整理
JQuery的文本操作:
获取HTML代码:
html() //获取第一个元素匹配的html内容 html(val) //设置所有元素的html内容
获取文本值:
text() //获取所有匹配元素的文本内容 -->不包含html标签 text(val) //设置所有匹配元素的内容
获取值:
1 val() //获取第一个匹配元素的当前值 2 val(val) //设置所有匹配元素的值 3 val([val,val2]) //设置checkbox,select的值
示例:
JQuery的属性操作:
使用于非 checkbox,非 radio 的属性操作:
1 attr(attrName) //返回第一个匹配元素的属性值 2 attr(attrName,arrtValue) //为所有匹配元素设置一个属性值 3 attr({k1:v1,k2:v2}) //为所有匹配元素设置多个属性值 4 removeAttr() //从每一个匹配的元素中删除一个属性
使用于 checkbox 或 radio 的属性操作:
1 prop() //获取属性 2 removeProp() //移除属性
注意:
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题.为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked").
全选,反选,取消示例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 8 </head> 9 <body> 10 <table border="1" > 11 <thead> 12 <tr> 13 <th>选择</th> 14 <th>1</th> 15 <th>2</th> 16 </tr> 17 </thead> 18 19 <tr> 20 <th><input type="checkbox" class="c1" ></th> 21 <th>a</th> 22 <th>A</th> 23 </tr> 24 <tr> 25 <th><input type="checkbox" ></th> 26 <th>b</th> 27 <th>B</th> 28 </tr> 29 <tr> 30 <th><input type="checkbox" ></th> 31 <th>c</th> 32 <th>C</th> 33 </tr> 34 <tr> 35 <th><input class = "b1" type="button" value="全选"></th> 36 <th><input class = "b2" type="button" value="反选"></th> 37 <th><input class = "b3" type="button" value="取消"></th> 38 </tr> 39 40 41 </table> 42 43 <script src="jquery-3.2.1.min.js"></script> 44 <script> 45 $(".b1").click(function () { 46 var $check = $(":checkbox"); 47 // console.log($check); 48 for (var i = 0; i<$check.length;i++){ 49 if($($check[i]).prop("checked")){ 50 // $($check[i]).prop("checked",false); 51 }else{ 52 $($check[i]).prop("checked",true); 53 } 54 } 55 }); 56 57 $(".b3").click(function () { 58 var $check = $(":checkbox"); 59 // console.log($check); 60 for (var i = 0; i<$check.length;i++){ 61 if($($check[i]).prop("checked")){ 62 $($check[i]).prop("checked",false); 63 }else{ 64 // $($check[i]).prop("checked",true); 65 } 66 } 67 }); 68 69 $(".b2").click(function () { 70 var $check = $(":checkbox"); 71 // console.log($check); 72 for (var i = 0; i<$check.length;i++){ 73 if($($check[i]).prop("checked")){ 74 $($check[i]).prop("checked",false); 75 }else{ 76 $($check[i]).prop("checked",true); 77 } 78 } 79 }); 80 81 82 </script> 83 </body> 84 </html>
JQuery文档处理:
添加某元素到指定元素内部的后面,放置后两元素为父子级关系:
1 $(A).append(B) //把B追加到A的内部 2 $(A).appendTo(B) //把A追加到B内部
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 9 <ul class="u1"> 10 <li>1</li> 11 <li>2</li> 12 <li>3</li> 13 <li>4</li> 14 <li>5</li> 15 </ul> 16 17 <img src="#" alt="无图"> 18 <button class="b1">添加</button> 19 <script src="jquery-3.2.1.min.js"></script> 20 <script> 21 22 $(".b1").click(function () { 23 $(".u1").append($("img")) 24 }) 25 </script> 26 </body> 27 </html>
添加某元素到指定元素内部的前面,放置后两元素为父子级关系:
1 $(A).prepend(B) //把B放置于A内部最前端 2 $(A).prependTo //把A放置于B的内部最前端
添加某元素到指定元素后面:
1 $(A).after(B) //把B放到A的后面 2 $(A).insertAfter(B) //把A放到B的后面
添加某元素到指定元素前面:
1 $(A).before(B) //把B放到A的前面 2 $(A).insertBefore(B) //把A放到B的前面
移除和清空元素:
1 remove() //从DOM中删除匹配的元素 2 empty() //删除匹配的元素集合中所有的子节点
示例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 9 <ul class="u1"> 10 <li>1</li> 11 <li>2</li> 12 <li>3</li> 13 <li>4</li> 14 <li>5</li> 15 </ul> 16 17 <img src="#" alt="无图"> 18 <button class="b1">添加</button> 19 <button class="b2">remove</button> 20 <button class="b3">empty</button> 21 <script src="jquery-3.2.1.min.js"></script> 22 <script> 23 24 $(".b1").click(function () { 25 $(".u1").append($("img")) 26 }); 27 28 $(".b2").click(function () { 29 $(".u1").remove() 30 }); 31 $(".b3").click(function () { 32 $(".u1").empty() 33 }) 34 35 </script> 36 </body> 37 </html>
替换:
$(A).replaceWith(B) //用B替换A匹配到的内容,这里B可以是标签,可以是符合标签格式的字符串,也可以是普通字符串 $(A).replaceAll(B) //把被选元素替换为新的HTML元素。
示例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 9 <ul class="u1"> 10 <li>1</li> 11 <li>2</li> 12 <li>3</li> 13 <li>4</li> 14 <li>5</li> 15 </ul> 16 17 18 <a href="https://www.baidu.com" class = "a1">baidu</a> 19 <i class="i1">hello world</i> 20 21 <ol> 22 <li class = "a1"></li> 23 <li class = "a1"></li> 24 <li class = "a1"></li> 25 <li class = "a1"></li> 26 <li class = "a1"></li> 27 </ol> 28 29 <img src="#" alt="无图"> 30 <button class="b1">添加</button> 31 <button class="b2">remove</button> 32 <button class="b3">empty</button> 33 <button class="b4">replacewith</button> 34 <button class="b5">replaceAll</button> 35 <script src="jquery-3.2.1.min.js"></script> 36 <script> 37 38 $(".b1").click(function () { 39 $(".u1").append($("img")) 40 }); 41 42 $(".b2").click(function () { 43 $(".u1").remove() 44 }); 45 $(".b3").click(function () { 46 $(".u1").empty() 47 }); 48 $(".b4").click(function () { 49 $(".a1").replaceWith($(".i1")) 50 }); 51 $(".b5").click(function () { 52 // $(".a1").replaceAll($(".i1")) 53 $(".i1").replaceAll($(".a1")) 54 }); 55 </script> 56 </body> 57 </html>
克隆:
$(selector).clone(true|false) //方法生成被选元素的副本，包含子节点、文本和属性。当clone()传参默认为false,此时被复制的元素若是存在事件,则不复制事件,
为ture时,若被复制的元素有事件处理程序,这个事件处理会被一同复制.
示例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 9 <ul class="u1"> 10 <li>1</li> 11 <li>2</li> 12 <li>3</li> 13 <li>4</li> 14 <li>5</li> 15 </ul> 16 17 <button class="b1">clone</button> 18 19 <script src="jquery-3.2.1.min.js"></script> 20 <script> 21 $(".b1").click(function () { 22 $(".b1").clone(true).appendTo($(".u1")) 23 }); 24 </script> 25 </body> 26 </html>
JQuery事件
常用事件:
1 click(function(){...}) //点击发生事件 2 hover(function(){...}) //鼠标悬停发生事件 3 blur(function(){...}) //失去焦点发生事件 4 focus(function(){...}) //获得焦点发生事件 5 change(function(){...}) //原色的值改变时发生change事件(仅适用于表单字段) 6 keyup(function(){...}) //键盘键被松开时发生事件
事件绑定:
绑定事件在1.7版本之后只有on()这一种了
1 $(selector).on(envents [,selector],functions(){}) 2 events:事件 3 selector:选择器(可选参数) 4 function:事件处理函数
注意:
像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
使用.on()绑定hover的方法:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 9 <ul class="u1"> 10 <li>1</li> 11 <li>2</li> 12 <li>3</li> 13 <li>4</li> 14 <li>5</li> 15 16 </ul> 17 <script src="jquery-3.2.1.min.js"></script> 18 <script> 19 $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 20 $(this).addClass('hover'); 21 }); 22 $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件 23 $(this).removeClass('hover'); 24 }); 25 26 </script> 27 </body> 28 </html>
参考地址 http://blog.csdn.net/cozia/article/details/52403108?locationNum=8
移除事件:
.off()方法移除.on()方法绑定的事件:
1 $(selector).off(envents [,selector] [,functions(){}]) 2 events:事件 3 selector:选择器(可选参数) 4 function:事件处理函数
阻止后续事件执行:
return false //常见阻止表单提交等
JQuery中的事件委托:
一：什么是事件委托？
事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
二：为什么要用事件委托？
1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。
三：如何实现事件委托?
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件,即使用父级来完成操作.
参考地址:https://www.cnblogs.com/zhoushengxiu/p/5703095.html
页面载入:
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法:
1 $(document).ready(function(){ 2 // 在这里写你的JS代码... 3 })
1 $(function(){ 2 // 你在这里写你的代码 3 })
JQuery动画效果
| 动画效果 | ||
| 基本动画 | show([s,[e],[fn]) | 显示隐藏的被选元素 |
| / | hide([s,[e],[fn]) | 隐藏被选的元素 |
| / | toggle([s,[e],[fn]) | 在被选元素上进行 hide()和 show()之间的切换 |
| 滑动 | slideDown([s,[e],[fn]) | 以滑动方式隐藏被选元素 |
| / | slideUp([s,[e],[fn]) | 以滑动方式显示被选元素 |
| / | slideToggle([s,[e],[fn]) | 方法在被选元素上进行 slideUp() 和 slideDown()之间的切换 |
| 淡入淡出 | fadeIn([s,[e],[fn]) | 逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果） |
| / | fadeOut([s,[e],[fn]) | 逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果） |
| / | fadeToggle([s,[e],[fn]) | 方法在 fadeIn() 和 fadeOut()方法之间切换 |
| 自定义 | animate(p,[s],[e],[fn]) | - |
补充:
.each()
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循环的具体元素。 })
输出:
010 120 230 340
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); });
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用 return false提前结束each循环。
终止each循环
return false；
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据
$("div").removeData("k"); //移除元素上存放k对应的数据
示例:
插件
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例：
1 <script> 2 jQuery.extend({ 3 min:function(a, b){return a < b ? a : b;}, 4 max:function(a, b){return a > b ? a : b;} 5 }); 6 jQuery.min(2,3);// => 2 7 jQuery.max(4,5);// => 5 8 </script>
jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
<script> jQuery.fn.extend({ check:function(){ return this.each(function(){this.checked =true;}); }, uncheck:function(){ return this.each(function(){this.checked =false;}); } }); // jQuery对象可以使用新添加的check()方法了。 $("input[type='checkbox']").check(); </script>
单独写在文件中的扩展：
(function(jq){ jq.extend({ funcName:function(){ ... }, }); })(jQuery);
示例:
浙公网安备 33010602011771号