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