1,特殊符号
. # [ (
如果属性中含有此特殊字符,需要 "//." "//#" 转义
2,选择器中含有空格
含有空格选择结果将完全不同,因为空格是后代选择器。
jquery的DOM操作
创建DOM节点
var $li =$("<li></li>");
var $li2=$("<li></li>");
$("ul").append($li).append($li2);
插入节点
删除节点
1,remove $("ul").remove() $("ul").remove("ul[title='aa']")
2,empty() 清除节点内部的内容内部的子节点
复制节点
clone()
$('ul').clone();
$('ul').clone(true); //不仅复制节点,连节点的上的event也被复制
替换节点
replaceWith()
replaceAll()
两者功能一致 $('ul').replaceWith('<li></li>'); $("<li></li>").replaceAll('ul'); 使用顺序相反
包裹节点
wrap() $('li').wrap('<ul></ul>') <ul><li>xsdsx</li></ul> <ul><li>xsdsx</li></ul>
wrapAll() 与wrap不同的是 <ul><li>xsdsx</li><li>xsdsx</li></ul>
属性操作
$('p').attr('title') 获取节点p上的属性 title
$('p').attr('title','jsun') 设置节点p上的单个属性
$('p').attr({"title":"xxx","name":"xxx"}) 设置多个属性
$('p').removeAttr('title') 删除属性
样式操作
获取和设置样式就是 对节点属性class的操作 $('p').attr('class','hh')
追加样式 $('p').addClass('xx');
删除单个样式 $('p').removeClass('xx'); 移除所有样式 $('p').removeClass();
切换样式 $('p').toggleClass('xx') 如果样式xx存在就删除,不存在就添加
判断是否有某个样式 $('p').hasClass('xx') 是否包含样式xx 返回true/false
设置和获取节点内部的 HTML 文本 和 值
.html()
.html('xxxx')
设置和获取节点内文本
.text()
.text('xxxx')
设置和获取节点的value
.val() 返回单个value 或 数组
.val('xxxx') .val(["aa","bb"])
遍历节点
1,children() 得到子元素的数组,不考虑后代元素
2,next() 匹配相邻的同辈元素
3,prev() 与next相反
4,siblings() 匹配所有的同辈元素
5,closest() 返回最近的匹配元素,如果本身符合返回本身,要不然向上查找,直到找到一个,或者返回一个null的jquery对象
CSS-DOM操作
.css("color")
.css({"color":"red","font-size":"30px"})
.height()
.width()
.offset() var x=$('p').offset(); var left =x.left; var top=x.top;
.position()
.scrollTop() .scrollTop(300)
.scrollLeft()