学静思语

Menu

学静思语
Published on 2025-02-15 / 0 Visits
0
0

jQuery

#前端学习笔记

jQuery

一、jQuery对象的介绍

1.jQuery的示意图

image-20231112105217270

2.jQuery库文件的引用

  • 使用：

    <script type="text/javascript" src="xxxxx/jquery-3.7.1.min.js"></script>

  • 代码演示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
<!--    原生js代码-->
      // window.onload = function () {
      //     var id = document.getElementById("bt");
      //     id.onclick = function () {
      //        alert("原生js= " + id.innerText);
      //     }
      // }
  //jquery代码
    $(function(){
      //   jquery对象的属性名用$开头
      var $bt = $("#bt");
                
      $bt.click(function () {
        alert("jquery的代码：" + $bt.text());
      });
          })
</script>
    </head>
  <body>
                
  <button id="bt" >按钮1</button>
  </body>
  </html>

3.jQuery对象

  • jQuery对象就是对DOM对象进行包装后产生的对象
  • jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么它就可以使用jQuery里面的方法
  • 如果获取的是jQuery对象，那么要在变量前面加上$

4. jQuery与DOM对象之间的转换

  • DOM转换成jQuery

    • 对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。

    • DOM对象转换成jQuery对象后就可以使用jQuery的方法了

      image-20231112142658384

      image-20231112142849271

    • 代码

          var bt = document.getElementById("bt");
    var $bt = $(bt);
    alert($bt)

  • jQuery转换成DOM对象

    • 两种方式将一个jQuery对象装换成DOM对象：[index]和jQuery对象.get(index)

    • jQuery对象是一个数组对象，可以通过[index]的方式，来获取相应的DOM对象

    • jQuery本身提供，通过jQuery对象.get(index)方法，得到相应的DOM对象

      image-20231112143148438

    • 代码

          //jquery代码
        $(function () {
            //   jquery对象的属性名用$开头
            var $bt = $("#bt");
                                        
            /**
             * index一般都是0，因为这个数组本身的长度就为1
             */
            // var btElement = $bt[0];
            var newVar = $bt.get(0);
            alert(newVar);
    })

5. jQuery选择器使用特点

  • 如果没有获取到该元素或节点进行操作不会报错，会提示undefined

6.jQuery基本选择器

  • 基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id,class和标签名来查找DOM元素

  • ”#“+id名名称

  • 用法

    $("#id名称");
//说明：这个就是直接选择html中对应的id="xx"的DOM元素

  • Element

  • 用法

    $("标签名");//比如p标签，div标签等
//说明：Element的英文翻译过来是“元素”，所以Element其实就是html中已经定义好的标签元素，p,div,input,a等标签

  • class

  • 用法

    $("class属性值");
//说明：这个标签是直接选择html中class=“class属性值”的元素或元素组（因为在同一个html页面中class是可以存在多个同样的class属性值，意思就是class名可以重复）

  • “*”

  • 用法

    $("*");
//说明：匹配所有元素，多用来结合上下文来搜索

  • select1,select2,select n

  • 用法

    $("div,span,p.myClas");//比如p标签，div标签等
//说明：将每一个选择器匹配到的元素合并后一起返回，你可以指定任意多个选择器，其中p.myClass是表示匹配元素 p class = "myClass"的元素

  • 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 60px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1. 改变 id 为 one 的元素的背景色为 #0000FF
            $("#b1").click(function () {
                $("#one").css("background","#0000FF");
            });
            //2. 改变 class 为 mini 的所有元素的背景色为 #FF0033
            $("#b2").click(function () {
                $(".mini").css("background","#FF0033");
            });
            //3. 改变元素名为 <div> 的所有元素的背景色为 #00FFFF
            $("#b3").click(function () {
                $("div").css("background","#00FFFF");
            });
            //4. 改变所有元素的背景色为 #00FF33
            $("#b4").click(function () {
                $("*").css("background","#00FF33");
            });
            //5. 改变所有的<span>元素 和 id 为 two class为 .mini 的元素的背景色为 #3399FF
            $("#b5").click(function () {
                $("span,#two,.mini").css("background","#3399FF");
            });
        })
    </script>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b3"/>
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF" id="b5"/>
<hr/>
<div id="one" class="mini">div id为one</div>
<div id="two">div id为two</div>
<div id="three" class="mini">div id为three</div>
<span id="s_one" class="mini">span  one</span>
<span id="s_two">span two</span>
</body>
</html>

7.jQuery层级选择器

  • 如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层级选择器

  • ancestor descendant

    • 用法

      $("祖先 后代");//$("form input")
//说明：在给定的祖先元素下匹配所有后代元素，包括子元素的后代

  • pare > child

    • 用法

      $("父元素 > 子元素");//$("form > input")
//说明：在给定的父元素下匹配所有子元素，不包括子元素的后代

  • prev + next

    • 用法

      $("上一个 + 下一个");//$("label + input")
//说明：匹配所有紧接在prev元素后的next元素

  • prev ~ siblings

    • 用法

      $("上一个 兄弟元素");//$("form ~ input")
//说明：匹配prev元素之后的所有siblings元素，注意：是匹配之后的元素，不包含该元素在内，并且siblings匹配的是和prev同辈的元素，其后代元素不被匹配

  • current.siblings ("siblings")

    • 用法

      $("当前元素").siblings("兄弟元素");//$("#two").siblings("div");
