jQuery由美国人John Resig于2006年创建,jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事
jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互
jQuery 出现的目的是加快前端人员的开发速度,可以非常方便的调用和使用它,从而提高开发效率
jQuery优点
注:jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率
官网地址
文档工具站
引入jquery.js
使用即可
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<script>
// 方式一
$(document).ready(function () {
// ... 页面DOM元素加载完成的入口
})
// 方式二
$(function () {
// ...
})
script>
<script>
jQuery(function () {
alert(1)
})
$(function () {
alert(2)
})
script>
$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $
$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法
用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象
jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)
注:
因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用原生js的方法
方式一:jQuery对象是一个类似数组(伪数组)的对象,可以通过**[index]**的方法得到相应的DOM对象
<div id="box">div>
<script>
$(function () {
let $box = $("#box") // jQuery对象
// console.log($box)
// jQuery对象转DOM对象
let box = $box[0]
box.style.backgroundColor = "orange"
})
script>
方式二:通过**get(index)**方法也可以得到相应的DOM对象
<div id="box">div>
<script>
$(function () {
let $box = $("#box") // jQuery对象
// jQuery对象转DOM对象
let box = $box.get(0)
box.innerHTML = "我是div"
})
script>
<h2>金风玉露一相逢 便胜却人间无数h2>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<script>
$(function () {
// 链式操作:对一个对象进行多重操作,并将操作结果返回给该对象
$("h2").css("background-color", "skyblue").css("color", "white").css("padding", "20px")
})
script>
jQuery选择器类似于CSS选择器,用来选取网页中的元素
名称 | 示例 | 说明 |
---|---|---|
ID选择器 | $(“#id”) | 获取指定ID的元素 |
类 | $(“.class”) | 获取相同的类名的元素 |
标签选择器 | $(“div”) | 获取同一类标签的元素 |
全选择器 | $(“*”) | 获取所有元素 |
并集选择器 | $(“p,div,a”) | 选取多个元素 |
交集选择器 | $(“li.active”) | 交集元素 |
<div id="box">博学之 审问之 慎思之 明辨之 笃行之div>
<p class="content">世界上那些最容易的事情中 不在能知 乃在能行 知行合一p>
<div>div>
<script>
// 基本选择器
$(function () {
$("#box").css('background-color', 'salmon')
$(".content").css('font-size', '22px')
$("div").css("margin-top", "15px")
})
script>
名称 | 示例 | 说明 |
---|---|---|
后代选择器 | $(“ul li”) | 用来获取元素的后代元素 |
子代选择器 | $(“ul>li”) | 用来获取元素的子元素 |
相邻兄弟选择器 | $(“ul>li:first-of-type+li”) | 用来选取紧邻目标元素的下一个元素 |
通用兄弟选择器 | $(“ul>li:first-of-type~li”) | 用来选取目标元素之后的所有同辈元素 |
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
<script>
$(function () {
$("ul>li").css("font-size", "20px")
$("ul>li:eq(0)+li").css('background-color', 'skyblue')
$("ul>li:eq(2)~li").css('background-color', 'orange')
})
script>
名称 | 示例 | 说明 |
---|---|---|
:first | $(“li:first”) | 获取第一个li元素 |
:last | $(“li:last”) | 获取最后一个li元素 |
:eq(index) | $(“li:eq(1)”) | 获取索引号为1的li元素,索引号从0开始 |
:odd | $(“li:odd”) | 获取索引号为奇数的元素 |
:even | $(“li:even”) | 获取索引号为偶数的元素 |
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
<script>
$(function () {
$("ul li:first").css('background-color', 'green')
$("ul li:eq(2)").css('background-color', 'blue')
$("ul li:odd").css('background-color', 'yellow')
})
script>
名称 | 示例 | 说明 |
---|---|---|
parent() | $(“li”).parent() | 查找li的父级 |
parents() | $(“li”).parents() | 查找li的祖先元素 |
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),子代选择器 |
find(selector) | $(“ul”).find(“li”) | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“.three”).siblings(“li”) | 查找兄弟节点,不包括自己本身 |
nextAll([expr]) | $(“.second”).nextAll() | 查找当前元素之后所有的同辈元素 |
prevAll([expr]) | $(“.second”).prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $(“div”).hasClass(“active”) | 检查当前元素是否含有某个特定的类,如果有返回true,反之为false |
eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”) |
注:当遇到一些特殊符号跟文档结构有冲突的时候要进行转义,转义使用**\**
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代
给匹配到的所有元素进行循环遍历,执行相应的方法,而我们不用再进行循环,简化操作,方便调用
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<script>
$(function () {
$("ul>li").css("background-color", "orange")
})
script>
链式编程是为了节省代码量,使代码看起来更优雅
<button>按钮button>
<button class="active">按钮button>
<button>按钮button>
<button>按钮button>
<button>按钮button>
<button>按钮button>
<script>
$(function () {
$("button").click(function () {
// 当前元素添加样式 其他兄弟移除样式 隐式迭代
$(this).addClass("active").siblings("button").removeClass("active")
})
})
script>
注:使用链式编程一定注意是哪个对象执行样式
jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式
参数如果只写属性名,则是返回属性值
<div>div>
<script>
console.log($("div").css("width")) // 160px
script>
参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
<div>div>
<script>
$("div").css("width", "260px")
script>
参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
<div>div>
<script>
$("div").css({
width: 260,
"height": 260,
"borderRadius": 15,
})
script>
作用等同于以前的 classList,可以操作类样式
添加类
<script>
$("div").click(function () {
$(this).addClass('active')
})
script>
移除类
<script>
$("div").click(function () {
$(this).removeClass('active')
})
script>
切换类
<script>
$("div").click(function () {
$(this).toggleClass('active')
})
script>
注:操作类里面的参数不需要加点
类操作与className区别
Query 封装了很多动画效果,最为常见的如下:
显示隐藏
滑动
淡入淡出
自定义动画
具体语法:show([speed,[easing],[fn]])
隐藏具体语法:hide([speed,[easing],[fn]])
,参数同显示参数一致!
切换具体语法:toggle([speed,[easing],[fn]])
,参数同显示参数一致!
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").show()
})
$("button").eq(1).click(function () {
$("div").hide("fast", "linear", function () {
console.log(1)
})
})
$("button").eq(2).click(function () {
$("div").toggle()
})
});
script>
注:平时使用一般不带参数,直接显示隐藏即可
详见jQuery文档
具体语法:slideDown([speed,[easing],[fn]])
上滑具体语法:slideUp([speed,[easing],[fn]])
,参数同下滑参数一致!
滑动切换具体语法:slideToggle([speed,[easing],[fn]])
,参数同下滑参数一致!
<script>
$(function () {
$("button").eq(0).click(function () {
// 下拉滑动
$("div").slideDown()
})
$("button").eq(1).click(function () {
// 上拉滑动
$("div").slideUp(2000, "linear", function () {
console.log(1)
})
})
$("button").eq(2).click(function () {
$("div").slideToggle()
})
});
script>
具体语法:hover([over,]out)
<script>
$(".nav li").hover(function () {
$(this).children("ul").slideDown()
}, function () {
$(this).children("ul").slideUp()
})
$(".nav li").hover(function () {
$(this).children("ul").slideToggle()
})
script>
动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行
停止排队:stop()
<script>
$(".nav li").hover(function () {
$(this).children("ul").stop().slideToggle()
})
script>
具体语法:fadeIn([speed,[easing],[fn]])
淡出具体语法:fadeOut([speed,[easing],[fn]])
,参数同淡入参数一致!
淡入淡出切换具体语法:slideToggle([speed,[easing],[fn]])
,参数同淡入参数一致!
<script>
$(function () {
$("button").eq(0).click(() => {
$("div").fadeIn()
})
$("button").eq(1).click(() => {
$("div").fadeOut(1500, "linear", () => {
console.log(1)
})
})
$("button").eq(2).click(() => {
$("div").fadeToggle()
})
$("button").eq(3).click(() => {
$("div").fadeTo("fast", 0.6)
})
});
script>
具体语法:animate(params,[speed],[easing],[fn])
<button>点我摇起来button>
<div>div>
<script>
$(function () {
$("button").click(function () {
$("div").animate({
width: 260,
top: 200,
opacity: 0.7
}, 1000)
})
})
script>
所谓元素固有属性就是元素本身自带的属性,比如 标签里面的 href属性、 标签里面的src属性、 标签里面的type属性等
获取属性:prop(''属性'')
设置属性:prop(''属性'', ''属性值'')
<img src="./images/7.jpeg" alt="picture">
<script>
$(function () {
console.log($("img").prop('src'))
$("img").prop("src", "./images/8.jpeg")
})
script>
用户自己可以给元素添加的属性,称为自定义属性。 比如给 li 标签添加 data-id=“1”
获取属性:attr(''属性'')
设置属性:attr(''属性'', ''属性值'')
<ul>
<li data-id="1">1li>
<li>2li>
ul>
<script>
$(function () {
console.log($("ul>li").eq(0).attr("data-id")) // 1
$("ul>li").eq(0).attr("data-id", "0")
})
script>
注:该种方式获取属性类似于类似于原生 getAttribute()、setAttribute()
data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除
获取数据:date(''name'')
设置数据:data(''name'',''value'')
<ul>
<li data-id="1">1li>
<li>2li>
ul>
<div>8848div>
<script>
$(function () {
$("div").data("uname", "jack")
console.log($("div").data("uname")) // jack
console.log($("ul>li").eq(0).data("id")) // 1
})
script>
注:该方法还可以读取 HTML5 自定义属性 data-id,获取时不需要写data-前缀,并且返回的是数字型!
等同于原生innerHTML
获取元素内容:html()
设置元素内容:html(''内容'')
<div class="box">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
div>
<script>
console.log($((".box")).html())
$((".box")).html(`
- 1
- 2
- 3
`)
script>
普通元素文本内容 text()
等同于原生innerText
获取元素文本内容:text()
设置元素文本内容:text("文本内容")
<div class="content">开源 协作 分享 创新div>
<script>
console.log($(".content").text()) // 开源 协作 分享 创新
$(".content").text("人间清醒")
script>
等同于原生value
获取表单的值:val()
设置表单的值:val("内容")
<input type="text" name="desc" value="好好学习">
<script>
console.log($("input:text").val()) // 好好学习
$("input:text").val("天天向上")
script>
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历
方式一:
具体语法:$("div").each(function (index, domEle) { })
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
<script>
$(function () {
// each 遍历元素
let arr = ['purple', 'pink', 'skyblue', 'salmon', 'orange']
let sum = 0
$("ul>li").each(function (i, ele) {
// console.log(i)
// console.log(ele)
$(ele).css("backgroundColor", arr[i])
sum += parseInt($(ele).text())
})
console.log(sum)
})
script>
方式二:
具体语法:$.each(object,function (index, element) { })
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
<script>
$.each($("ul>li"), function (i, item) {
console.log(i)
console.log(item)
})
$.each({ uname: "小昭", age: 22, email: "[email protected]" }, function (i, ele) {
console.log(i)
console.log(ele)
})
script>
具体语法:$("")
,动态创建一个div标签
具体语法:element.append(''元素内容'')
,把内容放入匹配元素内部最后面,类似原生 appendChild
具体语法:element.prepend(''元素内容'')
,把内容放入匹配元素内部最前面
<div class="box">
<div class="item">1div>
div>
<script>
// 创建元素
let div = $("我是jquery创建的div")
// $(".box").append(div)
$(".box").prepend(div)
script>
具体语法:element.after(''元素内容'')
,把内容放入目标元素后面
具体语法:element.before(''元素内容'')
,把内容放入目标元素前面
<div class="box">
<div class="item">1div>
div>
<script>
// 创建元素
let div = $("我是jquery创建的div")
// $(".box").before(div)
$(".box").after(div)
script>
具体语法:element.remove()
,删除匹配的元素(本身)
具体语法:element.empty()
,删除匹配的元素集合中所有的子节点
具体语法:element.html()
,清空匹配的元素内容
<div class="box">
<div class="item">1div>
<div class="item">2div>
div>
<script>
let div = $("jquery创建的div")
$(".box").append(div)
$(".box .item").eq(0).remove()
// $(".box").empty()
$(".box").html("1 ")
script>
语法 | 说明 |
---|---|
width()/height() | 获取匹配元素的宽度和高度值,只计算 width / height |
innerWidth()/innerHeight() | 获取匹配元素的宽度和高度值,包含padding |
outerWidth()/outerHeight() | 获取匹配元素的宽度和高度值,包含padding、border |
outerWidth(true)/outerHeight(true) | 获取匹配元素的宽度和高度值,包含padding、border、margin |
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
padding: 10px;
border: 15px solid red;
margin: 10px;
}
style>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<div>div>
<script>
$(function () {
// width + height
console.log($("div").width()); // 100
// $("div").width(300);
// width + height + padding
console.log($("div").innerWidth()); // 120
// width + height + padding + border
console.log($("div").outerWidth()); // 150
// width + height + padding + border + margin
console.log($("div").outerWidth(true)); // 170
})
script>
位置主要有三个: offset()、position()、scrollTop()/scrollLeft()
<style>
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
width: 350px;
height: 350px;
background-color: salmon;
margin: 100px;
}
.son {
position: absolute;
width: 150px;
height: 150px;
background-color: sandybrown;
top: 10px;
left: 10px;
}
style>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<div class="father">
<div class="son">div>
div>
<script>
$(function () {
console.log($(".son").offset()); // {top: 110, left: 110}
console.log($(".son").offset().top); // 110
// 设置元素偏移
// $(".son").offset({
// top: 360,
// left: 360
// })
})
script>
<style>
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
width: 350px;
height: 350px;
background-color: salmon;
margin: 100px;
}
.son {
position: absolute;
width: 150px;
height: 150px;
background-color: sandybrown;
top: 10px;
left: 10px;
}
style>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<div class="father">
<div class="son">div>
div>
<script>
$(function () {
console.log($(".son").position()) // {top: 10, left: 10}
console.log($(".son").position().top) // 10
// 原生js获取
console.log(document.querySelector(".son").offsetTop) // 10
})
script>
注:该方法只能获取偏移,不能设置偏移(只读),等同于原生js的offsetTop/offsetLeft
<div class="back">回顶部div>
<div class="container">div>
<script>
$(function () {
$(window).scrollTop(350)
// console.log($(".container").offset())
let boxTop = $(".container").offset().top
$(window).scroll(function () {
// console.log($(document).scrollTop())
if ($(window).scrollTop() >= boxTop) {
$(".back").fadeIn()
} else {
$(".back").fadeOut()
}
})
})
// 原生js
// window.addEventListener('scroll', () => {
// window.scrollTo(0, 200)
// console.log(document.documentElement.scrollTop)
// })
script>
scrollLeft/scrollTop
具体语法:element.事件(function(){})
<div>div>
<script>
$(function () {
$("div").click(function () {
$(this).css("backgroundColor", "orange")
})
})
script>
其他事件和原生js基本一致!
具体语法:element.on(events,[selector],fn)
优点一:可以绑定多个事件,多个处理事件处理程序
<div>div>
<script>
$("div").on({
mouseenter: function () {
$(this).css("backgroundColor", "blue")
},
mouseleave: function () {
$(this).css("backgroundColor", "yellow")
}
})
script>
优点二:可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
<script>
$(function () {
// 事件委托 子元素的事件冒泡 冒到了父元素ul上
$("ul").on("click", "li", function (e) {
console.log("你点击了第" + e.target.innerText + "个li")
})
})
script>
注:在此之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委派,最新版本推荐使用on替代
优点三:动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件
<div class="box">div>
<script>
$(function () {
// 该种方式无法给未来动态创建的元素绑定事件
// $(".box .item").click(function () {
// alert(1)
// })
// 给未来动态创建的元素绑定事件 Yes
$(".box").on("click", "div", function () {
alert(1)
})
let div = $("<div class='item'>divdiv>")
$(".box").append(div)
})
off() 方法可以移除通过 on() 方法添加的事件处理程序
解绑该元素全部事件:$("div").off()
解绑该元素指定事件:$("div").off("事件名称")
解绑该元素事件委托:$("ul").off("事件名称", "子元素")
<div>div>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
<script>
$(function () {
$("div").on({
mouseenter: () => {
$("div").css("background-color", "red")
},
mouseleave: () => {
$("div").css("background-color", "green")
}
})
// 事件解绑 off
// $("div").off() // 解绑div身上所有事件处理程序
$("div").off("mouseenter") // 只解绑div身上鼠标经过事件处理程序
// 绑定事件 事件委托 ul
$("ul").on("click", "li", function (e) {
console.log(e.target.innerText)
})
// 解绑 ul 事件委托
$("ul").off("click", "li")
// one() 只能触发事件一次
$("ul").one("click", "li", function (e) {
console.log(e.target.innerText)
})
})
script>
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发
<div>div>
<script>
$(function () {
$("div").on("click", () => {
console.log(1)
})
// 元素名.事件
// $("div").click()
// 元素.trigger("事件名称")
// $("div").trigger("click")
// 元素.triggerHandler("事件名称") 注:该种方式不会触发元素默认行为
$("div").triggerHandler("click")
})
script>
事件被触发,就会有事件对象的产生
具体语法:element.on(events,[selector],function(event) {})
阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡: event.stopPropagation()
<a href="https://www.hua.com">点我送礼a>
<script>
$(function () {
$("a").on("click", (e) => {
// return false
e.preventDefault()
})
})
script>
如果想要把某个对象拷贝(合并) 给另外一个对象使用,此时可以使用 $.extend() 方法
具体语法:$.extend([deep], target, object1, [objectN])
<script>
let obj = {
uname: "小白",
age: 22,
eamil: "[email protected]",
hobbies: ["code", "girl", "swim"]
}
let o = {}
$.extend(true, o, obj)
o.hobbies[0] = "basketball"
console.log(o)
console.log(obj)
script>
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成
注:这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件
jQuery 插件使用步骤: