jQuery 详解

—— 老孙

1、jQuery介绍

2、jQuery使用

3、案例

1.jQuery介绍

  • jQuery由美国人John Resig（约翰·莱西格）于2006年创建
  • jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
  • 它的设计思想是write less,do more
  • 实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码

jQuery详解 - 图1

  1. $("tr:even").css("background-color","#ccc");

1.1 jQuery能做什么?

  • 访问和操作DOM元素
  • 控制页面样式
  • 对页面事件进行处理
  • 扩展新的jQuery插件
  • 与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库

1.2 jQuery的优势

  • 体积小，压缩后只有100KB左右
  • 强大的选择器
  • 出色的DOM封装
  • 可靠的事件处理机制
  • 出色的浏览器兼容性

1.3 jQuery下载

进入jQuery官网：http://jQuery.com
jQuery详解 - 图2
jQuery详解 - 图3

我们使用压缩版就可以。体积更小，内容已经通过算法进行压缩， 不会浪费资源空间！

而开发版就针对修改jQuery源码的专业前端开发者的。

2 jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突

在页面中使用传统引入js文件的方式引入即可。

  1. <script src="js/jquery-3.4.1.min.js"></script>

2.1 基本的语法介绍

  1. <script>
  2.     $(selector).action();
  3. </script>

说明：


  • 工厂函数 $() ：将DOM对象转化为jQuery对象

  • 选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致 ）

  • 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”

  • 例如：
    1. <body>
    2.   <p>hello</p>
    3. </body>
    4. <script src="js/jquery-3.4.1.min.js"></script>
    5. <script>
    6.   alert( $("p").text() );
    7. </script>

2.2 jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

  1. $("#title").html();
  2. // 等同于
  3. document.getELementById("title").innerHTML;

想混用，要转换

  • DOM对象转jQuery对象
  1. var a = document.getElementById("name"); // a是DOM对象
  2. var b = $(a); // b是jQuery对象
  • jQuery对象转DOM对象
  1. var a = $("#name"); // a是jQuery对象
  2. var b = jqObject.get(0); // b是DOM对象

2.3 选择器

2.3.1 基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器 | 名称 | 语法构成 | 描述 | 示例 | | —- | —- | —- | —- | | 标签选择器 | element | 根据给定的标签名匹配元素 | $(“h2” )选取所有h2元素 | | 类选择器 | .class | 根据给定的class匹配元素 | $(“ .title”)选取所有class为title的元素 | | ID选择器 | #id | 根据给定的id匹配元素 | $(“ #title”)选取id为title的元素 | | 并集选择器 | selector1,selector2,…,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $(“div,p,.title” )选取所有div、p和拥有class为title的元素 | | 交集选择器 | element.class或element#id | 匹配指定class或id的某元素或元素集合 | $(“h2.title”)选取所有拥有class为title的h2元素 |

  1. <p>中国</p>
  2. <p>武汉</p>
  3. <p class="jy">加油</p>
  4. <p id="wan">祖国万岁</p>
  5. <h3 class="jy">祖国万岁</h3>
  7. <script src="js/jquery-3.4.1.min.js"></script>
  8. <script>
  9.    //$("p").css("color","red"); // 标签选择器，获得所有的p
  10.    //$(".jy").css("color","red"); //类选择器
  11.    //$("#wan").css("color","red"); //ID选择器,更具备唯一性
  12.    //$(".jy,#wan").css("color","red"); // 并集选择器，.jy和#wan
  13.    $("h3.jy").css("color","red"); // 交集选择器，既是h3标签，又拥有.jy的元素
  14. </script>

2.3.2 层次选择器

