前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript(15)jQuery 选择器[通俗易懂]

JavaScript(15)jQuery 选择器[通俗易懂]

作者头像
全栈程序员站长
发布2022-07-07 19:07:38
1.7K0
发布2022-07-07 19:07:38
举报

大家好,又见面了,我是全栈君。

jQuery 选择器 选择器同意对元素组或单个元素进行操作。 jQuery 元素选择器和属性选择器同意通过标签名、属性名或内容对 HTML 元素进行选择。

在 HTML DOM 术语中:选择器同意对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 (“p”) 选取 <p> 元素。

jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $(“[href]”) 选取全部带有 href 属性的元素。

$(“[href=’#’]”) 选取全部 href 属性的值等于 “#” 的元素。

(“[href!=’#’]”) 选取全部 href 值不等于 “#” 的元素。 (“[href=’.jpg’]”) 选取全部 href 值以 “.jpg” 结尾的元素。

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

以下的样例把全部 p 元素的背景颜色更改为红色:

代码语言:javascript
复制
$("p").css("background-color","red");

上面的看完了我也不知道选择器是什么。。。

来点自己的理解和总结。。。 选择器语法:$(“……”)

也能够这样分类: ① 选取全部元素:(“*”)(注意里面是”星号“) ② 选取class:(“.class名”) (注意前面有个”点“) ③ 选取id:(“#id名”) ④ 选取元素:(“标签名”) ⑤ 选取属性:(“[属性名]”) ⑥ 依据特征来选取元素:(“:特征”)(注意前面有个”冒号“)

这六种选择器还能够组合一下,产生很多其它的选择器。 比方:④②、④⑥ 还能够是:④④⑥、④③②(同类型之间要用“空格”隔开。如:(“ul li:first”)、(“div#intro .head”))

选取当前 HTML 元素:$(this)

嵌套选择器 如:选取指定标签中的其他标签中的元素:$(标签名 *) (注意指定的标签中一定要有其他标签,否则没有效果。

道理就是我为我家狗狗取名叫小狗,但实际是我家根本没有狗狗。

。。

假设要进一步选择css属性:$(“……”).css(“……”)

(“[属性名=’#’]”) 选取全部属性的值等于 “#” 的元素。 (“[属性名!=’#’]”) 选取全部属性的值不等于 “#” 的元素。

(“[属性名=’.jpg’]”) 选取全部属性的值以 “.jpg” 结尾的元素。

提示: 依据实践,某些浏览器使用 * 的处理速度缓慢。 不要使用数字开头的 ID 名称!

在某些浏览器中可能出问题。 不要使用数字开头的类名!在某些浏览器中可能出问题。

详细使用时,能够參考“jQuery 选择器參考手冊”。看看有哪些选择器。

这篇写得比較短,但事实上花费的时间比較多。看了非常多样例。

认为如今还是不要每一个都看一遍。以后用到的话边用边学,然后能够在这里补充。

最后还是贴段代码吧。好像代码生动形象直观了当。。

(太懒了,我仅仅想贴一份大杂烩代码(涉及到覆盖)。。

。)

代码语言:javascript
复制
<html>

<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $(":header").css("background-color","grey");

    $("div *").css("background-color","blue");
    $("p *").css("background-color","purple");

    $("p").css("background-color","yellow");

    $("ul li:first").css("background-color","pink");
    $("div#choose .introtoo").css("background-color","green");
});
 
</script>
</head>

<body>

<html>
<body>

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>

<div id="choose">
<p class="introtoo">My name is Donald, too</p>
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>

</body>
</html>

</body>

</html>

结果:

Welcome to My Homepage

My name is Donald

I live in Duckburg

My best friend is Mickey

My name is Donald, too

Who is your favourite:

  • Goofy
  • Mickey
  • Pluto

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/116405.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年1月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Welcome to My Homepage
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档