jQuery高级选择器和其等价方法

jQuery选择器和css一样,但兼容性更好

<body>
    <p>p1</p>
    <p>p1</p>
    <p>p1</p>
    <div id="box">
        <p>p2</p>
        <p>p2</p>
        <p>p2</p>
        <div>
            <p>p3</p>
            <p>p3</p>
            <p>p4</p>
        </div>
    </div>
    <p>p4</p>
    <p>p4</p>
    <p>p4</p>
</body>

层次选择器:

$(function(){
    //后代选择器
    $(‘#box p‘).css(‘color‘,‘red‘);
    $(‘#box‘).find(‘p‘).css(‘color‘,‘blue‘);

    //子选择器
    $(‘#box > p‘).css(‘color‘,‘red‘);
    $(‘#box‘).children(‘p‘).css(‘color‘,‘blue‘);

    //next选择器,获取节点后一个同级DOM对象,如果不是所指定的没有效果
    $(‘#box + p‘).css(‘color‘,‘red‘);
    $(‘#box‘).next(‘p‘).css(‘color‘,‘blue‘);

    //nextAll,获取节点后所有同级DOM对象
    $(‘#box ~ p‘).css(‘color‘,‘red‘);
    $(‘#box‘).nextAll(‘p‘).css(‘color‘,‘blue‘);
});

jQuery方法对选择器的补充:

    //jQuery对高级选择器的补充,提供的几种方法
    //同级上指定元素:一个或所有个
    $(‘#box‘).prev(‘p‘).css(‘color‘,‘red‘);
    $(‘#box‘).prevAll(‘p‘).css(‘color‘,‘blue‘);
    //同级非指定元素:上或下
    $(‘#box‘).prevUntil(‘p‘).css(‘color‘,‘red‘);
    $(‘#box‘).nextUntil(‘p‘).css(‘color‘,‘blue‘);
    //同级指定元素:上和下
    $(‘#box‘).siblings(‘p‘).css(‘color‘,‘red‘);

注:1 方法如果不传参相当于*,表示任意,不建议使用

2 方法相对高级选择器写法好一些:find()最快,可以拆分组合使用

    var box = $(‘#box‘);
    var p = box.find(‘p‘);

----------------------------------------------------------------------------------------------------------------------------------------------------------

属性选择器:

    <a sss="x" title="num1 aaa bbb">num1</a>
    <a>num2</a>
    <a>num3</a>
    <a>num4</a>
    <a sss="s" title="num5">num5</a>
    <a title="num-6">num6</a>
    <a title="nsdfnumsdf">num7</a>
    //属性浏览器
    $(‘a[title]‘).css(‘color‘,‘red‘);
    $(‘a[title=num1]‘).css(‘color‘,‘blue‘);
    $(‘a[title^=num]‘).css(‘color‘,‘red‘);
    $(‘a[title$=1]‘).css(‘color‘,‘blue‘);
    $(‘a[title|=num]‘).css(‘color‘,‘red‘);
    $(‘a[title!=num5]‘).css(‘color‘,‘blue‘);
    $(‘a[title~=aaa]‘).css(‘color‘,‘red‘);
    $(‘a[title*=num]‘).css(‘color‘,‘blue‘);
    $(‘a[sss][title=num5]‘).css(‘color‘,‘red‘);
时间: 02-08

jQuery高级选择器和其等价方法的相关文章

jQuery高级选择器

高级选择器方法: find().children().next().nextAll().prev().prevAll().siblings().nextUntil().prevUntil() 这些方法如果不传递参数,相当于传递了('*'),即所有节点.如果传递了参数,例如 find('p'), next('a'),则表示选择指定的标签元素. find():选择正在处理的元素的后代元素 find('p'):选择正在处理的元素的后代元素中的p元素 children(): 选择正在处理的元素的所有儿子

黑马day18 jquery高级特性&amp;Ajax的load方法

介绍jquery中的load方法: (1).前面没有jquery.修饰,可以推断出他是一个普通的非全局函数(也就是说是一个局部函数):$.,$().,jquery.等修饰的就是全局函数,没有这些修饰的就是局部函数. (2).$(expr).load(url,data,callback); url:请求路径,绝对路径或者相对路径都可以. data: 请求参数,格式必须是key/value格式(json格式) callback:回调函数.function(data,textStatus,XMLHtt

JQuery :eq() 选择器 与 eq()遍历方法

一.:eq()选择器 语法: $(  " :eq(index)" ) 在匹配的集合中选择索引值为index的元素,index索引值从0算起.就是选的第 "index+1" 的元素. 若要获取变量, $("#parent child:eq( j ) input:eq(0)").val(elem); //j是变量 $("#parent child:eq( j ) input:eq(1)").val(da[elem]); 上面这种写

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法

1 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 2 3 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 4 $("div") 选择所有的div标签元素,返回div元素数组 5 $(".myClass") 选择使用myClass类的css的所有元素 6 $("*") 选择文档中的所有的元素,可

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

JQuery_高级选择器

在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery 兼容,这些选择器的使用频率也越来越高. 1.层次选择器 在层次选择器中,除了后代选择器之外,其他三种高级选择器是不支持 IE6 的,而 jQuery却是兼容 IE6 的. 1.后代选择器 <script type="text/javascript" src="jquery

jQuery常规选择器

要点: 基础选择器 id选择器.标签选择器.类选择器.子选择器 进阶选择器 群组选择器.后代选择器.通配选择器 高级选择器 层次选择器 属性选择器 一.简单选择器 主要包括id选择器.标签选择器.类选择器.子选择器 1.ID选择器,将Id为box的元素的字体颜色修饰为blue <div id="box">box</div> $("#box").css("color", "blue"); 2.标签选择器,

jQuery学习笔记——jQuery常规选择器

一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

jquery高级编程学习

jquery高级编程 第1章.jQuery入门 类型检查 对象 类型检查表达式 String typeof object === "string" Number typeof object === "number" Boolean typeof object === "boolean" Object typeof object === "object" Element object.nodeType null object =