//说明：匹配当前元素的所有的为div的兄弟元素，不包括后代元素

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
            
        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            
            //1. 改变 <body> 内所有 <div> 的背景色为 #0000FF
            $("#b1").click(function () {
                $("body div").css("background","#0000FF")
            });
            //2. 改变 <body> 内子 <div>[第一层div] 的背景色为 #FF0033
            $("#b2").click(function () {
                $("body > div").css("background","#FF0033")
            });
            //3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
            $("#b3").click(function () {
                $("div[id='one'] + div").css("background","#0000FF")
            });
            //4. 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF
            $("#b4").click(function () {
                $("#two ~ div").css("background","#0000FF")
            });
            //5. 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF
            $("#b5").click(function () {
                $("#two").siblings("div").css("background","#0000FF")
            });
            
        })
    </script>
</head>
<body>
<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>
<hr/>
<div id="one" class="mini">
    div id为one
</div>
<div id="two">
    div id为two
    <div id="two01">
        id two01
        <div><h1>haha</h1></div>
            
    </div>
    <div id="two02">
        id two02
    </div>
</div>
            
<div id="three" class="mini">
    div id为three
    <div id="three01">
        id three01
    </div>
</div>
<div id="for" class="mini">
            
</div>
            
</body>
</html>

8.jQuery基础过滤器

  • :first

    • 用法

      $("元素:first");//$("tr:first")
//说明：获取tr元素中的第一个元素,匹配找到第一个元素。

  • :last

    • 用法

      $("元素:last");//$("tr:last")
//说明：获取tr元素中的最后一个元素，匹配找到最后一个元素，与:first相对应。从左到右，从上到下的顺序

  • :not(selector)

    • 用法

      $("元素:not(selector)");//$("input:not(:checked)")
//说明：获取input元素中没有被选中的input[input type="checkbox"]，去除所有与给定选择器匹配的元素，有点类似于非

  • :even

    • 用法

      $("元素:even");//$("tr:even")
//说明：获取tr元素为偶数的元素，匹配所有索引值为偶数的元素，从零开始计数。JS的数组都是从0开始计数的，如果是0开始计数，则0为偶数

  • :odd

    • 用法

      $("元素:odd");//$("tr:odd")
//说明：获取去tr元素为奇数的元素，匹配所有索引值为奇数的元素，和even对应，从0开始计数

  • :eq(index)

    • 用法

      $("元素:eq(index)");//$("tr:eq(0)")
//说明：获取tr元素下标为0的元素，匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素，括号里面的是索引值，不是元素排列数

  • :gt(index)

    • 用法

      $("元素:get(index)");//$("tr:get(0)")
//说明：获取tr元素中下标大于0的元素，匹配所有大于给定索引值的元素

  • :lt(index)

    • 用法

      $("元素:lt(index)");//$("tr:lt(2)")
//说明：获取tr元素中下标小于2的元素，匹配所有小于给定索引值的元素

  • :header[固定写法]

    • 用法

      $(":header");//$(":header").css("background","#EEE")
//说明：修改标题元素的背景颜色，匹配如h1,h2,h3之类标题元素，这个专门用来获取h1,h2,h3之类的标题元素

  • :animated[固定写法]

    • 用法

      $(":animated");
//说明：匹配所有正在执行动画效果的元素

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
            
        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            
            //*****改变第一个 div 元素的背景色为 #0000FF
            $("#b1").click(function () {
            
                // $("div:first").css("background","#0000FF")
                //     方式二
                $("div:eq(0)").css("background","#0000FF")
            });
            
            //*****改变最后一个 div 元素的背景色为 #0000FF
            //小伙伴可以理解成 基础过滤器就是写 简单select
            //所谓最后一个指的是是从上到下，从左到右去搜，最后的一个
            //老韩要求：不需要你记得住, 但是可以看懂...
            $("#b2").click(function () {
            
               $("div:last").css("background","#0000FF")
            
            });
            
            //***改变class不为 one 的所有 div 元素的背景色为 #0000FF
            $("#b3").click(function () {
            
                $("div:not(.one)").css("background","#0000FF")
            
            });
            //********改变索引值为偶数的 div 元素的背景色为 #0000FF
            $("#b4").click(function () {
            
                $("div:even").css("background","#0000FF")
            
            });
            //********改变索引值为奇数的 div 元素的背景色为 #0000FF
            $("#b5").click(function () {
            
                $("div:odd").css("background","#0000FF")
            
            });
            
            //*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
            $("#b6").click(function () {
            
                $("div:gt(3)").css("background","#0000FF")
            
            });
            
            //改变索引值为等于 3 的 div 元素的背景色为 #0000FF
            $("#b7").click(function () {
            
                $("div:eq(3)").css("background","#0000FF")
            
            });
            
            //**改变索引值为小于 3 的 div 元素的背景色为 #0000FF
            $("#b8").click(function () {
            
                $("div:lt(3)").css("background","#0000FF")
            
            });
            //****改变所有的标题元素的背景色为 #0000FF
            $("#b9").click(function () {
            
                $(":header").css("background","#0000FF")
            
            });
            
        });
    </script>
</head>
<body>
<h1>H1标题</h1>
<h2>H2标题</h2>
<h3>H3标题</h3>
            
