【前端基础】JQuery

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

文章目录

☀️1.jQuery的初体验

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="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><buttonid="btnd">SayHello</button></body></html>

注意:

💙(1).一定要引入

jQuery类库

,否则看不到效果.
💙(2).jQuery中的

是一个函数.
💙(3).使用jQuery

查询到标签对象

,然后使用

标签对象.click(function(){})

;

☀️2.jQuery核心函数

是jQuery的核心函数,能完成jQuery的很多功能,

$ ()

就是调用$这个函数.

核心函数

的四个作用:
(1).传入参数为

函数

时,在文档加载完成后执行这个函数.

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

(2).传入参数为

HTML字符串

时,根据这个字符串创建元素节点对象.

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

(3).传入参数为

选择器字符串

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="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对象

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){$(" <div>"+"        <span>div1</span>"+"        <span>div2</span>"+"    </div>").appendTo("body");var obj = document.getElementById("bt01");alert($(obj));});</script></head><body><buttonid="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提供的一系列功能函数

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){var $b =$("button");for(var i =0;i < $b.length; i++){alert($b[i]);}});</script></head><body><divid="test">very good</div><buttonid="bt01">按钮1</button><buttonid="bt02">按钮2</button><buttonid="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查找标签对象.
在这里插入图片描述

<!DOCTYPEhtml>
< lang="en">
<head><metacharset="UTF-8"><title>Title</title><styletype="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><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){$("#bnt1").click(function(){$("#one").css("background-color","#bbffaa");});});</script></head><body><inputtype="button"value="选择 id 为 one 的元素"id="bnt1"/><inputtype="button"value="选择 class 为 mini 的元素"id="bnt2"/><inputtype="button"value="选择 元素名是 div 的元素"id="bnt3"/><inputtype="button"value="选择 所有的元素"id="bnt4"/><br><divclass="one"id="one"><divclass="mini">class1</div></div><divclass="one"id="tow"title="test"><divclass="mini"title="other">class01</div><divclass="mini"title="test">class02</div></div><divclass="one"><divclass="mini">class2</div><divclass="mini">class2</div><divclass="mini">class2</div><divclass="mini"></div></div><divclass="one"><divclass="mini">class2</div><divclass="mini">class2</div><divclass="mini">class2</div><divclass="mini"title="test1">title</div></div><divstyle="..."class="none">style</div><divclass="hide">class3</div><div>
    包含....<inputtype="hide"size="8"></div><spanclass="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的元素.
在这里插入图片描述

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js">$(function(){$("#df").click(function(){$("tr:hidden").css("background-color","#bbffaa");});});</script></head><body><inputtype="button"value="123"id="df"/><table><trstyle="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类似.

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

text()

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

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

val()

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

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

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

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

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

attr()

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){alert($(":checkbox:first").attr("name"));//获取$(":checkbox:first").attr("name","abc");//设置});</script></head><body><inputtype="checkbox"name="checkbox"value="checkbox1"/>c1
<inputtype="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等等.

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

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

☀️9.DOM的增删改

内部插入:

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){$("<h1>标题</h1>").appendTo("div");});</script></head><body><inputtype="checkbox"name="checkbox"value="checkbox1"/>c1
<inputtype="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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){$("<h1>标题</h1>").insertAfter("div");});</script></head><body><inputtype="checkbox"name="checkbox"value="checkbox1"/>c1
<inputtype="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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){$("div").replaceWith("<h1>标题</h1>");});</script></head><body><inputtype="checkbox"name="checkbox"value="checkbox1"/>c1
<inputtype="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标签

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){$("div").remove();});</script></head><body><inputtype="checkbox"name="checkbox"value="checkbox1"/>c1
<inputtype="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()

添加样式

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><styletype="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><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){var $div =$("div:first");$("#btn01").click(function(){
                $div.addClass("redDiv")});});</script></head><body><tablealign="center"><tr><td><divclass="border"></div></td><td><divclass="btn"><inputtype="button"value="addClass()"id="btn01"/><inputtype="button"value="removeClass()"id="btn02"/><inputtype="button"value="toggleClass()"id="btn03"/><inputtype="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() 可见就隐藏,不可见就显示

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><styletype="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><scripttype="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><tablestyle="..."cellspacing="0"><tr><td><buttonid="btn1">显示show()</button></td></tr><tr><td><buttonid="btn2">隐藏hide()</button></td></tr><tr><td><buttonid="btn3">显示/隐藏切换 toggle()</button></td></tr></table><divid="div1"style="...">
           123456789
</div></body></html>

注意:

以上方法

第一个参数

是动画执行的时长,以毫秒为单位,

第二个参数

是动画的回调函数.

淡入淡出动画

fadeIn() 淡入(慢慢可见)
fadeOut() 淡出(慢慢消失)
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值 0透明 1完全可见 0.5半透明
fadeToggle() 淡入/淡出切换

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><styletype="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><scripttype="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><tablestyle="..."cellspacing="0"><tr><td><buttonid="btn4">淡入 fadeIn()</button></td></tr><tr><td><buttonid="btn5">淡出 fadeOut()</button></td></tr><tr><td><buttonid="btn6">淡化到 fadeTo()</button></td></tr><tr><td><buttonid="btn7">淡化切换 fadeToggle()</button></td></tr></table><divid="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页面加载完成之后后执行.

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){alert("jQuery页面加载完成之后");});
    window.onload=function(){alert("原生js的页面加载完成之后");}</script></head><body><button>按钮</button><iframesrc="http://localhost:8000"></iframe><imgsrc="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()

可以

绑定

单击事件,以及

触发

单击事件.

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){$("h5").click(function(){alert("绑定");});$("button").click(function(){$("h5").click();//触发});});</script></head><body><divid="panel"><h5class="head">123</h5><divclass="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方法绑定");
          });
          $('<h5class="head">123</h5>').appendTo($("#panel"));
        });

💙

注意:

.live()方法在jQuery1.7起,便不再使用,到1.9就已经删除,也就是说,

如果您的jQuery在1.9以上

,就看不到效果,我们明白这个意思即可.

事件的冒泡

事件冒泡:

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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><scripttype="text/javascript"src="../jq/jquery-3.6.1.min.js"></script><scripttype="text/javascript">$(function(){$("#content").click(function(){alert("我是div");});$("span").click(function(){alert("我是span");});});</script></head><body><divid="content">
        外层div元素
        <span>内层span元素</span>
        外层div元素
    </div><divid="msg"></div><br><br><ahref="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("鼠标移出");
               }
            });
        });

标签： jquery 前端 javascript

本文转载自: https://blog.csdn.net/qq_53798578/article/details/126649030
版权归原作者 懒羊羊asd 所有，如有侵权，请联系我们删除。

【前端基础】JQuery

文章目录

☀️1.jQuery的初体验

☀️2.jQuery核心函数

☀️3.jQuery对象和Dom对象区分

☀️4.jQuery对象和Dom对象使用区别

☀️5.Dom对象和jQuery对象互转

☀️6.jQuery选择器

☀️7.jQuery元素筛选

☀️8.jQuery属性操作

☀️9.DOM的增删改

内部插入:

外部插入:

替换:

删除:

☀️10.CSS样式操作

☀️11.jQuery动画

基本动画

淡入淡出动画

☀️12.jQuery事件操作

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

jQuery中其他的事件处理方法

事件的冒泡

javaScript事件对象

发表评论

“【前端基础】JQuery”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航