`

jquery元素选择器的学习

阅读更多
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。


jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。


jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:

实例
$("p").css("background-color","red");



更多的实例
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的 href 属性的属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

更多选择器:jQuery 参考手册 - 选择器 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
分享到:
评论

相关推荐

    jQuery基础选择器练习题

    3. **元素选择器**: 直接使用元素名称来选取所有该类型的元素,例如`$("div")`将选取所有`&lt;div&gt;`元素。 4. **标签选择器与类选择器结合**: 如`$("div.myClass")`,选取所有同时是`&lt;div&gt;`并且class为"myClass"的元素...

    jquery基本选择器

    3. **元素选择器** 直接使用元素名称来选取所有匹配的元素。例如,`$("p")`会选择所有的段落元素。 4. **后代选择器 ( )** 使用空格来选取某个元素的后代元素。例如,`$("div p")`会选择所有在`div`元素内的`p`...

    JQuery选择器测试 离线版

    在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用选择器等。 1. **基础选择器**:主要包括`$()`,用于选取一个或多个DOM元素...

    jquery双向选择器代码

    jQuery提供了多种内置的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,它们用于定位HTML文档中的特定元素。双向选择器则在此基础上增加了更复杂的逻辑,它可以同时选取两个或多个相关的...

    jQuery选择器全解.

    选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景,熟悉并...

    jquery样式选择器插件源码demo

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

    jquery颜色选择器源码

    学习jQuery颜色选择器源码,我们可以深入理解以下知识点: 1. jQuery选择器和DOM操作:如何使用jQuery选择特定的HTML元素,如`.addClass()`, `.removeClass()`, `.val()`等方法来改变元素的样式和内容。 2. 事件...

    jQuery选择器.rar

    1. **基本选择器**:包括`$()`函数内的ID选择器(如`$("#myID")`)、类选择器(`.myClass`)、元素选择器(`$("div")`)和标签选择器(`$("p")`)。这些选择器基于元素的ID、类名、标签名来定位元素。 2. **组合...

    jQuery选择器大全

    1. **直系子元素选择器**:`parent &gt; child`,仅选取指定父元素的直接子元素,例如`$('div &gt; span')`将选取所有直接位于`&lt;div&gt;`标签内的`&lt;span&gt;`元素,排除嵌套层级更深的匹配项。 2. **相邻兄弟选择器**:`prev + ...

    jquery时间选择器

    通过查看和理解这些文件,开发者可以学习如何创建自己的jQuery时间选择器,或者根据需要对其进行修改和扩展。 总的来说,jQuery时间选择器是前端开发中的一个重要工具,它通过便捷的API和丰富的自定义选项,帮助...

    jquery颜色选择器

    4. **初始化插件**:在页面加载完成后(通常在`$(document).ready()`函数中),使用jQuery选择器找到元素并调用颜色选择器插件的初始化方法,设置相关配置,如预设颜色、回调函数等。 5. **事件监听**:你可以监听...

    jQuery学习资料之万能的选择器

    - **层次选择器**:`&gt;`(子元素选择器)、`+`(紧邻兄弟选择器)、`~`(后续兄弟选择器)和` `(后代选择器)。 - **属性选择器**:`[attr]`(具有指定属性的元素)、`[attr=value]`(属性值等于指定值的元素)、`...

    jquery选择器入门详解小案例

    在JavaScript的世界里,jQuery是一个非常流行且...在深入学习jQuery选择器的同时,别忘了结合实际项目进行练习,这样才能更好地将理论知识转化为实际技能。现在,你可以打开案例文件,开始你的jQuery选择器探索之旅吧!

    jQuery表单选择器源码

    jQuery提供了丰富的选择器,其中包括专门针对表单元素的选择器,如`:$(':text')`用于选取所有文本输入框,`:$(':radio')`选取所有的单选按钮,`:$(':checkbox')`选取所有的复选框,以及`:$(':selected')`选取所有被...

    jQuery中的基本选择器用法学习教程

    - **元素选择器**: 直接使用元素标签名,如`$('div')`,会选择所有`&lt;div&gt;`元素。 - **类选择器**: 使用`.`前缀来选择具有特定类的元素,例如`$('.box')`会选择所有class为`box`的元素。 2. **计数与遍历**: - `...

    jQuery选择器的一个Bug

    jQuery基于CSS选择器,它允许开发者通过类似CSS的方式选取DOM元素,如`$("#id")`、`$(".class")`或`$("tag")`等。jQuery会解析这些选择器,然后使用其内部实现的高效算法来查找匹配的元素。 这个特定的Bug可能涉及...

    jQuery元素选择器用法实例

    总结来说,通过本文给出的实例,我们可以看到jQuery元素选择器的强大之处:它通过简单直观的语法,让我们能够迅速地选取页面中的元素,并对它们执行各种操作。对于初学者来说,掌握元素选择器的使用是开始学习jQuery...

    Jquery实验室的选择器工具

    jQuery提供了多种基本选择器,如ID选择器(`#id`)、类选择器(`.class`)和元素选择器(`element`)。例如,`$("#myID")`用于选取ID为`myID`的元素,`$(".myClass")`则选取所有类名为`myClass`的元素,而`$("div")`...

    jQuery常规选择器源码

    jQuery支持多种选择器,包括基本选择器(如"#id"、".class"、"tag")、类别选择器(如"[attribute]"、"[attribute=value]")、组合选择器(如","、"+"、"&gt;")以及伪类和伪元素选择器(如":hover"、":first")。...

Global site tag (gtag.js) - Google Analytics