开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【前端基础】JQuery -> 正文阅读

[JavaScript知识库]【前端基础】JQuery

?? jQuery顾名思义就是javascript和查询Query,它是辅助javascript开发的js类库.
?? jQuery核心思想是写的更少,做的更多,所以它实现了很多浏览器的兼容问题.
?? jQuery现在已经成为最流行的javascript类库.
?? jQuery的好处是免费的,开源的它的语法设计使开发更加的便捷.

??1.jQuery的初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
     <script type="text/javascript">
         //window.onload = function(){
         //    var obj= document.getElementById("btnd");
           //  obj.onclick = function (){
            //     alert("单机事件");
          //   }
        // }
         $(function(){//表示页面加载完成之后相当window.onload = function(){}
            var $btnd = $("#btnd");//表示按id查询标签对象.
             $btnd.click(function(){//绑定单击事件.
               alert("单击事件");
            });
        });
     </script>
</head>
<body>
<button id = "btnd">SayHello</button>
</body>
</html>

注意:
💙(1).一定要引入jQuery类库,否则看不到效果.
💙(2).jQuery中的$是一个函数.
💙(3).使用jQuery查询到标签对象,然后使用标签对象.click(function(){});

??2.jQuery核心函数

$ 是jQuery的核心函数,能完成jQuery的很多功能,$ ()就是调用$这个函数.
核心函数的四个作用:
(1).传入参数为函数时,在文档加载完成后执行这个函数.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
     <script type="text/javascript">
         $(function(){
           alert("页面加载");
        });
     </script>
</head>
<body>
</body>
</html>

(2).传入参数为HTML字符串时,根据这个字符串创建元素节点对象.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
     <script type="text/javascript">
         $(function(){
             $(" <div>" +
                 "        <span>div1</span>" +
                 "        <span>div2</span>" +
                 "    </div>").appendTo("body");
        });
     </script>
</head>
<body>
</body>
</html>

