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

JavaScript(15)jQuery 选择器

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

jQuery 选择器

选择器同意对元素组或单个元素进行操作。

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

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

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");


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

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

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

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

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

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

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

。。

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

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

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

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

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

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

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

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

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

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

。)

<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.net/116405.html原文链接:https://javaforall.net

(0)
上一篇 2022年1月21日 下午9:00
下一篇 2022年1月21日 下午9:00


相关推荐

  • 大一java实训报告1500字_java实训报告总结范文

    大一java实训报告1500字_java实训报告总结范文1java 实训报告总结范文 WORD 文档 下载后可编辑修改下面是小编收集整理的范本 欢迎您借鉴参考阅读和下载 侵删 您的努力学习是为了更美好的未来 java 实训报告范文一一 实训目的 1 熟练掌握 Java 面向对象程序设计的基础知识 2 熟练掌握 Java 中常用的 Swing 组件的使用方法 3 熟练掌握 Java 程序中图形用户界面设计的方法 4 熟练掌握使用 JDBC 操作数据库的方法 5 通过实

    2026年3月17日
    2
  • 全网都在养龙虾,为什么你的那只“只会发呆”?OpenClaw 避坑指南

    全网都在养龙虾,为什么你的那只“只会发呆”?OpenClaw 避坑指南

    2026年3月16日
    2
  • 改变随机数中一些值的概率

    改变随机数中一些值的概率

    2021年11月15日
    38
  • http GET 和 POST 请求的优缺点、区别以及误区

    http GET 和 POST 请求的优缺点、区别以及误区Get 和 Post 在面试中一般都会问到 一般的区别 1 post 更安全 不会作为 url 的一部分 不会被缓存 保存在服务器日志 以及浏览器浏览记录中 2 post 发送的数据更大 get 有 url 长度限制 3 post 能发送更多的数据类型 get 只能发送 ASCII 字符 4 post 比 get 慢 5 post 用于修改和写入数据 get 一般用于搜索排序和筛选之类的操作 淘宝

    2026年3月19日
    5
  • js判断数据类型(全)

    js判断数据类型(全)js 基本数据类型基本数据类型 String Number Boolean Undefined 未定义 null 空 symbol 表示独一无二的值 es6 引入的新的原始数据基本类型 Number 返回的特殊值 NaN 表示不是数值 用于表示本来要返回的数值的操作失败了 String 字符串是不可变的 一旦创建 值就不能变了 做的字符串操作是先对原字符串进行销毁再创建的 null null 值表示一个空对象指针 typeofnull 结果是 object symbol 符号 是原始值 且实例是唯一 不

    2026年3月19日
    2
  • pycharm conmunity 2022.1没有mange repositories,只能使用命令方式修改镜像源(长期可信)

    pycharm conmunity 2022.1没有mange repositories,只能使用命令方式修改镜像源(长期可信)修改为清华大学的镜像源 并置为可信 阿里云的好像有点问题但不知到出在哪里 pipconfigset index urlhttps pypi tuna tsinghua edu cn simpletruste hostpypi tuna tsinghua edu cnPSD Python project Cycle Gan gt pipconfigset index urlhttps pypi tuna tsinghua edu cn

    2026年3月27日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号