jquery学习第十番 选择器的一些要注意的问题以及DOM操作

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()