JQuery学习笔记(二)DOM操作

attr(attributeName)
当只有一个参数时，返回元素指定的属性值，只返回获取到的第一个元素属性，若没有该属性，则返回undefined
attr(attributeName，value)

设置attribute的value

  1: $("input[type=text]")attr("value","OK");

  2: $("#selected_text option:eq(1)").attr("selected",true);

  3: $("[value=radio2]:radio").attr("checked",true);

removeAttr(attributeName)
删除attributeName属性

创建节点：
$(html)可直接生成各种节点

  1: var $li_1=$("<li>1</li>");

  2: var $li_2=$("<li>2</li>"); 

append()
向每个匹配的元素内部追加内容

  1: $("ul").append($li_1);

  2: $("ul").append("<li>2</li>");

appendTo()

与append()相反,插入与被插入位置调换
prepend()

向每个匹配的元素内部前置内容
prependTo()

after()、 insertAfter()
在每个匹配元素之后插入内容

before() 、insertBefore()

删除节点:
remove()

  1: /*

  2: *使用remove()删除节点后,该节点的子节点也将同时被删除。

  3: *该方法返回一个指向已删除的该节点的引用，仍可使用。

  4: */

  5: $("ul li:eq(1)").remove();

  6: //remove()也可通过传递参数删除制定节点:

  7: $("ul li").remove("li[title=text]")；

empty()
清空节点,同时也将删除子元素

clone()

复制节点

replaceWith(),replaceAll()

替换节点

wrap()

包裹元素
$("strong").wrap("<b></b>");
将<strong>元素用<b>元素包含起来,warp()是将每个匹配的元素单独包裹起来

wrapAll()
将匹配的元素包裹在一个元素下

wrapInner()
将<b>放在<strong>里

样式管理
attr()

可用于更改样式
addClass()

用于追加样式
removeClass(className1 className2)

移除样式

切换样式
toggle()
toggleClass()
如果类名存在就删除，否则增加
$("p").toggleClass("another")

hasClass()==is()
判断是否含有某个class,返回bool

设置和获取HTML、文本和值
html() 不支持XML
类似于innerHTML(),没有参数则返回第一个匹配元素的html代码 $("#p").html();
同时可设置元素的内容，将要设置的内容作为参数传给html() $("#p").html("<strong>text</strong>");
text()
类似于innerText(),可以用来读取或设置摸个元素中的文本内容
val()
获取第一个匹配元素的当前值
同时可以传递给val一个数组以对select和checkbox的选项预设

遍历DOM
children()

返回制定元素的子元素，不包括后代元素，可向其传入参数来过来子元素
$("body").children(".selected") 查找body中的class为selected的子元素

next()
获取当前元素的下一个同级元素
nextAll()
获取当前元素后的所有同级元素

prev()
获取当前元素的前一个同级元素

siblings()
获取当前元素的所有同级元素，可传递一个筛选条件

CSS-DOM操作
css()

  1: $("p").css("color");//获取p元素的内容颜色

  2: $("p").css("color","red")//设置p元素的内容颜色

  3: //同时也可设置多个css属性：

  4: $("p").css({"color":"red","font-size":"12px"});//数值默认为像素 

opacity

设置元素的透明度

  1: $("p").css("opacity","0.5")设置为半透明

获取元素的高度可使用height属性
同时还支持另一种方式height()来获取或设置元素高度，默认单位px

css()获取的高度与样式的设置有关，而height()获取的高度为元素在页面中的实际高度

  1: $("p").css("height")

  2: $("p").height()

offset()
获取元素在当前窗口的相对偏移,返回的对象包含2个属性：top和left。只对可见元素有效

scrollTop()和scrollLeft()
获取元素的滚动条距顶端的距离和距左侧的距离，同时可以为他们制定一个参数，来控制元素滚动条的制定位置

  1: $("textarea").scrollTop(300);

  2: $("textarea").scrollLeft(100);