欢迎来到 54818模板网!这是一个yzmcms的模板分享站。

各种情况下JQ选择器的一些心得

相关案例演示

先弄一个简单示例,要不能不好理解。

<div id="shouye" data-id="8">
    <div class="zwnr dyg">
        <ul class="liebiao">
            <li class="cli">第一个LI</li>
            <li class="cli">第二个LI</li>
            <li class="cli">中间的LI省略</li>
            <li class="cli">最后个LI</li>
        </ul>
    </div>
    <div class="zwnr2">
        <audio src="xxx.mp3" data-id="6"></audio>
        <ul class="liebiao">
            <li class="cli">第一个LI</li>
            <li class="cli">第二个LI</li>
            <li class="cli">中间的LI省略</li>
            <li class="cli">最后个LI</li>
        </ul>
    </div>
</div>


选择器说明实时

$('#shouye')

$("[id='shouye']")

用id选择

所有 id 属性的值等于 "shouye" 的元素

$('.zwnr > ul')

直接子元素

$('ul')

用标签 选择

$('li.cli')

用标签 + 样式名 选择

$('li:first')

$('li:last')

第一个LI

最后一个LI

$('li:even')

$('li:odd')

所有偶数的LI

所有奇数的LI

$('li:eq(0)')

$('li:eq(1)')

 第1个LI(从0开始的)

 第2个LI

$('.zwnr.dyg')

同时是 class="zwnr" 和 class="dyg" 的元素

$('.zwnr , .dyg')

只是class="zwnr" 或者是 class="dyg" 的元素

$('.zwnr .liebiao')

在class="zwnr" 元素内的 class="liebiao" 的元素

$('div:not(.zwnr,#shouye)')

不是 class="zwnr" 也不是 id="shoueye" 的 DIV

$('#shouye').data("id")

获取data-id的值(不能获取动态改变后的值)

$('#shouye').attr("id")

获取data-id的值(实时获取该值)

动态

$('li').closest(".zwnr")

LI可以通过 .closest 找到 class=zwnr 的祖宗元素


$(".zwnr2").children("audio")

当前元素 标签为音频文件 的直接子元素


$(".zwnr2").next()

当前元素的下一个同级元素


$(".zwnr2").prev()

当前元素的上一个同级元素


$(".zwnr2").parent()

当前元素的父元素


$("audio")[0]

$("audio").get(0)

音频元素,两种方法,将 jq对象 转成 js对象。

转换后可以操作音频


$('ul li', $('.zwnr') )

通过当前元素 定位另一个元素,一般用在函数内

比如 $('ul li', this)   this对象内的 li





函数选择器说明实时

$("ul").hover(function(){

        //鼠标停在上面时执行的代码

},function(){

        //鼠标指针移出元素执行的代码

});

鼠标划进元素和划出元素执行的代码

$("li").mouseover(function(){
        alert("鼠标停在这了");

});

鼠标划入事件

$("li").mouseout(function(){
        alert("鼠标划走了");

});

鼠标划出事件

$("li").on('mouseover' , function(){
        alert("鼠标停在这了");

});

鼠标划入事件

$("li").on('mouseout' , function(){
        alert("鼠标划走了");

});

鼠标划出事件

$('.zwnr').on('mouseover' , '.cli', function(){
        alert("鼠标停在这了");

});

鼠标经过ajax添加的LI元素也可以执行划入事件

(父元素开头,on括号里是要触发的子元素,委托)

$('.zwnr').on('mouseout' , '.cli', function(){
        alert("鼠标划走了");

});

鼠标经过ajax添加的LI元素也可以执行划出事件

(父元素开头,on括号里是要触发的子元素,委托)

$("li").click(function(){

        alert("LI元素被点击了。");

});

点击事件代码

$('li').on('click' , function() {

        alert("LI元素被点击了。");

});

普通动态添加的LI可以被点击

$('.zwnr').on('click' , '.cli', function() {

        alert("LI元素被点击了。");

});

通过ajax动态添加的LI元素也可以被点击。

(父元素开头,on括号里是要触发的子元素,委托)

$('li').on('click' , function() {

       var jqsy = $(this).closest("#shouye");

       var jssy = $(jqsy)[0];

       var jssy = $(jqsy).get(0);

});

this 是当前点击的对象,是js对象

$(this) 是转换后的jq对象


jq对象 通过加 [0] 或者 .get(0) 转成js对象





    上一篇:js判断滚动条滚动方向及滚动距离

    下一篇:已经是最后一篇

    作者:54818模板网 关注:1536 时间:2022-12-01 10:05:22
    相关网站教程