名称 语法构成 描述 示例
后代选择器 ancestor descendant 选取ancestor元素里的所有descendant（后代）元素 $(“#menu span” )选取#menu下的元素
子选择器 parent>child 选取parent元素下的child（子）元素 $(“ #menu>span” )选取#menu的子元素
相邻元素选择器 prev+next 选取紧邻prev元素之后的next元素 $(“ h2+dl “ )选取紧邻元素之后的同辈元素

| | 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(“ h2~dl “ )选取元素之后所有的同辈元素

|

  1. <h3>000</h3>
  2. <div id="x">
  3.     111
  4.     <p>p1</p>
  5.     <div>
  6.         <p>p2</p>
  7.     </div>
  8. </div>
  9. <h3>222</h3>
  10. <h3>333</h3>
  12. <script src="js/jquery-3.4.1.min.js"></script>
  13. <script>
  14.         //$("#x p").css("color","red"); // 后代选择器，忽略层级
  15.         //$("#x>p").css("color","red"); // 子代选择器，只负责子级
  16.         //$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3
  17.         $("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3
  18. </script>

2.3.3 属性选择器

名称 语法构成 描述 示例
属性选择器 [attribute] 选取包含给定属性的元素 $(“ [href]” )选取含有href属性的元素
[attribute=value] 选取等于给定属性是某个特定值的元素 $(“ [href =’#’]” )选取href属性值为“#”的元素
[attribute !=value] 选取不等于给定属性是某个特定值的元素 $(“ [href !=’#’]” )选取href属性值不为“#”的元素
[attribute^=value] 选取给定属性是以某些特定值开始的元素 $(“ [href^=’en’]” )选取href属性值以en开头的元素
[attribute$=value] 选取给定属性是以某些特定值结尾的元素 jQuery详解 - 图4=’.jpg’]” )选取href属性值以.jpg结尾的元素
[attribute*=value] 选取给定属性是以包含某些值的元素 $(“ [href* =’txt’]” )选取href属性值中含有txt的元素
[s1] [s2] [sN] 选取满足多个条件的复合属性的元素 $(“li[id][title=新闻]” )选取含有id和title属性为新闻的
  • 元素
    		•  
    1. <a href="www.lagou.com">拉勾网</a>
    2. <a href="www.sina.com.cn">新浪网</a>
    3. <a href="http://www.163.com">网易</a>
    4. <p href="x">哈哈1</p>
    5. <p href="x" title="x">哈哈2</p>
    7. <script src="js/jquery-3.4.1.min.js"></script>
    8. <script>
    10.     //$("[href]").css("color","red"); // 选取拥有href属性的元素
    11.     //$("[href='x']").css("color","red"); // 选取拥有href=x的元素
    12.     //$("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
    13.     //$("[href^='www']").css("color","red"); // 选取href属性以www开头的元素
    14.     //$("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素
    15.     //$("[href*='a']").css("color","red"); // 选取href属性包含a的元素
    16.     $("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素
    18. </script>

    2.3.4 过滤选择器

    语法构成 描述 示例
    :first 选取第一个元素 $(“ li:first” )选取所有
    - 元素中的第一个
    - 元素
    :last 选取最后一个元素 $(“ li:last” )选取所有
    - 元素中的最后一个
    - 元素
    :even 选取索引是偶数的所有元素（index从0开始） $(“ li:even” )选取索引是偶数的所有
    - 元素
    :odd 选取索引是奇数的所有元素（index从0开始） $(“ li:odd” )选取索引是奇数的所有
    - 元素
    :eq(index) 选取索引等于index的元素（index从0开始） $(“li:eq(1)” )选取索引等于1的
    - 元素
    :gt(index) 选取索引大于index的元素（index从0开始） $(“ li:gt(1)” )选取索引大于1的
    - 元素（注：大于1，不包括1）
    :lt(index) 选取索引小于index的元素（index从0开始） $(“li:lt(1)” )选取索引小于1的
    - 元素（注：小于1，不包括1）
    		 
    1. <h2 id="h2#x">修仙小说</h2>
    2. <ul>
    3.     <li>凡人修仙传</li>
    4.     <li>遮天</li>
    5.     <li>神墓</li>
    6.     <li>残袍</li>
    7.     <li>大主宰</li>
    8. </ul>
    10. <script src="js/jquery-3.4.1.min.js"></script>
    11. <script>
    13.     //$("li:first").css("color","red"); // 第一个li
    14.     //$("li:last").css("color","red"); // 最后一个li
    15.     //$("li:even").css("color","red"); // 偶数行的li
    16.     //$("li:odd").css("color","red"); // 奇数行的li
    17.     //$("li:eq(2)").css("color","red"); // 下标为2的li
    18.     //$("li:gt(1)").css("color","red"); // 下标大于1的li
    19.     //$("li:lt(2)").css("color","red"); // 下标小于2的li
    20.     $("#h2\\#x").css("color","red"); // 使用转义符
    21. </script>

    2.4 事件

    2.4.1 鼠标事件

    鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有： | 方法 | 描述 | 执行时机 | | —- | —- | —- | | click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 | | mouseover( ) | 触发或将函数绑定到指定元素的mouse over事件 | 鼠标移过时 | | mouseout( ) | 触发或将函数绑定到指定元素的mouse out事件 | 鼠标移出时 |

    1. <img src="img/1.jpg" width="300">
    2. <img src="img/1.jpg" width="300">
    3. <img src="img/1.jpg" width="300">
    5. <script src="js/jquery-3.4.1.min.js"></script>
    6. <script>
    8.     $("img").click( function(){
    9.         //点击一下，换照片
    10.         $(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
    11.     } );
    13.     $("img").mouseover( function(){   //移动到元素上
    14.         $(this).css( "border","2px solid red" );
    15.     } );
    16.     $("img").mouseout( function(){    //离开元素
    17.         $(this).css( "border","2px solid white" );
    18.     } );
    20. </script>

    2.4.2 键盘事件

    用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有： | 方法 | 描述 | 执行时机 | | —- | —- | —- | | keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 | | keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |

    1. <input>
    2. <h3></h3>
    4. <script src="js/jquery-3.4.1.min.js"></script>
    5. <script>
    6.     $("input").keyup( function(){
    7.         var str = $(this).val(); // 获取框中的值
    8.         $("h3").text( str ); // 将h3元素中的文本内容更改为str
    9.     } );
    10. </script>

    2.4.3 表单事件

    当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表： | 方法 | 描述 | 执行时机 | | —- | —- | —- | | focus( ) | 触发或将函数绑定到指定元素的focus事件 | 获得焦点 | | blur( ) | 触发或将函数绑定到指定元素的blur事件 | 失去焦点 |

    1. <form action="">
    2.     <p>帐号: <input id="a" value="请输入帐号..."> </p>
    3.     <p>电话: <input id="b"> </p>
    4. </form>
    6. <script src="js/jquery-3.4.1.min.js"></script>
    7. <script>
    8.     //获得焦点（激活/点击一下）
    9.     $("#a").focus(function(){
    10.         $(this).val("");
    11.     });
    13.     //失去焦点（未激活/未点击）
    14.     $("#a").blur(function(){
    15.         $(this).val("请输入帐号...");
    16.     });
    17. </script>

    2.4.4 鼠标悬停复合事件

    hover()方法相当于mouseover与mouseout事件的组合

    1. <img src="img/3.jpg" width="400">
    3. <script src="js/jquery-3.4.1.min.js"></script>
    4. <script>
    5.     $("img").hover(
    6.         function(){
    7.             $(this).css("border","5px solid red");
    8.         },
    9.         function(){
    10.             $(this).css("border","5px solid white");
    11.         }
    12.     );
    13. </script>

    2.4.5 连续点击复合事件

    toggle()除了可以模拟鼠标的连续单击事件

    1. <h2>修仙小说</h2>
    2. <ul>
    3.     <li>凡人修仙传</li>
    4.     <li>遮天</li>
    5.     <li>神墓</li>
    6.     <li>残袍</li>
    7.     <li>大主宰</li>
    8. </ul>
    10. <script src="js/jquery-3.4.1.min.js"></script>
    11. <script>
    12.   $("h2").click(function(){
    13.       $("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
    14.   });
    15. </script>

    2.4.6 事件的动态绑定

    对dom元素绑定事件的另一种写法

    • 绑定一个事件
    1. $(".del").on('click', function() {
    2.     alert('hello');
    3. })
    • 绑定多个事件
    1. $(".del").on('click mouseover', function() {
    2.     alert('hello');
    3. })

    2.5 元素的隐藏和显示

    2.5.1 改变元素的宽和高（带动画效果）

    • show( speed )：显示
    • hide( speed )：隐藏
    • toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

    可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒

    1. <style>
    2.     div{
    3.         width: 200px;
    4.         height: 200px;
    5.         background-color: black;
    6.     }
    7. </style>
    8. <body>
    10.     <button id="btn1">显示</button>
    11.     <button id="btn2">隐藏</button>
    12.     <button id="btn3">切换</button>
    13.     <div></div>
    15.     <script src="js/jquery-3.4.1.min.js"></script>
    16.     <script>
    17.         $("#btn2").click(function(){
    18.             //fast:快速的
    19.             //slow:缓慢的
    20.             //毫秒：自定义
    21.             $("div").hide(2000); 
    22.         });
    24.         $("#btn1").click(function(){
    25.             $("div").show('slow');
    26.         });
    28.         $("#btn3").click(function(){
    29.             $("div").toggle(1000);
    30.         });
    31.     </script>
    32. </body>

    2.5.2 改变元素的高（拉伸效果）

    • slideDown( speed ) ：显示
    • slideUp( speed )：隐藏
    • slideToggle( speed )等价于slideDown+slideUp

    可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒

    1. <script>
    2.     $("#btn2").click(function(){
    3.         $("div").slideUp(1000); //向上收缩
    4.     });
    6.     $("#btn1").click(function(){
    7.         $("div").slideDown(1000); //向下伸展
    8.     });
    10.     $("#btn3").click(function(){
    11.         $("div").slideToggle(1000); //切换
    12.     });
    13. </script>

    2.5.3 不改变元素的大小（淡入淡出效果）

    • fadeIn( speed ) 显示
    • fadeOut( speed ) 隐藏
    • fadeToggle( speed ) 等价于fadeIn+fadeOut动画
    • fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

    可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒

    1. <script>
    2.     $("#btn2").click(function(){
    3.         $("div").fadeOut(1000); // 隐藏：淡出我的视线
    4.     });
    6.     $("#btn1").click(function(){
    7.         $("div").fadeIn(1000); // 显示：映入眼帘
    8.     });
    10.     $("#btn3").click(function(){
    11.         $("div").fadeToggle(1000); // 切换
    12.     });
    14.     $("#btn4").click(function(){
    15.         $("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
    16.     });
    17. </script>

    2.5.4 链

    链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起 ；

    例如：点击一次按钮，让div完成4个指定动作

    1. 背景变粉
    2. 字体变绿
    3. 收缩
    4. 拉伸
    1. <style>
    2.     div{
    3.         width: 200px;
    4.         height: 200px;
    5.         background-color: black;
    6.         color:white;
    7.         font-size: 3em;
    8.     }    
    9. </style>
    10. <body>
    11.     <button>试试</button>
    12.     <div>hello</div>
    13.     <script src="js/jquery-3.4.1.min.js"></script>
    14.     <script>
    15.         $("button").click(function(){
    16.             $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);
    17.         });
    18.     </script>
    19. </body>

    2.6 DOM和CSS的操作

    2.6.1 属性函数

    • attr( “属性” ); 获得元素的属性值
      • attr( “属性” , “新值” ); 修改元素的属性值
      • attr( 样式参数 ) ：样式参数可以写成json格式
    1. <body>
    2.     <button id="btn1">点我试试</button>
    3.     <hr>
    4.     <img src="img/1.jpg" title="美女大图" width="300">
    6.     <script src="js/jquery-3.4.1.min.js"></script>
    7.     <script>
    8.         $("#btn1").click(function(){
    9.             $("img").attr("src","img/2.jpg");
    10.             $("img").attr("title","高清无码");
    11.             $("img").attr( {width:"200",height:"200"} );
    12.         });
    13.     </script>
    14. </body>
    • val() ; 获得表单元素中的value值
      • val(“x”) 修改表单元素中的value值
    • html(); 获得元素中的内容（标签+文本）
      • html(“x”) 修改元素中的内容（标签+文本）
    • text(); 获得元素中的文本
      • text(“x”) 修改元素中的文本
    1. <button>试试</button>
    2. <hr>
    3. <input id="username">
    5. <div>
    6.     <h1><i>中国加油！</i></h1>
    7. </div>
    9. <script src="js/jquery-3.4.1.min.js"></script>
    10. <script>
    11.     $("button").click(function(){
    12.         //alert($("input").val()); //input框中的值
    13.         //$("input").val("哈哈哈"); //修改input框中的值   
    15.         //alert( $("div").html() ); //获得div中的内容（包含标签信息）
    16.         //alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容）
    17.         $("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖）
    18.     });
    19. </script>

    2.6.2 样式函数

    • css( “属性”); 获得该属性值
    • css( “属性”,”值”); 设置属性的值
    • css( { json} ); 设置多个属性的值
    1. <style>
    2.     div{
    3.         width: 150px;
    4.         height: 150px;
    5.         background-color: #000;
    6.     }
    7. </style>
    8. <body>
    9.     <button>试试</button>
    10.     <hr>
    11.     <div></div>
    13.     <script src="js/jquery-3.4.1.min.js"></script>
    14.     <script>
    15.         $("button").click(function(){
    16.             //var w = $("div").css("width"); // 获取css属性，width的值
    18.             //1.一个键值对
    19.             //$("div").css("background-color","pink");
    21.             //2.链式编程
    22.             //$("div").css("background-color","pink").css("border-radius","50%");
    24.             //3.json为参数
    25.             $("div").css({
    26.                 opacity:"0.4",
    27.                 background:"orange",
    28.                 borderRadius:"50%"
    29.             } );
    31.         });
    32.     </script>
    33. </body>
    • width(); 获得元素的宽度
    • width( number ); 修改元素的宽度
    • height(); 获得元素的高度
    • height( number ); 修改元素的高度
    1. <style>
    2.     div{
    3.         width: 150px;
    4.         height: 150px;
    5.         background-color: #000;
    6.     }
    7. </style>
    8. <body>
    9.     <button>试试</button>
    10.     <hr>
    11.     <div></div>
    13.     <script src="js/jquery-3.4.1.min.js"></script>
    14.     <script>
    15.         $("button").click(function(){
    16.             var w = $("div").width(); // （无参）获取宽度
    17.             var h = $("div").height();// （无参）获取高度
    18.             // alert("宽:"+w+"px，高:"+h+"px");
    19.             $("div").width("300"); // （传参）修改宽度
    20.             $("div").height("300"); //（传参）修改高度
    21.         });
    22.     </script>
    23. </body>

    2.6.3 类样式函数

    • addClass(); 为元素添加类样式
    • removeClass(); 将元素的类样式移除
    • toggleClass(); 样式的切换（有->无，无->有）
    1. <style>
    2.     div{
    3.         width: 100px;
    4.         height: 100px;
    5.         background-color: #000;
    6.     }   
    8.     .a{
    9.         background: palevioletred;
    10.         border-radius: 50%;
    11.     } 
    12.     .b{
    13.         border:5px dashed darkcyan;
    14.         opacity: 0.6;
    15.     }
    17.     .cn{
    18.        background: #000;
    19.        color:#FFF; 
    20.        font-family: 字魂49号-逍遥行书;
    21.     }
    22. </style>
    23. <body>
    24.     <button id="btn1">试试</button>
    25.     <button id="btn2">取消透明度</button>
    26.     <button id="btn3">样式切换</button>
    27.     <hr>
    28.     <div></div>
    29.     <h1>中华人民共和国，万岁！</h1>
    31.     <script src="js/jquery-3.4.1.min.js"></script>
    32.     <script>
    33.         $("#btn1").click(function(){
    34.             // $("div").addClass("a");
    35.             $("div").addClass("a b");
    36.         });
    38.         $("#btn2").click(function(){
    39.             $("div").removeClass("b");
    40.         });
    42.         $("#btn3").click(function(){
    43.             $("h1").toggleClass("cn");
    44.         });
    45.     </script>
    46. </body>

    2.6.4 节点操作

    • 创建节点
      • 工厂函数$()用于获取或创建节点
    • 插入节点
      • 插入子节点
    语法 功能
    append(content) jQuery详解 - 图5.append(B)%E8%A1%A8%E7%A4%BA%E5%B0%86B%E8%BF%BD%E5%8A%A0%E5%88%B0A%E4%B8%AD%EF%BC%8C%E5%A6%82%EF%BC%9A#card=math&code=%28A%29.append%28B%29%E8%A1%A8%E7%A4%BA%E5%B0%86B%E8%BF%BD%E5%8A%A0%E5%88%B0A%E4%B8%AD%EF%BC%8C%E5%A6%82%EF%BC%9A&id=5pbfq)(“ul”).append($newNode1);
    appendTo(content) jQuery详解 - 图6.appendTo(B)%E8%A1%A8%E7%A4%BA%E6%8A%8AA%E8%BF%BD%E5%8A%A0%E5%88%B0B%E4%B8%AD%EF%BC%8C%E5%A6%82%EF%BC%9A#card=math&code=%28A%29.appendTo%28B%29%E8%A1%A8%E7%A4%BA%E6%8A%8AA%E8%BF%BD%E5%8A%A0%E5%88%B0B%E4%B8%AD%EF%BC%8C%E5%A6%82%EF%BC%9A&id=i2pNp)newNode1.appendTo(“ul”);
    prepend(content) jQuery详解 - 图7.%20prepend%20(B)%E8%A1%A8%E7%A4%BA%E5%B0%86B%E5%89%8D%E7%BD%AE%E6%8F%92%E5%85%A5%E5%88%B0A%E4%B8%AD%EF%BC%8C%E5%A6%82%EF%BC%9A#card=math&code=%28A%29.%20prepend%20%28B%29%E8%A1%A8%E7%A4%BA%E5%B0%86B%E5%89%8D%E7%BD%AE%E6%8F%92%E5%85%A5%E5%88%B0A%E4%B8%AD%EF%BC%8C%E5%A6%82%EF%BC%9A&id=bykPB)(“ul”). prepend ($newNode1);
    prependTo(content) jQuery详解 - 图8.%20prependTo%20(B)%E8%A1%A8%E7%A4%BA%E5%B0%86A%E5%89%8D%E7%BD%AE%E6%8F%92%E5%85%A5%E5%88%B0B%E4%B8%AD%EF%BC%8C%E5%A6%82%EF%BC%9A#card=math&code=%28A%29.%20prependTo%20%28B%29%E8%A1%A8%E7%A4%BA%E5%B0%86A%E5%89%8D%E7%BD%AE%E6%8F%92%E5%85%A5%E5%88%B0B%E4%B8%AD%EF%BC%8C%E5%A6%82%EF%BC%9A&id=8LCey)newNode1. prependTo (“ul”);
    • 插入同辈节点 | 语法 | 功能 | | —- | —- | | after(content) | jQuery详解 - 图9.after%20(B)%E8%A1%A8%E7%A4%BA%E5%B0%86B%E6%8F%92%E5%85%A5%E5%88%B0A%E4%B9%8B%E5%90%8E%EF%BC%8C%E5%A6%82%EF%BC%9A#card=math&code=%28A%29.after%20%28B%29%E8%A1%A8%E7%A4%BA%E5%B0%86B%E6%8F%92%E5%85%A5%E5%88%B0A%E4%B9%8B%E5%90%8E%EF%BC%8C%E5%A6%82%EF%BC%9A&id=FST1f)(“ul”).after($newNode1); | | insertAfter(content) | jQuery详解 - 图10.%20insertAfter%20(B)%E8%A1%A8%E7%A4%BA%E5%B0%86A%E6%8F%92%E5%85%A5%E5%88%B0B%E4%B9%8B%E5%90%8E%EF%BC%8C%E5%A6%82%EF%BC%9A#card=math&code=%28A%29.%20insertAfter%20%28B%29%E8%A1%A8%E7%A4%BA%E5%B0%86A%E6%8F%92%E5%85%A5%E5%88%B0B%E4%B9%8B%E5%90%8E%EF%BC%8C%E5%A6%82%EF%BC%9A&id=2YHwu)newNode1.insertAfter(“ul”); | | before(content) | jQuery详解 - 图11.%20before%20(B)%E8%A1%A8%E7%A4%BA%E5%B0%86B%E6%8F%92%E5%85%A5%E8%87%B3A%E4%B9%8B%E5%89%8D%EF%BC%8C%E5%A6%82%EF%BC%9A#card=math&code=%28A%29.%20before%20%28B%29%E8%A1%A8%E7%A4%BA%E5%B0%86B%E6%8F%92%E5%85%A5%E8%87%B3A%E4%B9%8B%E5%89%8D%EF%BC%8C%E5%A6%82%EF%BC%9A&id=23FOs)(“ul”).before($newNode1); | | insertBefore(content) | jQuery详解 - 图12.%20insertBefore%20(B)%E8%A1%A8%E7%A4%BA%E5%B0%86A%E6%8F%92%E5%85%A5%E5%88%B0B%E4%B9%8B%E5%89%8D%EF%BC%8C%E5%A6%82%EF%BC%9A#card=math&code=%28A%29.%20insertBefore%20%28B%29%E8%A1%A8%E7%A4%BA%E5%B0%86A%E6%8F%92%E5%85%A5%E5%88%B0B%E4%B9%8B%E5%89%8D%EF%BC%8C%E5%A6%82%EF%BC%9A&id=CmkSZ)newNode1.insertBefore(“ul”); |

    • 替换节点

      • replaceWith()
      • replaceAll()

    • 复制节点

      • clone()

    • 删除节点

      • remove()删除整个节点
      • empty()清空节点内容
    1. <input> <button id="test">测试</button>
    3. <ul>
    4.     <li>金瓶梅</li>
    5.     <li>貂蝉往事</li>
    6.     <li>东京热不热</li>
    7. </ul>
    9. <script src="js/jquery-3.4.1.min.js"></script>
    10. <script>
    11.     $("#test").click(function(){
    12.         var bookname = $("input").val();
    13.         var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点
    15.         /*添加子节点*/
    16.         //$("ul").append(newli); // newli添加到ul后面
    17.         //newli.appendTo("ul"); // newli添加到ul后面
    18.         //$("ul").prepend(newli); // newli添加到ul前面
    19.         //newli.prependTo("ul");
    21.         /*添加同辈节点*/
    22.         //$("li:last").after( newli ); // newli添加到最后的li的后面
    23.         //newli.insertAfter("li:last");
    24.         //$("li:last").before(newli); //newli添加到最后的li的前面
    25.         //newli.insertBefore("li:last");
    27.         /*替换节点*/
    28.         //$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli
    29.         //newli.replaceAll( "li:eq(1)" );
    31.         /*复制节点*/
    32.         //$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最后一个li的后面
    34.         /*删除节点*/
    35.         //$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失）
    36.         $("li:eq(1)").remove(); //删除节点
    38.     });
    39. </script>

    2.7 遍历节点

    2.7.1 祖先元素

    用于向上遍历 DOM 树的方法

    • parent() 返回被选元素的直接父元素，仅仅是上一级 （找爸爸）
    • parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分
    1. <p><button>测试</button></p>
    2. <ul>
    3.     <li>a</li>
    4.     <li>
    5.         <b>b</b>
    6.     </li>
    7.     <li>c</li>
    8. </ul>
    10. <script src="js/jquery-3.4.1.min.js"></script>
    11. <script>
    12.     $("button").click(function(){
    13.         //var x = $("b").parent().html(); // 找爸爸
    14.         //var x = $("b").parents("ul").html(); // 找祖宗 ul
    15.         //var x = $("b").parents("body").html(); // 找祖宗 body
    16.         alert( x );
    17.     });
    18. </script>

    2.7.2 同辈元素

    • next() 获取紧邻匹配元素之后的元素
    • prev() 获取紧邻匹配元素之前的元素
    • siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素
    1. <button>测试</button>
    2. <p>p1</p>
    3. <ul>
    4.     <li>a</li>
    5.     <li>
    6.         <b>b</b>
    7.     </li>
    8.     <li>c</li>
    9. </ul>
    10. <p>p2</p>
    11. <p id="x">p3</p>
    13. <script src="js/jquery-3.4.1.min.js"></script>
    14. <script>
    15.     $("button").click(function(){
    16.         //var x = $("ul").next().text(); // 紧邻的下一个元素
    17.         //var x = $("ul").prev().text(); // 紧邻的上一个元素
    18.         //var x = $("ul").siblings("#x").text(); // 所有的兄弟中，id=x的
    20.         var arr = $("ul").siblings();  // ul的所有兄弟,1个button，3个p，2个script
    21.         for(var i = 0 ;i< arr.length ;i++){
    22.             alert(arr[i]);
    23.         }
    24.     });
    25. </script>

    2.7.3 后代元素

    后代是子、孙、曾孙等等

    • children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”
    1. <button>测试</button>
    2. <ul>
    3.     <li>a</li>
    4.     <li>b</li>
    5.     <li>c</li>
    6. </ul>
    8. <script src="js/jquery-3.4.1.min.js"></script>
    9. <script>
    10.     $("button").click(function(){
    11.        //var x =  $("ul").children().text(); //所有子节点：abc
    12.        var x =  $("ul").children("li:first").text();  //ul中的第一个子节点
    13.        alert(x);
    14.     });
    15. </script>
    • find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。
    1. <button>测试</button>
    2. <ul>
    3.     <li>盘古</li>
    4.     <li>蚩尤</li>
    5.     <li>刑天
    6.         <p>龚工</p>
    7.     </li>
    8.     <h3>祝融</h3>
    9. </ul>
    11. <script src="js/jquery-3.4.1.min.js"></script>
    12. <script>
    13.     $("button").click(function(){
    14.         //var x = $("ul").find("p").text(); //在ul中查找p元素，忽略层级
    15.         //var x = $("ul").find("h3").text(); //在ul中查找h3元素，忽略层级
    16.         var x = $("ul").find().text(); // 找什么？不知道！
    17.         alert(x);
    18.     });
    19. </script>

    2.7.4 元素的过滤

    • first()：过滤第一个元素
    • last()：过滤最后一个元素
    • eq(index)：过滤到下标为index的元素
    • not()：除了什么之外的元素
    • is()：返回布尔，判断是不是这种元素
    1. <button>测试</button>
    2. <ul>
    3.     <li>盘古</li>
    4.     <li>蚩尤</li>
    5.     <li>刑天</li>
    6. </ul>
    8. <script src="js/jquery-3.4.1.min.js"></script>
    9. <script>
    10.     $("button").click(function(){
    11.         //var x = $("li").first().text(); // 第一个li
    12.         //var x = $("li").last().text(); // 最后一个li
    13.         //var x = $("li").eq(1).text(); // 下标为1的li
    14.         //var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有li
    15.         var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul
    17.         alert(x);
    18.     });
    19. </script>

    3 案例

    3.1 手风琴特效

    1. <style>
    2.     dd{
    3.         display: none; /*隐藏元素*/
    4.     }
    5. </style>
    6. <body>
    7.     <nav>
    8.         <header>拉勾网</header>
    9.         <ul>
    10.             <li>
    11.                 <dl>
    12.                     <dt>求职</dt>
    13.                     <dd>1.简历</dd>
    14.                     <dd>2.面试</dd>
    15.                     <dd>3.入职</dd>
    16.                 </dl>
    17.             </li>
    18.             <li>
    19.                 <dl>
    20.                     <dt>教育</dt>
    21.                     <dd>1.看视频</dd>
    22.                     <dd>2.做作业</dd>
    23.                     <dd>3.24小时在线辅导</dd>
    24.                 </dl>
    25.             </li>
    26.             <li>
    27.                 <dl>
    28.                     <dt>3W创业</dt>
    29.                     <dd>1.帮助小企业</dd>
    30.                     <dd>2.头脑风暴</dd>
    31.                     <dd>3.赚钱啦</dd>
    32.                 </dl>
    33.             </li>
    34.         </ul>
    35.     </nav>
    36.     <script src="js/jquery-3.4.1.min.js"></script>
    37.     <script>
    38.         $("nav dt").click(function(){
    39.             //所有的dd全部都闭合上，除了自己的兄弟
    40.             $("dd").not( $(this).siblings() ).slideUp(500);
    41.             // 自己的兄弟进行切换，显示闭合上，闭合的显示出来
    42.             $(this).siblings().slideToggle(500);
    44.         });
    45.     </script>
    46. </body>

    3.2 购物车结算

    jQuery详解 - 图13

    1. <style>
    2.     .jian,.jia{
    3.         border:1px solid #999;
    4.         display: inline-block; /*超链接a是行内元素，只能转换成行内块元素，才能改变宽和高*/
    5.         width: 20px;
    6.         height: 20px;
    7.         text-align: center;
    8.         text-decoration: none;
    9.     }
    10. </style>
    11. <body>
    12.     <table border="1" cellspacing="0" width="400">
    13.         <tr>
    14.             <td>商品编号</td>
    15.             <td>名称</td>
    16.             <td>单价</td>
    17.             <td>数量</td>
    18.             <td>总价</td>
    19.         </tr>
    20.         <tr>
    21.             <td>1</td>
    22.             <td>炸香肠</td>
    23.             <td>3</td>
    24.             <td>
    25.                 <a href="#" class="jian">-</a>
    26.                 <span>1</span>
    27.                 <a href="#" class="jia">+</a>
    28.             </td>
    29.             <td>3</td>
    30.         </tr>
    31.         <tr>
    32.             <td>2</td>
    33.             <td>王八</td>
    34.             <td>10</td>
    35.             <td>
    36.                 <a href="#" class="jian">-</a>
    37.                 <span>1</span>
    38.                 <a href="#" class="jia">+</a>
    39.             </td>
    40.             <td>10</td>
    41.         </tr>
    42.         <tr>
    43.             <td>3</td>
    44.             <td>恐龙</td>
    45.             <td>1000</td>
    46.             <td>
    47.                 <a href="#" class="jian">-</a>
    48.                 <span>1</span>
    49.                 <a href="#" class="jia">+</a>
    50.             </td>
    51.             <td>1000</td>
    52.         </tr>
    53.     </table>
    54.     <p style="width: 400px; text-align: right;">
    55.         总价：<b style="color:red;">111</b> <button>提交订单</button>
    56.     </p>
    57. </body>

    car.js

    1. $(".jia").click(function(){
    2.     var i = $(this).prev().text(); //获得原来的商品数量
    3.     i++;
    4.     $(this).prev().text(i); //现在的商品数量
    6.     var price = $(this).parent().prev().text(); //商品单价
    7.     var zong = i*price; //商品总价
    8.     $(this).parent().next().text( zong );// 现在商品的总价
    10.     getTotal();
    11. });
    14. $(".jian").click(function(){
    15.     var i = $(this).next().text();
    16.     i--;
    18.     if(i == 0){  //询问用户数量已经是0了，是否删除该商品
    19.         if( confirm("是否删除该商品？") ){
    20.             $(this).parents("tr").remove();
    21.         }
    22.     }else{
    23.         $(this).next().text(i);
    25.         var price = $(this).parent().prev().text(); //商品单价
    26.         var zong = i*price; //商品总价
    27.         $(this).parent().next().text( zong );// 现在商品的总价
    28.     }
    30.     getTotal();
    31. });
    33. //计算所有商品的总价
    34. // function getTotal(){
    35. //     var sum = 0; // 总价钱
    36. //     var arr = $("tr:not(tr:first)").find("td:last");
    37. //     for(var i = 0;i<arr.length ; i++){
    38. //        sum += Number(arr[i].innerHTML) ;
    39. //     }
    41. //     $("b").text(sum);
    42. // }
    44. function getTotal(){
    45.     var sum = 0; // 总价钱
    46.     $("tr:not(tr:first)").find("td:last").each(function(){
    47.          sum += Number($(this).text());
    48.     });
    49.     $("b").text(sum);
    50. }