<input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<hr/>
<div id="one" class="mini">
    div id为one
</div>
<div id="two">
    div id为two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>
            
<div id="three" class="one">
    div id为three class one
    <div id="three01">
        id three01
    </div>
</div>
</body>
</html>

9.jQuery内容过滤选择器

  • 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

  • :contains(text)

    • 用法

      $("元素:contains(text)");//$("div:contains('John')")
//说明：获取div的文本包含John的div，匹配包含给定文本的元素，这个选择器比较有用，当我们要选择的不是DOM标签元素时，它就派上用场了，它的作用是查找被标签"围"起来的文本内容是否符合指定的内容的元素

  • :empty

    • 用法

      $("元素:empty");//$("td:empty")
//说明：获取td元素中不包含文本的元素，匹配所有不包含子元素或文本的空元素。

  • :has(selector)

    • 用法

      $("元素:has(selector)");//$("div:has(p)").addClass("test");
//说明：给所有包含p标签的div的标签上添加一个属性值为test的class

  • :parent

    • 用法

      $("元素:parent");//$("td:parent")
//说明：匹配含有子元素或者文本的元素

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容过滤选择器应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        
        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
           $("#b1").click(function () {
               $("div:contains('di')").css("background","#0000FF");
           });
        
            //**************改变不包含子元素(或者文本元素) 的 div 的背景色为 pink
            $("#b2").click(function () {
                $("div:empty").css("background","pink");
            });
        
            //******改变含有 class 为 mini 元素的 div 元素的背景色为 green
            $("#b3").click(function () {
                $("div:has(.mini)").css("background","green");
            });
          //****改变含有子元素(或者文本元素)的div元素的背景色为 yellow
          $("#b4").click(function () {
              $("div:parent").css("background","yellow");
          });
          //****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
          $("#b5").click(function () {
              $("div:gt(3)").css("background","#0000FF");
          });
        
          //***改变不含有文本 di; 的 div 元素的背景色 pink
          //不要求，小伙伴记住, 但是需要可以看懂.
          $("#b6").click(function () {
              $("div:not(:contains('di'))").css("background","#0000FF");
          });
        
      });
  </script>
 </head>
  <body>
        
  <input type="button" value="改变含有文本 ‘di' 的 div 元素的背景色为 black" id="b1"/>
  <input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为 pink" id="b2"/>
  <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 green" id="b3"/>
  <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 yellow" id="b4"/>
  <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b5"/>
  <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色 pink" id="b6"/>
        
  <hr/>
  <div id="xxxx">
      <div id="one" class="mini">
          div id为one
      </div>
  </div>
<div id="two">
    div id为two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>
<div id="three" class="one">
    div id为three class one
    <div id="three01">
        id three01
    </div>
</div>
     <div id="four" class="one">
    XXXXXXXXXX
</div>
<div id="five" class="one"></div>
<div id="mover">
    执行动画
</div>
        
</body>
</html>

10.jQuery可见度过滤选择器

  • 可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元

  • :hidden

    • 用法

      $("元素:hidden");//$("tr:hidden")
//说明：获取tr元素中不可见的元素，匹配所有的不可见元素，input元素的属性为"hidden"的话也会被匹配到，css中display:none也会被匹配到

  • :visible

    • 用法

      $("元素:visible");//$("tr:visible")
//说明：获取tr元素中的可见元素，匹配所有的可见元素

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见度过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
            
        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
            
        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //*****改变所有可见的div元素的背景色为 #0000FF
            $("#b1").click(function () {
                $("div:visible").css("background","#0000FF")
            })
            //**选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
            $("#b2").click(function () {
                $("div:hidden").css("background","#0000FF");
                $("div:hidden").show();
            
            })
            //**选取所有的文本隐藏域, 并打印它们的值
            $("#b3").click(function () {
                // 这获取到的是一个数组
                var $hidden = $("input:hidden");
                // 方式一，使用jQuery的each()方法
                $hidden.each(function () {
                    alert(this.value);
                })
            //     使用for循环的遍历方式
            //     for (var i = 0; i < $hidden.length; i++) {
            //         console.log($hidden[i].value);
            //     }
                  })
            
       });
   </script>
 </head>
   <body>
            
   <input type="button" value="改变所有可见的div元素的背景色为 #0000FF" id="b1"/> <br/><br/>
   <input type="button" value="选取所有不可见的div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> <br/><br/>
   <input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <br/><br/>
       <input type="hidden" value="hidden1"/>
   <input type="hidden" value="hidden2"/>
   <input type="hidden" value="hidden3"/>
   <input type="hidden" value="hidden4"/>
            
   <div id="one" class="visible">
       div id为one
   </div>


   <div id="two" class="visible">
       div id为two
   </div>


   <div id="three" class="one">
       div id为three
   </div>


   </body>
   </html>

11. jQuery属性过滤选择器

  • 属性过滤器选择器的过滤规则是通过元素的属性来获取相应的元素

  • [attribute]

    • 用法

      $("元素[attribute]");//$("div[id]")
//说明：获取含有id属性的div元素，匹配包含给定属性的元素

  • [attribute=value]

    • 用法

      $("元素[attribute='value']");//$("input[name='newsletter']")
//说明：获取name属性值等于newsletter属性值的input元素，匹配给定的属性是某个特定值的元素

  • [attribute != value]

    • 用法

      $("元素[attribuet!='value']");//$("input[name!=newsletter]")
