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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 添加背景音乐的html标签是music,添加背景音乐的html标签是什么,

    添加背景音乐的html标签是music,添加背景音乐的html标签是什么,添加背景音乐的html标签是什么添加背景音乐的html标签是什么,添加背景音乐的html标签是bgsound。bgsound用于插入背景音乐,但只适用于IE,不适用于netscape和firefox。它的参数很少设置,语法是“bgsoundsrc=’bjyy.mp3′loop=-1”。推荐:《HTML视频教程》添加背景音乐的html标签是bgsound。Bgsound用于插入背景音乐,但只适…

  • pycharm调试python_pycharm调试快捷键

    pycharm调试python_pycharm调试快捷键最全设置资料,请见:http://www.cnblogs.com/tsingke/p/7392800.htmlPyCharm简介:PyCharm是由JetBrains打造的一款PythonIDE,VS2010的重构插件Resharper就是出自JetBrains之手。同时支持GoogleAppEngine,PyCharm支持IronPython。这些功能在先进代码分…

  • 也谈AutoEventWireup「建议收藏」

    也谈AutoEventWireup「建议收藏」.aspx设置AutoEventWireup=false情况下,Page_Load方法没有办法成为Load事件的订阅者,我们必须手工进行相应的subscribe,不然我们就看不到输出的hello.<%@PageLanguage=”C#”AutoEventWireup=”false”CodeFile=”Default.aspx.cs”Inherits=”_D…

  • 基于Vue的电商后台管理系统(2)

    基于Vue的电商后台管理系统(2)电商后台管理系统2前言上期已经实现该系统的登陆界面、路由、登录、退出及导航守卫功能,本期将继续完善该系统的以下功能:从后端获取后台列表数据并渲染到前端页面、用户列表的展示、修改、删除和添加。后台页面布局本系统后台将采用ElementUI中的Container布局容器。基本结构如下:代码框架:<el-container><el-header>Header</el-header><el-container><el-a

  • linux 操作系统 哪个好用,一款非常好看好用的国产Linux操作系统发行版

    linux 操作系统 哪个好用,一款非常好看好用的国产Linux操作系统发行版原标题:一款非常好看好用的国产Linux操作系统发行版之前在网上看到有网友说,国产操作系统的界面不好看,很简陋很粗糙,就像是WindowsXP的那种年代久远的操作界面一样。也有网友反驳说,国产操作系统界面友好,看起来很舒服。那么事实上是怎样的呢?到底是国产操作系统的设计还停留在人家微软的远古时代,还是部分网友对国产操作系统的认知有偏差?下面我来为大家展示一下。笔者接下来为大家展示的,是在国内做是…

  • 需要惊人的免费编码教程吗? 订阅这些YouTube频道。

    需要惊人的免费编码教程吗? 订阅这些YouTube频道。byBeauCarnes通过博卡恩斯需要出色的免费编码教程吗?订阅这些YouTube频道。(Wantexcellentfreecodingtutorials?SubscribetotheseYouTubechannels.)TherearesomanygreatFREEsoftwaretutorialsandcoursesonYouTube…

发表回复

您的电子邮箱地址不会被公开。

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