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. 在Qt中如何使用QtDesigner创建的UI文件

    使用Qt有一些时间了,一直在IDE环境(qtcreator和VS2003+集成器)中使用,自然少了很多麻烦的步骤.但是在享受这种便利的同 时,我们也失去了理解更多知识背后的点滴.在IDE中,如果我们要 ...

  2. DELPHI语法基础学习笔记-Windows 句柄、回调函数、函数重载等（Delphi中很少需要直接使用句柄，因为句柄藏在窗体、 位图及其他Delphi 对象的内部）

    函数重载重载的思想很简单:编译器允许你用同一名字定义多个函数或过程,只要它们所带的参数不同.实际上,编译器是通过检测参数来确定需要调用的例程.下面是从VCL 的数学单元(Math Unit)中摘录的一 ...

  3. VC Office2007界面对话框实现

    我们知道VS2008SP1之后,MFC就多了一个功能包,可以快速的建立一个ribbon的界面,视觉样式可以在office 2007蓝.黑等颜色之间切换,这对于单文档/多文档做界面非常方便,而且也蛮好看 ...

  4. 手动加入PE文件数字签名信息及格式具体解释图之下(历史代码，贴出学习)

    #include <windows.h> HANDLE hWriteFileHandle = NULL ; HANDLE hReadFileHandle = NULL ; HANDLE h ...

  5. EasyUI - 后台管理系统 - 登陆模块

    效果: --- --- Html代码: <div id="login"> <p>账户:<input type="text" id= ...

  6. 让office2003和office2010共存的方法【转】

    前段时间由于工作需要安装office2010,每次打开word都会弹出安装配置界面,反之亦然.于是我在网上找了不少资料.也试了不少方法,终于试用了以下方法得以解决,以下来源于网络. 电脑上同时安装了O ...

  7. 基于Greenplum Hadoop分布式平台的大数据解决方案及商业应用案例剖析

    随着云计算.大数据迅速发展,亟需用hadoop解决大数据量高并发访问的瓶颈.谷歌.淘宝.百度.京东等底层都应用hadoop.越来越多的企 业急需引入hadoop技术人才.由于掌握Hadoop技术的开发 ...

  8. 杭电OJ_DIY_YTW2_1001 A Mathematical Curiosity

    Problem Description Given two integers n and m, count the number of pairs of integers (a,b) such tha ...

  9. Linux账号管理（二）

    再次声明,整理此系列Linux博客,主要目的不是介绍各种命令,而是去探索命令背后的理论. 本篇主要介绍用户的创建与删除. 创建用户主要用到useradd命令,在用此命令时可以指定各种参数.一般默认就可 ...

  10. 使用OVS

    创建节点: 需要在组件上引用OVS组件WDR_OVS:引用后需要更改添加节点属性值如下: 布局如下: 在view中也添加ovs组件 新建事件方法: ON_EVENT 代码如下: METHOD on_e ...