//说明：获取name属性等于newsletter属性值的input元素，匹配所有不含有指定的属性，或者属性不等于特定的属性值的元素，等价于:not(attribute=value),要匹配含有特定属性但不等于特定值的元素，请使用：元素[attribute]:not(attribute=value)

  • [attribute ^=value]

    • 用法

      $("元素[attribute ^= value]");//$("input[name ^= 'news']")
//说明：获取name属性以news属性值开头的input元素，匹配给定的属性的属性值是以某些值开始的元素

  • [attribute $= value]

    • 用法

      $("元素[attribute $= value ]");//$("input[name$='news']")
//说明：获取name属性以news属性值结尾的input元素，匹配给定的属性的属性值是以某些值结尾的元素

  • [attribute *= value]

    • 用法

      $("元素[attribute *= value]");//$("input[name *= 'man']")
//说明：获取name属性包含man属性值的input元素，匹配给定的属性的属性值是包含某些值的元素

  • [attributeFilter1] [attributeFilter2] [attributeFilterN]

    • 用法

      $("元素[attributeFilter1][attributeFilter2...]");//$("input[id][name$='man']")
//说明：获取有id属性，name属性以man属性值结尾的input元素，复合属性选择器，需要同时满足多个条件时使用，是一个组合

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        
        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
   div.visible {
          display: none;
      }
  </style>
  <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
      $(function () {
          //*****含有属性title 的div元素.
         $("#b1").click(function () {
             $("div[title]").css("background","#0000FF")
         });
        
          //****属性title值等于test的div元素
          $("#b2").click(function () {
              $("div[title='test']").css("background","#0000FF")
          });
        
          //属性title值不等于test的div元素(没有属性title的也将被选中)
          $("#b3").click(function () {
              $("div[title!='test']").css("background","#0000FF")
          });
              //属性title值 以te开始 的div元素
         $("#b4").click(function () {
              $("div[title ^='te']").css("background","#0000FF")
          });
        
          //属性title值 以est结束 的div元素
          $("#b5").click(function () {
              $("div[title $='est']").css("background","#0000FF")
          });
        
          //属性title值 含有es的div元素
          $("#b6").click(function () {
              $("div[title *='es']").css("background","#0000FF")
          });
        
          //选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
          $("#b7").click(function () {
              $("div[id][title *='es']").css("background","#0000FF")
          });
        
      });
  </script>
  </head>
  <body>
        
  <input type="button" value="含有属性title 的div元素." id="b1"/><br/><br/>
  <input type="button" value="属性title值等于test的div元素" id="b2"/><br/><br/>
  <input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/><br/><br/>
  <input type="button" value="属性title值 以te开始 的div元素" id="b4"/><br/><br/>
  <input type="button" value="属性title值 以est结束 的div元素" id="b5"/><br/><br/>
  <input type="button" value="属性title值 含有es的div元素" id="b6"/><br/><br/>
  <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/><br/><br/>
        
  <div id="one" title="test">
      div id为one test
  </div>


  <div id="one-1" title="texxx">
      div id为one-1 texxx
  </div>


  <div id="one-2" title="xxxest">
      div id为one-2 xxxest
  </div>


  <div id="one-3" title="xxxesxxxxxt">
      div id为one-3 xxxesxxxxxt
  </div>


  <div id="two" title="ate">
      div id为two
  </div>


  <div id="three" class="one">
      div id为three
  </div>
                
  </body>
  </html>

12. jQuery子元素过滤器

  • :nth-child(index/even/odd/equation)

    • 用法

      $("元素:nth-child(index/even/odd/equation)");//$("ul li:nth-child(2)")
//说明：获取ul元素下的li子元素中的第二个li元素，匹配其父元素下的第N个子元素或偶元素等，这个下标是从1开始的

  • :first-child

    • 用法

      $("元素:first-child");//$("ul li:first-child")
//说明：获取ul元素下的li子元素中的第一个li元素，匹配其父元素下的第一个子元素，这个下标是从1开始的

  • :last-child

    • 用法

      $("元素:last-child");//$("ul li:last-child")
//说明：获取ul元素下的li子元素中的最后一个li元素，匹配其父元素下的最后一个子元素，这个下标是从1开始的

  • :only-child

    • 用法

      $("元素:only-child");//$("ul li:only-child")
//说明：获取ul元素中只有一个li子元素的ul元素，匹配只有一个子元素的父元素

  • nth-child()选择器详解如下:

    • nth-child(even/odd):能选取每个父元素下的索引值为偶（奇）数的元素，下标从1开始
    • nth-child(2):能选取每个父元素下的索引值为2的元素，下标从1开始
    • nth-child(3n):能选取每个父元素下的索引值为3的倍数的元素，下标从1开始
    • nth-child(3n+1):能选取每个父元素下的索引值为3的倍数再加上1的元素，下标从1开始

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素过滤选择器示例-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 70px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //****每个class为one的div父元素下的第2个子元素
           $("#b1").click(function(){
            
               $("div.one:nth-child(2)").css("background","blue")



           });
                
            //*****每个class为one的div父元素下的第一个子元素
            //老师再说 $("div .one")
            $("#b2").click(function(){
                
                $("div.one:first-child").css("background","blue")
            });


            //*****每个class为one的div父元素下的最后一个子元素
            $("#b3").click(function(){
                
                $("div.one:last-child").css("background","blue")
            });


            //**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
            $("#b4").click(function(){
                
                $("div.one:only-child").css("background","blue")
            });
                
        });
    </script>
