菜单 搜索
首页 前端知识 javaweb学习（day12-jQuery)

javaweb学习（day12-jQuery)

2024-05-05 22:05:53 前端知识 前端哥 684 777 我要收藏

一、介绍

1.基本介绍

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

 2 jQuery 的原理示意图

 3 JQuery 基本开发步骤

  • JQuery下载地址: https://jquery.com/download/ jQuery作者在原生的javascript 基础上，封装好的方法，对象等
  • 选择下载文件，并保存到 jquery-3.6.0.min.js
  • 下载 Download the compressed, production jQuery 3.6.0 就是压缩过的
  • Download the uncompressed, development jQuery 3.6.0 是没有压缩过的
  • 我们下载 production jQuery 3.6.0 , 把内容保存到 jquery-3.6.0.min.js 文件即可

使用标签 script 引入 jQuery 库文件即可使用 

使 用 <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script> 引 入 jQuery 库文件 即可使用 jQuery 相关的函数和对象

4 jQuery 快速入门 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 快速入门</title>
    <!-- 引入 jquery 库-->
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        /**
         * 使用 dom 编程
         * 1. 代码比较麻烦
         * 2. document.getElementById("btn01") 返回的是 dom 对象
         */
        //使用原生 js+dom 完成
        //(1) 当页面加载完毕后，就执行 function
        // window.onload = function () {
        // //1. 得到 id=btn01 的 dom 对象
        // var btn01 = document.getElementById("btn01");
 
                // //2. 绑定点击事件
                // btn01.onclick = function () {
                // alert("hello, js");
                // }
                // }
        /**
         * 老师说明
         * 1. 初次使用 jquery , 你会觉得语法比较奇怪，其实 jquery 的底层仍然是 js,只是做了封
         装
         * 2. $(function () {} 等价 window.onload = function () {} *
         * 3. $() 可以理解成是一个函数 [可以定义 function $(id) {} ...] *
         * 3. $("#btn01") 底层: document.getElementById("btn01") *
         * 4. 注意 $("#btn01") 不能写成 $("btn01") *
         * 5. 通过$("#btn01") 返回的对象就是 jquery 对象(即进行了封装)，而不是原生的 dom 对
         象
         */
        //使用 jquery
        //1. 引入 jquery 库文件->感情的自然流露
        //2. $(function(){}) 等价原生的 js 的, 当页面加载完毕就会执行 function(){}
        /*
 
        window.onload= function(){} */
        $(function (){
        //1.得到 btn01 这个对象->jquery 对象
        // $btn01 是一个 jquery 对象 其实就是对 dom 对象的包装.
        // 这时我们就可以使用 jquery 对象的方法，事件等待
        // 通过 debug 我们发现 jquery 对象是数组对象.
        //2. jquery 中，获取对象的方法是 $("#id"), 必须在 id 前有#
        //3. 编程中，规定 jquery 对象的命名以$开头.(不是必须，但是约定)
        // 老韩编程小技巧: (1) 不明的地方可以做测试 (2) 使用 debug 直接看对象构成
        // (3) 尽量能够看到效果，或者这个对象构成 => 了解 (4) 多动手
            var $btn01 = $("#btn01");
        //2.绑定事件
            $btn01.click(function (){
                alert("hello,jquery...~~~")
            })
        });
        
    </script>
 
</head>
<body>
<button id="btn01">按钮 1</button>
</body>
</html>
复制

二、jQuery 对象和 DOM 对象

1 什么是 jQuery 对象 

  • jQuery 对象就是对 DOM 对象进行包装后产生的对象

  • jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用jQuery 里的方法: $("#id").html();
  • 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $ , 比如: var $variable = jQuery 对象 var variable = DOM 对象

2 DOM 对象转成 jQuery 对象 

