jq获取自定义属性的方法(jquery获取元素属性的值)

本次的内容应该是上周末应该完成的，最终我败给我的懒惰，经过这两天的努力总算是结束了，言归正传，这次的内容是实际的开发当中感觉用的比较多，所以花了很多的心思！

需要准备一份HTML的demo

<p title=”选择你喜欢的水果” class=”myClass”><a>你最喜欢的水果是？</a></p>

<ul>

<li title=”苹果”>苹果</li>

<li title=”橘子”>橘子</li>

<li title=”菠萝”>菠萝</li>

</ul>

一：jQuery中的DOM的操作

1.查找节点

1.1查找元素的节点

获取元素的节点并打印它的文本内容

eg:var $li=$(“ul li:eq(1)”);==>获取<ul>里面第二个<li>的节点

eg:var$li_text=$li.text();==>获取第二个<li>元素节点的文本内容

alert($li_text);

1.2查找属性节点

利用jQuery选择器找到需要的元素，可以attr()方法来获取它的各种属性值，其中attr()参数可以是一个，也可以是两个

eg:var $para = $(“p”);=>先根据选择器找到元素

var p_text = $para.attr(“title”);=>找到元素的属性

alert(p_text);

2.创建节点

(2.1)创建元素节点

例如需要创建两个<li>元素节点并且把他们作为<ul>元素节点的子节点添加到DOM节点树上

eg:var $li_1=$(“<li></li>”)

var $li_2=$(“<li></li>”)

用jQuery的append()方法插入文档中

eg:$(“ul”).append($li_1);

$(“ul”).append($li_2);

或者采用链式写法：

$(“ul”).append($li_1).append($li_2);

注:动态创建新元素节点不会被自动被添加到文档中，而是需要使用其他的方法将其插入到文档中，同时创建时一定要把标签闭合，以及不能使用大写

(2.2)创建文本节点

eg:var$li_1=$(“<li>新增香蕉</li>”)

var $li_2=$(“<li>新增梨子</li>”)

$(“ul”).append($li_1).append($li_2);

(2.3)创建属性节点

var $li_1=$(“<li title=’桃子’>桃子</li>”);

var $li_2=$(“<li title=’杏子’>杏子</li>”)

$(“ul”).append($li_1).append($li_2);

2.插入节点

把新创建的节点插入文档中最简单的方法是，让它成为这个文档中的某个节点的子节点eg:append()它会在元素的内部追加新创建的内容，同时jQuery还提供了其他几种插入节点的方法

(1.)append();=>向每个匹配的元素内部追加内容

eg:$(“p”).append(“<b>我在p标签之后~</b>”);

(2.)appendTo();=>匹配元素追加到指定的元素中该方法颠倒了常规

$(A).appndTo(B)；把A追加到B中，而不是把B追到A中

eg:$(“<b>你好appendTo</b>”).appendTo(“p”);

(3.)prepend();向每个匹配的元素内部前置内容

eg:$(“p”).prepend(“<b>我在P标签的前面</b>”);

(4.)prependTo();将所有匹配的元素前置到指定的元素中同样也是颠倒了常规

$(A).prependTo(B)将A前置到B中

eg:$(“<b>我在P标签的前面</b>”).prependTo(“p”);

(5.)after();在每个匹配的元素之后插入内容

eg:$(“p”).after(“<b>我是after方法，我被加在了p标签的后面啦</b>”)

注：插入的是匹配的元素后面，并不是该元素的内部的元素的后面

(6.)insertAfter();将匹配的元素插入到指定的元素后面，同样是颠倒常规

$(A).insertAfter(B),把A插入到B后面

eg: $(“<b>我是insertAfter方法，我被加在了p标签的后面啦</b>”).insertAfter(“p”);

(7.)before();在每个匹配的元素之前插入内容

eg:$(“p”).before(“<b>我是bofore方法，我被加在了P标签的前面</b>”);

(8.)insertBefore()将所有的匹配的元素插入到指定的元素的前面，同样颠倒了常规$(A)insertBefore(B);把A插入到B前面

以上的这些方法不仅可以创建新的DOM元素插入到文档当中，也能对原来的的DOM元素进行移动看例子：

eg: var li_1=$(“<li title=’香蕉’>新增香蕉</li>”);

var li_2=$(“<li title=’雪梨’>新增雪梨</li>”);

var li_3=$(“<li title=’其他’>新增其他</li>”);

