Jquery元素选择器详解

心已赠人 2022-07-15 05:45 254阅读 0赞

元素选择器不是很复杂，也非常简单，下面给大家举个例子，写法还在跟ID选择器、class选择器一样。

**实例演示**

//元素选择器

$(“\#sp6”).click(function()\{

$(“span”).toggleClass(‘jingshan’);

\});

在这里也要相应的添加上span选择器扳机：

<h2>这里是操作按钮区域</h2>

<span id=”sp1”>ID1选择器</span>

<span id=”sp2”>ID2选择器</span>

<span id=”sp3”>ID3选择器</span>

<span id=”sp4”>class1选择器</span>

<span id=”sp5”>class2选择器</span>

<span id=”sp6”>span选择器</span>

**演示效果如下图**

![Center][]

发现是不是点击span选择器时，所有都变成红色了。

元素选择器仅仅是这样普通应用意义不大，主要是元素选择器内部的、以及它们之间的比如说ID、元素之间的综合应用。

**选择器的使用方法**

1、并列 $("div,span,p.myClass")

2、家族 $("form input")

3、父子 $("form > input")

4、紧邻 $("label + input")

5、同辈\[后辈\] $("form ~ input")

**首先先来看看组合选择器的应用：**

//组合选择器

//并列选择器

$(“\#sp7”).click(function()\{

$(“\#ID1，\#ID2，\#ID3”).toggleClass(‘jingshan’);

\});

$(“\#sp8”).click(function()\{

$(“.class1,.class2”).toggleClass(‘jingshan’);

\});

$(“\#sp9”).click(function()\{

$(“\#ID1,.class2”).toggleClass(‘jingshan’);

\});

**与之对应的添加上操作目标：**

<span id=”sp7”>\#ID1，\#ID2，\#ID3选择器</span>

<span id=”sp8”>.class1,.class2选择器</span>

<span id=”sp9”>\#ID1,.class2选择器</span>

**演示图效果如下：**

![Center 1][]

（ID选择器演示图）

![Center 2][]

（class选择器演示图）

![Center 3][]

（ID选择器与class选择器搭配使用演示图）

原文链接：[http://www.maiziedu.com/wiki/jquery/element/][http_www.maiziedu.com_wiki_jquery_element]

[Center]: /images/20220715/4beca3e0d8f947a1a6796928ddc71f5d.png
[Center 1]: /images/20220715/7f8d8d349ac0402ca14030b8a5ea575a.png
[Center 2]: /images/20220715/e3bf2713dd8049ac9f816098fb3caef8.png
[Center 3]: /images/20220715/402fb98ddf064c0d8db767ad506381f1.png
[http_www.maiziedu.com_wiki_jquery_element]: http://www.maiziedu.com/wiki/jquery/element/

发表评论取消回复

表情：

评论列表（有 0 条评论，254人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

一、jQuery选择器 1、父元素(向上遍历单一层级)：parent() 2、祖先元素：parents(selector) 3、子元素(向下遍历单一层级)：child

本是古典何须时尚/ 2023年10月07日 11:58/ 0 赞/ 10 阅读

相关 Jquery元素选择器详解

　　元素选择器不是很复杂，也非常简单，下面给大家举个例子，写法还在跟ID选择器、class选择器一样。实例演示 //元素选择器 $(“\sp6”).click(func

心已赠人/ 2022年07月15日 05:45/ 0 赞/ 255 阅读

相关 jQuery选择器详解(层叠选择器/过滤选择器/表单选择器)

[jQuery][] 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("\myELement") 选择id值等于myElement的元素，id值不能重

深碍√TFBOYSˉ_/ 2022年06月12日 01:58/ 0 赞/ 362 阅读

相关 jquery子元素过滤选择器，

1.1．子元素过滤选择器根据子元素顺序来获取。：nth-child（序号）；根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置也

柔情只为你懂/ 2022年06月06日 06:25/ 0 赞/ 262 阅读

相关 jQuery选择器获取元素

1、遍历tr中所有td中的内容 // 遍历 tr $('tab tr').each(function(i){

柔光的暖阳◎/ 2022年05月24日 09:11/ 0 赞/ 247 阅读

相关 jQuery 兄弟元素选择器

本篇文章介绍jQuery的兄弟元素选择器什么是兄弟元素？ <ul id="list"> <li class="li-1">web-7258</li

小鱼儿/ 2022年05月12日 12:26/ 0 赞/ 283 阅读

相关 jQuery元素选择器（element）

一介绍元素选择器是根据元素名称匹配相应的元素。通俗的讲元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。可以把元素的标记名理解成学

矫情吗；*/ 2022年05月12日 00:34/ 0 赞/ 272 阅读

相关 jQuery选择器全集详解

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 选择器是jQuery最基础的东西，本文中列举的选择器基本

系统管理员/ 2022年01月16日 16:35/ 0 赞/ 178 阅读

相关 jQuery--过滤选择器（简单过滤选择器、内容过滤选择器）详解

过滤选择器基本选择器和层次选择器可以满足大部分页面元素的选取需求。在jQuery中还提供了功能更加强大的过滤选择器，根据特定的过滤规则来筛选出所有需要的页面元素。过滤选

绝地灬酷狼/ 2021年08月13日 23:46/ 0 赞/ 534 阅读

相关 jQuery--选择器（基本选择器、层次选择器）详解

jQuery选择器通过jQuery选择器可以方便快捷地获得页面中的元素，然后为其添加相应行为，无需担心浏览器的兼容性问题。jQuery选择器完全继承了CSS选择的风格，

深碍√TFBOYSˉ_/ 2021年08月13日 11:24/ 0 赞/ 636 阅读