(3).传入参数为选择器字符串时,根据这个字符串查找元素节点对象.
$(“#id属性值”); id选择器,根据id查询标签对象
$(“标签名”); 标签名选择器,根据指定的标签名查询标签对象
$(“.class属性值”); 类型选择器,可以根据class属性查询标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
     <script type="text/javascript">
         $(function(){
             $(" <div>" +
                 "        <span>div1</span>" +
                 "        <span>div2</span>" +
                 "    </div>").appendTo("body");
             alert($("button").length);
         });
     </script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
</html>

(4).传入参数为DOM对象时,会把这个DOM对象转换为jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
     <script type="text/javascript">
         $(function(){
             $(" <div>" +
                 "        <span>div1</span>" +
                 "        <span>div2</span>" +
                 "    </div>").appendTo("body");
             var obj = document.getElementById("bt01");
             alert($(obj));
         });
     </script>
</head>
<body>
<button id="bt01">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
</html>

??3.jQuery对象和Dom对象区分

jQuery对象:
(1).通过jQuery提供的API创建的对象
(2).通过jQuery包装的Dom对象
(3).通过jQuery提供的API查询到的对象
jQuery对象alert出来的效果是:[object Object]

DOM对象:
(1).通过getElementById()查询出来的标签对象
(2).通过getElementByName()查询出来的标签对象
(3).通过getElementByTagName()查询出来的标签对象
(4).通过createElement()创建的对象

jQuery对象的本质:dom对象的数组+jQuery提供的一系列功能函数.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
     <script type="text/javascript">
       $(function(){
           var $b = $("button");
           for(var i = 0;i < $b.length; i++){
               alert($b[i]);
           }
       });
     </script>
</head>
<body>
<div id="test">very good</div>
<button id="bt01">按钮1</button>
<button id="bt02">按钮2</button>
<button id="bt03">按钮3</button>
</body>
</html>

??4.jQuery对象和Dom对象使用区别

jQuery对象不能使用Dom对象的属性和方法.
Dom对象也不能使用jQuery对象的属性和方法.

例如:

  document.getElementById("test").click(function(){
                alert("");
         });

这样是不可以的.
或者:

   $(function(){
                   //document.getElementById("test").innerHTML = "1232";
                   $("#test").innerHTML = "1232";
               });

也是不可以的.

??5.Dom对象和jQuery对象互转

(1).Dom对象转化为jQuery对象??

先有Dom对象
$(Dom对象),就可以转化为jQuery对象

例如:

 $(function(){
             alert($(document.getElementById("test")));
         });

(2).jQuery对象转化为Dom对象??

先有jQuery对象
jQuery对象[下标取出相应的Dom对象]

例如:

  $(function(){
             alert($(document.getElementById("test"))[0]);
         });

??6.jQuery选择器

(1).基础选择器??
#id选择器:根据id查找标签对象.
在这里插入图片描述

<!DOCTYPE html>
< lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div,span,p{
            width  : 140px;
            height : 140px;
            margin : 5px;
            background : #aaa;
            border : #000 1px solid;
            float : left;
            font-size : 17px;
            font-family : Verdana;
        }
        div.mini{
            width : 55px;
            height : 55px;
            background-color : #aaa;
            font-size : 12px;
        }
        div.hide{
            display : none;
        }
    </style>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
     <script type="text/javascript">
         $(function(){
            $("#bnt1").click(function(){
               $("#one").css("background-color","#bbffaa");
            });
         });
     </script>
</head>
<body>
<input type="button" value="选择 id 为 one 的元素" id = "bnt1"/>
<input type="button" value="选择 class 为 mini 的元素" id = "bnt2"/>
<input type="button" value="选择 元素名是 div 的元素" id = "bnt3"/>
<input type="button" value="选择 所有的元素" id = "bnt4"/>
<br>
<div class="one" id="one">
    <div class="mini">class1</div>
</div>
<div class="one" id="tow" title="test">
    <div class="mini" title="other">class01</div>
    <div class="mini" title="test">class02</div>
</div>
<div class="one">
    <div class="mini">class2</div>
    <div class="mini">class2</div>
    <div class="mini">class2</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class2</div>
    <div class="mini">class2</div>
    <div class="mini">class2</div>
    <div class="mini" title="test1">title</div>
</div>
<div style="..." class="none">style</div>
<div class="hide">class3</div>
<div>
    包含....<input type="hide" size="8">
</div>
<span class="one" id="span">span</span>
</body>
</html>

.class选择器:根据class查找标签对象.
在这里插入图片描述

 $(function(){
            $("#bnt2").click(function(){
               $(".mini").css("background-color","#bbffaa");
            });
         });

element选择器:根据标签名查找标签对象.
在这里插入图片描述

 $(function(){
            $("#bnt3").click(function(){
               $("div").css("background-color","#bbffaa");
            });
         });

*选择器:表示任意的,所有的元素.
在这里插入图片描述

    $(function(){
            $("#bnt4").click(function(){
               $("*").css("background-color","#bbffaa");
            });
         });

组合选择器:选择器1,2…的结果并返回.
在这里插入图片描述

  $(function(){
            $("#bnt5").click(function(){
               $("div,span,p").css("background-color","#bbffaa");
            });
         });

(2).层级选择器??
ancestor descendant 后代选择器:在给定的祖先元素下匹配所有的后代元素.

  $(function(){
            $("#bnt1").click(function(){
               $("body div").css("background-color","#bbffaa");
            });
         });

在这里插入图片描述
parent > child 子元素选择器:在给定的父元素下匹配所有的子元素.

 $(function(){
            $("#bnt2").click(function(){
               $("body > div").css("background-color","#bbffaa");
            });
         });

在这里插入图片描述
prev + next 相邻元素选择器:匹配所有紧接在prev元素后的next元素.

$(function(){
            $("#bnt3").click(function(){
               $("#one + div").css("background-color","#bbffaa");
            });
         });

在这里插入图片描述
prev~sibings 同辈元素选择器:匹配prev元素之后的所有sibings元素.

$(function(){
            $("#bnt4").click(function(){
               $("#one~div").css("background-color","#bbffaa");
            });
         });

在这里插入图片描述
(3).过滤选择器??
基本过滤器:
:first 获取第一个元素.

 $(function(){
            $("#bnt1").click(function(){
               $("div:first").css("background-color","#bbffaa");
            });
         });

:last 获取最后的元素.
在这里插入图片描述

 $(function(){
            $("#bnt2").click(function(){
               $("div:last").css("background-color","#bbffaa");
            });
         });

:not(selector) 去除所有给定选择器匹配的元素.
在这里插入图片描述

 $(function(){
            $("#bnt3").click(function(){
               $("div:not(.one)").css("background-color","#bbffaa");
            });
         });

:even 匹配所有索引值为偶数的元素,从0开始计数.
在这里插入图片描述

  $(function(){
            $("#bnt4").click(function(){
               $("div:even").css("background-color","#bbffaa");
            });
         });

:odd 匹配所有索引值为奇数的元素,从0开始计数.
在这里插入图片描述

$(function(){
            $("#bnt5").click(function(){
               $("div:odd").css("background-color","#bbffaa");
            });
         });

:eq(index) 匹配一个给定索引值的元素.
在这里插入图片描述

$(function(){
            $("#bnt5").click(function(){
               $("div:eq(3)").css("background-color","#bbffaa");
            });
         });

:gt(index) 匹配所有大于给定索引值的元素.
在这里插入图片描述

 $(function(){
            $("#bnt5").click(function(){
               $("div:gt(3)").css("background-color","#bbffaa");
            });
         });

:lt(index) 匹配所有小于给定索引值的元素.
在这里插入图片描述

$(function(){
            $("#bnt5").click(function(){
               $("div:lt(3)").css("background-color","#bbffaa");
            });
         });

:header 匹配如h1 h2 h3 之类的标题元素.
在这里插入图片描述

  $(function(){
            $("#bnt5").click(function(){
               $(":header").css("background-color","#bbffaa");
            });
         });

:animated 匹配所有正在执行动画效果的元素.
在这里插入图片描述

    $(function(){
            $("#bnt5").click(function(){
               $("div:not(:animated)").css("background-color","#bbffaa");
            });
         });

  $(function(){
            $("#bnt5").click(function(){
               $("div:not(:animated):last").css("background-color","#bbffaa");
            });
         });

内容过滤器:
:contains(text) 匹配包含给定文本的元素.
在这里插入图片描述

 $(function(){
            $("#bnt1").click(function(){
               $("div:contains('di')").css("background-color","#bbffaa");
            });
         });

:empty 匹配所有不包含子元素或者文本的空元素.
在这里插入图片描述

  $(function(){
            $("#bnt2").click(function(){
               $("div:empty").css("background-color","#bbffaa");
            });
         });

:parent 匹配含有子元素或者文本的元素.
在这里插入图片描述

   $(function(){
            $("#bnt3").click(function(){
               $("div:parent").css("background-color","#bbffaa");
            });
         });

:has(selector) 匹配含有选择器所匹配的元素的元素.
在这里插入图片描述

$(function(){
            $("#bnt4").click(function(){
               $("div:has(.mini)").css("background-color","#bbffaa");
            });
         });

属性过滤器:
[attribute] 匹配包含给定属性的元素.
在这里插入图片描述

  $(function(){
            $("#bnt1").click(function(){
               $("div[id]").css("background-color","#bbffaa");
            });
         });

[attribute=value] 匹配给定的属性是某个特定值的元素.
在这里插入图片描述

 $(function(){
            $("#bnt2").click(function(){
               $("div[id='one']").css("background-color","#bbffaa");
            });
         });

[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素.
在这里插入图片描述

 $(function(){
            $("#bnt3").click(function(){
               $("div[id!='one']").css("background-color","#bbffaa");
            });
         });

[attribute^=value] 匹配给定的属性是以某些值开始的元素.
在这里插入图片描述

 $(function(){
            $("#bnt4").click(function(){
               $("div[id^='on']").css("background-color","#bbffaa");
            });
         });

[attribute$=value] 匹配给定的属性是以某些值结尾的元素.
在这里插入图片描述

  $(function(){
            $("#bnt5").click(function(){
               $("div[class$='e']").css("background-color","#bbffaa");
            });
         });

[attribute*=value] 匹配给定的属性是包含某些值的元素.
在这里插入图片描述

 $(function(){
            $("#bnt5").click(function(){
               $("div[class*='e']").css("background-color","#bbffaa");
            });
         });

[attrSel1][attrSet2][arrrSelN] 复合属性选择器,需要同时满足多个条件时使用.
在这里插入图片描述

  $(function(){
            $("#bnt5").click(function(){
               $("div[class*='e'][id]").css("background-color","#bbffaa");
            });
         });

表单过滤器:
:input 匹配所有 input,textarea,select和button元素.
在这里插入图片描述

$(function(){
            $("#bnt5").click(function(){
               $(":input").css("background-color","#bbffaa");
            });
         });

:text 匹配所有的单行文本框.
在这里插入图片描述

 $(function(){
            $("#bnt5").click(function(){
               $(":text").css("background-color","#bbffaa");
            });
         });

:password 匹配所有密码框.
在这里插入图片描述

$(function(){
            $("#bnt5").click(function(){
               $(":password").css("background-color","#bbffaa");
            });
         });

:radio 匹配所有单选按钮.
在这里插入图片描述

 $(function(){
            $("#bnt5").click(function(){
               alert($(":radio:checked").length);
            });
         });

:checkbox 匹配所有复选框.
在这里插入图片描述

 $(function(){
            $("#bnt5").click(function(){
               alert($(":checkbox:checked").length);
            });
         });

:submit 匹配所有提交按钮.
在这里插入图片描述

  $("#bnt5").click(function(){
               $(":submit").css("background-color","#bbffaa");
            });
         });

:reset 匹配所有重置按钮.
在这里插入图片描述

 $(function(){
            $("#bnt5").click(function(){
               $(":reset").css("background-color","#bbffaa");
            });
         });

:button 匹配所有按钮.
在这里插入图片描述

 $(function(){
            $("#bnt5").click(function(){
               $(":button").css("background-color","#bbffaa");
            });
         });

:file 匹配所有文件域.
在这里插入图片描述

 $(function(){
            $("#bnt5").click(function(){
               $(":file").css("background-color","#bbffaa");
            });
         });

:hidden 匹配所有不可见元素,或者type为hidden的元素.
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js">
    $(function(){
    $("#df").click(function(){
          $("tr:hidden").css("background-color","#bbffaa");
        });
    });
    </script>
</head>
<body>
<input type="button" value="123" id="df"/>
<table>
    <tr style="display:none"><td>value1</td></tr>
<tr><td>value2</td></tr>
</table>
</body>
</html>

表单对象属性:
:enabled 匹配所有可用元素.
在这里插入图片描述

  $(function(){
    $("#df").click(function(){
          $(":input:enabled").css("background-color","#bbffaa");
        });
    });

:disabled 匹配所有不可用元素.
在这里插入图片描述

$("#df").click(function(){
          $(":input:disabled").css("background-color","#bbffaa");
        });
    });

