jq-选择器

其他 2019-09-21 18:39:18 阅读次数: 0

一、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动画分为三个部分，非自定义动画，自定义动画，和全局动画设置。

  1. jq内置(非自定义)动画

  1. 显示、隐藏： 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毫秒

  1. 滑/拉动：

    slideUp()：向上滑动（隐藏）

    slideDown()：向下滑动（显示）

    slideToggle()：滑动（自动）

  2. 淡入淡出：

    fadeOut()：淡出（隐藏）

    fadeIn()：淡入（显示）

    fadeToggle()：显示隐藏（）自动

    该方法是将元素的透明度从1变成零之后将元素的display属性设置为none;

    但是如果我们想要将透明度设置到一个固定值，这些方法并不能实现，jQuery为我们提供了一个方法fadeTo()，该方法接受两个参数。 第一个参数是动画执行的时间，第二个参数是期望达到的透明度。

<style>
    .box{width: 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>
    .box{width: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.动画的执行顺序

如果想要动画按照顺序执行（执行完第一个动画之后，再执行下一个动画）有三种方法：

  1. 借助动画的回调函数：适用于操作不同元素，先走一个元素再操作另一个元素，用回调函数或者分开写
    $("#btn")[0].onclick = function(){ $(".box").animate({ left:600 },2000,function(){ $(".box").animate({ top:500 }) }) }
  1. 将动画效果分开写。
    $("#btn")[0].onclick = function(){ $(".box").animate({ left:600 },2000) $(".box").animate({ top:500 }) }
  1. 连缀：适合于每个动画操作于同一个元素
    $("#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方法提前执行了。

问题分析：根据我们以往写运动框架的经验，知道每个动画都是有定时器的，发生这个问题原因就在于此，定时器是异步的，在运行动画的时候我们后面的方法会继续执行，也就出现了上面的问题。

解决：

  1. 可以用回调函数解决：
    $("#btn")[0].onclick = function(){ $(".box").animate({ left:600 },2000).animate({ top:500 },function(){ $(".box").css("background","yellow") // 用回调函数变同步 }) }
  1. 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>
    .box{width: 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 ul{display: 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>

猜你喜欢

转载自www.cnblogs.com/wufenfen/p/11563988.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022