新随笔  :: 联系 :: 订阅 订阅  :: 管理

JQuery学习笔记(二)DOM操作

Posted on 2011-03-03 22:34  张贺  阅读(802)  评论(0编辑  收藏  举报

PHP技术交流群 170855791

属性设置

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