:checked 匹配所有选中的被选中元素(单选框复选框等,不包括select中的option)
在这里插入图片描述

  $(function(){
    $("#df").click(function(){
        alert($(":input:checked").length);
        });
    });

:selected 匹配所有选中的option元素.
在这里插入图片描述

$(function() {
        $("#df").click(function () {
            var $select = $("select option:selected");
            $select.each(function(){
                alert(this.innerHTML);
            })
        });
    });

💙注意:在each()遍历的function函数中,有一个this对象,这个this对象是当前正在遍历的dom对象.

??7.jQuery元素筛选

eq(index) 获取第N个元素.
在这里插入图片描述

 $(function(){
            $("#bnt1").click(function(){
                $("div").eq(3).css("background-color","#bbffaa");
            });
        });

first() 获取第一个元素.
在这里插入图片描述

$(function(){
            $("#bnt1").click(function(){
                $("div").first().css("background-color","#bbffaa");
            });
        });

last() 获取最后一个元素.
在这里插入图片描述

 $(function(){
            $("#bnt1").click(function(){
                $("div").last().css("background-color","#bbffaa");
            });
        });

filter(expre|obj|ele|fun) 筛选出与指定表达式匹配的元素集合.
在这里插入图片描述

$(function(){
            $("#bnt1").click(function(){
                $("div").filter(":even").css("background-color","#bbffaa");
            });
        });

is(expre|obj|ele|fun) 判断是否匹配给定的选择器,只要有一个就返回true.
在这里插入图片描述

 $(function(){
            $("#bnt1").click(function(){
                alert($("span").is(":empty"));
            });
        });

has(expre|ele) 返回包含有匹配选择器的元素的元素.
在这里插入图片描述

$(function(){
            $("#bnt1").click(function(){
              $("div").has(".mini").css("background-color","blue");
            });
        });

not(expre|ele|fun) 删除匹配选择器的元素.
在这里插入图片描述

 $(function(){
            $("#bnt1").click(function(){
              $("div").not(".mini").css("background-color","blue");
            });
        });

children(expre) 返回匹配给定选择器的子元素.
在这里插入图片描述

 $(function(){
            $("#bnt1").click(function(){
              $("body").children("span").css("background-color","blue");
            });
        });

find(expre|obj|ele) 返回匹配给定选择器的后代元素.
在这里插入图片描述

$(function(){
            $("#bnt1").click(function(){
              $("body").find("div.mini").css("background-color","blue");
                //find()说明:
                // 第一步:找到符合class为mini的div.
                // 第二步:在找到的div中筛选出是body的后代的div.
            });
        });

