jq-选择器

时间：2019-09-21 19:33:37 阅读：135 评论：0 收藏：0 [点我收藏+]

标签：入门元素选择器 family iter select slide 插件结果 ring

一、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>
    .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.动画的执行顺序

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

借助动画的回调函数：适用于操作不同元素，先走一个元素再操作另一个元素，用回调函数或者分开写

    $("#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>
    .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>

jq-选择器

标签：入门元素选择器 family iter select slide 插件结果 ring

原文地址：https://www.cnblogs.com/wufenfen/p/11563988.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行