子元素选择器: $('ul li:last-child')
first-child: ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
last-child: ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
only-child: 如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。
nth-child: 匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!
:nth-child(even) :nth-child(2n) 匹配父元素下面的所有偶元素
:nth-child(odd) :nth-child(2n+1) 匹配父元素下面的所有奇元素
:nth-child(3n) 匹配父元素下面的为3的倍数的元素
:nth-child(2) 匹配父元素下面指定的元素
表单选择器:
input:表单类型 (text,button,checkbox,radio,reset,file等)
input:button 返回所有的input 类型为button的元素集合
表单对象属性选择器:
input:enabled , disabled, checked, selected
jquery的文档处理
1、内部插入节点:把一个新的节点插入另一个元素内部的结尾处
内插分为:
1)、插入到之前 append(插入到内部结尾) 父节点.append(要插入的节点)
2)、把某个子节点追加到父节点中 appendTO 要插入的节点.appendTo(父节点)
3)、插入到父节点内部第一个 :父节点.prepend (要插入的节点)
4)、插入到某个之前:prependTo 子节点.prependTo(父节点)
2、外部插入节点:把一个新的节点插入另一个元素的之前或者之后
在某个同级节点前后插入
1)、在某个匹配元素之后插入新的元素 匹配元素.after(要插入元素)
2)、在某个匹配元素之前插入新的元素 匹配元素.before(要插入元素)
3)、insertAfter: 待插入的元素.insertAfter(匹配元素)
4)、insertBefore: 待插入的元素.insertBefore(匹配元素)
3、创建节点:
1)、$() 创建(可直接加属性和文本节点) $("<a id='id1'>我也可以被创建</a>");
4、删除节点:
1)、remove() 真删除
2)、empty() 伪删除 还存在
5、复制节点: 克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
1)、clone 克隆后不具有任何行为事件
2)、clone(ture) 克隆后有行为事件
6、替换
1)、replaceWith 将所有匹配的元素替换成指定的HTML或DOM元素。
匹配元素$("li").replaceWith("<a href=#>我被替换了!</a>");
2)、replaceAll 用匹配的元素替换掉所有 selector匹配到的元素
$("<a href=#>我被替换回来了!</a>").replaceWith("li匹配元素");
7、包裹
1、wrap(html)把所有匹配的元素用其他元素的结构化标记包裹起来。
2、wrapAll(html)将所有匹配的元素用单个元素包裹起来这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。
3、 wrapInner(elem) 将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来
属性:
1、获取属性值:
attr(name);
注意:attr()获取的是第一个匹配的值,不会获取一个集合
<div id=2></div>
用法:attr('属性名'); 得到属性值
2、一次设置一个属性
attr(name,value)
3、一次设置多个属性
attr({name:value,name:value})
4、函数设置属性:
attr(name,function)
$("img").attr("title", function() { return this.src });
5、移除属性
removeAttr(name)
css: 用法和属性相似
1、获取属性值:
css(name);
注意:attr()获取的是第一个匹配的值,不会获取一个集合
<div id=2></div>
用法:attr('属性名'); 得到属性值
2、一次设置一个属性
css(name,value)
3、一次设置多个属性
css({name:value,name:value})
注意:如果属性名包含 "-"的话,必须使用引号: 例如:margin-left
addClass(); 给元素添加class属性
removeClass(); 删除元素的属性
toggleClass(); 切换样式 有变无,无变有。