基本介绍

能看懂和修改就行,不用背

val()、text()之类括号里不写东西是读取,写了就是赋值

div.(名) div和.之间不要加空格 不然会无效

1. jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML,css,dom…
2. 提供方法、events、选择器,并且方便地为网站提供 AJAX 交互
3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.
4. jQuery 实现了浏览器的兼容问题
示意图:

  • 聊一聊框架和库的区别

框架:

  对整个开发流程都做了一个限制和规定——在某个模块创建某种文件,并且将相应的库也封装好了——可以直接调用对应的API。

所以相对来说框架的学习成本要高一些,因为要熟悉该框架的开发流程和规范是怎么样的,还要去了解对应的一些API

库:

  封装了一些原生的代码,并提供对应的API

下载和使用

下载链接:Download jQuery | jQuery

 

 

 一般开发使用这个压缩就可以,点进去之后另存为保存文件:

 使用的时候需要使用script标签引入jQuery 库文件 (下面的script是文件夹的名字)

<script type=”text/javascript” src=”script/jquery-3.6.0.min.js”></script>

简单案例

先回顾一下原生的js

<script type="text/javascript">
        window.onload = function () {
            var btn01 = document.getElementById("btn01");   使用js的时候得到的是dom对象
            btn01.onclick = function () {
                alert("alert by js")
            }
        }
 </script>

 

使用jquery 

<script type="text/javascript" src="script/jquery-3.6.0.min.js"></script> 先引入jquery库文件,注意不要在引入标签里写
<script type="text/javascript">
        $(function () {
            var $btn01 = $("#btn01");   
            $btn01.click(function () {
                alert("alert by jquery")
            })
        });
    </script>

使用细节:

1. 初次使用 jquery , 你会觉得语法比较奇怪,其实 jquery 的底层仍然是 js,只是做了封装
2. $(function () {} )等价原生js的window.onload = function () {} ,当页面加载完毕就会执行 function(){}
3. $() 可以理解成是一个函数 [可以定义 function $(id) {} …]

4. $(“#btn01”) 底层: document.getElementById(“btn01”)
5. 注意 $(“#btn01”) 不能写成 $(“btn01”) ,一定要记得加#!!! 不然无法获取对象
6. 通过$(“#btn01”) 返回的对象就是 jquery 对象(即进行了封装),而不是原生的 dom对象
7.这时我们就可以使用 jquery 对象的方法,事件等,通过 debug 我们发现 jquery 对象是数组对象

8.编程中,规定 jquery 对象的命名以$开头(不是必须,但是一般都会遵守约定)

编程小技巧:

(1) 不明的地方可以做测试
(2) 使用 debug 直接看对象构成
(3) 在学习语言的过程中尽量能够看到效果,或者这个对象构成 => 了然
而在学习计组、网络的时候则需要一些想想能力(因为底层看不到)。
(4) 多动手 
(5)为了减少缓存的影响,我们在输出的时候尽量有些变化

DOM对象和Jquery对象的相互转换

DOM -> JQuery

演示:

<script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //演示通过 dom 对象来获取输入框的 value
            // username 就是 dom 对象
            var username = document.getElementById("username");
            alert("username value by dom = " + username.value);
            //通过 jquery 对象来获取输入框的 value
            // 把 username dom 对象转成 jquery 对象
            var $username = $(username);
            //使用 jquery 的方法来获取 value
            alert("$username value by jquery " + $username.val())

        })
    </script>

dom对象类型:

jquery对象类型:

JQuery – > DOM 

 

 演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 对象转成 dom 对象</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //得到 jquery 对象 
            var $username = $("#username");
            alert("$username value= " + $username.val())
            //准备把 jquery 对象->dom 
            // 说明 :
            // (1)jquery 是一个数组对象,封装了dom 对象 
            // (2)可以通过[index] 来获取,也可以通过 get(index) 
            // (3)一般来说 index 是 0 
            // 方式 1: 
            var username = $username[0];
            alert(username)// 输出 username 是 object HtmlInputElement 
            alert("username value=" + username.value);
            //方式 2 
            var username = $username.get(0);
            alert("username value~~~=" + username.value)

        })
    </script>
