这篇博客详细介绍了jQuery的各种API，包括选择器、样式操作、效果、属性操作等内容。重点讲解了jQuery的选择器，如层级选择器、筛选选择器和筛选方法，以及链式编程的概念。同时，还探讨了样式操作，如设置CSS和类样式，以及显示、隐藏、滑动和淡入淡出效果。此外，还涵盖了属性操作、内容文本值、元素操作和尺寸位置的使用方法。
目录
#博学谷IT学习技术支持#
1、jQuery 选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获
取元素统一标准。
$(
“
选择器
”
) // 里面选择器直接写 CSS 选择器即可，但是要加引号
1.2 jQuery 层级选择器
jQuery 设置样式
$('div').css('属性', '值')
1.3 隐式迭代（重要）
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，
方便我们调用。
1.4 jQuery 筛选选择器
1.5 jQuery 筛选方法（重点）
重点记住： parent() children() find() siblings() eq()
1.6 jQuery 里面的排他思想
代码演示：
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
margin: 100px auto;
width: 500px;
height: 40px;
}
.box li {
float: left;
padding: 0 15px;
line-height: 40px;
background-color: rgba(0, 0, 0, .3);
cursor: default;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<script>
$(function () {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$('li').click(function () {
//自己的文字变色
$(this).css('color', 'red');
//其它兄弟的颜色不变
$(this).siblings('li').css('color', '');
// console.log($(this).siblings('li'));
})
})
</script>
</body>
案例：淘宝服饰精品案例
代码演示：
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
.box {
margin: 100px auto;
width: 270px;
height: 250px;
border: 1px solid pink;
}
.box .fl {
float: left;
border-right: 1px solid pink;
}
.box .fr {
position: relative;
float: left;
}
.box .fl a {
display: block;
padding: 0 10px;
line-height: 25px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
}
.box .fr img {
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="fl">
<ul>
<li style="background-color: pink;"><a href="#">登山鞋</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男靴</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
</div>
<div class="fr">
<img src="./image/images/登山鞋.jpg" alt="" style="display: block;">
<img src="./image/images/冬裙.jpg" alt="">
<img src="./image/images/毛衣.jpg" alt="">
<img src="./image/images/棉服.jpg" alt="">
<img src="./image/images/男包.jpg" alt="">
<img src="./image/images/男毛衣.jpg" alt="">
<img src="./image/images/男棉服.jpg" alt="">
<img src="./image/images/男靴.jpg" alt="">
<img src="./image/images/呢大衣.jpg" alt="">
<img src="./image/images/牛仔裤.jpg" alt="">
</div>
</div>
<script>
$(function () {
$('.fl li').mouseover(function () {
$(this).css('background', 'pink').siblings().css('background', '');
//获取当前小li的索引号
var index = $(this).index();
$('.fr img').eq(index).css('display', 'block').siblings().css('display', 'none');
})
})
</script>
</body>演示结果：
1.5 链式编程
链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
2、 jQuery 样式操作
2.1 操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
1. 参数只写属性名，则是返回属性值
$(this).css(''color'');
2. 参数是属性名，属性值，逗号分隔，
是设置一组样式，属性必须加引号，值如果是数字可以不用
跟单位和引号
$(this).css(''color'', ''red'');
3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
2.2 设置类样式方法
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
1. 添加类
$(“div”).addClass(''current'');
2. 移除类
$(“div”).removeClass(''current'');
3. 切换类
$(“div”).toggleClass(''current'');
案例：tab 栏切换
代码演示：
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
$(function () {
$('.tab_list li ').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var index = $(this).index();
$('.item').eq(index).css('display', 'block').siblings().css('display', 'none');
})
})
</script>
</body>演示结果：
2.3 类操作与className区别
原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名
3、 jQuery 效果
jQuery 给我们封装了很多动画效果，最为常见的如下：
3.1 显示隐藏效果（显示、隐藏、切换语法参数一样）
1. 显示语法规范
show([speed,[easing],[fn]])
显示参数
（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
3.2 滑动效果 （上滑、下滑、切换效果一样）
1. 下滑效果语法规范
slideDown([speed,[easing],[fn]])
2. 下滑效果参数
（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
代码演示：
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<button>滑动切换效果</button>
<script>
$(function () {
$('button').click(function () {
$('.box').slideToggle();
})
})
</script>
</body>3.3事件切换
hover([over,]out)
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它
代码演示：
<style>
div {
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<script>
$('div').hover(function () {
$(this).css({
width: '100px',
height: '100px',
backgroundColor: 'pink'
})
}, function () {
$(this).css('backgroundColor', 'red');
})
</script>
</body>3.4 动画队列及其停止排队方法
1. 动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2. 停止排队
stop()
(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画
代码演示：
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>点我</button>
<div class="box"></div>
<script>
$('button').click(function () {
$('.box').stop().slideToggle();
})
</script>3.5 淡入淡出效果 (淡入、淡出、切换效果一样)
1. 淡入效果语法规范
fadeIn([speed,[easing],[fn]])
淡入效果参数
（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2. 渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])
效果参数
（1）opacity 透明度必须写，取值 0~1 之间。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(如：1000)。必须写
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
3.6 自定义动画 animate
1. 语法
animate(params,[speed],[easing],[fn])
2. 参数
（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号，
如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
案例：王者荣耀手风琴效果
代码演示：
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
margin: 0 auto;
width: 1000px;
height: 200px;
overflow: hidden;
}
li {
float: left;
width: 200px;
overflow: hidden;
}
img {
display: block;
width: 600px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./images/images/1.jpg" alt=""></li>
<li><img src="./images/images/2.jpg" alt=""></li>
<li><img src="./images/images/3.jpg" alt=""></li>
<li><img src="./images/images/4.jpg" alt=""></li>
<li><img src="./images/images/5.jpg" alt=""></li>
</ul>
</div>
<script>
$(function () {
$('.box li').hover(function () {
$(this).stop().animate({ width: 600 }).siblings().stop().animate({ width: 100 });
}, function () {
$(this).stop().animate({ width: 200 }).siblings().stop().animate({ width: 200 });
})
})
</script>
</body>演示结果：
4、jQuery 属性操作
4.1 设置或获取元素固有属性值 prop()
1. 获取属性语法
prop(''属性'')
2. 设置属性语法
prop(''属性'', ''属性值'')
代码演示：
<body>
<input type="text" name="" id="" value='你好'>
<script>
//获取固有属性值
console.log($('input').prop('value'));
//给固定属性设置值
$('input').prop('value', 'hahh')
</script>
</body>4.2 设置或获取元素自定义属性值 attr()
1. 获取属性语法
attr(''属性'') // 类似原生 getAttribute()
2. 设置属性语法
attr(''属性'', ''属性值'') // 类似原生 setAttribute()
4.3 数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放
的数据都将被移除
1. 附加数据语法
data(''name'',''value'') // 向被选元素附加数据
2. 获取数据语法
date(''name'') // 向被选元素获取数据
同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型
代码演示：
<body>
<div class="box" data-index='1'></div>
<script>
$('.box').data('name', 'red');
console.log($('.box').data('name'));
console.log($('.box').data('index'));
</script>
</body>
案例：购物车案例模块-全选
代码演示：
// ① 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
// ② 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
// ③ 把全选按钮状态赋值给3小复选框就可以了。
// ④ 当我们每次点击小的复选框按钮，就来判断：
// ⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
// ⑥ :checked 选择器 :checked 查找被选中的表单元素。
$(function () {
//1、全选，单选
$('.checkall').change(function () {
// console.log($(this).prop('checked'));
//全选按钮选中后的选中后，复选框的按钮选中
$('.checkbox,.checkall').prop('checked', $(this).prop('checked'));
});
//复选框的按钮选中,判断是否全部选中
$('.checkbox').change(function () {
//$('.checkbox:checked')，被选中的元素对象集和
if ($('.checkbox:checked').length == 3) {
$('.checkall').prop('checked', true);
} else {
$('.checkall').prop('checked', false);
}
});
})5、jQuery 内容文本值
主要针对元素的内容还有表单的值操作。
1. 普通元素内容 html()（
相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
2.
普通元素文本内容 text() (相当与原生 innerText
)
text() // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
3. 表单的值 val()（
相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值
案例：购物车案例模块-增减商品数量
6、jQuery 元素操作
主要是遍历、创建、添加、删除元素操作。
6.1 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用
到遍历。
语法1：
$("div").each(function (index, domEle) { xxx; }
）
1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：
$.each(object
，
function (index, element) { xxx; }
）
1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
代码演示：
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
// 1、$("div").each(function (index, domEle) { xxx; }）
$('div').each(function (i, dom) {
console.log(i);
console.log(dom);
});
var arr = [1, 2, 3];
var obj = {
name: 'red',
age: 20
};
//2.$.each(object，function (index, element) { xxx; }）
$.each(obj, function (i, ele) {
console.log(i);
console.log(ele);
})
</script>
</body>
购物车案例模块-计算总计和总额
//4、购物车案例模块-计算总计和总额
//写一个函数
var flag = 0;
var all_money = 0;
function getall() {
//商品件数全局变量变量
flag = 0;
//商品总价钱全局变量
all_money = 0;
$('.number').each(function (i, DOM) {
flag += parseInt($(DOM).val());
})
$('.change-num').html(flag);
$('.total').each(function (i, DOM) {
// console.log(DOM);
all_money += parseFloat($(DOM).html());
console.log(all_money);
})
$('.total-money').html(all_money.toFixed(2));
};
getall();6.2 创建元素
语法：
$(''<li></li>'');
动态的创建了一个 <li>
6.3 添加元素
1. 内部添加
element.append(''内容'')
把内容放入匹配元素内部最后面，类似原生 appendChild。
element.prepend(''内容'')
把内容放入匹配元素内部最前面
2. 外部添加
element.after(''内容'') //
把内容放入目标元素后面
element.before(''内容'') //
把内容放入目标元素前面
① 内部添加元素，生成之后，它们是父子关系。
② 外部添加元素，生成之后，他们是兄弟关系。
6.4 删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
① remove 删除元素本身。
② empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
案例：购物车案例模块-删除商品模块
//5、购物车案例模块-删除商品模块
// 商品后面的删除按钮
$('.remove').click(function () {
$(this).parents('.shop').remove();
getall();
});
// 删除选中的商品
$('.remove-item').click(function () {
$('.checkbox').each(function (i, DOM) {
if ($(DOM).prop('checked')) {
$(this).parents('.shop').remove();
}
getall();
});
});
// 清理购物车
$('.remove-all').click(function () {
$('.shop').remove();
getall();
});7、 jQuery 尺寸、位置操作
7.1 jQuery 尺寸
1.以上参数为空，则是获取相应值，返回的是数字型。
2.
如果参数为数字，则是修改相应值。
3.
参数可以不必写单位。
7.2 jQuery 位置
位置主要有三个： offset()、position()、scrollTop()/scrollLeft()
1. offset() 设置或获取元素偏移
① offset() 方法设置或返回被选元素相对于文档
的偏移坐标，跟父级没有关系。
② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取
距离文档左侧的距离。
③ 可以设置元素的偏移：offset({ top: 10, left: 30 });
2. position() 获取元素偏移
① position() 方法用于返回被选元素相对于带有定位的父级
偏移坐标，如果父级都没有定位，则以文档为准。
② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定 位父级左侧的距离。
③ 该方法只能获取
3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
① scrollTop() 方法设置或返回被选元素被卷去的头部。
② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部
电梯导航案例
代码演示：
<style>
body {
padding-top: 200px;
padding-bottom: 500px;
}
.w {
margin: 0 auto;
margin-bottom: 10px;
width: 1200px;
height: 300px;
}
.box1 {
margin: 0 auto;
margin-bottom: 10px;
width: 1200px;
height: 100px;
background-color: pink;
}
.box2 {
background-color: aqua;
}
.box3 {
background-color: red;
}
.box4 {
background-color: skyblue;
}
.box5 {
background-color: #ccc;
}
.nav {
position: fixed;
left: 10px;
top: 100px;
border: 1px solid #999;
display: none;
}
.nav li {
list-style: none;
line-height: 40px;
padding: 0 15px;
cursor: default;
}
* {
margin: 0;
padding: 0;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<div class="box1">今日推荐</div>
<div class="box2 w">天下足球</div>
<div class="box3 w">今日说法</div>
<div class="box4 w">感人事迹</div>
<div class="box5 w">快乐编程</div>
<div class="nav">
<ul>
<li>天下足球</li>
<li>今日说法</li>
<li>感人事迹</li>
<li>快乐编程</li>
</ul>
</div>
<script>
$(function () {
//获取‘今日推荐’据页面的高度
var box1Top = $('.box1').offset().top;
var box2Top = $('.box2').offset().top;
var flag = true;
fn();
function fn() {
if ($(document).scrollTop() >= box1Top) {
$('.nav').fadeIn();
} else {
$('.nav').fadeOut();
}
if($(document).scrollTop() < box2Top) {
$('.nav li').removeClass();
}
};
// console.log(box1Top);
$(window).scroll(function () {
fn();
//滚动的时候Li自己也会变化
if (flag) {
$('.w').each(function (i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
$('.nav li').eq(i).addClass('current').siblings().removeClass();
}
});
}
});
$('.nav li').click(function () {
flag = false;
//给自己li添加current类名
$(this).addClass('current').siblings().removeClass();
//点击跳转相应的位置
// console.log( $(this).index());
var place = $('.w').eq($(this).index()).offset().top;
// console.log(place);
$('html').stop().animate({
scrollTop: place
}, function () {
flag = true;
})
});
})
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
