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. Azure 云 Web 应用程序

    Azure 云 Web 应用程序 原文:Getting Started作者:Rick Anderson翻译:谢炀(Kiler)校对:孟帅洋(书缘).刘怡(AlexLEWIS).何镇汐 设置开发环境 安 ...

  2. 关于 调用 JNI JAR 的说明和注意事项，调用第三方 JAR SDK 和 翻译 安卓 JAVA 代码 的说明 V2015.6.10

    关于 调用 JNI JAR 的说明和注意事项,调用第三方 JAR SDK 和 翻译 安卓 JAVA 代码 的说明 V2015.6.10 转载请标明出处,否则死全家.选择[复制链接]即可得到出处. (* ...

  3. linux配置ssh+rsync

    ssh  远程登录 sftp    文件共享 类似ftp  ssh  secure file transfer client scp    文件共享 类似cp   ssh配置文件 /etc/ssh/s ...

  4. 基于visual Studio2013解决面试题之0808寻找中间数

     题目

  5. 通过Jexus 部署 dotnetcore

    通过Jexus 部署 dotnetcore版本MusicStore 示例程序 ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mo ...

  6. 在Ubuntu 12.04下编译qtiplot

    不在windows下,再加上不想用盗版,所以需要一个origin的替代品——qtiplot.虽然我非常抵抗用这种不停点来点去的软件,用R的ggplot2画图多好啊,高效.优雅.漂亮,但是终抵不过老板一 ...

  7. readline-6.3 之arm平台交叉编译

    近期须要弄个CLI命令接口程序,初步设想是须要支持历史命令翻阅,tab键命令补全这种一个东西.经查阅相关文档,深耕百度一番!(google近期不太正常) 实在恼火.发现readline果真是个好东西, ...

  8. QNX---Interrupt vector numbers（原创！！！）

    Interrupt intr Description 0 A clock that runs at the resolution set by ClockPeriod() 1 Keyboard 2 S ...

  9. C++基础学习笔记----第七课（面向对象的基本概念）

    主要讲面向对象的基本概念和一些概念,以及实现简单的面向对象C++程序. 类和对象 基本概念 类和对象是面向对象中的两个基本概念,类是指一类事物,是一个抽象的概念.对象是指某一个类的实体,是一个具体存在 ...

  10. iphone缩小uIImage图片

    UIImage的缩小 有时候,项目中,要用到上传图片,从图片库里取出的图片有的太大了,而要上传的时候,会很费时间,而且也没必要太大,所以就把图片综缩小一下,再传! #pragma UIImagePic ...