jq-选择器
Posted wufenfen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq-选择器相关的知识，希望对你有一定的参考价值。
一、jq的介绍
做什么？作用
用更少的代码，解决更多的需求
可以不用
个人建议：现阶段jq能不用就不用
学习，原生，基础
jq惯坏
jquery其实就是别人封装好的函数，有很多功能，可以直接使用，不用考虑原理
怎么做？语法
学习的内容
什么时候做？场景
只要需要写js，当前用js实现的功能，jq有提供，就可以用jq
jq的介绍：
用更少的代码，解决更多的需求
1.jquery
2.https://jquery.com/
3.介绍
4.快速入门
下载
版本
v1.xx.xx 完善 ***
v2.xx.xx 删除兼容 **
v3.xx.xx 重构，bug *
重大修改
添加或删除某个功能
修复了某些bug完善了某些功能
第三方下载CDN
"https://lib.baomitu.com/jquery/1.12.4/jquery.js"
引入
script标签
开发环境：离线未压缩
上线环境：在线压缩
使用
.....
5.完整文档，有哪些方法
....
6.找实例，改改用（找插件）
7.换，自定义，求助有经验的人
console.log(jQuery);
console.log($);
console.log($ == jQuery); // true;
函数自身可以被执行
函数是一个特殊的对象，所以，也可以有方法和属性，被作为对象操作
二、jq选择器和原生选择器的区别
jq的DOM对象和原生的DOM对象的转换：
"jq转原生："
解析数组
通过get方法
"原生转jq："
使用jq的函数包裹原生DOM对象<body>
<div id="box1">123</div>
<div id="box2">456</div>
</body>
<script src="../jquery.js"></script>
<script>
var obox1 = document.getElementById("box1");
console.log(obox1);
obox1.style.background = "red"; // 通过原生方式来设置属性
obox1.css("background","yellow") "X" // 原生的DOM对象不能通过jq提供的方法来设置属性(obox1.css不是一个函数)
$(obox1).css("background","yellow") // 原生转jq
// ID选择器：
var obox2 = $("#box2");
console.log(obox2); // 伪数组
obox2.style.background = "blue"; "X"
obox2[0].style.background = "blue"; // jq的DOM元素转成原生的DOM元素 将原生的DOM元素通过jq的函数传参会返回一个DOM元素
obox2.get(0).style.background = "blue";
obox2.css("background","blue"); // 通过jq方式来设置属性 (obox2是一个函数，可以通过他的方法来设置)
"原生的DOM元素与jq的DOM元素的方法，不互通"
"原生代码可以和jq代码同时存在，只是互相之间对象的属性或方法不互通"
obox2是一个伪数组，第一个数据就是原生的DOM对象，所以通过索引解析数组就得到原生的DOM对象
<script>
三、jq选择器
jQuery最有用的部分：jQuery选择器引擎！jQuery的选择器依赖css1~css3的选择器。
1.简单选择器：使用频率：*****
1)选择器写法：$( ) >>>>> $(‘div‘) 字符串
根据css样式来进行选取。css叫做添加样式，但是jQuery叫做添加行为。
| 选择器 | CSS模式 | jQuery模式 | 描述 |
|---|---|---|---|
| 标签名 | div | $(‘div‘) | 获取所有div标签的DOM元素 |
| ID | #box | $(‘#box‘) | 获取一个ID为box的DOM对象 |
| class(类名) | .box | $(‘.box‘) | 获取所有class名为box的DOM对象 |
一个小的知识点：ID选择器的失明现象。
ID在一个页面中只能出现一次，这是一个唯一标识符。在jQuery中就会存在问题。
选择器选择出的对象，有一些属性和方法（length,.size()）
jQuery的兼容性 css3的子选择器（不兼容IE6）
但是到了jQuery中，jQuery会自行将不兼容IE的问题解决掉。
jQueryDOM对象和原生javascriptDOM对象之间的属性方法是否通用？不通用！！！！！！！！
相互转换： $(‘DOM‘)[0].style.color=red; $(‘DOM‘).get(0).style.color=red;
进阶选择器：
| 选择器 | CSS模式 | jQuery模式 | 描述 |
|---|---|---|---|
| 群组选择器 | div,span,p | $(‘div,span,p‘) | 略 |
| 后代选择器 | ul li a | $(‘ul li a‘) | 略 |
| 通配选择器 | * | $(‘*‘) | 略 |
通配选择器：选择所有；对性能有极大的浪费所以不能在全局范围内使用，最好的方法就是在局部环境下使用；
$(‘ul li a,ul li em,ul li strong‘);
简化成通配选择器：$(‘ul li *‘)
高级选择器：
1）层次选择器
| 选择器 | css模式 | jQuery模式 | 描述 |
|---|---|---|---|
| 后代选择器 | ul li a | $(‘ul li a‘) | 获取追溯到的所有元素 |
| 子选择器 | div>p | $(‘div>p‘) | 只获取子类节点 |
| next选择器 | div+p | $(‘div+p‘) | 只获取某节点后一个同级DOM元素 |
| nextAll选择器 | div~p | $(‘div~p‘) | 获取某节点后所有同级DOM元素 |
jQuery为后代选择器提供了一个方法find()这个find方法里面有一个参数，就是想要找到的后代（可以是标签，类名，ID）
$(‘div p‘).css(‘color‘,‘red‘) == $(‘div‘).find(‘p‘).css(‘color‘,‘red‘)jQuery为子选择器提供了一个方法，children()，参数同上；
$(‘div>p‘).css(‘color‘,‘red‘) == $(‘div‘).children(‘p‘).css(‘color‘,‘red‘);jQuery提供了next(）, nextAll( ) 选择器，参数同上：注意next（）选择器，只选择后一个元素。
$(‘div+p‘).css(‘color‘,‘red‘) == $(‘div‘).next(‘p‘).css(‘color‘,‘red‘)
$(‘div~p‘).css(‘color‘,‘red‘) == $(‘div‘).nextAll(‘p‘).css(‘color‘,‘red‘)注意：children() , next() , nextAll() 这些方法如果不传递参数的话， 那么就默认传递一个通配符*，通常在使用这些选择器的时候，我们需要精准的选择元素，避免发生各种怪异结果。
属性选择器：
| CSS模式 | jQuery模式 | 描述 |
|---|---|---|
| input[name] | $(‘input[name]‘) | 获取具有这个属性的DOM元素 |
| input[name=XXX] | $(‘input[name=XXX]‘) | 获取具有属性且属性值为XXX的DOM元素 |
| input[value][name=XXX] | $(‘input[value][name=XXX]‘) | 获取有value 属性且name为XXX的DOM元素 |
更多组合等待你来发掘；
过滤选择器：
伪类选择器：
| 过滤器名 | jQuery语法 | 说明 | 返回 |
|---|---|---|---|
| :first | $(‘li:first‘) | 选取第一个元素 | 单个元素 |
| $(‘li:last‘) | 选取最后一个元素 | 单个元素 | |
| ：not(选择器) | $(‘li:not(.red)‘) | 选取class不是red的元素 | 一组元素 |
| :even | $(‘li:even‘) | 选择偶数的所有元素 | 一组元素 |
| :odd | $(‘li:odd‘) | 选择所有奇数元素 | 一组元素 |
| ：eq | $(‘li:eq（1）‘) | 选择对应下表的元素 | 单个元素 |
内容过滤器
| 过滤器名 | jQuery语法 | 说明 | 返回 |
|---|---|---|---|
| :contains(text) | $(‘li:contains(123456)‘) | 选择有123456文本的元素 | 一组元素 |
| :empty | $(li‘:empty‘) | 选取li中不包含子元素或空文本的元素 | 一组元素 |
| ：has（选择器） | $(‘ul:has(.red)‘) | 选择子元素含有类red的ul | 一组元素 |
jQuery为了优化:has选择器性能，提供了一个方法.has()
$(‘ul:has(.red)‘)==$(‘ul‘).has(‘.red‘)可见性选择器
| 过滤器名 | jQuery语法 | 说明 | 返回 |
|---|---|---|---|
| :hidden | $(li:hidden) | 选取所有不可见元素 | 集合元素 |
| :visible | $(‘li:visible‘) | 选取所有可见元素 | 集合元素 |
注：是否可见的判定因素为display：block & display :none
其他方法：
jQuery在选择器和过滤器的基础上提供了一些常用的方法，方便我们开发时灵活使用。
| 方法名 | jQuery语法 | 说明 | 返回 |
|---|---|---|---|
| is() | li.is(‘.red‘) | 传递选择器、DOM、jquery对象 | true |
| hasClass() | $(‘li‘).hasClass(‘red‘) | 就是is(‘.‘+class) | true |
is()方法
$(‘li‘).is(‘.red‘);
$(‘li‘).hasClass(‘red‘)；.end()终止当前选择器的遍历，回到上个选择条件;
四、jq动画
jQuery动画分为三个部分，非自定义动画，自定义动画，和全局动画设置。
- jq内置(非自定义)动画
-
显示、隐藏： show( ) 、hide( )、toggle( )
show()、hide()、toggle()方法有两种用法，一种是不传参数，代表直接显示隐藏。
另一种是向方法中传递一个参数，这个参数为number类型，代表动画的执行时间。会有显示隐藏的动画效果。
示例： show(100)、hide(100)、toggle(100)
不仅如此，jQuery还为动画方法提供了三种字符串形式的参数，分别是：fast、slow、和空字符串‘‘
show(‘fast‘)、hide(‘slow‘)、toggle(‘‘)
三种参数的执行时间，分别为 ，‘fast‘ ：200毫秒 ‘‘(默认值):400毫秒 ‘slow‘：600毫秒
-
滑/拉动：
slideUp()：向上滑动（隐藏）
slideDown()：向下滑动（显示）
slideToggle()：滑动（自动）
-
淡入淡出：
fadeOut()：淡出（隐藏）
fadeIn()：淡入（显示）
fadeToggle()：显示隐藏（）自动
该方法是将元素的透明度从1变成零之后将元素的display属性设置为none;
但是如果我们想要将透明度设置到一个固定值，这些方法并不能实现，jQuery为我们提供了一个方法fadeTo()，该方法接受两个参数。 第一个参数是动画执行的时间，第二个参数是期望达到的透明度。
<style>
.boxwidth: 200px;height: 200px;background: red;
</style>
<script src="jquery.js"></script>
<body>
<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<input type="button" value="显示/隐藏" id="btn3">
<input type="button" value="上拉" id="btn4">
<input type="button" value="下拉" id="btn5">
<input type="button" value="上拉/下拉" id="btn6">
<input type="button" value="淡出" id="btn7">
<input type="button" value="淡入" id="btn8">
<input type="button" value="淡出/淡入" id="btn9">
<input type="button" value="半透明" id="btn10">
<div class="box"></div>
</body>
<script>
// 动画与动画之间是同步的，动画与其它之间是异步的
$("#btn1")[0].onclick = function()
$(".box").hide(3000,function()
alert("结束了"); // 放一个回调函数实现链式动画
);
$("#btn2")[0].onclick = function()
$(".box").show(2000).hide(2000); // 动画可以连缀 (show,hide)动画与动画之间是同步的，先执行完一个再执行下一个
$(".box").show(2000).hide(2000).css("background","blue"); // 点击的一瞬间就变了颜色，动画与其它之间是异步的
$(".box").hide(2000).show(2000,function()
$(".box").css("background","red"); // 通过回调函数可以使css也同步
)
$("#btn3")[0].onclick = function()
$(".box").toggle(2000);
// 上/下拉默认有4毫秒的时间，括号里面可以传时间参数
// 也支持回调函数，动画与动画之间同步，动画与其它之间异步
$("#btn4")[0].onclick = function()
$(".box").slideUp(2000);
$("#btn5")[0].onclick = function()
$(".box").slideDown(1000);
$("#btn6")[0].onclick = function()
$(".box").slideToggle();
// 也有默认时间，用法同上 淡入淡出即操作透明度
$("#btn7")[0].onclick = function()
$(".box").fadeOut(2000);
$("#btn8")[0].onclick = function()
$(".box").fadeIn(2000);
$("#btn9")[0].onclick = function()
$(".box").fadeToggle(2000);
// 半透明
$("#btn10")[0].onclick = function()
$(".box").fadeTo(2000,0.5);
</script>
2.非内置(自定义)动画：animate()方法
animate()方法有三个参数。分别是动画目标(target),动画执行时间，回调函数。只有第一个参数是必填参数。
animate()方法的使用：
1.animate(
‘width‘:‘200px‘，
‘height‘:‘200px‘
)将元素属性变换为自定义动画中的目标属性，所有参数中的属性一起改变。
2.animate(
‘width‘:‘+=200px‘
)设置的属性，支持运算。
<style>
.boxwidth:100px;height:100px;background: red;position: absolute;left:0;top:0;
</style>
<body>
<div class="box"></div>
<input type="button" id="btn" value="开始">
</body>
<script src="../jquery.js"></script>
<script>
$("#btn")[0].onclick = function()
$(".box").animate(
// left:500
// left:"500px" // 当 + px时要加""号
// width:"+=100"
left:300
).animate(
top:400
)
$(".box").animate(
// 从哪个地方开始消失
width:0,
height:0,
left:100,
top:0
)
</script>
3.动画的执行顺序
如果想要动画按照顺序执行（执行完第一个动画之后，再执行下一个动画）有三种方法：
- 借助动画的回调函数：适用于操作不同元素，先走一个元素再操作另一个元素，用回调函数或者分开写
$("#btn")[0].onclick = function()
$(".box").animate(
left:600
,2000,function()
$(".box").animate(
top:500
)
)
- 将动画效果分开写。
$("#btn")[0].onclick = function()
$(".box").animate(
left:600
,2000)
$(".box").animate(
top:500
)
- 连缀：适合于每个动画操作于同一个元素
$("#btn")[0].onclick = function()
$(".box").animate(
left:600
,2000).animate(
top:500
)
这几种方法在什么情况下使用呢？
在操作同一元素的时候，推荐使用连缀。在操作不同元素的时候，推荐使用回调函数(或者分开写)。
连缀：jquery的动画方法，每次调用都会返回当前选择的元素，从而可以让jQuery可以实现连缀。
动画的执行顺序：
当我想要执行一个其他方法的时候，比如给当前元素加一个背景颜色。
$("#btn")[0].onclick = function()
$(".box").animate(
left:600
,2000).animate(
top:500
).css("background","yellow") // 瞬间变黄色，css与animate之间是异步
问题出现了：当我按照连缀写法，并没有出现我想要的效果所有方法都按照顺序执行，而是将css方法提前执行了。
问题分析：根据我们以往写运动框架的经验，知道每个动画都是有定时器的，发生这个问题原因就在于此，定时器是异步的，在运行动画的时候我们后面的方法会继续执行，也就出现了上面的问题。
解决：
- 可以用回调函数解决：
$("#btn")[0].onclick = function()
$(".box").animate(
left:600
,2000).animate(
top:500
,function()
$(".box").css("background","yellow") // 用回调函数变同步
)
- jquery给我们提供了一个类似于回调函数的方法queue()：
$("#btn")[0].onclick = function()
$(".box").animate(
left:600
,2000).animate(
top:500
).queue(function()
$(".box").css("background","yellow")
)
注：queue()方法的问题：当我想要在这个列队函数中再加一个动画的时候，发现在queue()方法后的函数无法执行。
jq提供了一个方法，给不支持同步的方法变为同步的，用queue(),但是queue()方法有一个弊端，就是后面不能使用连缀，需要连缀的话，需要在queue里面加上一个回调函数
$("#btn")[0].onclick = function()
$(".box").animate(
left:600
,2000).animate(
top:500
).queue(function(next)
$(".box").css("background","yellow")
next();
).animate(
left:0
)
原理：连缀的原理是因为每个jquery动画方法都会提供一个返回值，这个返回值就是所选择的元素，queue()方法并不会提供一个返回值。为了让连缀继续，我们这时候应该让queue()方法有一个返回值。jquery为queue提供了一个参数next,我们只需要在queue()方法中传入这个参数并调用，那么queue()方法就有了一个返回值，连缀就可以继续了。
五、动画及其相关方法
1.延迟
<style>
.boxwidth: 100px;height: 100px;background: red;position: absolute;left: 0;top: 0;
</style>
<script src="jquery.js"></script>
<body>
<div class="box"></div>
<input type="button" id="btn" value="开始">
<input type="button" id="btn2" value="停止">
</body>
<script>
// 正常
$("#btn")[0].onclick = function()
$(".box").animate(
left: 500
,2000).animate(
top: 500
,2000).animate(
left: 0
).animate(
top: 0
)
// 动画开启之前要延时，即在animate之前加delay;
$("#btn")[0].onclick = function()
$(".box").delay(1000).animate(
left: 500
,2000).delay(2000).animate(
top: 500
,2000).delay(1000).animate(
left: 0
,2000).delay(2000).animate(
top: 0
,2000)
</script>
2.停止
$("#btn2")[0].onclick = function()
$(".box").stop();
// stop()：两个参数，都是布尔值，默认为false
// 1.动画堆列：(等待的动画) false：不操作 true：清空了
// 2.当前动画：(正在执行的动画) false：立即停止 true：立即到终点
// 停在当前(真正的停止)
$("#btn2")[0].onclick = function()
$(".box").stop(true,false);
// 立即到终点
$("#btn2")[0].onclick = function()
$(".box").stop(true,true);
// 堆列没有清，立即到终点就是立即开始下一个动画的操作
$("#btn2")[0].onclick = function()
$(".box").stop(false,true);
// <font color=red></font>
// <font face="宋体">宋体</font>
// <font face="黑体" color=red>红色黑体</font>
// <font face="黑体" color=red size=7>7号红色黑体</font>
例子：
<style>
ul uldisplay: none;
</style>
<body>
<ul class="nav">
<li>
<span>一级菜单</span>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<span>一级菜单</span>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<span>一级菜单</span>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<span>一级菜单</span>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
$(".nav").children("li").mouseover(function()
$(this).children("ul").stop().show(500) // 操作当前ul状态下的li
.parent().siblings().children("ul").stop().hide(500);
)
$(".nav").children("li").mouseout(function()
$(this).children("ul").stop().hide(500);
)
// stop()：每次开启动画之前，把上一个动画立即结束，就不会产生堆列 结束当前，立即开启下一个堆列
// 动画开启之前先停止 等同于 计时器开启之前先清除，防止动画堆列的产生
// .parent()父元素选择器
// .siblings()除了当前的所有同级（兄弟）
</script>以上是关于jq-选择器的主要内容，如果未能解决你的问题，请参考以下文章