jQuery基础内容梳理

一.选择节点

jQuery选择器返回的是jQuery包装集，这个包装集只能只用jQuery自己的方法，而不能用普通DOM对象的方法。可以把包装集看成是一个数组，里面的元素是匹配到的DOM节点对象，这个数组里可以只有一个元素，也可以有多个元素，比如用ID选择器返回的包装集就只有一个元素，而用class选择器返回的包装集就可能有多个对象，这也就是说可以用 $( " # id " )[ 0 ] 得到普通的DOM对象，然后就可以用普通js语句对其进行操作。由此可见，jQuery包装集与DOM对象是可以相互转化的：如果要把包装集对象转化为js中普通DOM对象，除了上面说的 $( " # id " )[ 0 ] 的方法，还可以用get( )方法，如  $( " #id " ).get( 0 ) 也可以得到普通DOM对象；如果要把普通DOM对象转换为jQuery包装集对象，直接用$( "  " )包装起来即可，如  var new = $( " document.getElementById("  ") " ); 。当然一般情况下我们更愿意用jQuery的简便方法，如果要具体选择某个元素，我们可以用 eq( )方法，其功能类似与get( )方法，但eq( )返回的还是jQuery包装集。

下面是一些常用的jQuery选择器：

1.ID选择器： $( " # id " )  

2. 元素选择器：  $( " div " )   括号里标记名

3.类名选择器：  $( " .class " ) 

4.复合选择器：  $( "select1  ,  select2  ,  select3 " )   括号里是多个选择条件，用逗号隔开，最后返回的是选择结果的并集而不是交集

5.通配符： $( " * " )  表示页面上所有元素

6.祖先子孙选择器： $( " div  span " )  括号里前一个selector是祖先后一个子孙，他们之间可以跨代不一定是父子关系，匹配出的是子孙元素

7.父子选择器：  $( " div  > span " )   这里必须是父子关系，匹配出的是子代元素

8.前后紧挨选择器：  $( " p + b " )  匹配紧挨在p元素后面的b元素

8.前后非紧挨选择器：  $( " p ~ b  " )  匹配在p后面的b元素，不要求紧挨

9.过滤选择器：   $( " tr : first " )  匹配表格中的第一行

                              $( " tr : last " )  匹配表格中的最后一行

                              $( " tr : even " )  匹配行数为偶数的行

                              $( " tr : odd " )  匹配行数为奇数的行

10.属性选择器：  $( " div[ name ] " ) 匹配有name属性的div

                                $( " div[ name ] = ' myname '  " ) 匹配name为myname的div

                                $( " div[ name ] ! = ' myname '  " ) 匹配name不为myname的div

                                $( " div[ name ] * = ' myname '  " ) 匹配name含有myname的div

                                $( " div[ name ] ^ = ' myname '  " ) 匹配name为myname的div

                                $( " div[ name ] $ = ' myname '  " ) 匹配name以myname结尾的div

11.表单选择器：   $( " :input " )  匹配所有input元素

                                 $( " form  :input " ) 匹配form中所有input元素，form与：中要有一个空格

                                 $( "  :button " ) 匹配button元素

二.修改元素内容和值

元素的内容是指起始标记到结束标记之间的内容，元素的内容又分为文本内容和html内容，其中文本内容是不包含html标记的纯文本内容，html是指包含html标记的所有内容。元素的值是指元素的value属性。jQuery中通过 text( )获取文本内容，通过 text( " val " )修改文本内容，通过 html( )获取html内容，通过 html( " val " )修改html内容，如果val中含有html标记，则text( " " )会把html标记当作纯文本写入，而html( " " )会把html标记解析后写入。另外，通过 var( )返回元素的值，通过 var( " val " )修改元素的值

三.对节点的操作

1.插入节点

与js相同，jQuery插入一个节点首先要先创建一个节点再插入到某个位置，创建一个节点可以用 var $p=$(" <p></p> ")创建，再修改其html内容即可，最后用.append($p)

或者直接append(“  ”)括号里把完整的html代码写完。插入内部的方法有如下四种：

     $( " #B " ).append( " <p>A</p> " )   向B中插入一个p元素，插入在最后面，插入的只能是html代码，不能是页面上现有的元素

     $( " #B " ).prepend( " <p>A</p> " )   向B中插入一个p元素，插入在最前面 ，插入的只能是html代码，不能是页面上现有的元素

     $( " #B " ).appendTo( "#A " )   把B插入A中，并放在最后面，B这个元素既可以是现有元素，也可以是html代码

     $( " #B " ).prependTo( "#A " )   把B插入A中，并放在最前面，B这个元素既可以是现有元素，也可以是html代码

以上四种方式都是插入元素内部，前两个中B是被插入元素，后两个中B是待插入元素

下面是在元素外部插入的方法：

     $( " #B " ).after( " <p>A</p> " ) 

     $( " #B " ).before( " <p>A</p> " ) 

     $( " #B " ).insertAfter( "#A " )

     $( " #B " ).insertBefore( "#A " )

以上四种的分别对应插入内部的四种方法，只不过这是插入在元素外部的方法

2.删除节点

jQuery有两种删除节点的方式，remove( )是删除这个元素，empty( )是删除这个元素里所有子元素，并不删除这个元素自身

3.替换节点

jQuery提供两种替换方法，( " <p> .. </p> " ).replaceAll( " #B " )是用前面替换后面，而( " #B" ).replaceWith( " <p> .. </p> " )是用后面的替换前面

四.对元素属性进行操作

1.   attr( " id " )   返回属性的值，括号里是元素的属性名

2.   attr( " value " , " 123 " )  修改属性的值，括号里前面是属性名，后面是希望的属性的值

3.   attr( 名 : " 值 "  ,  名 : " 值 "  , 名 : " 值 " )  同时修改多个属性

4.  removeAttr( " id " )   删除一个属性

五.修改元素css样式

1.通过增加class改变css样式

    addClass( " 类名 " )  为匹配的元素添加一个指定的类名，如果要删除多个类名，用空格间隔即可

    removeClass( " 类名 " )  为匹配元素删除制定的类名

2.修改单个css样式

  css( " color " )  返回相应css属性值

  css( " color "  ," #ffffff " )  修改相应的css属性值

 

六.事件处理

1. $(document).ready(function(){

      ......

})

     这是页面加载响应，只要DOM元素加载完毕就可以调用

2.为元素绑定事件可以用

 $( " " ).bind( " click " , function(){

           .....

} )

    实现，也可以直接

 $( " " ).click(  function(){

           .....

} )

3.为元素绑定一次性事件 $( " " ).one( "click", function(){  ...  } )