var $parent_ul= $(“ul”);获取<ul>即：<li>的父节点

var $two_li=$(“ul li:eq(1)”);<ul>里面第二个<li>

$parent_ul.append(li_1);追加到<ul>里面最后一个<li>

$parent_ul.prepend(li_2); 追加到<ul>里面最前面的一个

li_3.insertAfter($two_li);

本次的内容应该是上周末应该完成的，最终我败给我的懒惰，经过这两天的努力总算是结束了，言归正传，这次的内容是实际的开发当中感觉用的比较多，所以话了很多的心思！

需要准备一份HTML的demo

<p title=”选择你喜欢的水果” class=”myClass”><a>你最喜欢的水果是？</a></p>

<ul>

<li title=”苹果”>苹果</li>

<li title=”橘子”>橘子</li>

<li title=”菠萝”>菠萝</li>

</ul>

jQuery中的DOM的操作

1.查找节点

1.1查找元素的节点

获取元素的节点并打印它的文本内容

eg:var $li=$(“ul li:eq(1)”);==>获取<ul>里面第二个<li>的节点

eg:var$li_text=$li.text();==>获取第二个<li>元素节点的文本内容

alert($li_text);

1.2查找属性节点

利用jQuery选择器找到需要的元素，可以attr()方法来获取它的各种属性值，其中attr()参数可以是一个，也可以是两个

eg:var $para = $(“p”);=>先根绝选择器找到元素

var p_text = $para.attr(“title”);=>找到元素的属性

alert(p_text);

2.创建节点

(2.1)创建元素节点

例如需要创建两个<li>元素节点并且把他们作为<ul>元素节点的子节点添加到DOM节点树上

eg:var $li_1=$(“<li></li>”)

var $li_2=$(“<li></li>”)

用jQuery的append()方法插入文档中

eg:$(“ul”).append($li_1);

$(“ul”).append($li_2);

或者采用链式写法：

$(“ul”).append($li_1).append($li_2);

注:动态创建新元素节点不会被自动被添加到文档中，而是需要使用其他的方法将其插入到文档中，同时创建时一定要把标签闭合，以及不能使用大写

(2.2)创建文本节点

eg:var$li_1=$(“<li>新增香蕉</li>”)

var $li_2=$(“<li>新增梨子</li>”)

$(“ul”).append($li_1).append($li_2);

(2.3)创建属性节点

var $li_1=$(“<li title=’桃子’>桃子</li>”);

var $li_2=$(“<li title=’杏子’>杏子</li>”)

$(“ul”).append($li_1).append($li_2);

3.插入节点

把新创建的节点插入文档中最简单的方法是，让它成为这个文档中的某个节点的子节点eg:append()它会在元素的内部追加新创建的内容，同时jQuery还提供了其他几种插入节点的方法

(1.)append();=>向每个匹配的元素内部追加内容

eg:$(“p”).append(“<b>我在p标签之后~</b>”);

(2.)appendTo();=>匹配元素追加到指定的元素中该方法颠倒了常规

$(A).appndTo(B)；把A追加到B中，而不是把B追到A中

eg:$(“<b>你好appendTo</b>”).appendTo(“p”);

(3.)prepend();向每个匹配的元素内部前置内容

eg:$(“p”).prepend(“<b>我在P标签的前面</b>”);

(4.)prependTo();将所有匹配的元素前置到指定的元素中同样也是颠倒了常规

$(A).prependTo(B)将A前置到B中

eg:$(“<b>我在P标签的前面</b>”).prependTo(“p”);

(5.)after();在每个匹配的元素之后插入内容

eg:$(“p”).after(“<b>我是after方法，我被加在了p标签的后面啦</b>”)

注：插入的是匹配的元素后面，并不是该元素的内部的元素的后面

(6.)insertAfter();将匹配的元素插入到指定的元素后面，同样是颠倒常规

$(A).insertAfter(B),把A插入到B后面

eg: $(“<b>我是insertAfter方法，我被加在了p标签的后面啦</b>”).insertAfter(“p”);

(7.)before();在每个匹配的元素之前插入内容

eg:$(“p”).before(“<b>我是bofore方法，我被加在了P标签的前面</b>”);

(8.)insertBefore()将所有的匹配的元素插入到指定的元素的前面，同样颠倒了常规$(A)insertBefore(B);把A插入到B前面

