jquery dom操作
引用自http://www.cnblogs.com/imap/archive/2013/10/16/3372693.html
1,查找节点:
1
2
|
var $li = $( "ul li:eq(1)" ); //查找元素 $li.attr( "title" ); //查找元素的属性值 |
2,创建和插入节点:
1
2
3
4
5
6
7
8
9
10
|
var $ul = $( "#ulMain" ); var $li_1 = $( "<li id='liApple'>苹果</li>" ); //创建一个li元素。 $ul.append($li_1); //在ulMain内部末尾插入元素 $li_1.appendTo($ul); //将li追加到ul内部的末尾。 $ul.prepend($li_1); //在ul内部将li插入到最前面。 $li_1.prependTo($ul); //将li插入到ul内部的最前面。 $ul.after( "<span>hello,span</span>" ); // 在ul后面插入一个span元素 $( "<b>重点</b>" ).insertAfter($ul); //将b插入到ul后面 $ul.before( "<b>重点</b>" ); //在ul前面插入b $( "<b>重点</b>" ).insertBefore($ul); |
3,删除节点:
1
2
3
|
var $li = $( "ul li" ).remove( "li[title=hello]" ); //移除ul内title值为hello的li并返回。 var $li = $( "ul li" ).detach( "li[title=hello]" ); //和remove相同,不同之处:所有绑定的事件,附加的数据都会保留下来,将来可以再使用这些元素。 $li.empty(); //清空元素里的所有内容。 |
4,复制元素:
1
2
3
|
$( "ul li" ).click( function (){ $( this ).clone( true ).appendTo( "ul" ); //点击li时将li复制后追加到ul中,同时复制li所绑定的事件。 }); |
5,替换元素,替换后元素绑定的事件会消失,需要重新绑定。
1
2
|
$( "p" ).replaceWith( "<strong> 你最不喜欢的水果是?</strong>" ); //用strong替换p $( "<strong>你最不喜欢的水果是?</strong>" ).replaceAll( "p" ); // 用strong替换掉p |
6,包裹节点:
1
2
3
|
$( "<strong>" ).wrap( "<b></b>" ); //用b标签把strong元素包裹起来。 $( "<strong>" ).wrapAll( "<b></b>" ); //用b标签把所有匹配的strong元素包裹起来。 $( "<strong>" ).wrapInner( "<b></b>" ); // 将每一个匹配的strong内的子内容用<b>包裹起来。 |
7,属性操作:
1
2
|
$ul.attr({ "title" : "yourTitle" , "name" : "theName" }); //同时为两个属性赋值。 $ul.removeAttr( "title" ); //删除title属性。 |
8,样式操作:
1
2
3
4
5
|
$ul.addClass( "className" ); //添加class $ul.removeClass( "className className2" ); //同时移除两个class。 $ul.removeClass(); //移除所有class $ul.toogleClass( "another" ); //在ul上切换another这个class,ul原有的class不受影响。 $ul.hasClass( "another" ); // ul是否包含another这个class |
9,设置和获取html,文本和值:
1
2
3
|
$( "div" ).html( "<b>hello</b>" ); //设置div的html代码,html()不能作用于xml文档。 $( "div" ).text( "the plain text" ); //设置div的文本内容,同时支持xml文档。 $( "select01" ).val([ "text1" , "text2" ]); //使下拉框的第二项,第三项被选中。 |
10,遍历节点:
1
2
3
4
5
6
7
8
|
$ul.children(); //获取ul的子元素,而非后代元素。 $ul.next(); //获取紧邻ul后的一个同辈元素。 $ul.prev(); $ul.siblings(); // 获取ul的所有同辈元素。 $ul.parent(); //返回父级元素,返回一个节点。 $ul.parents(); //返回所有祖先元素 $ul.closest(); //如果本身匹配就返回本身,否则返回最先匹配的祖先元素。 其它方法:find(), filter(), nextAll(), prevAll()。 |
11,CSS-DOM操作:
1
2
3
4
5
6
7
8
9
|
$ul.css({fontSize: "30px" , backgroundColor: "#aaafff" }); 或 $ul.css({ "font-size" : "30px" , "background-color" : "#aaafff" }); $ul.height( "10em" ); //设置ul的高度为10em $ul.height(); //获取ul的高度,是元素在页面中的实际高度,与样式的设置无关,且不带单位。 $ul.css( "height" ); //获取ul的高度,与样式的设置值有关,可能得到"auto" ,"10px" 之类的字符串。 $ul.width( "10px" ); var offsetObj= $ul.offset(); var vLeft= offsetObj.left; var vTop = offsetObj.top; //获取元素在当前视窗的相对偏移,返回的对象包含两个属性:top, left. var posObj = $ul.position(); var vLeft = posObj.left; var vTop = posObj.top; //获取元素相对于最近一个position样式设置为relative或absolute的祖先节点的相对偏移。 $ul.scrollTop(300); //ul的滚动条滚动到距顶端300的位置。 $ul.scrollLeft(300); //ul的滚动条滚动到距左侧300的位置。 |
posted on 2013-10-26 00:11 huakaiyueluo 阅读(226) 评论(0) 编辑 收藏 举报