JavaScript(15)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
JavaScript(15)jQuery 选择器相关推荐
- JavaScript及jQuery选择器(二)
1.选择指定ID元素 对于选择DOM元素,javascript提供了以下两个方法: document.getElementById(): document.getElementsByTagName() ...
- JavaScript(12) jQuery选择器(基本选择器、层级选择器、伪类选择器、属性选择器)
提示:我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器=============== ...
- JavaScript(15) jquery循环方法
$.each(object,function(index,e){ ... }); object --> 需要遍历的对象或数组 index --> 索引 ...
- jquery选择器_jQuery选择器
jquery选择器 jQuery selector is the most significant element in the jQuery library. The main tasks we d ...
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
- JavaScript强化教程——jQuery选择器
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所 ...
- jQuery 选择器中的空格问题
直接来看例子: 1 <html> 2 <head> 3 <title>选择器空格的tips</title> 4 <script type=&quo ...
- jquery选择器从认识到使用初级篇
1. .class 选择器 ---一种通过元素类别属性查找元素 调用格式: $(".class") ----其中参数表示元素的css类别名称(类选择器) <input ...
- MySQL、JDBC、HTML、CSS、JavaScript、jQuery、tomcat、Http、Servlet、JSP、EL、JSTL、Maven、Cookie、Session(框架第一部分)
第一章 MySQL 一 .数据库 1.什么是数据库? 所谓的数据库就是指存储和管理数据的仓库 2.数据库有哪些分类? 3.什么是关系型数据库? 底层以二维表的形式保存数据的库就是关系型数据库 stu- ...
最新文章
- 使用keras构建LSTM分类器
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)...
- STM32 基础系列教程 50 – MbedTls
- Android中链接到百度进行搜索
- linux 下停止监听程序,Linux下启动Oracle服务和监听程序步骤
- 使用 ML.NET 实现峰值检测来排查异常
- 对 精致码农大佬 说的 Task.Run 会存在 内存泄漏 的思考
- 【CodeForces - 340D】Bubble Sort Graph (思维,nlogn最长上升子序列类问题)
- network---written test
- python wheel使用_【转载】Python,使用Wheel打包
- DFS+BFS(POJ3083)
- Build your own distribution based on Fedora CoreOS
- matlab中realmax
- GNS3安装和使用教程
- (6)微信UI自动化-搜索指定联系人(C#)
- (更新)视频设备通过rtsp接入amazon alexa echo show
- Android CameraX 使用入门
- 关于阿里云服务器密码重置和使用方法
- js组件化、模块化开发
- 什么是浏览器指纹? 浏览器指纹技术应用有哪些?
热门文章
- 使用CUrl断点续传下载Linux内核5.6.2源码
- 【转载】比特币入门教程
- python模拟鼠标点击和键盘输入的操作_Python模拟鼠标点击及键盘输入(PyUserInput)...
- 8. An Introduction to MCMC for Machine Learning (4)
- 计算机考研我该如何准备,计算机考研该如何准备呢-考研初试
- 以下属于单例模式的优点的是_三、单例模式详解
- 改mysql修改界定符_dbvisualizer参数设置
- 使用示例_在Unity中使用ComputeShader示例
- 2.6 处理数据不匹配问题-深度学习第三课《结构化机器学习项目》-Stanford吴恩达教授
- STM32 基础系列教程 31 – DAC