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 选择器的更多相关文章

  1. jQuery 选择器和JavaScript 选择器的技巧与异常原因

    jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...

  2. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

  4. 在.NET中使用JQuery 选择器精确提取网页内容

    1. 前言 相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...

  5. JavaScript、Jquery选择题

    尚学堂Java EE软件工程师认证考试 试题库-选择题     一.    选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是(   )(选择一项) A. numb_1 ...

  6. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  7. jquery选择器从认识到使用初级篇

    1.   .class 选择器 ---一种通过元素类别属性查找元素 调用格式: $(".class") ----其中参数表示元素的css类别名称(类选择器)<input cl ...

  8. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

  9. JQuery选择器大全 前端面试送命题：面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性（又叫抗变）帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

随机推荐

  1. @Autowired 注释与@Qualifier 注释

    @Service("OrganDaoIbatis") public class OrganDaoIbatis extends BaseDao implements IOrganDa ...

  2. Eclipse验证码

    package MyEclipse; import java.io.*;     public class MyEclipseGen {     private static final String ...

  3. 【视频】零基础学Android开发：蓝牙聊天室APP（四）

    零基础学Android开发:蓝牙聊天室APP第四讲 4.1 ListView控件的使用 4.2 BaseAdapter具体解释 4.3 ListView分布与滚动事件 4.4 ListView事件监听 ...

  4. 杂题_POJ上的过桥问题

    本文出自:http://blog.csdn.net/svitter 过桥问题解释:一条船能够坐两个人,可是有非常多人要过河,所以送过一个人去,还有一个人还要回来接.使全部人过河之后时间最短,怎样求? ...

  5. Microsoft Visual Studio International Pack 1.0 SR1--关于汉字转拼音

    Microsoft Visual Studio International Pack 1.0 SR1————微软的一个类库 地址:http://www.microsoft.com/zh-cn/down ...

  6. KaOS 2016.04 发布，桌面 Linux 发行版

    KaOS 2016.04 发布了,KaOS是一份桌面Linux发行,其特色在于最新版本的KDE桌面环境及其他流行的使用Qt工具包的软件程序.它最初基于Arch Linux,但从2013年四月起,开发者 ...

  7. PHP环境部署问题集合

    Forbidden You don't have permission to access /phpmyadmin/ on this server. 安装wamp 后访问 http://localho ...

  8. Beaker 1.6.4 : Python Package Index

    Beaker 1.6.4 : Python Package Index Beaker 1.6.4 Download Beaker-1.6.4.tar.gz A Session and Caching ...

  9. 正则表达式概述与JAVA中正则表达式的应用

    编程或者电脑使用过程中,经常需要对字符串进行 匹配,查找,替换,判断.如果单纯用代码 if () ,whlie 什么的进行比较复杂麻烦.正则表达式是一种强大灵活的文本处理工具,专门对字符串进行匹配,查 ...

  10. 优化Java堆大小5温馨提示

    总结:Java没有足够的堆大小可能会导致性能非常大的影响,这无疑将给予必要的程序,并不能带来麻烦.本文总结了影响Java居前五位的能力不足,并整齐地叠优化? 笔者Pierre有一个10高级系统架构师有 ...