对于一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象 了。 $(DOM 对象 ) DOM 对象转换成 JQuery 对象后，就可以使用 jQuery 的方法了 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom对象转JQuery对象</title>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        window.onload=function () {
            //通过dom获取输入框的value的值
            var username =document.getElementById("username");
            alert("username value="+username.value);
 
            //通过jquery对象来获取输入框的value
            //把dom对象转成jquery对象
            var $username=$(username);
            //使用jquery的方法来获取value
            alert("$username value="+$username.val());
 
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"name="username" value="林然">
</body>
</html>
复制

 3 jQuery 对象转成 DOM 对象

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

jQuery 对象是一个数组对象，可以通过[index]的方法，来得到相应的 DOM 对象 

jQuery 本身提供，通过 .get(index) 方法，得到相应的 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">
        window.onload=function () {
            //准备把 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");
            alert("$username value="+$username.val());
            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 的核心 , 在 jQuery 中 , 对事件处理 , 遍历 DOM 和 Ajax 操作都依赖 于选择器 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>
        window.onload = function () {
        //如果是 dom 对象, 获取 value
            var username = document.getElementById("username");
        // alert(username.value);//这里会发生? => 有错误
        //如果我们希望 dom 对象可以处理 null
            if(username) {
                alert("username value=" + username.value)
            } else {
                alert("没有获取到对应 id 的 dom 对象")
            }
            
        //如果是 jquery 对象, 获取的 value
        //如果没有获取到，调用 val() , 并不会报错, 对程序的健壮性. var $username = $("#username");
            alert($username.val())// 这里不会报错， 提示 undefined
        }
    </script>
</head>
<body>
用户名 <input type="text" id="username~" name="username" value="学java"/>
</body>
</html>
复制

2 基本选择器

  • 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class和标签名来查找 DOM 元素
  • #id 用法: $("#myDiv"); 返回值 单个元素的组成的集合
        说明: 这个就是直接选择 html 中的 id=”myDiv”
  • Element 用法: $("div") 返回值 集合元素

        说明: element 的英文翻译过来是”元素” ,所以 element 其实就是 html 已经定义的标签元素,例如 div, input, a 等等.

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

        说明: 匹配所有元素,多用于结合上下文来搜索 

  • 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">
        window.onload=function () {
            //1.改变 id 为 one 的元素的背景色为 #0000FF
 
            $("#b1").click(
                function () {
                    $("#one").css("background","#0000FF");
            })
            //2 改变 class 为 mini 的所有元素的背景色为 #FF0033
            $("#b2").click(function () {
                var $mini = $(".mini");
                $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>
复制

3 层次选择器

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

3.1 ancestor descendant 

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

 3.2 parent > child

用法: $(”form > input”) ; 返回值 集合元素

说明 : 在给定的父元素下匹配所有子元素 . 注意 : 要区分好后代元素与子元素

3.3 prev + next 

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

3.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">
        window.onload=function () {
            //改变 <body> 内所有 <div> 的背景色为 #0000FF
            $("#b1").click(function () {
                $("body div").css("background","#0000FF");
            })
            //改变 <body> 内子 <div> 的背景色为 #FF0033，也就是body下的第一个层级的div
            $("#b2").click(function () {
 
                $("body>div").css("background","#FF0033");
            })
 
            //改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
            $("#b3").click(function () {
                $("#one +div").css("background","#0000FF");
            })
 
            //改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #0000FF
            $("#b4").click(function () {
                $("#two~div").css("background","#0000FF");
 
            })
            //改变 id 为 two 的元素所有 <div> 兄弟元素的背景色
            $("#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>
复制

 4 基础过滤选择器

4.1 :first 

        用法: $("tr:first") ; 返回值 单个元素的组成的集合 说明 : 匹配找到的第一个元素

 4.2 :last

        用法: $("tr:last") 返回值 集合元素 说明: 匹配找到的最后一个元素.与 :first 相对应

4.3 :not(selector) 

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

4.4 :even 

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

 4.5 : odd

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

 4.6 :eq(index)

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

 4.7 :gt(index)

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

 4.8 :lt(index)

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

4.9 :header

        (固定写法 ) 用法 : $(":header").css("background", "#EEE") 返回值 集合元素

        说明: 匹配如 h1, h2, h3 之类的标题元素.这个是专门用来获取 h1,h2 这样的标题元素

 4.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">
        window.onload=function () {
            //改变第一个 div 元素的背景色为 #0000FF
            $("#b1").click(function () {
                $("div:first").css("background","#0000FF");
            })
            //改变最后一个 div 元素的背景色为 #0000FF
            $("#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>
复制

 5 内容过滤选择器

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

5.1 :contains(text) 

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

5.2:empty 

        用法: $("td:empty") 返回值 集合元素

        说明: 匹配所有不包含子元素或者文本的空元素

5.3 :has(selector)

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

5.4 :parent 

        用法: $("td:parent") 返回值 集合元素         说明: 匹配含有子元素或者文本的元素 . 注意 : 这里是 ":parent", 可不是 ".parent", 与上 面讲的 ":empty" 形成反义词 . 
<!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">
        window.onload=function () {
            //改变含有文本 ‘di’ 的 div 元素的背景色为 black
            $("#b1").click(function () {
                $("div:contains(di)").css("background","black");
            })
            //改变不包含子元素(或者文本元素) 的 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","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>
复制

 6 可见度过滤选择器

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

6.1 :hidden 

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

6.2 :visible

        用法: $("tr:visible") 返回值 集合元素 说明: 匹配所有的可见元素.

<!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">
        window.onload=function () {
            //改变所有可见的 div 元素的背景色为 #0000FF
            $("#b1").click(function () {
                $("div:visible").css("background","#0000FF")
            })
            //选取所有不可见的 div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
            $("#b2").click(function () {
                var $div = $("div:hidden");
                $div.css("background","green");
                $div.show();
            })
            //选取所有的文本隐藏域, 并打印它们的值
            $("#b3").click(function () {
                //$input是jquery数组对象，
                var $input = $("input:hidden");
                alert("length"+$input.length);
                //遍历
                for(var i=0;i<$input.length;i++){
                    var input_temp=$input[i];
                    alert("值是= "+input_temp.value);
                }
                //jquery遍历
                //each方法遍历时，会将$input数组元素取出，传给function(){}->this
                $input.each(function () {
                    //this是dom对象
                    alert("query方法值= "+this.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/>
<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>
复制

 7 属性过滤选择器

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

7.1 [attribute] 

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

7.2 [attribute=value] 

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

7.3 [attribute!=value]

        用法: $("input[name!='newsletter']").attr("checked", true); 返回值 集合元素

        说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素 . 此选择器等价 于 :not([attr=value]), 要 匹 配 含 有 特 定 属 性 但 不 等 于 特 定 值 的 元 素 , 请 使 用 [attr]:not([attr=value]). 之前看到的 :not 派上了用场

7.4 [attribute^=value] 

        用法: $("input[name^='news']") 返回值 集合元素         说明: 匹配给定的属性是以某些值开始的元素

7.5 [attribute$=value] 

        用法: $("input[name$='letter']") 返回值 集合元素         说明: 匹配给定的属性是以某些值结尾的元素 .

7.6 [attribute*=value] 

        用法: $("input[name*='man']") 返回值 集合元素

        说明: 匹配给定的属性是以包含某些值的元素

 7.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">
        window.onload=function () {
            //含有属性 title 的 div 元素
            $("#b1").click(function () {
                $("div[title]").css("background","red");
            })
            //属性 title 值等于 test 的 div 元素
            $("#b2").click(function () {
                $("div[title='test'] ").css("background","red");
            })
            //属性 title 值不等于 test 的 div 元素(没有属性 title 的也将被选中)
            $("#b3").click(function () {
                $("div[title!='test'] ").css("background","red");
            })
            //属性 title 值 以 te 开始 的 div 元素
            $("#b4").click(function () {
                $("div[title^='te'] ").css("background","red");
            })
            //属性 title 值 以 est 结束 的 div 元素
            $("#b5").click(function () {
                $("div[title$='est'] ").css("background","red");
            })
            //属性 title 值 含有 es 的 div 元素
            $("#b6").click(function () {
                $("div[title*='es'] ").css("background","red");
            })
            //选取有属性 id 的 div 元素，然后在结果中选取属性 title 值含有“es”的 div元素
            $("#b7").click(function () {
                $("div[title*='es'][id] ").css("background","red");
            })
        }
 
    </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>
复制

 8 子元素过滤选择器

子元素过滤选择器基本介绍 

8.1 :nth-child

        (index/even/odd/equation)  用法: $("ul li:nth-child(2)") 返回值 集合元素

        说明: 匹配其父元素下的第 N 个子或奇偶元素 . 这个选择器和之前说的基础过滤 (Basic Filters) 中的 eq() 有些类似 , 不同的地方就是前者是从 0 开始 , 后者是从 1 开始 .

 8.2 :first-child

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

8.3 :last-child 

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

8.4 : only-child

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

 8.5 nth-child()

<!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">
        window.onload=function () {
            //每个 class 为 one 的 div 父元素下的第 2 个子元素
            $("#b1").click(function () {
                $(".one:nth-child(2)").css("background","green");
            })
            //每个 class 为 one 的 div 父元素下的第一个子元素
            $("#b2").click(function () {
                $(".one:first-child").css("background","green");
            })
            //每 个 class 为 one 的 div 父 元 素 下 的 最 后 一 个 子 元 素
            $("#b3").click(function () {
                $(".one:last-child").css("background","green");
            })
            //如果 class 为 one 的 div 父元素下的仅仅只有一个子元素，那么选中这个子元素
            $("#b4").click(function () {
                $(".one:only-child").css("background","green");
            })
        }
    </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>
复制

 9 表单属性过滤选择器

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

9.1 :enabled 

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

 9.2 :disabled

        用法: $("input:disabled") 返回值 集合元素

        说明: 匹配所有不可用元素.与上面的那个是相对应的.

9.3 :checked 

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

9.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">
        window.onload=function () {
            //利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值
 
            $("#b1").click(function () {
                $("input[type='text']:enabled").val("台球");
 
 
            })
            //利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用<input> 元素的值
            $("#b2").click(function () {
               $("input[type='text']:disabled").val("足球");
 
 
            })
            //利 用 jQuery 对 象的 length 属 性获 取 复 选框 选 中的 个 数
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length)
 
            })
            //利 用 jQuery 对 象 的 text() 方 法 获 取 下 拉 框 选 中 的 内 容
            $("#b4").click(function () {
               var $select = $("select option:selected");
               $select.each(function () {
                    alert(this.value);
               })
 
 
            })
 
        }
 
    </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>
复制

 10 表单选择器

10.1 :input

        用法: $(":input") ; 返回值 集合元素         说明: 匹配所有 input, textarea, select 和 button 元素

10.2、:text

        用法: $(":text") ; 返回值 集合元素         说明: 匹配所有的单行文本框 .

10.3:password

        用法 : $(":password") ; 返回值 集合元素         说明: 匹配所有密码框 .

10.4:radio

        用法: $(":radio") ; 返回值 集合元素         说明: 匹配所有单选按钮 . 韩顺平 Java 工程师

10.5:checkbox

        用法: $(":checkbox") ; 返回值 集合元素         说明: 匹配所有复选框

10.6:submit

        用法: $(":submit") ; 返回值 集合元素         说明: 匹配所有提交按钮 .

10.7:image

        用法: $(":image") 返回值 集合元素         说明: 匹配所有图像域 .

10.8:reset

        用法 : $(":reset") ; 返回值 集合元素

        说明: 匹配所有重置按钮.

10.9:button

        用法 : $(":button") ; 返回值 集合元素         说明: 匹配所有按钮 . 这个包括直接写的元素 button.

10.10:file

        用法 : $(":file") ; 返回值 集合元素         说明: 匹配所有文件域 .

10.11:hidden

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

四、jQuery 的 DOM 操作

1 查找节点, 修改属性 

查找属性节点 : 查找到所需要的元素之后 , 可以调用 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">
        window.onload=function () {
            $("button").click(function () {
                $("img").attr("src","../image/1.png")
                $("img").attr("height","200")
            })
        }
 
    </script>
</head>
<body>
    <img src="../image/2.png" height="100"/>
    <br/>
    <button>设置图像的 height 属性</button>
</body>
</html>
复制

2 创建节点

2.1 创建节点介绍 

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

2.2 内部插入法

 2.2.1 append(content)
  • 向每个匹配的元素的内部的结尾处追加内容, 举例 A.append(B) [(1) A, B 都是jquery对象, (2) 表示把B对象插入到A对象内部的结尾处 (3) 结果是: B对象成为A对象的子元素/节点 ]

 

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

 内部插入法是在 元素内插入内容(该内容变成该元素的子元素或节点)

2.3 外部插入法 

2.3.1 after(content)
  • 在每个匹配的元素之后插入内容 , 举例说明 A.after(B) [ (1) A, B都是jquery对象 (2) 表示B对象插入到A对象后面 (3) 结果:B成为A的兄弟节点]

 

2.3.2 before(content) 
  • 在每个匹配的元素之前插入内容, 举例 A.before(B) [ (1)A, B 都是jquery对象(2) 表示B对象插入到A对象前面 (3) 结果是 B成为A的兄弟节点，并且在A的前面]
2.3.3 insertAfter(content)
  • 把所有匹配的元素插入到另一个、指定的元素元素集合的后面 , 举例说明 A.insertAfter(B)[(1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的后面 (3) 结果：A成为B的后一个兄弟节点]
 2.3.4 insertBefore(content)
  • 把所有匹配的元素插入到另一个、指定的元素元素集合的前面, 举例 A.insertBefore(B), [解读 (1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的 前面 (3) 结果是 A成为B的前一个兄弟]

 外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)

2.4 代码 

<!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">
        window.onload=function () {
            //添加重庆 li 到 上海下(使用 dom 的传统方法)
            $("#b3").click(function () {
                var cq_li = document.createElement("li");
                //2 设置属性和内容
                cq_li.setAttribute("id","cq");
                cq_li.setAttribute("name","congqing");
                cq_li.innerText="重庆";
                var sh_li = document.getElementById("sh");
                sh_li.append(cq_li);
 
            })
            //添加重庆 li 到 上海下
            $("#b1").click(function () {
                //内部插入法
                //$("<li id='cq' name='congqing'>重庆</li>").appendTo($("#sh"));
                //外部插入法
                var $cq_li = $("<li id='cq' name='congqing'>重庆</li>");
                $("#sh").after($cq_li);
 
            })
 
            //添加成都 li 到 北京前
            $("#b2").click(function () {
                var $cd_li = $("<li id='cd' name='chendu'>成都</li>");
                $("#bj").before($cd_li);
 
            })
            //添加成都 li 到 北京和重庆之间
            $("#b4").click(function () {
                var $cd_li = $("<li id='cd' name='chendu'>成都</li>");
                $("#bj").before($cd_li);
 
            })
 
 
        }
    </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="b3" onclick="test1()" value="添加重庆 li 到 上海下(使用 dom 的传统方
    法)"/><br/><br/>
    <input type="button" id="b1" value="添加重庆 li 到 上海下"/><br/><br/>
    <input type="button" id="b2" value="添加成都 li 到 北京前"/><br/><br/>
    <input type="button" id="b4" value="添加成都 li 到 北京和重庆之间"/><br/><br/>
    <input type="button" id="b5" value="添加成都 li 到 吉林前面"/><br/>
</body>
</html>
复制

3 删除节点

3.1 remove() 

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

 3.2 empty()

  • 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
<!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">
        window.onload=function () {
            //删除所有 p
            $("#b1").click(function () {
                $("p").remove();
            })
            //所有 p 清空
            $("#b2").click(function () {
                $("p").empty();
            })
            //删除上海这个 li
            $("#b3").click(function () {
                $("li[name='shanghai']").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>
复制

4 复制节点

  • clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
  • 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 type="text/javascript">
        window.onload=function () {
            $("p").click(function () {
                //点击p，弹出文本信息
                //隐式传入this->p的dom对象
                    alert("段落的内容"+$(this).text())
 
 
            })
            //克隆p,插入到按钮后面
            //1.$("p").clone()，表示克隆p元素，但是没有克隆事件
            $("p").clone().insertAfter($("button"));
            //1.$("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>
复制

5  替换节点

<!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>
        window.onload=function () {
            //1.将p替换成button
            // $("p").click(function () {
            //     $(this).replaceWith("<input type='button' id='my' value='我的按钮'>")
            // })
 
 
            //将p替换成超链接
            $("p").click(function () {
                $(this).replaceWith("<a href='http://www.baidu.com'>点击到百度</a><br>")
            })
 
 
        }
    </script>
</head>
<body>
    <h1>节点替换</h1>
    <p>Hello</p>
    <p>jquery</p>
    <p>World</p>
 
</body>
</html>
复制

6 属性操作

attr(): 获取属性和设置属性 

  • attr()传递一个参数时, 即为某元素的获取指定属性
  • attr()传递两个参数时, 即为某元素设置指定属性的值
  • jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(),
  • height(), width(), css() 等, 后面我们还会举例说明.
  • removeAttr(): 删除指定元素的指定属性

7 样式操作 

  • 获取 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.6.0.min.js"></script>
    <script type="text/javascript">
        window.onload=function () {
            //获取 class 和设置 class 都可以使用 attr() 方法来完成(给 id 为first 添加 .one 样式)
            $("#b1").click(function () {
                $("#first").attr("class","one");
            })
            //追 加 样 式 : addClass() ( 给 id 为 first 添 加 .one 样 式 )
            $("#b2").click(function () {
                $("#first").addClass("one");
            })
            //移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给 id 为 first 删除 .one 样式)
            $("#b3").click(function () {
                $("#first").removeClass("one");
            })
            //切换样式: toggleClass() (给 id 为 first 切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
            $("#b4").click(function () {
                $("#first").toggleClass("one");
            })
            //判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
            $("#b5").click(function () {
 
                alert($("#first").hasClass("one"));
            })
        }
    </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>
复制

 8 获取 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.6.0.min.js"></script>
    <script type="text/javascript">
 
        window.onload=function () {
            //给b1一个获取焦点事件
            //当用户把光标定位到输入框b1，该事件就会被出发
            $("#b1").focus(function () {
                //判断
                //获取到当前值
                var current_val = $(this).val();
                //如果当前值就是默认值，让用户输入自己的值
                if(current_val==this.defaultValue){
                    $(this).val("");
                }
            })
 
            //给用户一个失去焦点事件
            //当用户光标离开这个输入就框，就会出发
            $("#b1").blur(function () {
                //获取到当前值
                var current_val = $(this).val();
                if(current_val==""){
                    $(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>
复制

9 常用遍历节点方法

  • 取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
  • 取得匹配元素后面的同辈元素的集合:next()/nextAll();
  • 取得匹配元素前面的同辈元素的集合:prev()/prevAll();
  • 取得匹配元素前后所有的同辈元素: siblings()
  • 获取指定的第几个元素: nextAll().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.6.0.min.js"></script>
    <script type="text/javascript">
        window.onload=function () {
            //查找所有子元素 (class 为 one 的 div 的)
            $("#b1").click(function () {
                $("div[class='one']").children().each(function () {
                    alert("div的内容是= "+$(this).text());
                })
            })
            //获取后面的同辈元素 (class 为 one 的 div 的)
            $("#b2").click(function () {
                $("div[class='one']").nextAll().each(function () {
                    alert("后面同辈div的内容是= "+$(this).text());
                })
            })
            //获取前面的同辈元素 (class 为 one 的 div 的)
            $("#b3").click(function () {
                $("div[class='one']").prevAll().filter("div").each(function () {
                    alert("前面同辈div的内容是= "+$(this).text());
                })
            })
            //获取所有的同辈元素 (class 为 one 的 div 的)
            $("#b4").click(function () {
                $("div[class='one']").siblings().filter("div").each(function () {
                    alert("同辈div的内容是= "+$(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>
 
    <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>
 
 
</body>
</html>
复制

 10 CSS-DOM 操作

  • 获取和设置元素的样式属性: css()
  • 获取和设置元素透明度: opacity 属性
  • 获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $("p:first").height("2em");
  • 获取元素在当前视窗中的相对位移: 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">
        window.onload=function () {
            $("#b1").click(function () {
                var width = $("img").width();
                alert("width="+width);
                //offset
                var offset = $("img").offset();
                alert("img的top值="+offset.top);
 
            })
        }
    </script>
</head>
<body>
    <br/><br/><br/>
    hello,world~<img src="../image/1.png" width="200">
    <button id="b1" type="button">获取图片信息</button>
</body>
</html>
复制

11作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选框应用</title>
    <style type="text/css">
 
        BODY {
            font-size: 12px;
            margin: 0px 0px 0px 0px;
            overflow-x: auto;
            overflow-y: auto;
            background-color: #B8D3F4;
        }
        .default_input {
            border: 1px solid #666666;
            height: 18px;
            font-size: 12px;
        }
        .default_input2 {
            border: 1px solid #666666;
            height: 18px;
            font-size: 12px;
        }
 
        .nowrite_input {
            border: 1px solid #849EB5;
            height: 18px;
            font-size: 12px;
            background-color: #EBEAE7;
            color: #9E9A9E;
        }
        .default_list {
            font-size: 12px;
            border: 1px solid #849EB5;
        }
        .default_textarea {
            font-size: 12px;
            border: 1px solid #849EB5;
        }
        .nowrite_textarea {
            border: 1px solid #849EB5;
            font-size: 12px;
 
            background-color: #EBEAE7;
            color: #9E9A9E;
        }
        .wordtd5 {
            font-size: 12px;
            text-align: center;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #b8c4f4;
        }
        .wordtd {
            font-size: 12px;
            text-align: left;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            韩顺平 Java 工程师
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #b8c4f4;
        }
        .wordtd_1 {
            font-size: 12px;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #516CD6;
            color: #fff;
        }
        .wordtd_2 {
            font-size: 12px;
            text-align: right;
            vertical-align: top;
            padding-top: 6px;
            韩顺平 Java 工程师
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #64BDF9;
        }
        .wordtd_3 {
            font-size: 12px;
            text-align: right;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #F1DD34;
        }
        .inputtd {
            font-size: 12px;
            vertical-align: top;
            padding-top: 3px;
            韩顺平 Java 工程师
            padding-right: 3px;
            padding-bottom: 3px;
            padding-left: 3px;
        }
        .inputtd2 {
            text-align: center;
            font-size: 12px;
            vertical-align: top;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            padding-left: 3px;
        }
        .tablebg {
            font-size: 12px;
        }
        .tb {
            border-collapse: collapse;
            韩顺平 Java 工程师
            border: 1px outset #999999;
            background-color: #FFFFFF;
        }
        .td2 {
            line-height: 22px;
            text-align: center;
            background-color: #F6F6F6;
        }
        .td3 {
            background-color: #B8D3F4;
            text-align: center;
            line-height: 20px;
        }
        .td4 {
            background-color: #F6F6F6;
            line-height: 20px;
        }
 
        .td5 {
            border: #000000 solid;
            border-right-width: 0px;
            border-left-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 1px;
        }
        .tb td {
            font-size: 12px;
            border: 2px groove #ffffff;
        }
        .noborder {
            border: none;
        }
        .button {
            border: 1px ridge #ffffff;
            line-height: 18px;
            韩顺平 Java 工程师
            height: 20px;
            width: 45px;
            padding-top: 0px;
            background: #CBDAF7;
            color: #000000;
            font-size: 9pt;
        }
        .textarea {
            font-family: Arial, Helvetica, sans-serif, "??";
            font-size: 9pt;
            color: #000000;
            border-bottom-width: 1px;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: solid;
            border-left-style: none;
            border-bottom-color: #000000;
            background-color: transparent;
            text-align: left
        }
 
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
 
        window.onload=function () {
 
            //全部移动右边
                $("#add_all").click(function () {
                    var left_option = $("#first").children();
                    left_option.each(function () {
                        $("#second").append($(this));
                    })
 
 
                })
            //选中的移到右边
            $("#add").click(function () {
                $("#first>option:selected").appendTo($("#second"));
 
 
            })
            //双击移到右边
            $("#first").dblclick(function () {
                $("#first>option:selected").appendTo($("#second"))
            })
            //全部移动左边
            $("#remove_all").click(function () {
                var left_option = $("#second").children();
                left_option.each(function () {
                   $("#first").append($(this));
                })
 
 
            })
            //选中的移到左边
            $("#remove").click(function () {
                $("#second>option:selected").appendTo($("#first"));
            })
            //双击移到左边
 
            $("#second").dblclick(function () {
                $("#second >option:selected").appendTo($("#first"))
            })
        }
    </script>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px;
height:200px; background-color:#E6E6E6;">
    <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
        <tr>
            <td width="126">
                <!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度
                -->
                <select name="first" size="10" multiple="multiple" class="td3" id="first">
                    <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>
                    <option value="选项 7">选项 7</option>
                    <option value="选项 8">选项 8</option>
                </select>
            </td>
            <td width="69" valign="middle">
                <input name="add" id="add" type="button" class="button" value="-->"/>
                <input name="add_all" id="add_all" type="button" class="button"
 
                       value="==>"/>
                <input name="remove" id="remove" type="button" class="button" value="&lt;--"/>
                <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;=="/>
            </td>
            <td width="127" align="left">
                <select name="second" size="10" multiple="multiple" class="td3"
                        id="second">
                    <option value="选项 9">选项 9</option>
                </select>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
复制

 12 加载 DOM

在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 

在常规的 JavaScript 代码中 , 通常使用 window.onload 方法 , window.onload = function(){}

 在 jQuery 中使用$(document).ready() 方法

五、作业 

1 作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework01</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        window.onload=function () {
            $("button").click(function () {
                var $input = $("input:checked");
                var info="<p>选中了"+$input.length+"个</p>";
                $(info).insertAfter($("button"));
                $input.each(function () {
                    info="<p>选中了： "+$(this).val()+"</p>";
                    $(info).insertAfter($("button"));
                })
            })
        }
    </script>
</head>
<body>
    <input type="checkbox" value="lq" name="lq" id="lq">篮球
    <input type="checkbox" value="pq" name="pq" id="pq">排球
    <input type="checkbox" value="ymq" name="ymq" id="ymq">羽毛球
    <input type="checkbox" value="ppq" name="ppq" id="ppq">乒乓球
    <button>选中的个数</button>
</body>
</html>
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/7062.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！