next(expre) 返回当前元素的下一个兄弟元素.
在这里插入图片描述

  $(function(){
            $("#bnt1").click(function(){
              $("#one").next("div").css("background-color","blue");
                //next()说明:
                // 第一步:找到所有的div.
                // 第二步:在找到的所有div中筛选出是#one所在的元素的下一个兄弟div.
            });
        });

nextAll(expre) 返回当前元素后面所有的兄弟元素.
在这里插入图片描述

 $(function(){
            $("#bnt1").click(function(){
              $("#one").nextAll("div").css("background-color","blue");
                //next()说明:
                // 第一步:找到所有的div.
                // 第二步:在找到的所有div中筛选出是#one所在的元素的后面所有兄弟div.
            });
        });

nextUntil(exp|ele|,filete) 返回当前元素到指定匹配的元素为止的后面元素.
在这里插入图片描述

$(function(){
            $("#bnt1").click(function(){
              $("#one").nextUntil("span").css("background-color","blue");
                //nextUntil()说明:
                //找到#one和span之间的所有兄弟元素,不包括#one和span.
            });
        });

parent(expr) 返回父元素.
在这里插入图片描述

 $(function(){
            $("#bnt1").click(function(){
              $("#one").parent().css("background-color","blue");
            });
        });

prev(expr) 返回当前元素的上一个兄弟元素.
在这里插入图片描述

$(function(){
            $("#bnt1").click(function(){
              $(".one").prev("div").css("background-color","blue");
            });
            //prev()说明:
            //第一步:找到所有的div.
            //第二步:在找到的所有div中筛选出是.one所在元素的上一个兄弟div.
        });

prevAll(expr) 返回当前元素前面的所有兄弟元素.
在这里插入图片描述

$(function(){
            $("#bnt1").click(function(){
              $(".one").prevAll("div").css("background-color","blue");
            });
            //prevAll()说明:
            //第一步:找到所有的div.
            //第二步:在找到的所有div中筛选出是.one所在元素的上面所有兄弟div.
        });

prevUntil(expr|ele|,fil) 返回当前元素到指定匹配的元素为止的前面元素.
在这里插入图片描述

$(function(){
            $("#bnt1").click(function(){
              $("span").prevUntil("#tow").css("background-color","blue");
            });
            //prevUntil()说明:
            //span往前到#two之间的所有兄弟元素,不包括span和#tow.
        });

siblings(exp) 返回所有兄弟元素.

$(function(){
            $("#bnt1").click(function(){
              $("div").siblings().css("background-color","blue");
            });
        });

add() 把add匹配的选择器的元素添加到当前JQuery对象中.

$(function(){
            $("#bnt1").click(function(){
              $("span").add("#tow").add("#one").css("background-color","blue");
            });
        });

??8.jQuery属性操作

html() 它可以设置和获取起始标签和结束标签中的内容,与dom属性innerHTML类似.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
       alert($("div").html());//获取
       $("div").html("我是标题");//设置
    });
    </script>
</head>
<body>
<div>我是div</div>
</body>
</html>

text() 它可以设置和获取起始标签和结束标签中的文本,与dom属性innerText类似.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
       alert($("div").text());//获取
      $("div").text("我是标题");//设置
    });
    </script>
</head>
<body>
<div>我是div<span>123</span></div>
</body>
</html>

val() 它可以设置和获取表单项的value属性值,与dom属性value一样.
还可以同时设置多个表单项的值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
       $("button").click(function(){
           alert($("#username").val());//获取
           $("#username").val("我是标题");//设置
       });
    });
    </script>
</head>
<body>
<div>我是div<span>123</span></div>
<input type="text" name="username" id="username" value="123"/>
<button>操作输入框</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $(function() {
            $(":checkbox").val(["checkbox3","checkbox2"]);
            $(":radio").val(["radio2"]);
            $(":radio,:checkbox,#multiple").val(["radio1","checkbox1","mul1"]);
        });
    });
    </script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox1"/>c1
<input type="checkbox" name="checkbox" value="checkbox2"/>c2
<input type="checkbox" name="checkbox" value="checkbox3"/>c2

<input type="radio" name="radio" value="radio1"/>r1
<input type="radio" name="radio" value="radio2"/>r2

<select id="multiple" multiple="multiple" size="3">
    <option value="multiple1">m1</option>
    <option value="multiple2">m2</option>
    <option value="multiple3">m3</option>
</select>
</body>
</html>

attr() 可以设置和获取属性的值,不推荐操作checked,readOnly,selected,disabled等等.
还可以操作非标准的属性.比如自定义属性:abc,bbj.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
           alert($(":checkbox:first").attr("name"));//获取
           $(":checkbox:first").attr("name","abc");//设置
    });
    </script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox1"/>c1
