当前位置：首页 > news >正文

JQuery学习-1

news 2026/3/27 2:51:55

JQuery学习-1

一个快速的、小型的的JavaScript库，处理一些重复的代码以及帮助处理浏览器的兼容问题。同时，jQuery也是一个过时的库。

引入jQuery

下载网址：https://jquery.com/download/

版本选择：如果要兼容IE6\7\8版本则使用1，一般情况下使用3即可，相对方法多，性能较好。

在标签页使用引入可以需要单独一行，

基础使用

所有操作都在html的基础进行。$ 是jQuery中的核心函数，jQuery为我们提供了多个工具方法。jQuery中的所有功能都是通过$来进行的。

下面这段js中，helloworld会$ hello world先执行，这是因为$的核心函数相当document.addEventListener(“DOMContentLoaded”, function(){})

console.log($)$(function(){console.log('$hello world')})console.log('hello world')

选择器使用

将选择器字符串作为参数，jQuery会自动去网页中查找元素,类似于document.querySelectorAll()。

<button id="btn">点击我</button><script>$(function(){$('#btn').click(function(){alert("hello world")})})</script>

通过原生的方法获取的对象是和通过jQuery获取的方法对象是不一样的。jQuery为我们提供了很多方法，但是不能调用原生的对象。在命名方面为了区分他们，jQuery对象命名前面通常加符号。可以将html代码作为参数，根据html来创建元素。在添加对象这里，点击只能添加一次，符号。可以将html代码作为参数，根据html来创建元素。在添加对象这里，点击只能添加一次，符号。可以将html代码作为参数，根据html来创建元素。在添加对象这里，点击只能添加一次，h1对应的是同一个Dom元素实例，第一次append时已经插入到div中，后续再调用append知识把这个已存在的元素移动到目标未知，不会创建一个新元素。如果要实现添加，可以在append前新建一个元素。

<div></div><button id="btn">点击我</button>$(function(){varbtn1=document.getElementById('btn')alert(btn1)//[object HTMLButtonElement]var$btn2=$("btn")alert($btn2)//[object Object]// var $h1 = $("<h1>hello world</h1>")alert($h1)//[object Object]$btn2.click(function(){var$h1=$("<h1>hello world</h1>")$("div").append($h1)})})

jQuery对象使用

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="jquery-3.7.1.min.js"></script></head><body><buttonid="btn">添加</button><ul><li>111</li><li>222</li><li>333</li><li>444</li><li>444</li></ul><script>/** * 通过jQuery核心函数获取的对象就是jQuery对象 * 可以将其理解为DOmM对象的升级版，可以简化DOM对象 */$(function(){$("#btn").click(function(){var$li=$("li")console.log($li.length);// 取内容console.log($li[0].textContent);// 修改某一个内容$li[0].textContent="修改后的内容"// 遍历所有的li$li.each(function(index,item){console.log(index,item.textContent);})// 返回的是jQuery对象自己letresult=$li.text("你好")console.log(result);//修改cssresult.css("color","red")})})</script></body></html>

常用操作方法

addClass()

回调函数会为每个匹配的元素执行一次（你4个.box1，所以执行4次）；
回调函数参数：
- index：当前元素在匹配集合中的索引l （从 0 开始，0/1/2/3）;
- className：当前元素已有的类名字符串（初始是"box1"）;
回调函数返回值：要添加的类名（返回啥就加啥）;
·函数内 this：指向当前遍历的 DOM 元素（原生 DOM），$(this）转为jQuery 对象。

<!DOCTYPEhtml><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:100px;height:100px;background-color:pink;}.box2{border:10px solid red;}.box3{width:100px;height:100px;background-color:rgb(35,222,191);}</style><script src="jquery-3.7.1.min.js"></script></head><body><button id="btn">add</button><button id="remove_btn">remove</button><br><divclass="box1"></div><divclass="box1"></div><divclass="box1"></div><divclass="box1"></div></body><script>$(function(){$("#btn").click(function(){// 添加类名$(".box1").addClass(function(index,className){console.log(index,className)//这里会执行四次// 再回调函数中this表示的是当前元素,如果要转化的话，可以使用$(this)console.log(this);if(index%2===0){return"box2"}else{return"box3"}})})})</script></html>

removeClass()

这里可以移除匹配元素的指定类名和删除所有类名

$("#remove_btn").click(function(){$(".box1").removeClass("box2")})$("#remove_all").click(function(){$(".box1").removeClass()})

toggleClass()

如果元素有该类名则1一处，没有则添加，类似开关。

$("#toggle").click(function(){$(".box1").toggleClass("box3")})// 带参数控制$("#toggle").click(function(){// 当参数为true时，添加类名// 当参数为false时，移除类名$(".box1").toggleClass("box3",true)})

removeClass()

检查匹配的元素中是否有至少一个包含指定类名，返回布尔值（true/false）。

$("#has_class").click(function(){// 判断是否有某个类名// 返回的是一个布尔值console.log($(".box1").hasClass("box3"));})

jQuery对象复制

jQuery提供一个clone()的方法用来复制jQeury对象。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><buttonid="btn">复制</button><ulid="list"><li>刘备</li><li>关羽</li><li>张飞</li></ul><ulid="newList"><li>曹操</li></ul></body><scriptsrc="jquery-3.7.1.min.js"></script><script>$(function(){var$swk=$("#list li:nth-child(2)");var$newList=$("#newList");$("#btn").click(function(){$newList.append($swk.clone());})})</script></html>

添加容器

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="jquery-3.7.1.min.js"></script><style>#box1{width:300px;height:100px;background-color:pink;margin:0 auto;}#box2{width:200px;height:200px;background-color:red;margin:0 auto;}</style><script>$(function(){// unwarp() 方法可以移除元素的父元素// wrap() 方法可以包裹元素// wrapall() 方法可以包裹所有元素// append() 方法可以在元素的末尾添加内容// prepend() 方法可以在元素的开头添加内容// appendTo() 方法可以在元素的末尾添加内容$("#del").click(function(){$("#wei li").unwrap();// 这里一处了li的父元素ul，将其移除到div中})$("#add").click(function(){$("#caocao").wrap("<ul id = 'wei'>");// 这里一处了li的父元素ul，将其包裹在新的ul中})$("#addAll").click(function(){$("li").wrapAll("<div>");// 这里一处了li的父元素ul，将其包裹在新的div中})$("#append").click(function(){$("#box2").append("<div id = 'box1'></div>");// 这里一处了li的父元素ul，将其添加到div2中内容中})$("#prepend").click(function(){$("<div id = 'box1'></div>").prependTo("#box2");// 这里一处了li的父元素ul，将其添加到div2中内容中})$("#appendTo").click(function(){$("<div id = 'box1'></div>").appendTo("#box2");// 这里一处了li的父元素ul，将其添加到div2中内容中})})</script></head><body><buttonid="del">删除容器</button><buttonid="add">添加容器</button><buttonid="addAll">添加所有所有容器</button><buttonid="append">添加到div2中</button><buttonid="prepend">添加到开头到div2开头中</button><hr><div><ulid="wei"><liid="caocao">曹操</li></ul></div><ulid="shu"><li>刘备</li><li>关羽</li><li>张飞</li></ul><divid="box2"></div></body></html>