</head>
<body>

<input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3"/><br/><br/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/><br/><br/>


<div class="one">
    <div id="one" class="one">
        XXXXXXXXX id=one
    </div>
    <div id="two" class="one">
        XXXXXXXXX id=two
    </div>
    <div id="three" class="one">
        XXXXXXXXX id=three
    </div>
    <div id="four" class="one">
        XXXXXXXXX id=four
    </div>
</div>

<div class="one">
    <div id="five" class="one">
        XXXXXXXXX id=five
    </div>
</div>
</body>
</html>

13.jQuery表单属性过滤选择器

  • :enabled

    • 用法

      $("元素:enabled");//$("input:enabled")
//说明：获取input元素中可用的input元素，匹配所有可用元素

  • :disabled

    • 用法

      $("元素:disabled");//$("input:disabled")
//说明：获取input元素中不可用的input元素，匹配所有不可用元素

  • :checked

    • 用法

      $("元素:checked");//$("input:checked")
//说明：获取input元素中所有被选中的input元素（复选框，单选框，不包括select中的option），匹配所有被选中的元素

  • :selected

    • 用法

      $("元素:selected");//$("select option:selected")
//说明：获取select元素中所有被选中的option元素（复选框，单选框，不包括select中的option），匹配所有被选中的option元素

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单对象属性过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
            
    </style>
    <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function (){
            //*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值
            $("#b1").click(function () {
                $("input[type='text']").val("hahaha")
            });
            
            //利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("hahaha")
            });
            
            //利用 jQuery 对象的 length 属性获取多选框/复选框选中的个数
            $("#b3").click(function () {
                var $input = $("input:checked");
                alert($input.length)
            });
            //****利用 jQuery 对象的 text() 方法获取下拉框选中的内容
            $("#b4").click(function () {
                var text = $("select option:selected").text();
                alert(text)
            });
            
        });
    </script>
</head>
<body>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值" id="b1"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值" id="b2"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/><br/><br/>
<br>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br>
<h1>选择你的爱好</h1>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br>
<h1>选项如下:</h1>
<select name="job" size=9 multiple="multiple">
    <option value="选项1">选项1^^</option>
    <option value="选项2">选项2^^</option>
    <option value="选项3">选项3^^</option>
    <option value="选项4">选项4^^</option>
    <option value="选项5">选项5^^</option>
    <option value="选项6">选项6^^</option>
</select>
            
<select id="hsp" name="edu">
    <option value="博士">博士^^</option>
    <option value="硕士">硕士^^</option>
    <option value="本科">本科^^</option>
    <option value="小学">小学^^</option>
</select>
</body>
</html>

14.jQuery表单选择器

  • :input

    • 用法

      $(":input");//$(":input")
//说明：获取所有input元素，匹配所有input、textarea、select和button元素

  • :text

    • 用法

      $(":text");//$("text")
//说明：获取所有的单行文本框，匹配所有的单行文本框

  • :passsword

    • 用法

      $(":password");//$(":password")
//说明：获取所有的密码框，匹配所有的密码框

  • :radio

    • 用法

      $(":radio");//$(":radio")
//说明：获取所有的单选按钮，匹配所有的单选按钮

  • :checkbox

    • 用法

      $(":checkbox");//$(":checkbox")
//说明：获取所有的复选框，匹配所有的复选框

  • :submit

    • 用法

      $(":submit");//$(":submit")
//说明：获取所有的密码框，匹配所有的密码框

  • :image

    • 用法

      $(":image");//$(":image")
//说明：获取所有的图像域，匹配所有的图像域

  • :reset

    • 用法

      $(":reset");//$(":reset")
//说明：获取所有的重置按钮，匹配所有的重置按钮

  • :button

    • 用法

      $(":button");//$(":button")
//说明：获取所有的按钮，匹配所有的按钮

  • :file

    • 用法

      $(":file");//$(":file")
//说明：获取所有的文件域，匹配所有的文件域

  • :hidden

    • 用法

      $("元素:hidden");//$("input:hidden")
//说明：获取所有input元素的不可见的input元素，匹配所有不可见元素，或者input中type为hidden的元素，这个选择器不仅限于表单，除了匹配input中的hidden外，那些style为hidden的元素也会被匹配
        
//注意：要选取input中为hidden值的方法就是上面例子的用法，但是直接使用“:hidden”的话就是匹配页面中所有的不可见元素，包括宽度和高度为0的

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器-应用实例</title>
    <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //选择所有的button
            //这里我们就不绑定事件，直接演示
            //老师解读 $(":button") 会选择<input type="button" value="按钮1"/><br/>
            //还会选择  <button>按钮2</button>
            var $button = $(":button");
            alert($button.length)
            
            //得到type="button" 的元素
            //老韩解读 $("input[type='button']") 只会得到 <input type="button" value="按钮1"/>
            var $input = $("input:button");
            alert($input.length)
            
            //得到<button />按照元素标签取值
            //老韩解读 $("button") 只会按照元素标签获取 <button>按钮2</button>
            var $button1 = $("button");
            alert($button1.text())
            
        });
    </script>