<input type="checkbox" name="checkbox" value="checkbox2"/>c2
</body>
</html>

$(function() {
           alert($(":checkbox").attr("checked"));
    });

$(function() {
        $(":checkbox:first").attr("abc","abcValue");
        alert($(":checkbox:first").attr("abc"));
    });

prop() 可以设置和获取属性的值,只推荐操作checked,readOnly,selected,disabled等等.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $(function() {
            alert($(":checkbox").prop("checked"));//获取
        });
    });
    </script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox1" checked="checked"/>c1
<input type="checkbox" name="checkbox" value="checkbox2"/>c2
</body>
</html>

$(function() {
        $(function() {
            alert($(":checkbox").prop("checked","false"));//设置
        });
    });

??9.DOM的增删改

内部插入:

appendTo()

例: a.appendTo(b) 把a插入到b所有的子元素末尾,成为最后一个子元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $("<h1>标题</h1>").appendTo("div");
    });
    </script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox1"/>c1
<input type="checkbox" name="checkbox" value="checkbox2"/>c2
<br/><br/>
<div>1234</div>
</body>
</html>

 $(function() {
        $("<h1>标题</h1>").appendTo($("div"));
    });

prependTo()

例: a.prependTo(b) 把a插入到b所有的子元素前面,成为第一个子元素.

$(function() {
        $("<h1>标题</h1>").prependTo("div");
    });

$(function() {
        $("<h1>标题</h1>").prependTo($("div"));
    });

外部插入:

insertAfter()

例: a.insertAfter(b) 得到ba

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $("<h1>标题</h1>").insertAfter("div");
    });
    </script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox1"/>c1
<input type="checkbox" name="checkbox" value="checkbox2"/>c2
<br/><br/>
<div>1234</div>
</body>
</html>

 $(function() {
        $("<h1>标题</h1>").insertAfter($("div"));
    });

insertBefore()

例: a.insertBefore(b) 得到ab

$(function() {
        $("<h1>标题</h1>").insertBefore("div");
    });

$(function() {
        $("<h1>标题</h1>").insertBefore($("div"));
    });

替换:

replaceWith()

例: a.replaceWith(b) 用b替换掉a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $("div").replaceWith("<h1>标题</h1>");
    });
    </script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox1"/>c1
<input type="checkbox" name="checkbox" value="checkbox2"/>c2
<br/><br/>
<div>1234</div>
</body>
</html>

replaceAll()

例: a.replaceAll(b) 用a替换掉所有b

 $(function() {
        $("<h1>标题</h1>").replaceAll("div");
    });

$(function() {
        $("<h1>标题</h1>").replaceAll($("div"));
    });

删除:

remove()

例: a.remove() 删除a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $("div").remove();
    });
    </script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox1"/>c1
<input type="checkbox" name="checkbox" value="checkbox2"/>c2
<br/><br/>
<div>1234</div>
<div>1234</div>
</body>
</html>

empty()

例: a.empty() 清空a标签里的文本内容

$(function() {
        $("div").empty();
    });

??10.CSS样式操作

addClass() 添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width  : 100px;
            height : 260px;
        }
        div.whiteborder{
            border: 2px white solid;
        }
        div.redDiv{
            background-color : red;
        }
        div.blueBorder{
            border : 5px blue solid;
        }
    </style>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $div = $("div:first");
            $("#btn01").click(function(){
                $div.addClass("redDiv")
            });
        });
    </script>
</head>
<body>
<table align="center">
    <tr>
        <td>
            <div class="border">
            </div>
        </td>
<td>
            <div class="btn">
                <input type="button" value="addClass()" id = "btn01"/>
                <input type="button" value="removeClass()" id = "btn02"/>
                <input type="button" value="toggleClass()" id = "btn03"/>
                <input type="button" value="offset()" id = "btn04"/>
            </div>
</td>
</tr>
</table>
</body>
</html>

removeClass() 删除样式

$(function(){
            var $div = $("div:first");
            $("#btn01").click(function(){
                $div.addClass("redDiv blueBorder")
            });
            $("#btn02").click(function(){
                $div.removeClass("redDiv blueBorder")
            });
        });

toggleClass() 有就删除,没有就添加样式

  $(function() {
            var $div = $("div:first");
            $("#btn01").click(function () {
                $div.addClass("redDiv blueBorder")
            });
            $("#btn02").click(function () {
                $div.removeClass("redDiv blueBorder")
            });
            $("#btn03").click(function () {
                $div.toggleClass("redDiv")
            });
        });

