jQuery（二）

标签：

jQuery选择器（详情查看jQuery手册）
jQuery选择器检测器： http://www.runoob.com/try/trysel.php

id选择器 $(‘#demo‘) document.getElementById(‘demo‘)
类选择器 $(‘.demo‘) document.getElementsByClassName(‘demo‘)
元素选择器 $(‘div‘) document.getElementsByTagName(‘div‘)
全选择器（*选择器）$(‘*‘) document.getElementsByTagName(‘*‘)
层次选择器（子选择器、后代选择器、相邻兄弟选择器、一般兄弟选择器）
基本筛选选择器
内容筛选选择器
可见性筛选选择器
属性筛选选择器
子元素筛选选择器
表单元素选择器
表单对象属性筛选选择器
特殊选择器this

如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选

/**************************层次选择器 start*******************************/

子选择器
$(‘parent > child‘) 直接子元素

后代选择器
$(‘ancestor descendant‘) 所有后代元素

相邻兄弟选择器
$(‘prev + next‘) 紧邻‘prev‘元素后的‘next‘元素

一般兄弟选择器
$(‘prev ~ siblings‘) ‘prev‘元素后所有的兄弟元素

/**************************层次选择器 end*******************************/

筛选选择器很多都不是CSS的规范，而是jQuery为了开发者便利延展出来的选择器，
用法与CSS中的伪元素相似：
$(‘:first‘) 匹配第一个元素
$(‘:last‘) 匹配最后一个元素
$(‘:not(selector)‘) 过滤选择器
$(‘:eq(index)‘) 选取索引值为index的元素
$(‘:gt(index)‘) 选取所有索引值大于index的元素
$(‘:lt(index)‘) 选取所有索引值小于index的元素
$(‘:even‘) 索引值为偶数的元素
$(‘:odd‘) 索引值为奇数的元素
$(‘:header‘) 选取所有的标题元素，像h1，h2，h3等
$(‘:lang(language)‘) 选择指定语言的所有元素
$(‘:root‘) 选择该文档的根元素
$(‘:animated‘) 选择所有正在执行动画效果的元素

内容筛选选择器：
$(‘:contains(text)‘) 选择包含指定文本的元素
$(‘:parent‘) 父级元素
$(‘:empty‘) 选择没有子元素的元素（包括文本节点）
$(‘:has(selector)‘) 有selector选择器的元素

可见性筛选选择器：
$(‘:visible‘) 选择所有显示的元素
$(‘:hidden‘) 选择所有隐藏的元素

属性筛选选择器
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href=‘default.htm‘]") 所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value] $("[href!=‘default.htm‘]") 所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value] $("[href$=‘.jpg‘]") 所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value] $("[title|=‘Tomorrow‘]") 所有带有 title 属性且值等于 ‘Tomorrow‘ 或者以 ‘Tomorrow‘ 后跟连接符作为开头的字符串
[attribute^=value] $("[title^=‘Tom‘]") 所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value] $("[title~=‘hello‘]") 所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value] $("[title*=‘hello‘]") 所有带有 title 属性且值包含字符串 "hello" 的元素

浏览器支持：

[att=val]、[att]、[att|=val]、[att~=val] 属于CSS 2.1规范
[ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
[name!="value"] 属于jQuery 扩展的选择器

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件

子元素筛选选择器：
:first-child $("p:first-child") 属于其父元素的第一个子元素的所有 <p> 元素
:first-of-type $("p:first-of-type") 属于其父元素的第一个 <p> 元素的所有 <p> 元素
:last-child $("p:last-child") 属于其父元素的最后一个子元素的所有 <p> 元素
:last-of-type $("p:last-of-type") 属于其父元素的最后一个 <p> 元素的所有 <p> 元素
:nth-child(n) $("p:nth-child(2)") 属于其父元素的第二个子元素的所有 <p> 元素
:nth-last-child(n) $("p:nth-last-child(2)") 属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数
:nth-of-type(n) $("p:nth-of-type(2)") 属于其父元素的第二个 <p> 元素的所有 <p> 元素
:nth-last-of-type(n) $("p:nth-last-of-type(2)") 属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数
:only-child $("p:only-child") 属于其父元素的唯一子元素的所有 <p> 元素
:only-of-type $("p:only-of-type") 属于其父元素的特定类型的唯一子元素的所有 <p> 元素

表单元素选择器：
:input $(":input") 所有 input 元素
:text $(":text") 所有带有 type="text" 的 input 元素
:password $(":password") 所有带有 type="password" 的 input 元素
:radio $(":radio") 所有带有 type="radio" 的 input 元素
:checkbox $(":checkbox") 所有带有 type="checkbox" 的 input 元素
:submit $(":submit") 所有带有 type="submit" 的 input 元素
:reset $(":reset") 所有带有 type="reset" 的 input 元素
:button $(":button") 所有带有 type="button" 的 input 元素
:image $(":image") 所有带有 type="image" 的 input 元素
:file $(":file") 所有带有 type="file" 的 input 元素

表单对象属性筛选选择器：
:enabled $(":enabled") 所有启用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有选定的 input 元素
:checked $(":checked") 所有选中的 input 元素

 1 var bbcv = {
 2     name:"bbcv",
 3     getName:function(){
 4         //this,就是bbcv对象
 5         return this.name;
 6     }
 7 };
 8 bbcv.getName();
 9 
10 p.addEventListener(‘click‘,function(){
11     //this === p
12     //以下两者的修改都是等价的
13     this.style.color = "red";
14     p.style.color = "red";
15 },false);
16 
17 //通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可
18 this.style.color = "red";

但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，
如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象

1 $(‘p‘).click(function(){
2     //把p元素转化成jQuery的对象
3     var $this= $(this); 
4     $this.css(‘color‘,‘red‘);
5 });

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

jQuery（二）

标签：

原文地址：http://www.cnblogs.com/lqcdsns/p/5272111.html