jquery学习笔记（一）

1、jquery选择和操作时jquery框架的基础，操作包括（属性操作，元素操作，内容操作，样式操作，事件操作，通信操作）；

2、判断一个jquery对象是否存在应该用 if($("tr").lenth>0){}而不能用if($("tr")){}因为jquery选择器返回的永远都是一个数组对象，如果没有找到指定的元素则返回空的数组对象。

3、基本选择器

（1）ID选择器  var  e=$("#div1"); 封装了javascript的 document.getElementById("div1")方法 执行效率要比javascript的原生态方法效率低。

（2）类型选择器  var e=$("div1");  封装了document.getElementByTagName("div1")方法 执行效率要比javascript原生态方法效率低。

(3)类选择器 var e=$(".red");  javascript自己实现方法为：

document.getElementByClassName=function(className){

var el=[];

var _el=document.getElementByTageName("*");

for(var i=0;i<_el.length;i++){

if(_el[i].calssName==calssName){

el[el.length]=_el[i];

}} return el}   所以使用类选择器的时候jquery对js方法进行了优化处理，处理速度要比自定义方法执行速度要快。

（4）通配选择器 var  e=$("body *").css("color","red") ;  方法等同于 document.getElementByTagName("*");

(5)、分组选择器   $("h2,#id,span.red,[title='text']").css("color","red");

4  、层级选择器

(1)关系选择器   

ancestor descendant选择器：在给定的祖先元素下匹配所有的后台元素 ancestor表示任何有效选择器 descondant表示第一个元素的后代元素 例如$("form input")匹配所有form表单下的input元素

parent>child 在给定的父元素下匹配所有的子元素  parent表示任何的有效选择器  child标示第一个选择器的资源色 例如$("form->input")；匹配所有form下子级的input元素

prev+next 匹配所有的紧接在prev元素后的next元素，prev表示任何选择器 ，next标示有效选择器后边紧接的第一个选择器   例如$("label+input")可以匹配所有跟在label后边的input元素

prev~siblings 匹配prev元素之后的所有的siblings元素，prev标示任何有效选择器，siblings标示一个选择器并且他作为第一个选择器的同辈，例如$("form~input")可以匹配所有的与表单同辈的input元素

（2）、子元素选择器

:nth-child 匹配其父元素下的地N个子或者奇数偶数元素

:first-child 匹配其父元素下的第一个元素

:last -child 匹配最后一个子元素

:only-child 父元素有唯一子元素那将会被匹配 如果父元素含有其他子元素则不会被匹配。

5、过滤选择器

（1）定位过滤器 

:first第一行  $("tr:first")表示表格的第一行  :last   $("tr:last")表示表格的最后一行   :not$("input:not(:checked)")标示没有被选择的input  :even  :odd  :eq 等于 :gt大于  :lt小于  :header 匹配

之类的标题元素:animated 匹配所有正在执行动画效果的元素

（2）内容过滤器 

:contains 匹配好汉给定文本的元素  例如$("div contains('图片')")  匹配所有包含图片的div元素

:empty  匹配所有的不包含元素或者文本的空元素

:has 匹配含有选择器所匹配元素的的元素  $(div:has(p))匹配所有的包含p元素的div元素

:parent 匹配所有的含有子元素或者文本元素

（3）可见过滤器

:hidden   :visible

6、属性选择器

[attribute] 匹配包含给定属性的元素 $("div[id]")匹配所有包含id属性的div

[attribut=value]匹配属性等于特定值的元素 例如$("input[name=text]")标示查找所有的name属性值是text的input元素

[attribute!=value]

[attribute^=value]匹配 属性值以value开始的元素

[attrubute$=value]匹配属性值以value结束的元素

[attribute*=value]匹配属性值包含value值的元素

[selector1][selector2][selector3]

8、表单选择器

(1)基本表单选择器

:input  :text :password :chcekbox :submit :image  :reset :button  :file :hidden 

(2)高级表单选择器

:enabled 匹配所有可用元素

:disabled匹配所有不可用元素

:checked匹配所有被选中元素

:selected 匹配所有option元素