</head>
<body>
<form>
    <input type="text"/><br/>
    <input type="checkbox"/><br/>
    <input type="radio"/><br/>
    <input type="image" src="../image/2.png" height="100"/><br/>
    <input type="file"/><br/>
    <input type="submit"/><br/>
    <input type="reset"/><br/>
    <input type="password"/><br/>
    <input type="button" value="按钮1"/><br/>
    <select>
        <option/>
    </select><br/>
    <textarea></textarea><br/>
    <button>按钮2</button>
    <button>按钮3</button>
    <br/>
</form>
</body>
</html>

15.jQuery创建节点

  • 创建节点介绍

    • 创建节点:使用jQuery的工厂函数$():$(html标签)；会根据传入的html标记字符串创建一个jQuery对象，并返回
    • 动态创建的新元素不会被自动添加到文档中，而是需要使用其他方法将其插入到文档中
    • 当创建单个元素时，需注意闭合标签和使用标准的XHTML格式，例如：创建一个< p >元素，可以使用$("< p/ >")或$("< p >< / p>"),但不能使用$("< p >")或$(" < /P > ")

  • 第一组方法（内部插入法）

    ​ image-20231114104637510

    • append(content):向每个匹配的元素的内部的结尾处追加内容，举例：A.append(B)[解读：①A和B都是jQuery对象②表示把B对象插入到A对象内部的结尾处③结果：B对象成为了A对象的子元素/子节点]
    • appendTo(content)：将每个匹配的元素追加到指定的元素中的内部结尾处，举例：A.appendTo(B)[解读：①A和B都是jQuery对象②表示把A对象插入到B对象内部的结尾处③结果：A对象成为了B对象的子元素/子节点]
    • prepend(content)：向每个匹配的元素的内部的开始处插入内容，举例：A.prepend(B)[解读：①A和B都是jQuery对象②表示把B对象插入到A对象内部的开始③结果：B对象成为了A对象的子元素/子节点]
    • prependTo(content)：将每个匹配的元素插入到指定的元素中的内部开始处，举例：A.prependTo(B)[解读：①A和B都是jQuery对象②表示把A对象插入到B对象内部的开始处③结果：A对象成为了B对象的子元素/子节点]
    • 内部插入法是在元素的内部插入内容（该内容变成该元素的子元素或节点）

  • 第二组方法（外部插入法）

    image-20231114104755211

    • after(content)：在每个匹配的元素之后插入内容，举例：[A.after(B) 解读：①A、B都是jQuery对象②表示把B对象插入到A对象后面③结果：B对象成为了A对象的兄弟节点/兄弟元素，并且在A的后面]
    • before(content)：在每个匹配的元素之前插入内容，举例：[A.before(B) 解读：①A、B都是jQuery对象②表示把B对象插入到A对象前面③结果：B对象成为了A对象的兄弟节点/兄弟元素，并且在A的前面]
    • insertAfter(content)：把所有匹配的元素插入到另一个指定的元素集合的后面，举例：[A.insertAfter(B) 解读：①A、B都是jQuery对象②表示把A对象插入到B对象后面③结果：A对象成为了B对象的兄弟节点/兄弟元素，并且在B的后面]
    • insertBefore(content)：把所有匹配的元素插入到另一个指定的元素集合的前面，举例：[A.insertBefore(B) 解读：①A、B都是jQuery对象②表示把A对象插入到B对象前面③结果：A对象成为了B对象的兄弟节点/兄弟元素，并且在B的前面]
    • 外部插入法是在元素的外面插入内容（其内容变成元素的兄弟节点）
    • 注意：以上方法不但能将新的DOM元素插入到文档中，也能对原有的DOM元素进行移动

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        
        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        
        $(function () {
            //添加重庆li到上海下(使用dom的传统方法)
            var id = document.getElementById("b1");
            id.onclick =function () {
                // 创建一个li
                var li = document.createElement("li");
                // 添加属性
                li.setAttribute("id","cq");
                li.setAttribute("name","chongqing");
                // 设设置文本
                li.innerText = "重庆";
                // 获取上海li
                var elementById = document.getElementById("sh");
                // 添加li
                elementById.append(li);
        
            }
        
            //*****添加重庆li到 上海下-jquery完成添加节点
            $("#b2").click(function () {
        
                $("#sh").after($("<li id=\"cq\" name=\"chongqing\">重庆</li>"))


            });


            //*** 添加成都li到 北京前
            $("#b3").click(function () {
                // 方式一
                $("#bj").prepend($("<li id=\"cd\" name=\"chengdu\">成都</li>"))
                // $("#bj").before($("<li id=\"cd\" name=\"chengdu\">成都</li>"))
                // 方式二
                // $("<li id=\"cd\" name=\"chengdu\">成都</li>").insertBefore("#bj")
                
            });
                
            //*** 添加成都li到 北京和上海之间
            $("#b4").click(function () {
                // 方式一
                $("#bj").append($("<li id=\"cd\" name=\"chengdu\">成都</li>"))
                // $("#bj").after($("<li id=\"cd\" name=\"chengdu\">成都</li>"))
                // 方式二
                // $("<li id=\"cd\" name=\"chengdu\">成都</li>").insertAfter("#bj")
               //  这个也可以选上海为参照物
                
            });
                
            //*** 添加成都li到 吉林前面
            $("#b5").click(function () {
                // 方式一
                // $("#jl").before($("<li id=\"cd\" name=\"chengdu\">成都</li>"))
                // 方式二
                $("<li id=\"cd\" name=\"chengdu\">成都</li>").insertBefore("#jl")
                
            });
                
        })
    </script>
