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的位置。 |
转载于:https://www.cnblogs.com/shenming/p/3529665.html
原文链接：https://blog.csdn.net/weixin_30342827/article/details/99971216
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
还没有人抢沙发呢~