一.选择节点
下面是一些常用的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元素
二.修改元素内容和值
三.对节点的操作
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> " )是用后面的替换前面
四.对元素属性进行操作
五.修改元素css样式
六.事件处理
2.为元素绑定事件可以用
$( " " ).bind( " click " , function(){
.....
} )
实现,也可以直接
$( " " ).click( function(){
.....
} )
3.为元素绑定一次性事件 $( " " ).one( "click", function(){ ... } )