</head>
<body>
用户名 <input type="text" id="username" name="username" value="紫英"/>
</body>
</html>

jquery选择器

基本介绍

1.选择器是 jQuery 的核心, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
2.jQuery 选择器的优点:

 异常处理演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器使用特点</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //如果是dom对象,获取null的value会报错
        var username = document.getElementById("username");
        alert(username.value);
        //如果我们希望 dom 对象可以处理 null
        if (username) {
            alert("username value=" + username.value)
        } else {
            alert("没有获取到对应 id 的 dom 对象")
        }
        //如果是 jquery 对象, 获取null的value
        // 如果没有获取到,调用val()并不会报错,而是直接alert(undefined), 加强了程序的健壮性
        var $username = $("#username"); 
        alert($username.val())
</script>
</head>
<body>
用户名 <input type="text" id="username~" name="username" value="紫英"/>
</body>
</html>

基本选择器

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

1、#id

用法: $(“#myDiv”);
返回值:单个元素的组成的集合
说明: 这个就是直接选择 html 中的 id=”myDiv” 

2、Element

用法: $(“div”)
返回值:集合元素
说明: element 的英文翻译过来是”元素”,所以 element 其实就是 html 已经定义的标签元素,例如 div, input, a 等等

3、class

用法: $(“.myClass”)
返回值:集合元素
说明: 这个标签是直接选择 html 代码中class=”myClass”的元素或元素组
(因为在同一html 页面中 class 是可以存在多个同样值的)

4、*

用法: $(“*”)
返回值:集合元素
说明: 匹配所有元素,多用于结合上下文来搜索

5、selector1, selector2, selectorN(组合选择器)

用法: $(“div,span,p.myClass”)
返回值 集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,
并将匹配到的元素合并到一个结果内.其中 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.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //1. 改变 id 为 one 的元素的背景色为 #0000FF
      $("btn01").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 (){
                $("#two,.mini,span").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>

层次选择器

1 、ancestor descendant

用法: $(”form input”) ;
返回值:集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开

2、parent > child(>可以省略)

用法: $(”form > input”) ;
返回值 集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素

3、prev + next

用法: $(”label + input”) ;
返回值 集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings

用法: $(”form ~ input”) ;
返回值 集合元素
说明:
匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,
不包含该元素在内,并且 siblings 匹配的是和 prev 同辈的元素,其后辈元素不被匹配.
注意:
(“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素;
而 jQuery中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

案例演示:

<!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.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //1. 改变 <body> 内所有 <div> 的背景色为 #0000FF
            $("#b1").click(function () {
                $("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 (){
                    $("#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>
<div id="two02"> id two02 </div>
</div> <div id="three" class="mini"> div id为three <div id="three01"> id three01 </div> </div> </body> </html>

基础过滤选择器

这里的冒号()就可以看成是过滤条件

1、:first 用法: $(“tr:first”) ;

返回值:单个元素的组成的集合
说明: 匹配找到的第一个元素

2、:last

用法: $(“tr:last”)

返回值 集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应
所谓最后一个指的是是从上到下,从左到右去搜,最后的一个

3、:not(selector)

用法: $(“input:not(:checked)”)返回值 集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的
input(当 input 的 type=”checkbox”).

4、:even

用法: $(“tr:even”)
返回值 集合元素
说明: 匹配所有索引值为偶数的元素,从 0 开始计数.js 的数组都是从 0 开始计数的.
例如要选择 table 中的行,因为是从 0 开始计数,所以 table 中的第一个 tr 就为 偶数 0.

5、: odd

用法: $(“tr:odd”) 返回值 集合元素
说明: 匹配所有索引值为奇数的元素,和:even 对应,从 0 开始计数.

6、:eq(index)

用法: $(“tr:eq(0)”)
返回值 集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个 tr 元素.括号里面的是索引值,

7、:gt(index)

用法: $(“tr:gt(0)”)
返回值 集合元素
说明: 匹配所有大于给定索引值的元素.

8、:lt(index)

用法: $(“tr:lt(2)”)
返回值 集合元素
说明: 匹配所有小于给定索引值的元素.

9、:header(固定写法)

用法: $(“:header”).css(“background”, “#EEE”)
返回值 集合元素
说明: 匹配如 h1, h2, h3 之类的标题元素.这个是专门用来获取 h1,h2 这样的标题元素

10、: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.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){

            //*****改变第一个 div 元素的背景色为 #0000FF
            $("#b1").click(
                function (){
                    // $("div:first").css("background", "#0000FF");
                    $("div:eq(0)").css("background", "#00FF00");
                }
            )

            //*****改变最后一个 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>

内容过滤选择器

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

1、:contains(text)

用法: $(“div:contains(‘John’)”)
返回值 集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用,当我们要选择的不是 dom 标签
元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内
容的.

2、:empty

用法: $(“td:empty”)
返回值 集合元素
说明: 匹配所有不包含子元素或者文本的空元素

3、:has(selector)

用法: $(“div:has(p)”).addClass(“test”)
返回值 集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使
用的例子就完全清楚了:给所有包含 p 元素的 div 标签加上 class=”test”.

4、:parent

用法: $(“td:parent”)
返回值 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”, 与上
面讲的”:empty”形成反义词

5、:not

说明:取反

<!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.6.0.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 () {
                    //这个写法是选择 含有 class='.mini' 的div的父元素(div)  has表示含有嘛
                    //$("div:has('.mini')").css("background", "pink")//加‘’
                    这个是选择有 class='.mini' div
                    $("div.mini").css("background", "pink");
                }
            )
            //****改变含有子元素(或者文本元素)的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", "pink")
                }
            )

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

 

可见度过滤选择器

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

1、:hidden

用法: $(“tr:hidden”) 返回值 集合元素
说明:
匹配所有的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到
意思是 css 中 display:none 和 input type=”hidden”的都会被匹配到

2、:visible(包含each()方法

用法: $(“tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.
案例演示(包含each()方法):
<!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.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //*****改变所有可见的div元素的背景色为 #0000FF
            $("#b1").click(
                function () {
                    $("div:visible").css("background", "red");
                }
            )
            //**选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
            $("#b2").click(
                function () {
                    $("div:hidden").css("background", "green");
                    $("div:hidden").show();
                }
            )
            //**选取所有的文本隐藏域, 并打印它们的值
            $("#b3").click(
                function () {
                    //1. 先得到所有的hidden 元素
                    //2. $inputs 是一个jquery对象,而且是数组对象
                    var $inputs = $("input:hidden");
                    //alert("length= " + $inputs.length)
                    //3. 遍历
                    //方式1 - for
                    // for (var i = 0; i < $inputs.length; i++) {
                    //     //这里input 就是一个dom对象
                    //     var input = $inputs[i];
                    //     console.log("值是= " + input.value);
                    // }
                    //方式2 - jquery each() 可以对数组遍历
                    // 说明:
                    //(1) each 方法,遍历时,会将 $inputs 数组的元素
                    //    取出, 传给 function() {} -> this
                    $inputs.each(function (){
                        //这里可以使用this获取每次遍历的对象
                        //this 对象是是dom对象
                        console.log("值是(dom方式)=" + this.value);

                        //也可以将this -> jquery 对象使用jquery方法取值
                        console.log("值是(jquery方式)=" + $(this).val())
                    })

                }
            )
        });
    </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/>
<hr/>

<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>

 

属性过滤选择器

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

1、[attribute]

用法: $(“div[id]”) ; 返回值 集合元素
说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的 div 标签.

2、[attribute=value]

用法: $(“input[name=’newsletter’]”).attr(“checked”, true);
返回值 集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是
newsletter 的 input 元素.

3、[attribute!=value]

用法: $(“input[name!=’newsletter’]”).attr(“checked”, true);
返回值 集合元素
说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素.此选择器等价
于 :not([attr=value]), 要 匹 配 含 有 特 定 属 性 但 不 等 于 特 定 值 的 元 素 ,
请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场

4、[attribute^=value]

用法: $(“input[name^=’news’]”) 返回值 集合元素
说明: 匹配给定的属性是以某些值开始的元素(类似正则表达式

5、[attribute$=value]用法: $(“input[name$=’letter’]”)

返回值 集合元素
说明: 匹配给定的属性是以某些值结尾的元素.

6、[attribute*=value]用法: $(“input[name*=’man’]”)

返回值 集合元素
说明: 匹配给定的属性是以包含某些值的元素.

7、[attributeFilter1][attributeFilter2][attributeFilterN]

用法: $(“input[id][name$=’man’]”)
返回值 集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.是一个组合,这个例子中选择
的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素
案例演示:
<!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.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //*****含有属性title 的div元素.
            $("#b1").click(
                function () {
                    $("div[title]").css("background", "green");
                }
            )

            //****属性title值等于test的div元素
            $("#b2").click(
                function () {
                    $("div[title='test']").css("background", "green");
                }
            )

            //属性title值不等于test的div元素(没有属性title的也将被选中)

            $("#b3").click(
                function () {
                    $("div[title!='test']").css("background", "green");
                }
            )

            //属性title值 以te开始 的div元素
            $("#b4").click(
                function () {
                    $("div[title^='te']").css("background", "green");
                }
            )

            //属性title值 以est结束 的div元素
            $("#b5").click(
                function () {
                    $("div[title$='est']").css("background", "green");
                }
            )

            //属性title值 含有es的div元素
            $("#b6").click(
                function () {
                    $("div[title *= 'es']").css("background", "green");
                }
            )

            //选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素
            $("#b7").click(
                function () {
                    $("div[id][title *= 'es']").css("background", "green");
                }
            )

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

子元素过滤选择器

这里的索引是从1开始的

1、:nth-child(index/even/odd/equation)

用法: $(“ul li:nth-child(2)”)
返回值 集合元素
说明: 匹配其父元素下的第 N 个子或奇偶元素.这个选择器和之前说的
基础过滤(Basic Filters)中的 eq() 有些类似
不同的地方就是前者是从 0 开始,后者是从 1 开始

2、:first-child

用法: $(“ul li:first-child”)
返回值 集合元素
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配
一个子元素.这里需要特别点的记忆下区别.

3、:last-child

用法: $(“ul li:last-child”)
返回值 集合元素
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配
一个子元素.

4、: only-child

用法: $(“ul li:only-child”)
返回值 集合元素
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其
他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

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

(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素  —— 可以用于表格的斑马纹
(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 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.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //****选取class为one的div的父元素下的第2个子元素
            $("#b1").click(
                function () {
                    $("div .one:nth-child(2)").css("background", "yellow");
                }
            )

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


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


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

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

表单属性过滤选择器

  • 此选择器主要对所选择的表单元素进行过滤

1、:enabled

用法: $(“input:enabled”)
返回值 集合元素
说明: 匹配所有可用元素.意思是查找所有 input 中不带有 disabled=”disabled”的 input不为 disabled,当然就为 enabled 啦.

2、:disabled

用法: $(“input:disabled”)
返回值 集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的.

3、:checked

用法: $(“input:checked”)
返回值 集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等,不包括 select 中的 option).

4、:selected

用法: $(“select option:selected”)
返回值 集合元素
说明: 匹配所有选中的 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.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){
            //*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值

            $("#b1").click(
                function () {
                    //老师解读
                    //$jquery对象.val() , 如果() 是空的,就表示返回value
                    //$jquery对象.val('值') , 就表示给该对象value设置值
                    $("input[type='text']:enabled").val("台球");
                }
            )

            //利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值

            $("#b2").click(
                function () {
                    //老师解读
                    //$jquery对象.val() , 如果() 是空的,就表示返回value
                    //$jquery对象.val('值') , 就表示给该对象value设置值
                    $("input[type='text']:disabled").val("足球");
                }
            )
            //利用 jQuery 对象的 length 属性获取多选框/复选框选中的个数
            $("#b3").click(
                function () {
                    alert($("input[type='checkbox']:checked").length);
                }
            )
            //****利用 jQuery 对象的 text() 方法获取下拉框选中的内容
            $("#b4").click(
                function () {
                    //如果我们希望选择指定的select , 可以加入属性过滤选择器
                    //var $selects = $("select[name='edu'] option:selected");
                    var $selects = $("select option:selected");
                    $selects.each(function (){
                        alert("你选择了= " + $(this).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>

表单选择器

1、:input 用法: $(“:input”) 
返回值 集合元素
说明:匹配所有 input, textarea, select 和 button 元素
2、:text 用法: $(“:text”) 
返回值 集合元素
说明: 匹配所有的单行文本框.
3、:password 用法: $(“:password”) 
返回值 集合元素
说明: 匹配所有密码框.
4、:radio 用法: $(“:radio”) 
返回值 集合元素
说明: 匹配所有单选按钮.
5、:checkbox 用法: $(“:checkbox”) 
返回值 集合元素
说明: 匹配所有复选框
6、:submit 用法: $(“:submit”) 
返回值 集合元素
说明: 匹配所有提交按钮.
7、:image 用法: $(“:image”)
返回值 集合元素
说明: 匹配所有图像域.
8、:reset 用法: $(“:reset”) ;
返回值 集合元素
说明: 匹配所有重置按钮.
9、:button 用法: $(“:button”) 
返回值 集合元素
说明: 匹配所有按钮.这个包括直接写的元素 button.
10、:file 用法: $(“:file”) 
返回值 集合元素
说明: 匹配所有文件域.
11、:hidden 用法: $(“input:hidden”) 
返回值 集合元素
说明: 匹配所有不可见元素,或者 type 为 hidden 的元素.这个选择器就不仅限于表单了
除了匹配 input 中的 hidden 外,那些 style 为 hidden 的也会被匹配
注意: 要选取 input 中为 hidden 值的方法就是上面例子的用法,但是直接使用”:hidden” 的话
就是匹配页面中所有的不可见元素,包括宽度或高度为 0 的

案例演示(拿button举例,其他类似)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器-应用实例</title>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //选择所有的button
            //这里我们就不绑定事件,直接演示
            //老师解读 $(":button") 会选择<input type="button" value="按钮1"/><br/>
            //还会选择  <button>按钮2</button>
            var $button = $(":button");
            alert("$button 大小=" + $button.length)//3

            //得到type="button" 的元素
            //老韩解读 $("input[type='button']") 只会得到 <input type="button" value="按钮1"/>
            var $button2 = $("input[type='button']");
            alert("$button2 大小=" + $button2.length)//1

            //得到<button />按照元素标签取值
            //老韩解读 $("button") 只会按照元素标签获取 <button>按钮2</button>
            var $button3 = $("button");
            alert("$button3 大小=" + $button3.length)//2
        });
    </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>

 

jQuery 的 DOM 操作

查找节点, 修改属性(attr())

  • 查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

案例演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找修改节点</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
                $("button").click(function (){
                $("input").attr("value","天河");
            })
        })
    </script>
</head>
<body>
用户名 <input type="text" id="username" name="username" value="紫英"/>
<button>点击更改文字</button>
</body>
</html>

 

创建节点

创建节点介绍
1.创建节点: 使用 jQuery 的工厂函数 $(): $(html标签); 会根据传入的 html 标记字符串创建一个 jQuery 对象, 并返回
2.动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中
3.当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素,
可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)
4.创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

内部插入法

  • 内部插入法是在 元素内插入内容(该内容变成该元素的子元素或节点)
1.append(content) :
向每个匹配的元素的内部的结尾处追加内容,
举例:A.append(B)
说明:
(1) A, B 都是jquery对象
(2) 表示把B对象插入到A对象内部的结尾处
(3) 结果:B对象成为A对象的子元素/节点
2.appendTo(content) :
将每个匹配的元素追加到指定的元素中的内部结尾处 
举例:A.appendTo(B)
解读:
(1) A, B都是jquery对象
(2) 表示把 A对象 插入到B对象内部结尾处
(3)结果:A对象成为B对象的子元素/节点 
3.prepend(content):
向每个匹配的元素的内部的开始处插入内容
举例: A.prepend(B)
解读:
(1) A, B都是jquery对象
(2) 表示把B对象插入到A对象内部的开始处
(3) 结果:B成为A的子元素/节点
4.prependTo(content) :
将每个匹配的元素插入到指定的元素内部的,
举例:A.prependTo(B)
解读:
(1) A, B都是jquery对象
(2) 表示把A对象插入到B对象内部的开始处
(3) 结果:A成为B的子元素/节点

外部插入法

  • 外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)
1.after(content) :
在每个匹配的元素之后插入内容
举例:A.after(B)
解读:
(1) A,B都是jquery对象
(2) 表示B对象插入到A对象后面
(3) 结果:B成为A的兄弟节点
2.before(content)
:在每个匹配的元素之前插入内容
举例: A.before(B)
解读:
(1)A, B都是jquery对象
(2) 表示B对象插入到A对象前面
(3) 结果:B成为A的兄弟节点,并且在A的前面
3.insertAfter(content):
把所有匹配的元素插入到另一个指定的元素元素集合的后面
举例:A.insertAfter(B)
解读:
(1) A, B都是jquery对象
(2) 表示把A对象插入到B对象的后面
(3) 结果:A成为B的后一个兄弟节点
4.insertBefore(content) :
把所有匹配的元素插入到另一个、指定的元素元素集合的前面
举例:A.insertBefore(B)
解读:
(1) A, B都是jquery对象
(2) 表示把A对象插入到B对象的前面
(3) 结果:A成为B的前一个兄弟节点
 
  • 注意: 以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动(可以完成很多需求)

案例演示1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动节点</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //****使用外部插入法 把反恐li移动天津后
            $("#b1").click(function () {
                $("#tj").after($("#fk"));
            })

            //****使用内部插入法 把反恐li移动天津后
            $("#b2").click(function () {
                $("#tj").append($("#fk"));
            })

        })
    </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>
<input type="button" id="b1" value="使用after插入法 把反恐li移动天津后"/><br/><br/>
<input type="button" id="b2" value="使用append插入法 把反恐li移动天津后"/><br/><br/>
</body>
</html>

案例演示2:

<!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.6.0.min.js"></script>
    <script type="text/javascript">

        $(function () {
            //添加重庆li到上海下(使用dom的传统方法)
            $("#b1").click(function () {
                //1. 创建重庆li
                var cq_li = document.createElement("li");
                //2. 设置属性和内容
                cq_li.setAttribute("id", "cq");
                cq_li.setAttribute("name", "chongqing");
                cq_li.innerText = "重庆";
                //3. 添加到指定元素后面
                document.getElementById("sh").append(cq_li);
            })

            //*****添加重庆li到 上海下-jquery完成添加节点
            $("#b2").click(function () {
                //创建好重庆li
                var $cq_li = $("<li id=\"cq\" name=\"chongqing\">重庆~</li>");
                //内部插入法append
                //$("#sh").append($cq_li);
                //外部插入法
                $("#sh").after($cq_li);//推荐...
                //$cq_li.insertAfter($("#sh"));
            })


            //*** 添加成都li到 北京前
            $("#b3").click(function () {
                //创建成都li
                var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都</li>");
                //添加到北京li前面[感受外部插入和内部插入区别]
                //$("#bj").prepend($cd_li);//内部插入
                $("#bj").before($cd_li);//外部插入
            })

            //*** 添加成都li到 北京和上海之间
            $("#b4").click(function () {
                //创建成都li
                var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都~~~~</li>");
                //外部插入
                //$("#bj").after($cd_li);
                $("#sh").before($cd_li);
            })

            //*** 添加成都li到 吉林前面
            $("#b5").click(function () {
                //创建成都li
                var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都@@@###</li>");
                //外部插入
                $("#jl").before($cd_li);//推荐
                //$cd_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>

删除节点

1.remove():

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

2.empty():

清空节点 – 清空元素中的所有后代节点(不包含属性节点)
 
说明:
拿<p>xxx</p>举例的话 remove()是整个将节点以及节点中的所有子节点删除
而empty只是将整个将节点以及节点中的所有子节点中的内容删除(如:里面的xxx)
 
案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //*****删除所有p
            $("#b1").click(function () {
                $("p").remove();
            })
            //***所有p清空
            $("#b2").click(function () {
                $("p").empty();
            })
            //****删除上海这个li
            $("#b3").click(function (){
                $("#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>

复制节点

1、clone():

克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为

2、clone(true):

复制元素的同时也复制元素中的的事件
 
案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {

            //点击p, 弹出文本信息
            $("p").click(function () {
                //隐式的传入this->p的dom对象
                alert("段落的内容= " + $(this).text())
            })
            //克隆p, 插入到按钮后面
            //解读:
            //1. $("p").clone() 表示克隆p元素,但是没有复制事件
            //2. $("p").clone(true) 表示克隆p元素,同时复制事件
            $("p").clone(true).insertAfter($("button"));

        })
    </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>

 

替换节点

1.replaceWith():

将所有匹配的元素都替换为指定的 HTML 或 DOM/juqery元素(创建的时候只能是jquery对象)
举例:A.replaceWith(B)

2.replaceAll():

颠倒了的 replaceWith() 方法.A.replaceAll(B)
 
注意:
若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
 
案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //1. 将 p 替换成 button
            //$("p").replaceWith("<input type='button' id='my' value='我的按钮'/>")

            //2.将p 替换成 超链接
            //$("p").replaceWith("<a href='http://www.baidu.com'>点击到百度</a><br/>");

            //3. 使用jquery对象来进行替换
            var $button = $("<input type='button' id='my' value='我的按钮~'/>");
            $button.click(function (){
                alert("ok ~~~");
            })
            $("p").replaceWith($button);
        });
    </script>
</head>
<body>
<h1>节点替换</h1>
<p>Hello</p>
<p>jquery</p>
<p>World</p>
</body>
</html>

属性操作

1.attr(): 获取属性和设置属性
2.获取指定属性:向attr()传递一个参数
3.设置指定属性的值:attr()传递两个参数
4.jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(),height(), width(), css() 等.
html()和text()区别提醒:
如:<p><span>hello<span><p>
p.text()——获取到hello
p.html()——获取到<span>hello<span>    p.html(“<p>666<p>”) 可以在设置的时候加上标签 text()则不可以(可以加但是不会被识别为标签)
5.removeAttr(): 删除指定元素的指定属性

获取 HTML 文本和值

基本介绍

1、设置或返回所选元素的内容(包括 HTML 标记): html()
2、读取和设置某个元素中的文本内容: text()
该方法既可以用于 HTML 也可以用于 XML文档
3、读取和设置某个元素中的值:
val() — 该方法类似 JavaScript 中的 value 属性
对于文本框, 下拉列表框, 单选框该方法可返回元素的值
案例演示(焦点事件):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>val()课堂练习</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //单独的一个测试代码
            // $("#b1").click(function (){
            //     alert("默认值=" + this.defaultValue);
            // })

            //1.给b1绑定一个获取焦点事件
            //2.当用户把光标定位到输入框b1, 该事件就会被触发
            $("#b1").focus(function (){
                //获取-判断
                //获取到当前值
                var currentVal = $(this).val();
                //如果当前值就是默认值, 就清空, 让用户输入自己的值
                if(currentVal == this.defaultValue) {
                    $(this).val("");
                }
            })

            //1. 给b1绑定一个失去焦点事件 blur
            //2. 当用户的光标离开这个输入框,就会触发
            $("#b1").blur(function (){
                //获取当前值
                var currentVal = $(this).val();
                //判断如果当前值为"", 说明用户没有输入内容
                //就恢复提示默认信息
                if(currentVal == "") {
                    $(this).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>

节点遍历

1、children():

取得匹配元素的所有子元素组成的集合,该方法只考虑子元素而不考虑任何后代元素

2、next()/nextAll():

取得匹配元素后面的同辈元素的集合(并不会区分类型)

3、prev()/prevAll():

取得匹配元素前面的同辈元素的集合

4、siblings():

取得匹配元素前后所有的同辈元素

5、nextAll().eq(index):

获取指定的第几个元素(下标从0开始
 
filter("div"), 获取到后面所有的同辈元素, 进行过滤 只得到div
 
<!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.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //**查找所有子元素(class 为 one 的div的子元素)
            $("#b1").click(function () {

                //我们可以使用这样的方式$("div[class='one']") 来选择
                //class 为 one 的div —— 加一个基本选择器
                $("div[class='one']").children().each(function (){
                    alert("子div的内容是~~~ " + $(this).text());
                })
            这里不要加空格(div和.之间)
?
// $("div.one").children().each(function (){ // alert("子div的内容是= " + $(this).text()); // }) //指定获取到第几个子元素, eq(1) 表示得到第2个子元素 //alert($("div.one").children().eq(1).text()); }) //***获取后面的同辈div元素(class 为 one 的div的) $("#b2").click(function () { //老师解读 //1. $("div.one") 选择到 class = one 的 div //2. nextAll() 获取到后面所有的同辈元素 //3. filter("div"), 获取到后面所有的同辈元素, 进行过滤 只得到div //4. each 遍历 $("div.one").nextAll().filter("div").each(function () { alert("后面同辈div的内容是= " + $(this).text()); }) //如果我们希望得到后面同辈元素的第几个,可以eq //获取到后面同辈div元素的第2个 alert("后面同辈div元素的第2个的内容=" + $("div.one").nextAll().filter("div").eq(1).text());//aaaa.. //如果我们希望得到的是后面紧邻的同辈元素 alert("紧邻的面同辈元素=" + $("div.one").next().text());//ttt... }) //**获取前面的同辈div元素(class 为 one 的div的) $("#b3").click(function () { //遍历 // $("div.one").prevAll().filter("div").each(function (){ // alert("div的内容= " + $(this).text()); // }) //得到前面的同辈元素第4个 //$("div.one").prevAll().eq(3); //得到前面的紧邻同辈元素 alert($("div.one").prev().text())//ccccc }) //**获取所有的同辈div元素(class 为 one 的div的) $("#b4").click(function () { $("div.one").siblings().filter("div").each(function () { alert("同辈div text= " + $(this).text()) }) }) }) </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"> ccccccc </p> <div class="one"> <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>

 css-dom操作

 

1、css():

获取和设置元素的样式属性

2、获取和设置元素透明度: opacity 属性

3、获取和设置元素高度:

宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px
如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”)
4、获取元素在当前视窗中的相对位移:
offset(). 其返回对象包含了两个属性: top, left
该方法只对可见元素有效 
案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css-dom操作</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){
            $("#b1").click(function (){
                var width = $("img").width();
                alert("width=" + width);
                //offset
                var offset = $("img").offset();
                alert("img的 top = " + offset.top);
                alert("img的 left = " + offset.left);
            })
        })
    </script>
</head>
<body>
<br/><br/><br/>
hello,world~<img src="../image/1.png" width="200">
<button id="b1" type="button">获取图片信息</button>
</body>
</html>

 

表示页面加载完毕的几种方式