以上的这些方法不仅可以创建新的DOM元素插入到文档当中，也能对原来的的DOM元素进行移动看例子：

eg: var li_1=$(“<li title=’香蕉’>新增香蕉</li>”);

var li_2=$(“<li title=’雪梨’>新增雪梨</li>”);

var li_3=$(“<li title=’其他’>新增其他</li>”);

var $parent_ul= $(“ul”);获取<ul>即：<li>的父节点

var $two_li=$(“ul li:eq(1)”);<ul>里面第二个<li>

$parent_ul.append(li_1);追加到<ul>里面最后一个<li>

$parent_ul.prepend(li_2); 追加到<ul>里面最前面的一个

li_3.insertAfter($two_li);

4.删除节点

如果文档中有某一个元素多余，那么应该将其删除jQuery提供了三种删除的方法：remove();detach();empty();

(1.)remove();从DOM中删除所有匹配的元素，传入参数用于根据jQuery表达式来进行筛选元素

eg:$(“ul li:eq(1)”).remove();

注意：这里的remove()删除后，该节点所包含的后代节点也将被删除，这个方法的返回值是一个指向一个已经被删除的节点的引用，因此可以在以后再使用这些元素的

eg:var $li=$(“ul li:eq(1)”).remove();

$li.appendTo(“ul”);

或者可以用：$(“ul li:eq(1)”).appendTo(“ul”);

同时remove()也可以通过传递参数来选择性的删除元素

eg:$(“ul li”).remove(“li[title!=菠萝]”)

(2.)detach()方法

detach()和remove()一样，也是从DOM中去掉匹配的元素，但是这个方法不会把匹配的元素从jQuery对象中删除，因此可以在将来再使用这些匹配的元素，与remove()不同的是，所有绑定的事件和附加数据等都会保留下来

eg: $(“ul li”).click(function(){

alert($(this).html());

var $li=$(“ul li:eq(1)”).detach();

$li.appendTo(“ul”);

});

(3.)empty()

严格是来说不是删除节点，而是清空节点，它能清空元素中的所有的后代节点eg:$(“ul li:eq(1)”).empty();

5.复制节点

举个例子来说吧：使用clone()方法

eg：$(“ul li”).click(function(){

$(this).clone().appendTo(“ul”);//复制当前单击的节点并将它追加到<ul>元素中})

注意：被复制的新元素并不具有任何的行为，如果新元素也要有这些功能在clone(true)方法里面加一个参数为true:意思是复制元素的同事复制元素中的绑定事件，这样就可以了

eg:$(“ul li”).click(function(){

$(this).clone(true).appendTo(“body”)

})

6.替换节点

jQuery提供了两个方法：replaceWith()和replaceAll()

(1.)replaceWith()的作用是将所有匹配的元素替换成指定得HTML或者DOM

eg:$(“p”).replaceWith(“<strong>我最不喜欢吃肉，我就喜欢吃水果</strong>”);

(2.)replaceAll():与replaceWith作用相同，只是颠倒了replaceWith的前后的位置

eg:$(“<strong>我在测试</strong>”).replaceAll(“p”);

注意：替换之前已经为元素绑定事件，替换后原先绑定的事件将会被替换的元素一起消失，需要给新元素重新绑定事件

7.包裹节点

(1.)如果要将某个节点用其他标记包裹起来，jQuery提供了wrap()该方法对于需要在文档中插入额外的结构化标记非常有用，且不会破坏原始文档的语义

eg：$(“strong”).wrap(“<b></b>”);

(2.)wrapAll()

该方法会将所有匹配的元素用一个元素包裹起来，不同于wrap(),wrap()方法会将所有的元素进行单独的包裹

eg:$(“strong”).wrapAll(“<b></b>”);

注意：如果被包裹多个元素间有其他的元素，那么其他元素会被放在包裹元素之后

(3.)wrapInner()

该方法将每一个匹配的元素的子内容(包括位文本节点)用其他结构化的标记包裹起来

eg:$(“strong”).wrapInner(“<b></b>”);

8.属性操作

(1.)获取属性和设置属性

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法用来删除元素属性

var $para=$(“p”);

var p_text= $para.attr(“title”);获取p元素节点属性

console.log(p_text);

如果需要一次性为同一个元素设置多个属性

形式：名/值

$(“p”).attr(“title”:”you title”,”name”:”test”);

注意：jQuery中很多方法都是同一个函数实现获取(getter)和(setter)的，但是既能设置元素的属性的值，也能获取元素的值，类似的还有html(),text();height();width();val();css()

(2.)删除属性

简介：在某些情况下，需要删除文档中某个元素的特性属性可以使用removeAttr()来完成任务

eg:$(“p”).removeAttr(“title”);删除p元素的属性title

注意：jq1.6新增了prop和removeProp分别用来获取在匹配的元素集合中的第一个元素的属性值和为匹配元素删除设置的属性

9.样式操作

(1.)获取样式和设置样式

A:获取样式.attr()

var p_class=$(“p”).attr(“class”);获取p元素的class

alert(p_class);

B:设置元素.attr(“class”,”className”)

var sz_class=$(“p”).attr(“class”,”high”);设置一个class为high

var p_class=$(“p”).attr(“class”);

alert(p_class);

注意：这里的设置是原来的class替换成新的class(high)，如果想让两个class同时存在可以使用addClass()

(2.)追加样式addClass()

简介：这里需要自己先自定义一个class为another里面写好样式

$(“p”).addClass(“another”);

（3.）移除样式removeClass()从匹配的元素中删除全部或者指定的class

$(“p”).removeClass(“high”);//移除一个class

如果要删掉两个class

$(“p”).removeClass(“high”).removeClass(“another”);

$(“p”).removeClass(“high another”);

注意：removeClass()有一个特性，当它不带参数时，就会将class的值全部删除

$(“p”).removeClass();//移除p标签的的所有class的值

(4.)切换样式toggleClass准备一份代码

$(“p”).toggleClass(“another”);

$(“#toggleClass”).click(function(){

$(“p”).toggleClass(“another”);

})

之后的效果

不断的单击切花样式按钮<p>元素class就会在myClass和myClass another之间重读切换

(5.)判断是否含有某个样式hasClass(),如果有返回true,如果没有返回false

var falg= $(“p”).hasClass(“another”);

alert(falg);

注意：这个方法为了增加代码的可读性而产生的内部调用了is()方法来完成

var falg= $(“p”).is(“.another”);

10.设置和获取HTML，文本和值

(1.)html()方法类似于js中的innerHTML可以用来读取或者设置某个元素中的html内容。

A:用html()获取

eg:var p_html=$(“p”).html();

alert(p_html);

B:用html()设置

$(“p”).html(“<b>我就是来测试的看看效果怎么样</b>”)

注意：用于XHTML 不可用于：XML文档

(2.)text()方法类似于js中的innerText属性用来设置和读取某个元素文本内容

A:获取：

var p_text=$(“p”).text();

alert(p_text);

B:设置$(“p”).text(“今天就要放假了~~~”)//对HTML文档和XML都有效，支持所有的浏览器

(3.)val()类似于js中的value属性用来设置和获取元素的值但是无论元素是文本框，下拉列表还是单选框它都可以返回元素的值，如果是多选则返回一个办函所有选择的值的数组

注意：focus()==js中的onfocus()==>处理获取焦点时的事件

blur()===js中的onblur()===>处理失去焦点时的事件

html页面

A:设置元素的值

$(“#address”).focus(function(){

vartext_value=$(this).val();

$(this).val(“”);

}

})

$(“#address”).blur(function(){

var txt_val=$(this).val();

if(txt_val == “”){

}

})

上面的表单元素可以使用defaultValue属性来实现同样的功能

$(“#address”).focus(function(){

var txt_val= $(this).val();

if(txt_val == this.defaultValue){//使用defaultValue属性

$(this).val(“”);

}

})

$(“#address”).blur(function(){

var txt_val=$(this).val();

if(txt_val == “”){

$(this).val(this.defaultValue);//符合条件设置默认值

}

})

B：获取元素的值html页面

