Jquery元素选择器详解

心已赠人 2022-07-15 05:45 279阅读 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 条评论，279人围观）

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

相关阅读

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

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

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

相关 jQuery的元素选择器

标签元素选择器（element）指向 DOM 节点的标签名,根据给定的元素名匹配所有元素。示例描述: 查找一个 DIV 元素。 HTML 代码: <d

朴灿烈づ我的快乐病毒、/ 2023年06月14日 10:54/ 0 赞/ 12 阅读

相关 jquery子元素选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

今天药忘吃喽~/ 2023年06月12日 06:20/ 0 赞/ 33 阅读

相关 Jquery元素选择器详解

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

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

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

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

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

相关 jQuery选择器获取元素

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

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

相关 jQuery 兄弟元素选择器

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

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

相关 jQuery元素选择器（element）

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

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

相关 jQuery选择器全集详解

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

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

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

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

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