一、 jQuery选择器
1.1 基础选择器
-
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号
1.2 层级选择器
-
层级选择器最常用的两个分别为：后代选择器和子代选择器。
-
案例：
<body> <div>我是div</div> <div class="nav">我是nav div</div> <p>我是p</p> <ul> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> </ul> <script> $(function() { console.log($(".nav")); console.log($("ul li")); }) </script> </body>
1.3 隐式迭代（重要）
-
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
-
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
-
案例：
<body> <div>惊喜不，意外不</div> <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 筛选选择器
-
筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :
-
案例：
<body> <ul> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ul> <ol> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ol> <script> $(function() { $("ul li:first").css("color", "red"); $("ul li:eq(2)").css("color", "blue"); $("ol li:odd").css("color", "skyblue"); $("ol li:even").css("color", "pink"); }) </script> </body> -
jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。
- 重点记住： parent() children() find() siblings() eq()
1.5 jQuery里面的排他思想
-
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”); $(this).siblings(). css(“color”,””);
1.6 链式编程
-
链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
二、jQuery样式操作
2.1 操作 css 方法
-
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
-
常用以下三种形式 :
// 1.参数只写属性名，则是返回属性值 var strColor = $(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");-
设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
-
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
-
2.3 tab 栏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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() {
// 1.点击上部的li，当前li 添加current类，其余兄弟移除类
$(".tab_list li").click(function() {
// 链式编程操作
$(this).addClass("current").siblings().removeClass("current");
// 2.点击的同时，得到当前li 的索引号
var index = $(this).index();
console.log(index);
// 3.让下部里面相应索引号的item显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
});
})
</script>
</body>
</html>
三、jQuery效果
-
jQuery 给我们封装了很多动画效果，最为常见的如下：
-
显示隐藏：show() / hide() / toggle() ;
-
划入画出：slideDown() / slideUp() / slideToggle() ;
-
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
-
自定义动画：animate() ;
注意：
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop() ;
-
3.1 显示隐藏
-
显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;
-
显示语法规范：
show([speed,[easing],[fn]])- 参数都可以省略， 无动画直接显示。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
隐藏语法规范:
hide([speed,[easing],[fn]])- 参数都可以省略， 无动画直接显示。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
切换语法规范:
toggle([speed,[easing],[fn]])- 参数都可以省略， 无动画直接显示。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
- 建议：平时一般不带参数，直接显示隐藏即可。
-
-
案例：
<body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { $("div").show(1000, function() { alert(1); }); }) $("button").eq(1).click(function() { $("div").hide(1000, function() { alert(1); }); }) $("button").eq(2).click(function() { $("div").toggle(1000); }) // 一般情况下，我们都不加参数直接显示隐藏就可以了 }); </script> </body>
3.2 滑入滑出
-
滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;
-
下滑效果语法规范:
slideDown([speed,[easing],[fn]])- 参数都可以省略。
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
上滑效果语法规范:
slideUp([speed,[easing],[fn]])- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
滑动切换效果语法规范:
slideToggle([speed,[easing],[fn]])- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
案例：
<body> <button>下拉滑动</button> <button>上拉滑动</button> <button>切换滑动</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { // 下滑动 slideDown() $("div").slideDown(); }) $("button").eq(1).click(function() { // 上滑动 slideUp() $("div").slideUp(500); }) $("button").eq(2).click(function() { // 滑动切换 slideToggle() $("div").slideToggle(500); }); }); </script> </body>
3.3 动画队列及其停止排队方法
-
动画或效果队列：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
-
停止排队：
stop()- stop() 方法用于停止动画或效果。
- 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
3.4 淡入淡出
-
淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
-
淡入效果语法规范：
fadeIn([speed,[easing],[fn]])- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
淡出效果语法规范：
fadeOut([speed,[easing],[fn]])- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
淡入淡出切换效果语法规范：
fadeToggle([speed,[easing],[fn]])- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
渐进方式调整到指定的不透明度：
fadeTo([[speed],opacity,[easing],[fn]])- opacity 透明度必须写，取值 0~1 之间。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or （
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
案例：
<body> <button>淡入效果</button> <button>淡出效果</button> <button>淡入淡出切换</button> <button>修改透明度</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { // 淡入 fadeIn() $("div").fadeIn(1000); }) $("button").eq(1).click(function() { // 淡出 fadeOut() $("div").fadeOut(1000); }) $("button").eq(2).click(function() { // 淡入淡出切换 fadeToggle() $("div").fadeToggle(1000); }); $("button").eq(3).click(function() { // 修改透明度 fadeTo() 这个速度和透明度要必须写 $("div").fadeTo(1000, 0.5); }); }); </script> </body>
3.5 自定义动画
-
自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;
-
语法规范如下:
animate(params,[speed],[easing],[fn])-
params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采
取驼峰命名法 borderLeft。其余参数都可以省略。
-
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
-
easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
-
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
-
-
案例：
<body> <button>动起来</button> <div></div> <script> $(function() { $("button").click(function() { $("div").animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500); }) }) </script> </body>
3.7 事件切换
-
jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下
-
语法
hover([over,]out) // 其中over和out为两个函数-
over:鼠标移到元素上要触发的函数（相当于mouseenter）
-
out:鼠标移出元素要触发的函数（相当于mouseleave）
-
如果只写一个函数，则鼠标经过和离开都会触发它。
-
四、jQuery属性操作
- jQuery 常用属性操作有三种：prop() / attr() / data() ;
4.1 元素固有属性值prop()
-
所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。
-
获取属性语法：
prop(''属性'') -
设置属性语法:
prop(''属性'', ''属性值'')- 注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。
4.2 元素自定义属性值 attr()
-
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
-
获取属性语法:
attr('属性') // 类似原生 getAttribute()
-
设置属性语法:
attr('属性', '属性值') // 类似原生 setAttribute()- 注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）
4.3 数据缓存 data()
-
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
-
附加数据语法
data('name','value') // 向被选元素附加数据 -
获取数据语法:
date(''name'') // 向被选元素获取数据- 注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。
-
案例：
<body> <a href="https://www.baidu.com" title="baidu">百度</a> <input type="checkbox" name="" id="" checked> <div index="1" data-index="2">我是div</div> <span>123</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() console.log($("div").attr("index")); $("div").attr("index", 4); console.log($("div").attr("data-index")); // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面 $("span").data("uname", "andy"); console.log($("span").data("uname")); // 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型 console.log($("div").data("index")); }) </script> </body>
五、 jQuery文本属性值
- jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
5.1 jQuery内容文本值
-
常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。
-
普通元素内容 html()（ 相当于原生inner HTML)
html() // 获取元素的内容 html(''内容'') // 设置元素的内容 -
普通元素文本内容 text() (相当与原生 innerText)
text() // 获取元素的文本内容 text(''文本内容'') // 设置元素的文本内容 -
表单的值 val()（ 相当于原生value)
val() // 获取表单的值 val('内容') // 设置表单的值 -
案例：
<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>
六、 jQuery元素操作
- jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。
6.1 遍历元素
-
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
-
语法1
$("div").each(function (index, domEle) { xxx; }）-
each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个。
-
里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象。
-
所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
-
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
-
案例：
<body> <div>1</div> <div>2</div> <div>3</div> <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(index); // 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; }）-
$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。
-
里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容。
-
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
-
案例：
<body> <div>1</div> <div>2</div> <div>3</div> <script> $(function() { // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据 // $.each($("div"), function(i, ele) { // console.log(i); // console.log(ele); // }); // $.each(arr, 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 创建、添加、删除
-
jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：
-
创建元素：
$('<li></li>'); -
添加元素：
-
内部添加：
-
把内容放入匹配元素内部最后面，类似原生 appendChild。
element.append('内容') -
把内容放入匹配元素内部最前面。
element.prepend('内容')
-
-
外部添加：
-
把内容放入目标元素后面。
element.after('内容') -
把内容放入目标元素前面。
element.before('内容')
-
-
-
删除元素：
-
删除匹配的元素（本身）
element.remove() -
删除匹配的元素集合中所有的子节点:
element.empty() -
清空匹配的元素内容:
element.html('')
-
-
案例：
<body> <ul> <li>原先的li</li> </ul> <div class="test">我是原先的div</div> <script> $(function() { // 1. 创建元素 var li = $("<li>我是后来创建的li</li>"); // 2. 添加元素 // 2.1 内部添加 // $("ul").append(li); 内部添加并且放到内容的最后面 $("ul").prepend(li); // 内部添加并且放到内容的最前面 // 2.2 外部添加 var div = $("<div>我是后妈生的</div>"); // $(".test").after(div); $(".test").before(div); // 3. 删除元素 // $("ul").remove(); 可以删除匹配的元素 自杀 // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子 $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子 }) </script> </body>
七、jQuery尺寸、位置操作
7.1 jQuery 尺寸操作
-
jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。
- 以上参数为空，则是获取相应值，返回的是数字型。
- 如果参数为数字，则是修改相应值。
- 参数可以不必写单位。
-
案例：
<body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("div").width()); // $("div").width(300); // 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小 console.log($("div").innerWidth()); // 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小 console.log($("div").outerWidth()); // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin console.log($("div").outerWidth(true)); }) </script> </body>
7.2 jQuery 位置操作
-
jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft()
-
offset() 设置或获取元素偏移:
- offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
- 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
- 可以设置元素的偏移：offset({ top: 10, left: 30 });
-
position() 获取元素偏移:
-
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
-
该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
-
该方法只能获取。
-
-
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧:
-
scrollTop() 方法设置或返回被选元素被卷去的头部。
-
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
-
-
案例：
<body> <div class="father"> <div class="son"></div> </div> <div class="back">返回顶部</div> <div class="container"></div> <script> $(function() { // 1. 获取设置距离文档的位置（偏移） offset console.log($(".son").offset()); console.log($(".son").offset().top); // $(".son").offset({ // top: 200, // left: 200 // }); // 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准 // 这个方法只能获取不能设置偏移 console.log($(".son").position()); // $(".son").position({ // top: 200, // left: 200 // }); // 3. 被卷去的头部 $(document).scrollTop(100); // 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft() // 页面滚动事件 var boxTop = $(".container").offset().top; $(window).scroll(function() { // console.log(11); console.log($(document).scrollTop()); if ($(document).scrollTop() >= boxTop) { $(".back").fadeIn(); } else { $(".back").fadeOut(); } }); // 返回顶部 $(".back").click(function() { // $(document).scrollTop(0); $("body, html").stop().animate({ scrollTop: 0 }); // $(document).stop().animate({ // scrollTop: 0 // }); 不能是文档而是 html和body元素做动画 }) }) </script> </body>
扫一扫
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