offset() 获取和设置元素的坐标

$("#btn04").click(function () {
                var offset = $div.offset();
                console.log(offset);
            });

 $("#btn04").click(function () {
                var offset = $div.offset();
                $div.offset({
                    top:100,
                    left:50
                });
            });

??11.jQuery动画

基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏

toggle() 可见就隐藏,不可见就显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <style type="text/css">
       td{
            width  : 180px;
            height : 10px;
            border : 1px solid black;
        }
       table{
           width : 180px;
           height : 10px;
           border : 1px solid black;
       }
       div{
           width : 200px;
           height : 150px;
           border : 2px solid;
           background-color : #2f00ff;
           margin : auto;
           text-align : center;
       }
    </style>
    <script type="text/javascript">
        $(function() {
            $("#btn1").click(function(){
               $("#div1").show(2000,function(){
                   alert("show()动画完成");
               });
            });
            $("#btn2").click(function(){
                $("#div1").hide(1000,function(){
                    alert("hide()动画完成");
                });
            });
            $("#btn3").click(function(){
                $("#div1").toggle(1000,function(){
                    alert("toggle()动画完成");
                });
            });
        });
    </script>
</head>
<body>
<table style="..." cellspacing = "0" >
    <tr>
        <td><button id="btn1">显示show()</button></td>
    </tr>
    <tr>
        <td><button id="btn2">隐藏hide()</button></td>
    </tr>
    <tr>
        <td><button id="btn3">显示/隐藏切换 toggle()</button></td>
    </tr>
</table>
<div id="div1" style="...">
           123456789
</div>
</body>
</html>

注意:以上方法第一个参数是动画执行的时长,以毫秒为单位,第二个参数是动画的回调函数.

淡入淡出动画

fadeIn() 淡入(慢慢可见)

fadeOut() 淡出(慢慢消失)

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值 0透明 1完全可见 0.5半透明

fadeToggle() 淡入/淡出切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <style type="text/css">
       td{
            width  : 180px;
            height : 10px;
            border : 1px solid black;
        }
       table{
           width : 180px;
           height : 10px;
           border : 1px solid black;
       }
       div{
           width : 200px;
           height : 150px;
           border : 2px solid;
           background-color : #2f00ff;
           margin : auto;
           text-align : center;
       }
    </style>
    <script type="text/javascript">
        $(function() {
          $("#btn4").click(function(){
                $("#div1").fadeIn(2000,function(){
                    alert("fadeIn()完成");
                });
            });
            $("#btn5").click(function(){
                $("#div1").fadeOut(2000,function(){
                    alert("fadeOut()完成");
                });
            });
            $("#btn6").click(function(){
                $("#div1").fadeTo(2000,0.5,function(){
                    alert("fadeTo()完成");
                });
            });
            $("#btn7").click(function(){
                $("#div1").fadeToggle(1000,function(){
                    alert("fadeToggle()完成");
                });
            });
        });
    </script>
</head>
<body>
<table style="..." cellspacing = "0" >
<tr>
        <td><button id="btn4">淡入 fadeIn()</button></td>
    </tr>
    <tr>
        <td><button id="btn5">淡出 fadeOut()</button></td>
    </tr>
    <tr>
        <td><button id="btn6">淡化到 fadeTo()</button></td>
    </tr>
    <tr>
        <td><button id="btn7">淡化切换 fadeToggle()</button></td>
    </tr>
</table>
<div id="div1" style="...">
           123456789
</div>
</body>
</html>

这段代码可以使画面连续的切换.

 var abc = function(){
                $("#div1").fadeToggle(2000,abc);
            }
              abc();

??12.jQuery事件操作

原生js和jQuery页面加载完成之后的区别

1.触发的时机
(1).jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行.
(2).原生js的页面加载完成之后,除了要等浏览器内核解析完标签创建好DOM对象,还要等标签显示时需要的内容加载完成.
2.出发的顺序
(1).jQuery页面加载完成之后先执行.
(2).原生js页面加载完成之后后执行.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        alert("jQuery页面加载完成之后");
    });
    window.onload = function(){
        alert("原生js的页面加载完成之后");
    }
    </script>
</head>
<body>
<button>按钮</button>
<iframe src="http://localhost:8000"></iframe>
<img src="http://localhost:8000/1.jpg" alt=""/>
</body>
</html>