</head>
<body>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="jl" name="jilin">吉林</li>
    <li id="my" name="mianyang">绵阳</li>
</ul>

<input type="button" id="b1" value="添加重庆li到 上海下(使用dom的传统方法)"/><br/><br/>
<input type="button" id="b2" value="添加重庆li到 上海下"/><br/><br/>
<input type="button" id="b3" value="添加成都li到 北京前"/><br/><br/>
<input type="button" id="b4" value="添加成都li到 北京和上海之间"/><br/><br/>
<input type="button" id="b5" value="添加成都li到 吉林前面"/><br/>

</body>
</html>

16.jQuery删除节点

  • remove()：从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素，当某个节点用remove()方法删除后，该节点所包含的所有后代节点将被同时删除，这个方法的返回值是一个指向一杯删除的节点的引用

  • empty()：清空节点，清空元素中的所有后代节点（不包含属性节点），比如说：你把一个P标签删除以后，还是会有换行操作。

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //*****删除所有p
           $("#b1").click(function () {
               $("p").remove();
           });
            //***所有p清空
            $("#b2").click(function () {
                $("p").empty();
            });
            //****删除上海这个li
            $("#b3").click(function () {
                $("#city li[id='sh']").remove();
            });
        });
    </script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
        
您爱好的游戏:<br>
<ul id="game">
    <li id="fk" name="fakong">反恐</li>
    <li id="cq" name="chuangqi">传奇</li>
</ul>
        
<p>Hello</p> how are <p>you?</p>


<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>

<input type="button" value="删除所有p" id="b1"/>
<input type="button" value="所有p清空" id="b2"/>
<input type="button" value="删除上海这个li" id="b3"/>
</body>
</html>

17.jQuery复制节点

  • clone()：克隆匹配的DOM元素，返回值为克隆后的副本，但此时复制的新节点不具有任何行为

  • clone(true)：复制元素的同时也复制元素中的事件

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.7.1.min.js"></script>
    <script>
        $(function () {
        
            //点击p, 弹出文本信息
            $("p").click(function () {
                alert(this.innerText);
            });
            //克隆p, 插入到按钮后面
            //老韩解读
            // $("button").after($("p").clone());
            $("button").after($("p").clone(true));
        
        })
    </script>
</head>
<body>
<button>保存</button>
<br><br><br><br><br>
///////////////////////////////////////////////<br>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>

18.jQuery替换节点

  • replaceWith()：将所有匹配的元素都替换成为指定的HTML或DOM元素，例如：A.replaceWith(B)，用B去替换A

  • replaceAll()：将所有匹配的元素被替换成指定的HTML或DOM元素，与replaceWith()相反，例如：A.replaceAll(B)，用A去替换B

  • 注意：若在替换之前，已经在元素上绑定了事件，替换后原来绑定的事件会与原先的元素一起消失

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
        
            //1. 将 p 替换成 button
            // $("p").replaceWith("<button>你好</button>")
        
            //2.将p 替换成 超链接
            // $("<a href='www.fanyi.baidu.com'>hahah</a>").replaceAll($("p"));
        
            //3. 使用对象来进行替换
            var $button = $("<button>123~~~~~</button>");
        
            $("p").replaceWith($button)
        
        });
    </script>
</head>
<body>
<h1>节点替换</h1>
<p>Hello</p>
<p>jquery</p>
<p>World</p>
</body>
</html>

19.jQuery属性操作

  • attr()：获取属性和设置属性
  • attr()： 传递一个参数时，即为获取某元素的指定属性
  • attr()：传递两个参数时，即为某元素设置指定属性的值
  • jQuery中有很多方法都是一个函数实现获取和设置，如：attr(),html(),text(),val(),heigth(),width(),css()等
  • removeAttr()：删除指定元素的指定属性

20jQuery样式操作

  • 获取class和设置class，class是元素的一个属性，所以获取class和设置class都可以使用attr()方法完成

  • 追加样式：addClass()

  • 移除样式：removeClass()：从匹配的元素中删除全部或指定的class

  • 切换样式：toggleClass()：控制样式上的重复切换，如果类名存在则删除它，如果不存在则添加它

  • 判断是否含有某个样式：hasClass()：判断元素中是否含有某个class，如果有则返回true，如果没有则返回false

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找节点</title>
    <style type="text/css">
        div {
            width: 140px;
            height: 140px;
            margin: 20px;
            float: left;
            border: #000 1px solid;
        }
        
        .one {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        
    </style>
    <script type="text/javascript" src="../script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取 class 和设置 class 都可以使用 attr() 方法来完成.(给id 为first添加 .one 样式)
            $("#b1").click(function () {
                $("#first").attr("class","one")
            });
            //追加样式: addClass()
            $("#b2").click(function () {
                $("#second").addClass("one")
            });
        
            //移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
            $("#b3").click(function () {
                $("#second").removeClass("one")
            });
        
            //切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
            $("#b4").click(function () {
                $("#second").toggleClass("one")
            });
        
            //判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
            $("#b5").click(function () {
                var hasClass = $("#second").hasClass("one");
                alert(hasClass)
            });
        });
    </script>