a:var ss= $(“#single”).val(“选择2号”);//第二项被选中

b:$(“#multiple”).val([“选择2号”,”选择3号”]);//下拉列表中2和3被选中

c: $(“:checkbox”).val([“check2″,”check3”]);

$(“:radio”).val([“radio2”]); //多选和单选被选中

上述例子也可以用attr()f方法实现相同的功能

$(“#single option:eq(2)”).attr(“selected”,true);//第三个被选中

$(“[value=radio2]:radio”).attr(“checked”,true);

11.遍历节点

(1.)children()方法用于获取匹配元素的子元素的集合

var $body= $(“body”).children();

var $p=$(“p”).children();

var $ul=$(“ul”).children();

alert($body.length);//2==> p ul body下面第二个子元素

alert($p.length);//0==>p元素下面的第0个子元素

alert($ul.length);//3==>li第三个子元素

for(var i=0,len=$ul.length;i<len;i ){

alert($ul[i].innerHTML);//循环输出<li>元素的HTML内容

}

注意：只考虑子元素而不考虑其他后代元素

(2.)next()方法，获取匹配元素后面紧邻的同辈元素

var $p= $(“p”).next();

console.log($p);

(3.)prev()取得匹配元素前面紧邻的同辈元素

var $ul= $(“ul”).prev();

console.log($ul);

(4.).siblings()取得匹配元素的前后所有同辈的元素

var $p2= $(“p”).siblings();

console.log($p2);

(5.)closest 用于取得最近的匹配元素，首先先检查当前的元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，逐级找到匹配的选择器的元素，如果什么都没找到则返回一个空的jQuery对象

$(document).bind(“click”,function(e){

$(e.target).closest(“li”).css(“color”,”red”);

})

注意：

parent(),parents(),closest()比较

(1.)parent()获取集合中的每个匹配元素的父级元素 ，从指定类型的直接父节点开始查找parent()返回一个元素节点 (2.)parents()获取集合中的每个匹配元素的祖先元素，与parent()方法类似，不同点在于当它找到第一个父节点时并没有停止查找，而是继续查找，返回多个父节点

(3.)closest()从元素本身开始，逐级向上级元素匹配，并返回 最先匹配的祖先元素，与parents()方法类似，不通电就在于它只返回匹配的第一个元素节点

/jQuery中有很多遍历节点的方法例如：find(),filter(),nextAll(),prevAll()等

二：CSS-DOM的操作

读取和设置style对象的各种属性。style属性很有用，最大的问题是无法通过它来提取到通过外部css设置的样式信息，但是对于jquery非常简单

(1.)设置和读取某元素的多个样式

a:

var a= $(“p”).css(“color”);//获取<p>元素的样式颜色

alert(a);

设置多个属性：

$(“p”).css({“font-size”:”30px”,”backgroundColor”:”#888888″})//此处属性设置的时候如果不带引号就要采用驼峰命名的写法

b:透明度的设置opacity属性

$(“p”).css(“opacity”,”0.5″);//透明度的设置用opacity属性

c:获取某个元素的高度（下面的方法都可以）

$(“p”).css(“height”);

$(“p”).height();

d:height()方法也可以用来设置元素的高度如果传递的值是一个数字默认单位为px,如果需要用其他单位，需要写上(eg:em)

$(“p”).height(100);

$(“p”).height(“100em”);

注意：(1.)height()方法可以用来获取windows和document的高度

(2.)css()方法获取的高度和样式的设置有关，可能会得到“auto”也可能得到10px，之类的字符串而，height()方法获取大高度则是元素在页面中的实际高度，与设置的样式无关，并且不带单位

$(“p”).width();//获取宽度

$(“p”).width(“400px”);//设置宽度

alert($(“p”).width(“400px”));

(2.)offset()方法：获取元素在当前视窗的相对偏移，返回的对象包含两个属性即：top 和left,它只对可见元素有效

var offset=$(“p”).offset(); console.log(offset);

var left=offset.left; console.log(left);

var top=offset.top; console.log(top);

（3.）position()方法获取元素相对于最近一个position样式的属性设置为relative或者adsolute的祝福节点的相对偏移，与offset一样它返回的对象包含两个属性top和left

var position= $(“p”).position(); console.log(position);

var left=position.left; console.log(left);

var top=position.top; console.log(top);

(4.)scrollTop()和scrollLeft()分别获取元素的滚动条距顶端和距左侧的距离

var $p= $(“p”);

console.log($p);

var scrollTop= $p.scrollTop();//滚动条距离顶端的距离

console.log(scrollTop);

var scrollLeft=$p.scrollLeft();//滚动条距离左侧的距离

console.log(scrollLeft);

var $p= $(“p”);

var scrollTop= $p.scrollTop(300);//垂直滚到指定的位置

console.log(scrollTop);

var scrollLeft=$p.scrollLeft(300);//横向滚动到指定的位置

console.log(scrollLeft);

个人感觉关于对DOM的操作应该是在开发当中使用最多的，但是单个使用的机会比较少，基本都是组合使用的，所以看不是目的，使用才是王道！