您的位置:首页 > Web前端 > JQuery

JQuery学习笔记(二)DOM操作

2011-03-03 22:34 721 查看
[b]PHP技术交流群 170855791

属性设置[/b]

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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: