1. jQuery 选择器
1.1 jQuery 基础选择器
原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。
1.2 jQuery 层级选择器
1.3 隐式迭代(重要)
遍历内部DOM元素(伪数组形式存储) 的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而我们再进行循环，简化我们的操作，
方便我们调用。
jQuery设置样式
$('div').css('属性','值')
<body>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1. 获取四个div元素
console.log($('div'));
// 2. 给四个div设置背景颜色为粉色，jQuery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把所有匹配的所有元素内部进行遍历循环，给每个元素添加css这个方法
$("ul li").css("color","red");
</script>
</body>
1.4 jQuery 筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
$(function(){
$("ol li:first").css("color","red"); // 获取第一个li元素
$("ol li:eq(2)").css("color","blue"); // 获取索引号为2的元素
$("ol li:last").css("color","blue"); // 获取最后一个元素
$("ol li:odd").css("color","blue"); // 获取奇数元素
$("ol li:even").css("color","pink"); // 获取偶数元素
})
</script>
</body>
</html>
1.5 jQuery 筛选方法(重点)
<script>
// 注意一下都是方法，带括号
$(function(){
// 1. 父 parent() 返回的是最近一级的父级元素
console.log($(".son".parent()));
// 2. 子
// (1)亲儿子 children() 类似子代选择器 ul>li
$(".nav").children("p").css("color","red");
// (2)可以选里面所有的孩子，包括儿子和孙子 find()类似于后代选择器
$(".nav").find("p").css("color","red");
})
</script>
1.6 jQuery 里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其与兄弟清除样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function(){
// 1. 隐式迭代，给所有的按钮都绑定了点击事件
$("button").click(function(){
// 2. 当前元素变化背景颜色
$(this).css("background","pink");
// 3. 其余兄弟去掉背景色，隐式迭代
$(this).siblings("button").css("background","");
})
})
</script>
</body>
</html>
案例：
2. jQuery 样式操作
2.1 操作 css 方法
jQuery可以使用CSS方法来修改简单元素样式；也可以操作类，修改多个样式。
1. 参数只写属性名，则是返回属性值
$(this).css("color");
2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(thsi).css("color","red");
3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。
$(this).css({"color":"whilte","font-size":"20px"});
<body>
<script>
// 操作样式之css方法
$(function(){
console.log($("div").css("width"));
// $("div").css("width","300px");
// $("div").css("width",300);
// $("div").css(height,"300px"); 属性名一定要加引号
$("div").css({
width:400,
heigth:400,
backgroundColor:"red"
// 如果是复合属性必须采用驼峰命名法，如果值不是数字，则需要加引号
})
})
</script>
<div>11</div>
</body>
2.2 设置类样式方法
作用同于以前的classList，可以操作类样式，注意操作里面的参数不要加点。
1. 添加类
$("div").addClass("current");
2. 移除类
$("div").removeClass("current");
3. 切换类
$("div").toggleClass("current");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.current{
width: 60px;
background-color: blue;
}
.current1{
width: 60px;
background-color: rgb(255, 145, 0);
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="current">111</div>
<script>
$(function(){
// 1. 添加类 addClass()
// $("div").click(function(){
// $(this).addClass("current");
// });
// 2. 删除类 removeClass()
// $("div").click(function(){
// $(this).removeClass("current");
// });
// 3. 切换类 toggleClass()
$("div").click(function(){
$(this).toggleClass("current1");
});
})
</script>
</body>
</html>
2.3 类操作与className区别
原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原来的类名。
// 1. 添加类 addClass()
$("div").click(function(){
$(this).addClass("current1"); // 相当于追加类名，不影响以前的类名
});
3. jQuery 效果
jQuery给我们封装了很多动画效果，最为常见的如下：
3.1 显示隐藏效果
hide() 和 toggle()
1. 隐藏语法规范
hide([speed], [easing], [fn])
2. 切换语法规范
toggle([speed], [easing], [fn])
参数：
(1) 参数都可以省略，无动画直接显示。
(2) speed：三种预定速度之一的字符串("show", "normal", or "fast") 或表示动画时长的毫秒数(如：1000)。
(3) easing：(Optional)用来指定切换效果，默认是“awing”, 可用参数“linear”。
(4) fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.current{
width: 60px;
background-color: blue;
}
.current1{
width: 60px;
background-color: rgb(255, 145, 0);
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<button>show</button>
<button>hide</button>
<button>toggle</button>
<div class="current">111</div>
<script>
$(function(){
// 显示
$('button').eq(0).click(function(){
$('div').show(1000,function(){
alert(1);
});
})
// 隐藏
$('button').eq(1).click(function(){
$('div').hide(1000,function(){
alert(2);
});
})
// 切换显示和隐藏
$('button').eq(2).click(function(){
$('div').toggle(1000,function(){
alert(3);
});
})
// 一般情况下，我们都不加参数直接显示隐藏就可以了
})
</script>
</body>
</html>
3.2 滑动效果
1. 上滑效果语法规范
slideUp([speed], [easing], [fn])
2. 滑动切换效果语法规范
slideToggle([speed], [easing], [fn])
参数：
(1) 参数都可以省略，无动画直接显示。
(2) speed：三种预定速度之一的字符串("show", "normal", or "fast") 或表示动画时长的毫秒数(如：1000)。
(3) easing：(Optional)用来指定切换效果，默认是“awing”, 可用参数“linear”。
(4) fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
3.3 事件切换
hover([over,]out)
(1) over：鼠标移到元素上要触发的函数( 相当于mouseenter )
(2) out：鼠标移出元素要触发的函数( 相当于mouseleave )
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav{
width: 600px;
background-color: blue;
}
li{
list-style-type: none;
float: left;
width: 50px;
border: 1px solid rebeccapurple;
}
.uu{
display: none;
padding: 0;
margin: 0;
}
.current1{
width: 60px;
background-color: rgb(255, 145, 0);
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<ul class="nav">
<li>111
<ul class="uu">
<li>58848</li>
<li>58848</li>
<li>58848</li>
<li>58848</li>
</ul>
</li>
<li>222
<ul class="uu">
<li>58848</li>
<li>58848</li>
<li>58848</li>
<li>58848</li>
</ul>
</li>
<li>333
<ul class="uu">
<li>58848</li>
<li>58848</li>
<li>58848</li>
<li>58848</li>
</ul>
</li>
<li>444
<ul class="uu">
<li>58848</li>
<li>58848</li>
<li>58848</li>
<li>58848</li>
</ul>
</li>
</ul>
<script>
// 鼠标经过
// $('.nav>li').mouseenter(function(){
// $(this).children('ul').slideDown(200);
// })
// // 鼠标离开
// $('.nav>li').mouseout(function(){
// $(this).children('ul').slideUp(200);
// })
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $('.nav>li').hover(function(){
// $(this).children('ul').slideDown(200);
// },function(){
// $(this).children('ul').slideUp(200);
// })
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$('.nav>li').hover(function(){
$(this).children('ul').slideToggle(200);
})
</script>
</body>
</html>
3.4 动画队列及其停止排队方法
1. 动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2. 停止排队
stop()
(1) stop() 方法用于停止动画或效果。
(2) 注意：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。
$('.nav>li').hover(function(){
// stop 方法必须写到动画的前面
$(this).children('ul').stop().slideToggle(200);
})
3.5 淡入淡出效果
1. 淡入效果语法规范
fadeIn([speed], [easing], [fn])
2. 淡入效果参数
fadeOut([speed], [easing], [fn])
3. 淡入淡出切换效果语法规范
fadeToggle([speed], [easing], [fn])
参数：
(1) 参数都可以省略，无动画直接显示。
(2) speed：三种预定速度之一的字符串("show", "normal", or "fast") 或表示动画时长的毫秒数(如：1000)。
(3) easing：(Optional)用来指定切换效果，默认是“awing”, 可用参数“linear”。
(4) fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
4. 渐进方式调整到指定的不透明度
fadeTo([[speed], opacity, [easing], [fn]])
效果参数：
(1) opacity：透明度必须写，取值0~1之间。
(2) speed：三种预定速度之一的字符串("show", "normal", or "fast") 或表示动画时长的毫秒数值(如：1000)必须写
(3) easing：(Optional) 用来指定切换效果，默认是"swing", 可用参数"linear"。
(4) fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
<script>
$('button').eq(0).click(function(){
// 淡入 fadeIn()
$(this).fadeIn(1000);
})
$('button').eq(1).click(function(){
// 淡出 fadeOut()
$(this).fadeOut(1000);
})
$('button').eq(2).click(function(){
// 淡入 淡出切换 fadeToggle()
$(this).fadeToggle(1000);
})
$('button').eq(4).click(function(){
// 淡入 fadeTo
$(this).fadeTo(1000,.5);
})
</script>
3.6 自定义动画 animate
1. 语法
animate(params, [speed], [easing], [fn])
2. 参数
(1) params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取
驼峰命名法borderLeft。其余参数都可以省略。
(2) speed：三种预订速度之一的字符串("slow", "nomal", or "fast")或表示动画时长的毫秒数值(如：1000)。
(3) easing：(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"。
(4) fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
<body>
<button>动起来</button>
<div></div>
<script>
$(function(){
$('button').click(function(){
$('div').animate({
left: 500,
top: 300,
opacity: .4,
width: 500
},500)
})
})
</script>
</body>
实例：
5. jQuery 属性操作
5.1 设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input> 元素里面的type。
1. 获取属性语法
prop("属性")
2. 设置属性语法
prop("属性"，”属性值“)
5.2 设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index=”1“。
1. 获取属性语法
attr("属性") // 类似原生 getAttribute()
2. 设置属性语法
attr("属性", "属性值") // 类似原生setAttribute()
该方法也可以获取H5自定义属性
5.3 数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
1. 附加数据语法
data("name", "value") // 向被选元素附加数据
2. 获取数据语法
data("name") // 向被选元素获取数据
同时，还可以读取HTML5自定义属性data-index, 得到的是数字型
<body>
<a href="wwww"></a>
<input type="text">
<div></div>
<span></span>
<script>
$(function(){
// 1. element.prop("属性名") 获取元素固有的属性值
console.log($('a').prop('href'));
$('a').prop('title', '我们都挺好');
$('input').change(function(){
console.log($(this).prop('checked'));
})
})
// console.log($('div').prop('index'));
// 2. 元素的自定义属性，我们通过attr()
$('div').attr('index',4);
console.log($('div').attr('index'));
console.log($('div').attr('data-index'));
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$('span').data('uname', 'andy');
console.log($('span').data('uname'));
// 这个方法获取data-index h5自定义属性，第一个不用写data- 而且返回的是数字型
$('div').data('index',5);
console.log($('div').data('index'));
</script>
</body>
6. jQuery 内容文本值
主要针对元素的内容还有表单的值操作。
1. 普通元素内容 html() ( 相当于原生innerHTML )
html() // 获取元素的内容
html("内容") // 设置元素的内容
2. 普通元素文本内容text() ( 相当于原生innerText )
text() // 获取元素的文本内容
text("文本内容") // 设置元素的文本内容
主要针对元素的内容还有表单的值操作。
3. 表单的值 val() ( 相当于原生value )
//表单的值 val() ( 相当于原生value )
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 1. 获取设置元素内容 html()
console.log($('div').html());
// $('div').html('123');
// 2. 获取设置元素文本内容 text()
console.log($('div').text());
$('div').text('123');
// 3. 获取设置表单值 val()
console.log($('input').val());
$('input').val('123');
</script>
</body>
6.1 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的工作。如果想要给同一元素做不同操作，就需要用到遍历。
语法1：
$("div").each(function (index, domEle) { xxx; } )
1. each() 方法遍历匹配到的每一个元素。主要用DOM处理。each 每一个
2. 里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jQuery对象
3. 所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)
<body>
<div>
<span>1</span>
</div>
<input type="text" value="请输入内容">
<script>
$(function(){
// $('div').css('color', 'red');
// 如果针对于同一类元素做不同操作，需要用到遍历元素(类似for,但是比for强大)
var sum = 0;
// 1. each() 方法遍历元素
var arr = ['red', 'green', 'blue'];
$('div').each(function(i, domEle){
// 回调函数第一个参数一定是索引号，可以自己指定索引号号名称
console.log(i);
// 回调函数第二个参数一定是dom元素对象
console.log(domEle);
// domEle.css('color'); dom对象没有css方法
$(domEle).css('color', arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
})
</script>
</body>
语法2：
$.each(object, function(index, element){xxx;})
1. $.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数：index是每个元素的索引号；element 遍历内容
<body>
<div>
<span>1</span>
</div>
<input type="text" value="请输入内容">
<script>
$(function(){
// $('div').css('color', 'red');
// 如果针对于同一类元素做不同操作，需要用到遍历元素(类似for,但是比for强大)
var sum = 0;
// 1. each() 方法遍历元素
var arr = ['red', 'green', 'blue'];
$('div').each(function(i, domEle){
// 回调函数第一个参数一定是索引号，可以自己指定索引号号名称
console.log(i);
// 回调函数第二个参数一定是dom元素对象
console.log(domEle);
// domEle.css('color'); dom对象没有css方法
$(domEle).css('color', arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍历元素，主要用于遍历数据，处理数据
$.each($('div'),function(i,ele){
console.log(i);
console.log(ele);
})
$.each({
name:'andy',
age:18
},function(i,ele){
console.log(i); // 输出的是name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
</body>
6.2 创建元素
语法：
$('<li></li>');
动态的创建了一个<li>
主要是遍历，创建，添加，删除元素操作。
6.3 添加元素
1. 内部添加
element.append('内容')
把内容放入匹配元素内部最后面，类似原生 appendChild。
element.prepend('内容')
把内容放入匹配元素内部最前面。
2. 外部添加
element.after('内容') // 把内容放入目标元素后面
element.before('内容') // 把内容放入目标元素前面
(1) 内部添加元素，生成之后，他们是父子关系。
(2) 外部添加元素，生成之后，他们是兄弟关系。
6.4 删除元素
element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('') // 清空匹配的元素内容
<body>
<div>
<span>1</span>
</div>
<input type="text" value="请输入内容">
<script>
$(function(){
// 1. 创建元素
var li = $('<li>我是后来创建的</li>');
// 2. 添加元素
// (1) 内部添加
// $('ul').append(li); 内部添加并且放到内容的最后面
$('ul').prepend(li); // 内部添加并且放到内容的最前面
// (2) 外部添加
var div = $('<div>我是后妈生的</div>');
// $('.test').after(div);
$('.test').before(div);
// 3. 删除元素
// $('ul').remove(); 可以删除匹配到的元素
// $('ul').empty(); 可以删除匹配的元素里面的子节点
$('ul').html(''); // 可以删除匹配的元素的子节点
})
</script>
</body>
7. jQuery事件
7.1 jQuery事件注册
7.2 jQuery事件处理
7.2.1 事件处理 on() 绑定事件
<body>
<div></div>
<ul>
<li>朱颜辞镜花辞树1</li>
<li>朱颜辞镜花辞树2</li>
<li>朱颜辞镜花辞树3</li>
<li>朱颜辞镜花辞树4</li>
<li>朱颜辞镜花辞树5</li>
</ul>
<ol></ol>
<script src="jQuery.js"></script>
<script>
$(function() {
// 事件处理on()
// $("div").on({
// mouseover: function() {
// $(this).css("background", "red");
// },
// click: function() {
// $(this).css("background", "black");
// }
// })
$("div").on("mouseover mouseout", function() {
$(this).toggleClass('cur');
});
// click 绑定的是在ul上的，但是触发的是ul里面的li
$("ul").on("click", "li", function() {
console.log($(this).html());
});
// 以前的方法创建的事件，不会给动态创建的元素绑定事件
// $("ol li").click(function() {
// console.log(1111);
// });
// on() 方法创建的事件可以给动态创建的元素绑定事件
$("ol").on("click", "li", function() {
console.log(12323);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
微博发布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微博发布</title>
<style>
div {
position: relative;
width: 400px;
height: auto;
margin: 100px auto;
border: 1px solid black;
}
textarea {
position: relative;
margin: 50px 50px;
width: 200px;
height: 200px;
size: 5;
}
button {
position: absolute;
top: 140px;
float: right;
}
ul {
text-align: center;
list-style: none;
width: 300px;
display: none;
}
li {
position: relative;
border-bottom: 1px solid red;
}
li a {
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>提交</button>
<ul>
</ul>
</div>
<script src="jQuery.js"></script>
<script>
$(function() {
$("button").on("click", function() {
if ($("textarea").val() != '') {
var li = $("<li><span>" + $("textarea").val() + "<span><a href='#'>删除</a></li>");
$("ul").prepend(li);
$("ul").slideDown(1000);
$("textarea").val("");
} else {
alert('请输入内容');
}
});
$("ul").on("click", "a", function() {
$(this).parents("li").slideUp(function() {
$(this).remove();
});
})
})
</script>
</body>
</html>
7.2.2 事件处理 off()解绑事件
7.2.3 自动触发事件tigger()
// 1. 自动触发事件
// $("div").click();
// 2. trigger()自动触发事件,会触发元素默认行为
// $("div").trigger("click");
// 3. triggerHandler(), 不会触发函数默认行为
$("div").triggerHandler("click");
7.3 jQuery事件对象
8. jQuery其他方法
8.1 jQuery拷贝对象
8.2 jQuery多库共存
8.3 jQuery插件
8.3.1 图片懒加载
9. jQuery尺寸，位置操作
9.1 jQuery尺寸
9.2 jQuery位置
扫一扫
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
