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 update和repaint的区别

    void QWidget::repaint ( int x, int y, int w, int h, bool erase = TRUE ) [槽] 通过立即调用paintEvent()来直接重新绘 ...

  2. SwifThumb.com 第一家Swift开发人员论坛 QQ群 343549891

     官方QQ群2: 兴许会有app出来让大家随时地学习Swift并在线交流~ watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW5ld2N6cw==/font ...

  3. Swift - 使用CATransition制作过渡动画（页面切换转场效果）

    CATransition动画主要在过渡时使用,比如两个页面层级改变的时候添加一个转场效果.CATransition分为两类,一类是公开的动画效果,一类是非公开的动画效果. 1,公开动画效果: kCAT ...

  4. 重操JS旧业第二弹：数据类型与类型转换

    一 数据类型 1 js中的数据类型 1.1 数据类型列举 1)number类型 2)boolean类型 3)string类型 4)对象类型 5)函数类型 6)undefined类型 1.2 数据类型获 ...

  5. call、apply以及bind

    call与apply都可以改变js的this指向,两者最主要的区别就是使用时传参的不同,apply的参数可以以数组的形式传进来,但是call方法的参数必须要一个一个的传进来,就像这样. func.ca ...

  6. qt学习笔记（七）之数据库简介（所有支持数据库类型的列表）

    笔者最近用Qt写公司的考勤机.本来要求是要基于frameBuffer下用自己开发的easyGUI来进行上层应用开发,但是考虑到easyGUI提供的接口不是很多,就考虑用Qt来开发,顺带练练手. 废话不 ...

  7. linux安装Eclipse c++环境

    yum install eclipse     yum install eclipse-cdt

  8. 运行tomcat6w.exe ,提示 指定的服务未安装 unable to open the service 'tomcat66'

    错误:运行tomcat6w.exe ,提示 指定的服务未安装 unable to open the service 'tomcat6'(我用的是官网下载的解压版) 解决方法: 打开命令行提示符窗口=& ...

  9. POJ3436 ACM Computer Factory 【最大流】

    ACM Computer Factory Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5412   Accepted: 1 ...

  10. Eclipse中提高Android SDK Manager下载速度方法

    在Windows-System32-drivers-ect目录下找到hosts文件 打开hosts文件(用记事本打开就可以),在文件以下填上一下内容: 203.208.46.146 www.googl ...