3.执行的次数
(1).原生js的页面加载完成之后,只会执行最后一次的赋值函数.
(2).jQuery的页面加载完成之后是全部把注册的function函数,依次全部执行.

window.onload = function(){
            alert("原生js的页面加载完成之后1");
        }
        window.onload = function(){
            alert("原生js的页面加载完成之后2");
        }
        window.onload = function(){
            alert("原生js的页面加载完成之后3");
        }
        $(function(){
            alert("jQuery页面加载完成之后-1");
        });
        $(function(){
            alert("jQuery页面加载完成之后-2");
        });
        $(function(){
            alert("jQuery页面加载完成之后-3");
        });

jQuery中其他的事件处理方法

click() 可以绑定单击事件,以及触发单击事件.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
         $(function(){
            $("h5").click(function(){
               alert("绑定");
            });
            $("button").click(function(){
               $("h5").click();//触发
            });
         });
    </script>
</head>
<body>
<div id="panel">
    <h5 class="head">123</h5>
    <div class="content">
        123456
    </div>
    <button>按钮</button>
</div>
</body>
</html>

mouseover() 鼠标移入事件.
mouseout() 鼠标移出事件.

 $(function(){
            $("h5").mouseover(function(){
              console.log("进来了");
            });
             $("h5").mouseout(function(){
                 console.log("出去了");
             });
         });

bind() 可以给元素一次性绑定一个或多个事件.

  $(function() {
             $("h5").bind("click mouseover mouseout", function () {
                 console.log("这是bind绑定的事件");
             });
         });

one() 使用上跟bind()一样,但绑定的事件只会响应一次.

     $(function() {
             $("h5").one("click mouseover mouseout", function () {
                 console.log("这是bind绑定的事件");
             });
         });

unbind() 跟bind()方法相反的操作,解除事件的绑定.

 $(function() {
            $("h5").bind("click", function () {
                console.log("这是bind绑定的事件");
            });
            $("h5").unbind("click");
        });

live() 也是用来绑定事件,可以用来绑定选择器匹配的所有元素的事件,哪怕这个元素是后面动态创建出来的也有效.

$(function() {
          $("h5").live("click",function(){
             alert("live方法绑定");
          });
          $('<h5 class="head">123</h5>').appendTo($("#panel"));
        });

💙注意:.live()方法在jQuery1.7起,便不再使用,到1.9就已经删除,也就是说,如果您的jQuery在1.9以上,就看不到效果,我们明白这个意思即可.

事件的冒泡

事件冒泡:父子元素同时监听同一个事件,当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin : 0;
            padding : 0;
        }
        body{
            font-size : 13px;
            line-height : 130%;
            padding : 60px;
        }
        #concent{
            width : 220px;
            border : 1px solid blue;
            background : #96E555;
        }
        span{
            width : 200px;
            margin : 10px;
            background : #666666;
            cursor : pointer;
            color : white;
            display : block;
        }
        p{
            width : 200px;
            background : #888;
            color : white;
            height : 16px;
        }
    </style>
    <script type="text/javascript" src="../jq/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
          $("#content").click(function(){
             alert("我是div");
          });
            $("span").click(function(){
                alert("我是span");
            });
        });
    </script>
</head>
<body>
    <div id="content">
        外层div元素
        <span>内层span元素</span>
        外层div元素
    </div>
    <div id="msg"></div>
    <br><br>
    <a href="http://www.baidu.com">www.baidu.com</a>
</body>
</html>

阻止事件冒泡: 在事件函数体内,return false;可以阻止事件的冒泡传递.

 $(function() {
          $("#content").click(function(){
             alert("我是div");
          });
            $("span").click(function(){
                alert("我是span");
                return false;
            });
        });

javaScript事件对象

事件对象:是封装有触发的事件信息的一个javaScript对象.
获取javascript事件对象:在给元素绑定事件的时候,在事件的function()参数列表中添加一个参数,这个参数名,我们习惯取名为event,这个event就是javaScript传递参数事件处理函数的事件对象.`

 //1.原生js获取事件对象
        window.onload = function(){
             document.getElementById("areaDiv").onclick = function(event){
                 console.log(event);
             }
        }
        //2.jQuery获取事件对象
        $(function() {
          $("#areaDiv").click(function(event){
              console.log(event);
          });
          //3.使用bind同时对多个事件绑定同一个函数
            $("#areaDiv").bind("mouseover mouseout",function(event){
               if(event.type == "mouseover"){
                   console.log("鼠标移入");
               } else if(event.type == "mouseout"){
                   console.log("鼠标移出");
               }
            });
        });