`

jquery选择器之基本选择器和层次选择器

阅读更多
对于jquery来说,选择器是很强大的一部分,jquery的基本语法是:
$('选择器').动作或者方法();

jquery的选择器基本可以把页面的每个dom节点都能选择到。从而为人们的开发带来了便利,所以选择器是jquery的重头戏。
选择器的分类:
jquery的选择器分成四类:
基本选择器,层次选择器,过滤选择器,表单选择器。
基本选择器
基本选择器最简单也最常用。
//这是一个html片段
<div>
    <button class="but" id="one" >按我啊</button>
    <button class="but1" id="two">居然按我</button>
    <span   class='haha'>哈哈</span>
    <div>
        <button class="but2" id="three">没错我就是第三个</button>
    </div>
    <div class="div1">
        <button class="but3-1" id="four">我不是老四</button>
    </div>
    <div>
        <button class='but3'  id='five'>我是老四的弟弟</button>
    </div>
    <div>
        <button class='but4' id='six'>666</button>
        <button class='but5' id='7'>seven</button>

    </div>
    <div></div>

</div>

现在我要用基本选择器改变button的样式
$('#one').css('font-size','40px')//改变id为one的元素的字体为40像素
$('.but').css('background','black')//改变but类的背景颜色为黑色
$('div').css('padding','10px')//把元素名是div的内边距设置成10px
$('*').css('color','red')//把所有元素设置成红色
$('div,#two,.haha').css('background','green')//把名称为div,id为two,类为haha的元素背景设置成绿色

上一段代码所说的就是基本选择器啦。
接下来是层次选择器
$('body div').css('background','blue');//选取body内的所有div(后代)元素,把背景改为蓝色
$('body > div').css('background','red')//选取body内的所有子div的背景色。。。。注意这个和上一个的区别  一个是后代  一个是子元素
$('.div1+div').css('background','gray');//改变class为but3的下一个div同辈元素的背景色为灰色   也就是上面页面中的id=five的那个div
$('.div1').next('div').css('background','gray');//改变class为but3的下一个div同辈元素的背景色为灰色   也就是上面页面中的id=five的那个div,显然这个比上一个要好的多所以平时都用这个
$('#four~div').css('background','yellow');//改变id=four的元素之后的所有<div>同辈元素的背景色  在上面的程序中  就是把‘我不是老四’,‘我是老四的弟弟’和‘666’这三个块的背景颜色改变了
$('#four').nextAll('div').css('background','yellow');//改变id=four的元素之后的所有<div>同辈元素的背景色  在上面的程序中  就是把‘我不是老四’,‘我是老四的弟弟’和‘666’这三个块的背景颜色改变了  这个方法可以代替上一个方法
$('#four').sibling('div').css('background','yellow');//把所有#four的同辈元素背景都改成黄色  无论前后     这个和上一个和倒数第三个是笔记爱哦容易混淆的

到这里层次选择器就已经说完了。

过滤选择器,就是按照一定的规则来删选元素
第一段代码是所有的基本过滤选择器
$('div:first').css('background','yellow');//把div中的第一个div元素的背景设置成黄色,把first改成last就是最后一个div了
$('div:not(.but3)').css('margin','10px');//除了class是but3的这个div,其余的div外边距设置成10像素
$('div:even').css('background','black');//把所有索引值是偶数的div背景颜色改成黑色,如果把even换成odd的话就是所有索引值是奇数的背景颜色了
$('div:eq(1)').css('background','black');//这个就是把索引值等于3的div背景改变,如果把eq改成gt的话就是大于3,把eq改成lt的话就是小于3;
$(':header').css('background','black');//这个是改变所有标题元素的(h1.h2.....)
//另外还有两个,
$(':animated')//把正在执行动画的元素进行操作
$(':focus')//把当前的获取的焦点元素进行操作

下一段代码是所有的内容过滤选择器
$('div:contains(是)').css('background','black')//把含有文本‘是’的div背景改变
$('div:empty').css('background','black')//把不包含子元素,也就是上买html中写的空div块的背景
$('div:parent').css('background','green')//把包含子元素的div块进行背景改变。子元素也包括文字
$('div:has('.but3')').css('background','black'))//把包含class为but3的div背景进行改变,是改变div不是改变but3 

下一段是所有的可见性过滤选择器
//顾名思义,根据可见和不可见状态来进行改变
$('div:visible').css('background','black')//改变所有可见的div元素背景色,上面的html中所有的div都被改变
$('div:hidden').show(900000)//让display为‘none’的元素和type='hidden'和visibility:hidden的 元素显示90000ms的时间

下一段是属性过滤选择器
$('div[id]').css('background','red')//把含有id属性的div块进行该变
//属性过滤选择器的标志是[],[属性=value]就是把所有属性为value的元素进行改变,属性过滤选择器改变属性和值之间的符号就达到相应的目的,!=是属性的值不是value的元素,其余的符号还有:^=(以value开始的元素),$=(以value结束的值),*=(含有value的元素),|=(属性等于字符串value或者以value为前缀的元素),~=(属性用空格分隔的值中包括value的元素)

下一段是子元素过滤选择器
:first-child//每个父元素的第一个子元素
:last-child//每个父元素的最后一个子元素
:only-child//选取只有一个子元素的父元素的子元素
:nth-child()//这个是重点,每个父元素的下的()元素
//()这里的内容可以是odd(索引值是奇数),even(索引值是偶数),1(索引值是1),2n(索引值是2的倍数)。
$(div.one:nth-child(1)).css('background','black')//把class为one的div父元素下的第一个子元素的背景色进行改变。

到这里基本的选择器已经说完,不过还有一个很重要的部分就是表单选择器,我会再写博客来分享。




























分享到:
评论

相关推荐

    jQuery选择器全解.

    jQuery选择器作为jQuery框架的核心功能之一,为开发者提供了强大的DOM元素检索和操作工具。通过本文的学习,相信你已经对jQuery选择器有了全面的了解。实践是检验真理的唯一标准,建议读者在实际项目中多多尝试,以...

    JQuery选择器测试 离线版

    **jQuery选择器是jQuery库中的核心功能之一,它极大地简化了在JavaScript中选取HTML元素的过程。这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    jQuery选择器大全

    基本选择器是学习jQuery选择器的基石,涵盖了ID选择器、Class选择器、Element选择器及通配符选择器。 1. **ID选择器**:`#id`,用于定位具有特定ID的单一元素,如`$('#one')`会选中ID为“one”的元素,常用于修改该...

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器,它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...

    jQuery选择器基础知识

    本篇文章将深入探讨jQuery选择器的基础知识,包括其类型、用法和实际应用。 ### 1. 基本选择器 基本选择器包括ID选择器(#id)、类选择器(.class)和元素选择器(element)。例如: - `$("#myID")` 选择ID为...

    jQuery选择器速查表

    总的来说,jQuery选择器为我们提供了丰富的方法来定位和操作页面元素,使得DOM操作变得简单、高效。了解并熟练使用这些选择器,对于前端开发人员而言是十分必要的。在实际开发中,可以根据需要灵活组合选择器,以...

    jquery基本选择器

    以上就是jQuery的基本选择器,它们极大地简化了对DOM的操作,使得开发者能更高效地编写和维护代码。结合jQuery的其他功能,如遍历方法、事件处理和动画效果,可以构建出强大的交互式网页应用。通过深入学习和实践,...

    jQuery选择器大全(48个代码片段 21幅图演示)

    **jQuery选择器大全** jQuery库以其易用性和强大的选择器功能而闻名,使得JavaScript开发者能够更轻松地操作DOM(文档对象模型)。...在实际项目中,熟练运用jQuery选择器能大大提高开发效率和代码质量。

    PPT和案例\jQuery选择器

    jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...

    jquery选择器入门详解小案例

    在JavaScript的世界里,jQuery是一个非常流行且强大的库,它极大地简化了DOM操作、事件处理以及动画效果。本篇文章将深入探讨jQuery选择器的入门知识,...现在,你可以打开案例文件,开始你的jQuery选择器探索之旅吧!

    Jquery 选择器整理

    综上所述,jQuery选择器提供了一套强大且灵活的工具,帮助开发者高效地选择和操作DOM元素。无论是简单的元素选择还是复杂的条件过滤,都能轻松实现。在实际开发过程中,合理运用这些选择器可以极大地提高代码的效率...

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jQuery选择器的一个Bug

    然而,即便如此成熟的库,也难免存在一些已知的问题和限制,其中之一就是我们今天要探讨的"jQuery选择器的一个Bug"。 首先,我们要理解jQuery选择器的基本原理。jQuery基于CSS选择器,它允许开发者通过类似CSS的...

    jQuery时间选择器点击选择小时分钟代码

    在网页开发中,jQuery时间选择器是一个非常实用的工具,它允许用户通过点击来选取特定的小时和分钟,为表单输入提供了便利。这个“jQuery时间选择器点击选择小时分钟代码”很可能是一个实现这一功能的代码示例或者...

    经典的jQuery选择器应用例子

    jQuery选择器是其核心功能之一,允许开发者高效地选取页面中的HTML元素,进而进行各种操作。本篇文章将深入探讨jQuery选择器的详细应用,通过一系列经典实例来帮助你更好地理解和运用这些选择器。 1. 基本选择器: ...

    jQuery选择器.rar

    这个名为"jQuery选择器.rar"的压缩包文件显然包含了关于jQuery选择器的相关学习资源,可能包括示例代码、教程文档等。这些内容可能与《锋利的jQuery第二版》这本书中的章节相匹配,该书是jQuery学习的经典参考资料之...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jquery样式选择器插件源码demo

    通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...

    Jquery实验室的选择器工具

    **jQuery选择器工具详解** ...通过这个实验,你将能够更好地掌握jQuery选择器的用法,提高网页开发的效率,并能够灵活应对各种复杂的页面布局和交互需求。在实践中学习和探索,将使你成为jQuery选择器的专家。

Global site tag (gtag.js) - Google Analytics