</head>
<body>
<input type="button" value="获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式)" id="b1"/><br/><br/>
<input type="button" value="追加样式: addClass() (给id 为first添加 .one 样式)" id="b2"/><br/><br/>
<input type="button" value="移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式) " id="b3"/><br/><br/>
<input type="button"
       value="切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它"
       id="b4"/><br/><br/>
<input type="button"
       value="判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false"
       id="b5"/><br/><br/>
<div id="first">first</div>
<div id="second">second</div>
</body>
</html>

21.jQuery获取HTML,文本和值

  • 设置或返回所选元素的内容（包括HTML标签）：html()

  • 读取和设置某个元素的文本内容：text()，该方法既可以用于HTML也可以用于XML文档

  • 读取和设置某个元素中的值：val() ，该方法类似于JavaScript中的value属性，对于文本框，下拉列表框，单选框该方法可返回元素的值

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>val()课堂练习</title>
    <script type="text/javascript" src="../script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
        
            //单独的一个测试代码
           // $("#b1").click(function () {
           //     alert(this.defaultValue);
           // });
        
            //1.给b1绑定一个获取焦点事件
            //2.当用户把光标定位到输入框b1, 该事件就会被触发
            $("#b1").focus(function () {
                var val = $("#b1").val();
                if(val == this.defaultValue){
                    $("#b1").val(" ");
                }
            })
        
            //1. 给b1绑定一个失去焦点事件 blur
            //2. 当用户的光标离开这个输入框,就会触发
            $("#b1").blur(function () {
                var val1 = $("#b1").val();
                if(val1 == " "){
                    $("#b1").val(this.defaultValue)
                }
            });
        
        })
    </script>
</head>
<body>
<input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br>
<input type="password" value="" id="b2"/><br>
<input type="button" value="登陆" id="b3"/>
</body>
</html>

22.jQuery常用遍历节点的方法

  • 取得匹配元素的所有子元素组成的集合：childern().该方法只考虑子元素而不考虑任何后代元素

  • 取得匹配元素后面紧邻的同辈元素的集合：next()[单个]/nextAll()[所有]

  • 取得匹配元素前面紧邻的同辈元素的集合：prev()[单个]/prevAll()[所有]

  • 取得匹配元素前后所有的同辈元素：siblings()

  • 获取指定的第几个元素;next().eq(index)

  • 对获取到的同辈元素进行过滤：nextAll().filter("元素")

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用遍历节点方法-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 60px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        
    </style>
    <script type="text/javascript" src="../script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
        
            //**查找所有子元素（class 为 one 的div的子元素)
            $("#b1").click(function () {
                $(".one").children().each(function () {
                    alert(this.innerText);
                })
            });
        
            //***获取后面的同辈div元素（class 为 one 的div的)
            $("#b2").click(function () {
                // 后面一个同辈
                // var text = $(".one").next();
                // alert(text)
            //     后面所有同辈
                $(".one").nextAll().each(function () {
                    alert(this.innerText)
                })
        
            });
        
            //**获取前面的同辈div元素（class 为 one 的div的)
            $("#b3").click(function () {
                // 前面一个同辈
                // var text = $("#d").prev();
                // alert(text.text())
                //     前面所有同辈
                $("#d").prevAll().each(function () {
                    alert(this.innerText)
                })
        
            });
            //**获取所有的同辈div元素（class 为 one 的div的)
            $("#b4").click(function () {
                // 前面一个同辈
                // var text = $("#d").prev();
                // alert(text.text())
                //     前面所有同辈
                $("#d").siblings().each(function () {
                    alert(this.innerText)
                })
        
            });
        
        })
    </script>
</head>
<body>
<input type="button" value="查找所有子元素 (class 为 one 的div的)" id="b1"/><br/><br/>
<input type="button" value="获取后面的同辈元素 (class 为 one 的div的)" id="b2"/><br/><br/>
<input type="button" value="获取前面的同辈元素 (class 为 one 的div的)" id="b3"/><br/><br/>
<input type="button" value="获取所有的同辈元素 (class 为 one 的div的)" id="b4"/>
<hr/>
<div>
    ccccccc
</div>
        
<p class="one">
    ccccccc111
</p>
        
<div class="one" id="d">
    <div id="one">
        XXXXXXXXX one
    </div>
        
    <div id="two">
        XXXXXXXXX two
    </div>
        
    <div id="three">
        XXXXXXXXX three
    </div>
        
    <div id="four">
        XXXXXXXXX four
    </div>
</div>
<div>
    tttttttttt
</div>
<div>
    aaaaaaa
</div>
<div>bbbbbb</div>
<p>hello, pp</p>
</body>
</html>

23.jQuery中CSS-DOM操作

  • 获取和设置元素的样式：css()
  • 获取和设置元素透明度：opacity属性
  • 获取和设置元素高度，宽度：height(),width()。在设置值时，若只传递数字，则默认单位是px，如需要使用其他单位则传递一个字符串，例如：$("p;first").height("2em")
  • 获取元素在当前视窗中的相对位移：offset()，返回对象包含了两个属性：top,left，该方法只对可见元素有效
JSON和Ajax
ES6

Comment