码迷,mamicode.com
首页 > 其他好文 > 详细

jq-选择器

时间:2019-09-21 19:33:37      阅读:34      评论: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动画分为三个部分,非自定义动画,自定义动画,和全局动画设置。

  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>

jq-选择器

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!