1.jQuery选择器
1.1 jQuery选择器
原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，获取元素统一标准
$('选择器') // 里面选择器直接写css选择器即可，但是要加引号
语法
名称 用法 描述.
ID选择器 $("#id") 获取指定ID的元素
全选选择器 $(*") 匹配所有元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("div,p,li") 选取多个元素
交集选择器 $("li.current") 交集元素
子代选择器 $("ul>li"); 使用>号，获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器 $("ul li"); 使用空格，代表后代选择器，获取ul下的所有Ii元素，包括孙子等
1.2 隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
不用我们再进行循环，会给所有匹配到的元素进行循环遍历
语法 用法 描述
:first $(li:first') 获取第-个i元素
:last $(Ii:last') 获取最后-个i元素
:eq(index) $'li:eq(2)") 获取到的Ii元素中，选择索引号为2的元素,索引号index从0开始。
:odd $("l:odd") 获取到的1i元素中，选择索引号为奇数的元素
:even $("Ii:even") 获取到的1i元素中，选择索引号为偶数的元素
1.3 jq筛选方法
语法 用法 说明
parent() $("1i").parent(); 查找父级
children(selector) $("ul").children("1i") 相当于$("ul>li")，最近一级(亲儿子)
find(selector) $("u1").find("li"); 相当于$("ul li"),后代选择器
siblings(selector) $(".first").siblings("1i"); 查找兄弟节点，不包括自己本身
nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素
prevtAll([expr]) $(".last").prevAll() 查找当前元素之前所有的同辈元素
hasClass(class) $('div').hasClass("protected") 检查当前的元素是否含有某个特定的类,如
果有，则返回true
eq( index) $("li"). eq(2); 相当于$("1i:eq(2)"), index从0开始
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<ul>
<li>1 第一个</li>
<li>1</li>
<li class="c">1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ol>
<li class="first">2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ol>
<script>
$(function() {
// 1.兄弟元素
$('ul .c').siblings('li').css('color', 'red')
// 2.第n个元素
$('ul li:eq(1)').css('color', 'blue')
$('ul li').eq(5).css('color', 'yellow') //这种写法更方便接收变量
// 3.是否有某个类名
console.log($("ol li").hasClass("first"));
})
</script>
</body>
</html>
1.6 jq的排他思想
多选一的效果，排他思想：设置当前元素样式，其余兄弟元素清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<script>
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2.当前的元素变化背景颜色
$(this).css("background", "green")
$(this).siblings('button').css("background", "")
})
})
</script>
</body>
</html>
1.7 链式编程
为了节省代码量，看起来优雅
$(this).css('color', 'red').sibling().css('color', '');
2.jQuery样式操作
2.1 操作css方法
jQuery可以使用css方式来修改简单元素样式；也可以操作类，修改多个样式
1.参数只写属性名，则是返回属性值
$(this).css("color")
2.参数是属性名，属性值，逗号分隔，设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和导引
$(this).css("color","red")
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号
2.2 设置类样式方法
一个个去改过于麻烦 直接给设置一个类 把类名给标签
-
添加类名
$("选择器").addClass("类名") -
溢出类
$(this).removeClass("类名")
3.切换
$("div").toggleClass("类名")
2.3 类操作与className 的区别
原生js中classname会覆盖元素原先里面的类名
jquery里面类操作只是对指定类进行操作，不影响原来的类名
3.jQuery效果
封装了很多动画效果，最为常见的如下
显示隐藏
show();
hide();
toggle()
滑动
slideDown();
slideUp();
slideToggle();
深入淡出
fadeln()
fadeOut()
fadeToggle()
fadeTo()
自定义动画
animate()
3.1 显示隐藏效果
1.显示隐藏语法规范
show([speed],[easing],[fn]) // 显示
hide([speed],[easing],[fn]) // 隐藏
toggle([speed],[easing],[fn]) //切换
2.显示参数
参数都可以省略，无动画直接显示
speed:三种预定速度之一的字符串（"slow","normal","fast"） 或表示动画时长的毫秒数值如：1000
easing:(Optional)用来指定切换效果，默认是"swing", 可用参数"linear"
fn:回调函数，在动画完成时执行函数，每个元素执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$("button").eq(1).click(function() {
$("div").hide(1000)
})
$("button").eq(0).click(function() {
$("div").show(1000)
})
$("button").eq(2).click(function() {
$("div").toggle()
})
})
</script>
</body>
</html>
3.2 滑动效果
-
下滑效果语法规范
slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) slideToggle([speed,[easing],[fn]]) -
下滑效果参数
（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 下滑动
$("div").slideDown()
})
$("button").eq(1).click(function() {
$("div").slideUp()
})
$("button").eq(2).click(function() {
$("div").slideToggle()
})
})
</script>
</body>
</html>
3.3 事件切换
hover([over,]out)
over:鼠标移动到元素上要触发的函数（mouseenter）
out:鼠标移出元素触发的函数(mouseleave)
3.4 动画队列极其停止排队方法
- 动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
- 停止排队
(1)stop()方法用于停止动画或效果
(2)注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画
3.5 淡入淡出效果
-
语法规范
fadeIn([speed,[easing],[fn]]) fadeOut([speed,[easing],[fn]]) fadeToggle([speed,[easing],[fn]]) -
淡入淡出效果
fadeTo([[speed],opacity,[easing],[fn]])
opacity:透明度必须写，取值0-1之间
3.6 自定义动画 animate
- 语法规范
animate(params,[speed],[easing],[fn])
- 参数
（1）params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderleft。其余参数可以省略
4.jQuery属性操作
4.1 设置或获取元素固有属性值prop()
-
获取属性语法
prop("属性") -
设置属性语法
prop("属性","属性值")
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com" title="都挺好">cccc</a>
<input type="checkbox" name="" id="" checked>
<div index = "1">我是div</div>
<script>
$(function() {
// element.prop("属性名") 获取属性值
console.log($("a").prop("href"));
$("a").prop("title", "我们都挺好")
$("input").change(function() {
console.log($(this).prop("checked"));
})
})
</script>
</body>
</html>
4.2 设置或获取元素自定义属性值 attr()
-
获取属性语法
attr("属性") // 类似原生getAttribute()
-
设置属性语法
attr("属性","属性值") // 类似原生getAttribute()
该方法也可以获取H5自定义属性
4.3 数据缓存data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com" title="都挺好">cccc</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="1">我是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"));
})
// 2.元素的自定义属性 我们通过attr()
console.log($("div").attr("index"), 4);
console.log($("div").attr("data-index"));
// 3.数据缓存 data() 元素内存里
$("span").data("uname", "andy")
console.log($("span").data("uname"));
// 这个办法跟H5获取属性有些许不同，不用写data- 返回数字型
console.log($("div").data("index"));
})
</script>
</body>
</html>
5.jq内容文本值
主要针对元素的内容还有表单的值操作
-
普通元素内容html() (相当于原生innerHTML)
html() // 获取元素的内容
html("内容") // 设置元素的内容
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<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').html("123");
// 3. 获取设置表单值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
</html>
5.1 修改html内容方法
修改普通元素的内容是text() 方法
parents("选择器") 快速找到指定祖先元素
toFixed() 小数后几位
substr() 截取字符串
6.jquery元素操作
主要是遍历、创建、添加、删除元素操作
6.1 遍历元素
jq隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历
第一种 建议遍历dom对象
$("div").each(function (index, domEle) { xxx; }）
第二种 建议用来遍历数组、对象
$.each(遍历对象,回调函数）
$.each($("div"), function(index, domEle){xxxx;})
- each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
- 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
- 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
演示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for）
var sum = 0
// $("div").css("color", "red")
var arr = ["red", "yellow", "blue"]
$("div").each(function(index, domEle) {
// 回调函数第一个参数一定是索引号
console.log(index);
// 回调函数第一个参数一定是dom元素对象
console.log(domEle);
// 注意是DOM对象 不是jq对象
$(domEle).css("color", arr[index])
sum += parseInt($(domEle).text())
})
console.log(sum);
// 2.$.each() 方法遍历元素 主要用于遍历数据，处理数据
$.each($("div"), function(index, domEle) {
console.log(index);
console.log(domEle);
$(domEle).css("color", arr[index])
sum += parseInt($(domEle).text())
})
// 遍历数组
$.each(arr, function(i, ele) {
console.log(i);
console.log(ele);
})
})
</script>
</body>
</html>
6.2 创建元素
语法
$("<li></li>") //动态创建li标签
6.3 添加元素
内部添加
element.append("内容") // 把内容放入匹配元素内部最后面，类似原生appendChild
内部添加元素，生成之后，他们是父子关系
外部添加
外部添加元素，生成之后，他们是兄弟关系
6.4 删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1.创建元素
var li = $("<li>后来的li</li>")
// 2.添加元素
// (1) 内部添加
// $("ul").append(li); // 内容最后面
$("ul").prepend(li); // 内容最后面
// (2) 外部添加
var div = $("<div>后来的li</div>")
// $(".test").after(div) // 后面添加
$(".test").before(div) // 前面添加
// 3.删除元素
// $("ul").remove() // 删除匹配的元素
// $("ul").empty() // 删除匹配的元素里面的子节点
$("ul").html("") // 删除匹配的元素里面的子节点
})
</script>
</body>
</html>
7. jQuery尺寸、位置操作
7.1 jQeury尺寸
语法 用法
width() / height() 取得匹配元素宽度和高度值只算width / height
innerWidth() / innerHieght() 取得匹配元素宽度和高度值包含padding
outerWidth() / outerHeight() 取得匹配元素宽度和高度值包含padding、border
outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值包含padding、border、 margin
参数为空，则获得相应值，返回的是数字型
参数可以不写单位
7.2 jQuery位置
位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
1.offset() 设置或获取元素偏移
(1) offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
(2) 该方法有两个属性left、top、offset().top 用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
(3) 可以设置元素的偏移：offset({top:10,left:30})
2.position()获取元素偏移
(1)position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位就是文档为准
(2)只能获取不能设置
3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
(1)scrollTop()方法设置或被选元素被卷去的头部