var $li = $("ul li:eq(1)"); //获取<ul>里的第2个<li>节点 var $p = $("p"); var p_txt = $p.attr("title"); //获取<p>元素节点属性title2、创建节点 创建元素节点:先使用$(html)方法创建新的元素,再使用append()方法将新元素插入到文档中。 创建文本节点:在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中。 创建属性节点:与创建文本节点类似。
//创建元素节点 var $li_1 = $("<li></li>"); $("ul".append($li_1); //添加到<ul>节点中 //创建文本节点 var $li_2 = $("<li>足球</li>"); $("ul".append($li_2); //创建属性节点 var $li_3 = $("<li title='篮球'>篮球</li>"); $("ul".append($li_3);【使用原生JS方法的创建过程】
创建节点(元素/文本/属性) → 添加节点的一些属性 → 加入到文档中去
该过程涉及的方法:
创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHtML 加入文档:appendChild 3、插入节点 append():向每个匹配的元素内部追加内容。appendTo():将所有匹配的元素追加到指定的元素。
prepend():向每个匹配的元素内部前置内容。
prependTo():将所有匹配的元素前置到指定的元素中。
after():在每个匹配的元素之后插入内容。
insertAfter():将所有匹配的元素插入到指定元素的后面。
before():在每个匹配的元素之前插入内容。
insertBefore():将所有匹配的元素插入到指定的元素的前面。【注】上面的方法每两个为一组,其中,$(A).append(B)的操作是将B追加到A中,prepend()、after()、before()与之类似;而appendTo()、prependTo()、insertAfter()、insertBefore()刚好与之相反。
这么来说,当看见上面的方法中带有“To”或“insert”时,可以这么理解,前面的“指向”(或是“插入”)到后面中去,即将方法前的内容添加到方法括号内的内容中去;否则相反。
再举个例子说明:
HTML代码如下:
<p id="p1"> hello </p> <p id="p2"> hi </p>
jQuery代码如下:
$("#p1").append("<b>world</b>"); $("<b>world</b>").appendTo("#p2");
不传参数时,直接删除该节点及其包含的所有后代节点。 传入参数(即一个选择器表达式)时,可以选择性地删除元素。 返回一个指向已被删除的节点的引用。 empty():清空元素中的所有后代节点。 detach():从DOM中去掉所有匹配的元素,但不会把匹配的元素从jQuery对象中删除。(jQuery特有) 【empty()和remove()区别】 empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点;empty不能删除自己本身这个节点。 remove()方法提供传递一个筛选的表达式,删除指定合集中的元素;该节点与该节点所包含的所有后代节点将同时被删除。
举个例子。
HTML代码如下:
<ul> <li>苹果</li> <li>橘子</li> <li>菠萝</li> <li title="葡萄">葡萄</li> </ul>
jQuery代码如下:
$("ul li:eq(1)").empty(); //第二个<li>元素内容被清空,但是默认符号“·”还存在 $("ul li:eq(2)").remove(); $("ul li").remove("li[title=葡萄]");
还是用之前的例子来说明,HTML代码不变,jQuery代码如下:
$("ul li").click(function(){ alert( $(this).html() ); }); var $li1 = $("ul li:eq(1)").detach(); // 删除第二个元素,即“橘子” $li1.appendTo("ul");//重新添加“橘子”在最后,之前绑定的事件仍然存在 var $li2 = $("ul li:eq(0)").remove(); // 删除第一个元素,即“苹果” $li2.appendTo("ul");//重新添加“苹果”在最后,之前绑定的事件失效
继续用之前的例子。
未传入参数时,如下:
$("ul li").click(function() { $(this).clone().appendTo('ul');//复制当前单击的节点,并把它追加到<ul>元素中 $(this).clone(true).appendTo('body');//传入参数true });
传入参数时,如下:
$("ul li").click(function() { $(this).clone(true).appendTo('body');//传入参数true });
$(A).replaceWith(B)的操作是:用B替换A;而replaceAll()方法刚好相反。
我们可以这样理解,“with”理解为“用”的意思,即A是用B来替换;而“replaceAll”可以理解为A替换掉了全部的B。
【注】
replaceWith()与replaceAll()方法会删除与节点相关联的所有数据和事件处理程序。
给个例子:
<strong>这是一句简单的话。</strong> <strong>这是一句简单的话。</strong>
使用wrap()方法,代码如下:
$("strong").wrap("<b></b>"); //用<b>标签把<strong>元素包裹起来
会出现如下结果:
<b><strong>这是一句简单的话。</strong></b> <b><strong>这是一句简单的话。</strong></b>
而使用wrapAll()方法:
$("strong").wrapAll('<b></b>');
结果如下:
<b> <strong>这是一句简单的话。</strong> <strong>这是一句简单的话。</strong> </b>
使用wrapInner():
$("strong").wrapInner('<b></b>');
结果如下:
<strong><b>这是一句简单的话。</b></strong> <strong><b>这是一句简单的话。</b></strong>8、属性操作 attr():获取和设置元素属性。
获取属性时,传递一个参数,即属性名称。 设置属性时,传递两个参数,即属性名称和对应的值。 removeAttr():删除元素属性。
var $para = $("p"); //获取<p>节点 var p_txt = $para.attr("title"); //获取<p>元素节点属性title $("p").attr("title", "your title"); //设置单个属性值 $("p").attr({"title": "your title", "name": "test"}); //设置多个属性 $("p").removeAttr("title"); //删除<p>元素的属性title9、样式操作 attr():获取和设置样式。 addClass():追加样式。 removeClass():移除样式。 toggleClass():切换样式。如果类名存在则删除它,如果类名不存在则添加它。 hasClass():判断元素中是否含有某个class。如果有,返回true,否则返回false。 10、设置和获取HTML、文本和值 html():读取或设置某个元素中的HTML内容。可以用于XHTML文档,但不能用于XML文档。 text():读取或设置某个元素中的文本内容。 val():设置和获取元素的值。 11、遍历节点 children():用于取得匹配元素的子元素集合。 next():用于取得匹配元素后面紧邻的同辈元素。 prev():用于取得匹配元素前面紧邻的同辈元素。 siblings():用于取得匹配元素前后的所有同辈元素。 closest():用于取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身,否则向上查找父元素,直到找到匹配元素,如果找不到,返回一个空对象。 parent():用于获得集合中每个匹配元素的父级元素。 parents():用于获得集合中每个匹配元素的祖先元素。 12、CSS-DOM操作 css():获取元素的样式属性。 height():获取和设置元素的高度(px)。 width():获取和设置元素的宽度(px)。 元素定位
offset():获取元素在当前视窗的相对偏移。返回的对象包括两个属性,即top和left。 position():获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移。返回的对象包括两个属性,即top和left。 scrollTop()和scrollLeft():获取元素的滚动条距顶端的距离和距左侧的距离。