jQuery一些常用dom操作的方法

Jquery对dom的操作也是很总要的。

创建节点: li1=$(“<li></li>”) // 创建了一个li标签.

插入节点:

  •   ul.append(li);     // 将li加入ul末尾
  •   li.appendTo(ul);   //appendTo() 方法将所有匹配的元素追加到指定的元素中,该方法是append()方法的颠倒
  •   ul.prepend(li), li.prependTo(ul) 在父元素的开头添加.
  •   li1.after(li2) 将li1 添加在 li2后面, 同理before
  •   li2.insertAfter(li2) 将li2添加在li1前端, 同理insertBefore

删除

  •   .remove() 删除自己及孩子.
  •   .empty() 删除孩子, 保留一个空的自己.

复制

  •   .clone() 复制后新元素不具有复制功能.
  •   .clone(true) 复制后新元素有复制功能.

替换

  •   replaceWith()和replaceAll().

使用replaceWith方法使用后面的元素替换前面的元素,replaceAll方法使用前面的元素替换后面的元素

.css(‘font-size’ [, ’12px’]) – 获取或设置css

.attr(‘name’ [, ‘what ever name’]) – 获取属性, 或设置属性

.removeAttr(‘name’) – 删除属性

.children() – 获取所有孩子

next(),pre(),siblings(), closest()取得最近的匹配元素。

addClass/removeClass/hasClass/

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • · text() – 设置或返回所选元素的文本内容
  • · html() – 设置或返回所选元素的内容(包括 HTML 标记)
  • · val() – 设置或返回表单字段的值

attr()获取属性。当然这两也是可以自己设置值来修改的,

对html内容的添加。添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法:

  • append() – 在被选元素的结尾插入内容
  • prepend() – 在被选元素的开头插入内容
  • after() – 在被选元素之后插入内容
  • before() – 在被选元素之前插入内容

删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:

  • remove() – 删除被选元素(及其子元素)
  • empty() – 从被选元素中删除子元素

5.jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

  • addClass() – 向被选元素添加一个或多个类
  • removeClass()- 从被选元素删除一个或多个类
  • toggleClass()- 对被选元素进行添加/删除类的切换操作
  • css() – 设置或返回样式属性

例子

  • $(“h1,h2,p”).addClass(“blue”);首先我们知道当对多种标签添加样式的时候我们用‘,’分开。Blue一定是一个设置好的.Blue{}类选择器
  • $(“h1,h2,p”).removeClass(“blue”);
  • $(“h1,h2,p”).toggleClass(“blue”);有样式就会移除,没样式就会添加

设置多个 CSS 属性
如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});

.jQuery 尺寸 方法

  • jQuerywidth() 和height() 方法
  • width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
  • height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
  • jQueryinnerWidth() 和innerHeight() 方法
  • innerWidth() 方法返回元素的宽度(包括内边距)。
  • innerHeight() 方法返回元素的高度(包括内边距)。
  • jQueryouterWidth() 和outerHeight() 方法
  • outerWidth() 方法返回元素的宽度(包括内边距和边框)。
  • outerHeight() 方法返回元素的高度(包括内边距和边框)。

1、关于页面元素的引用

通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法;

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。

var $msg=$(document.getElementById(“msg”));
如上:则为jquery对象,可以使用jquery的方法;jQuery对象一般用$开头作为标示;

由于jquery对象本身是一个集合。是上一个数组;

所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。

如:$(“#msg”)[0],$(“div”).eq(0)[0],$(“div”).get(0),$(“td”)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。

以下几种写法都是正确的: – $(“#msg”).html(); – $(“#msg”)[0].innerHTML; – $(“#msg”).eq(0)[0].innerHTML; – $(“#msg”).get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而 get(n)和索引返回的是dom元素对象。

$(this).get(0)与$(this)[0]等价
对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个

元素的内容。有如下两种方法:

$(“div”).eq(2).html(); //调用jquery对象的方法
$(“div”).get(2).innerHTML; //调用dom的方法属性
4、同一函数实现set和get

Jquery中的很多方法都是如此,主要包括如下几个:

  • $(“#msg”).html(); //返回id为msg的元素节点的html内容。
  • $(“#msg”).html(“new content”);//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
  • $(“#msg”).text(); //返回id为msg的元素节点的文本内容。
  • $(“#msg”).text(“new content”);//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content
  • $(“#msg”).height(); //返回id为msg的元素的高度
  • $(“#msg”).height(“300”); //将id为msg的元素的高度设为300
  • $(“#msg”).width(); //返回id为msg的元素的宽度
  • $(“#msg”).width(“300”); //将id为msg的元素的宽度设为300
  • $(“input”).val(“); //返回表单输入框的value值
  • $(“input”).val(“test”); //将表单输入框的value值设为test
  • $(“#msg”).click(); //触发id为msg的元素的单击事件
  • $(“#msg”).click(fn); //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。包括两种形式:

$("p").each(function(i){
    this.style.color=['#f00','#0f0','#00f'][i];
});//为索引分别为0,1,2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){
    this.style.backgroundColor=['#ccc','#fff'][i%2];
})//实现表格的隔行换色效果

$("p").click(function(){
    console.log($(this).html())
}) //为每个p元素增加了click事件,单击某个p元素则输出其内容

6、扩展我们需要的功能

$.extend({
    min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法

//使用扩展的方法(通过“$.方法名”调用):
console.log("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写

所谓连写,即可以对一个jquery对象连续调用各种不同的方法。例如:

$("p").each(function(i){
    this.style.color=['#f00','#0f0','#00f'][ i ]
})
    .click(function(){
        console.log($(this).html())
    });

8、操作元素的样式

主要包括以下几种方式:

  • $(“#msg”).css(“background”); //返回元素的背景颜色
  • $(“#msg”).css(“background”,”#ccc”) //设定元素背景为灰色
  • $(“#msg”).height(300); $(“#msg”).width(“200”); //设定宽高
  • $(“#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式
  • $(“#msg”).addClass(“select”); //为元素增加名称为select的class
  • $(“#msg”).removeClass(“select”); //删除元素名称为select的class
  • $(“#msg”).toggleClass(“select”); //如果存在(不存在)就删除(添加)名称为select的class

9、完善的事件处理功能

jQuery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。

如:

$("#msg").click(function(){
    alert("good");
}) //为元素添加了单击事件

$("p").click(function(i){
    this.style.color=['#f00','#0f0','#00f'][i]};
)//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件:

(1)hover(fn1,fn2):

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$("tr").hover(function(){
        $(this).addClass("over");
    },
    function(){
        $(this).addClass("out");
    });

-(2)ready(fn)

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){
    console.log("Load Success");
})//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价;

3)toggle(evenFn,oddFn):
每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
    $(this).addClass("selected");
},function(){
    $(this).removeClass("selected");
});

(4)trigger(eventtype):
在每一个匹配的元素上触发某类事件。

例如:

$("p").trigger("click"); //触发所有p元素的click事件

(5)bind(eventtype,fn),unbind(eventtype):
事件的绑定与反绑定,从每一个匹配的元素中(添加)删除绑定的事件。例如:

$("p").bind("click", function(){
    console.log($(this).text());
}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件

10、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。如toggle()方法包括了hide()和show()方法。

slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法

$.each

$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。如

$.each([0,1,2],function(i, n){
    console.log( "Item #" + i + ": " + n );
});

等价于:

var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){ 
    console.log("Item #"+i+": "+tempArr[ i ]); 
}

也可以处理json数据,如

$.each( {name: "John", lang: "JS" }, function(i, n){
    console.log( "Name: " + i + ", Value: " + n ); }
    );

结果为:

// Name:name, Value:John Name:lang, Value:JS $.extend(target,prop1,propN):

用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。 这是jquery实现的继承方式;如:

$.extend(settings, options);//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在 setting中。 
var settings = $.extend({}, defaults, options);//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。 可以有多个参数(合并多项并返回) 
$.map(array, fn)//数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。如: 
var tempArr=$.map( [0,1,2], function(i){ return i + 4; }); //tempArr内容为:[4,5,6] 
 var tempArr=$.map( [0,1,2], function(i){ 
     return i > 0 ? i + 1 : null; }
     );
//tempArr内容为:[2,3]
  • $.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
  • $.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
  • $.trim(str):删除字符串两端的空白字符。
  • $.trim(” hello, how are you? “); //返回”hello,how are you? “

12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题;

使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。如:

jQuery.noConflict();// 开始使用jQuery
jQuery("div p").hide();// 使用其他库的 $()
$("content").style.display = 'none';

网上看到的总结:

1.创建元素节点

例如,创建两个<li>元素节点,并加入到<ul>
首先创建元素节点

var $li_1=$("<li></li>");
var $li_2=$("<li></li>");

然后蒋新创建的节点插入文档中

$("ul").append($li_1);
$("ul").append($li_2);/*也可以写成$("ul").append($li_1).append($li_2)*/

2.创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将其添加到文档中

var $li_1=$("<li>a</li>");
var $li_2=$("<li>b</li>");
$("ul").append($li_1);
$("ul").append($li_2);

无论$(html)中的html代码多复杂都可以这样创建 ,例如:

$("<li><em>这是</em><b>一个</b><a href="#">复杂的组合 </a></li>")

3.创建属性节点

var $li_1=$("<li title='a'>a</li>");
var $li_2=$("<li title='b'>b</li>");
$("ul").append($li_1);
$("ul").append($li_2);

4.插入节点
1.append()   向每个匹配的元素内部追加内容
示例:

 HTML代码:
<p>我想说:</p>
JQuery代码:$("p").append("<b>你好</b>");
结果:<p>我想说:<b>你好</b></p>

2.appendTo()  将所有匹配的元素追加到指定的元素中
示例:

 HTML代码:
<p>我想说:</p>
JQuery代码:$("<b>你好</b>").appendTo("p")
结果:<p>我想说:<b>你好</b></p>

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

 HTML代码:
<p>我想说:</p>
JQuery代码:$("p").prepend("<b>你好</b>")
结果:<p><b>你好</b>我想说:</p>

4.prependTo() 将所有元素前置到指定元素中
示例:

 HTML代码:
<p>我想说:</p>
JQuery代码:$("<b>你好</b>").prependTo("p")
结果:<p><b>你好</b>我想说:</p>

5.after()  在每个匹配元素之后插入内容
示例:

 HTML代码:
<p>我想说:</p>
JQuery代码:$("p").after("<b>你好</b>")
结果:<p>我想说:</p><b>你好</b>

6.insertAfter() 将所有匹配元素插入到指定元素的后面
示例:

 HTML代码:
<p>我想说:</p>
JQuery代码:$("<b>你好</b>").insertAfter("p")
结果:<p>我想说:</p><b>你好</b>

7.before()  在每个元素之前插入内容
示例:

 HTML代码:
<p>我想说:</p>
JQuery代码:$("p").before("<b>你好</b>")
结果:<b>你好</b><p>我想说:</p>

8.insertBefore()  将所有匹配的元素插入到指定的元素的前面
 示例:
 

 HTML代码:
<p>我想说:</p>
JQuery代码:$("<b>你好</b>").insertBefore("p")
结果:<b>你好</b><p>我想说:</p>

5.删除节点
1.remove() 从DOM中删除所有匹配元素,传入的参数用于根据jQuery表达式来筛选元素。当某个节点用remove()方法删除后,该节点所包含的所有后代节点都将被删除,这个方法的返回值是一个指向已被删除的节点的引用,因此还可以继续使用这些元素
示例:

var $li=$("ul li:eq(1)").remove();//获取该节点后将其从网页中删除
$("ul").append($li);//把刚才删除的节点又加回来了

上述代码可以简化为:

$("ul li:eq(1)").appendTo("ul");
//appendTo()可用来移动元素
//移动元素时首先从文档上删除此元素,然后将该元素插入得到文档中的指定节点

另外 remove()方法也可以通过传递参数来选择地删除元素
$(“ul li”).remove(“li[title!=a]”);//将li中title不等于a的<li>元素删除

2.detach()   也是从DOM中去掉所有匹配元素,但是不会把匹配的元素从jquery对象中删除,因而可以在将来使用这些匹配元素,与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来.
示例:

$("ul li").click(function(){
alert($(this).html());
})
var $li=$("ul li:eq(1)").detach();//删除元素
$li.appndTo("ul");//重新追加此元素,发现之前的点击事件还能用,如果是remove()则不能再用。

3.empty()
严格来讲,empty()并不是删除节点,而是清空节点,他能清空元素中的所有后代节点

$("ul li:eq(1)").empty();
//此时清空了第二个<li>里的内容(注意是元素里),而这个节点符号标记还在,

6.复制节点
clone()
如:点击一个li元素后再复制一个li元素,再将其添加到ul中

$("ul li").click(function(){
$(this).clone().appendTo("ul");
})

新复制的节点并不具有任何行为(如之前的单击事件),如果希望复制元素的同时能够复制元素绑定的事件则:

$(this).clone(true).appendTo("body");

7.替换节点
replaceWith() 和 replaceAll作用相同,只是操作相互颠倒
如想把<p title="a">a</p>换成<strong>b</strong>可以如下写代码:
法一:$("p").replaceWith("<strong>b</strong>");
法二:$("<strong>b</strong>").replaceAll("p");

如果在替换之前已经为元素绑定事件,替换后原先绑定的事件会与被,替换的元素一起消失,需要在新元素上重新绑定事件。

8.包裹节点

1.wrap() 将某个节点用其他标记包裹起来(将所有元素进行单独的包裹)
如:$("strong").wrap("<b></b>");
得到的结果为:<b><strong>b</strong></b>

2.wrapAll() 将所有匹配元素用一个元素来包裹。
HTML代码如下:

<strong>a</strong>
<strong>b</strong>

如果使用wrap() ,则结果如下:

<b><strong>a</strong></b>
<b><strong>b</strong></b>

如果是 wrapAll() 结果如下:

<b><strong>a</strong>
<strong>b</strong></b>

如果被包裹的多个元素之间有其他元素,那么其他元素会被放到包裹元素之后

3.wrappInner()将每一个匹配元素的子内容(包括文本节点)用其他结构化标记包裹起来
示例:

$("strong").wrapInner("<b></b>");

结果如下:

<strong title=""><b>aaa<b></strong>

9.属性操作
用attr()获取和设置元素属性 ,removeAttr()来删除元素属性

1.获取属性和设置属性

var $para=$("p");
var para_txt=$para.attr("title");//获取属性title的值
$("p").attr("title","your title");//设置属性title的值为your title
$("p").attr({"title":"your title","name":"your name"});//为一个元素设置多个属性

注意: jQuery中很多方法都是同一个函数实现获取和设置的,例如 attr() 技能获取属性的值,也能设置属性的值。类似的还有html()、text()、height()、width()、val()、css()等方法

2.删除属性

$("p").removeAttr("title");

prop()  prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值。prop()函数的所有”设置属性”操作针对的是当前jQuery对象所匹配的每一个元素;所有”读取属性”的操作只针对第一个匹配的元素。
 示例(代码来自网络,点击查看):
 

以下面这段HTML代码为例:

<div id="n1">
    <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
    <input id="n3" name="order_id" type="checkbox" value="1">
    <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>
我们编写如下jQuery代码:

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined

document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function

// prop()设置的属性也是针对元素(Element对象),因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer

// 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型
$n2.prop( { 
    prop_b: "baike",
    prop_c: 18,
    site: { name: "CodePlayer", url: "http://www.365mini.com/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.365mini.com/

// 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
    return !oldValue;
});

removeProp()函数用于移除在当前jQuery对象所匹配的每一个元素上指定的属性。
window对象或DOM元素的一些内置属性是不允许删除的,如果试图删除这些属性,将会导致浏览器产生一个错误。jQuery首先会将该属性的值赋为undefined,并忽略掉浏览器生成的任何错误信息。

一般情况下,你最好使用该函数来删除一些自定义的属性,而不是内置属性。

请不要使用本函数来删除DOM元素的本地属性checked、selected和disabled。这将彻底删除对应的属性,并且,一旦删除之后,你无法再向该DOM元素重新添加对应的属性。请使用prop()函数将其设为false即可,例如:jQueryObject.prop(“checked”, false)。

示例(代码来自网络,点击查看):

以下面这段HTML代码为例:

<div id="n1">
    <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
</div>
我们编写如下jQuery代码:

var $n2 = $("#n2");
$n2.prop("prop_a", "CodePlayer");
$n2.prop( "prop_b", { name: "CodePlayer", age: 20 } );
document.writeln( $n2.prop("prop_a") ); // CodePlayer
document.writeln( $n2.prop("prop_b") ); // [object Object]

// 删除n2Element对象上的属性prop_a和prop_b
$n2.removeProp("prop_a");
$n2.removeProp("prop_b");
document.writeln( $n2.prop("prop_a") ); // undefined
document.writeln( $n2.prop("prop_b") ); // undefined

// removeProp()只是删除元素(Element对象)自身的data-key属性
// 由于其自身并没有data-key属性,因此不会删除任何属性
// 也不会对上面id为n2的元素节点(HTML文档)的data-key属性造成影响
$n2.removeProp("data-key");
document.writeln( $n2.prop("data-key") ); // undefined
// 通过attr()访问元素文档节点中的属性
document.writeln( $n2.attr("data-key") ); // UUID

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。

但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。
[解析来自网络,点击查看](http://www.365mini.com/page/jquery-attr-vs-prop.htm)

1、操作对象不同

很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示"属性"的意思。

不过,在jQuery中,attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性,property表示JS对象的属性。

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>
在jQuery中,prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

<!-- attr()函数针对的是该文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>
当然,在jQuery的底层实现中,函数attr()和prop()的功能都是通过JS原生的Element对象(如上述代码中的msg)实现的。attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */

// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);

// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145



/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */

// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");

// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>
当然,jQuery对这些操作方式进行了封装,使我们操作起来更加方便(比如以对象形式同时设置多个属性),并且实现了跨浏览器兼容。

此外,虽然prop()针对的是DOM元素的property,而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如,property的id对应attribute的id,property的className对应attribute的class。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>
2、应用版本不同

attr()是jQuery 1.0版本就有的函数,prop()是jQuery 1.6版本新增的函数。毫无疑问,在1.6之前,你只能使用attr()函数;1.6及以后版本,你可以根据实际需要选择对应的函数。

3、用于设置的属性值类型不同

由于attr()函数操作的是文档节点的属性,因此设置的属性值只能是字符串类型,如果不是字符串类型,也会调用其toString()方法,将其转为字符串类型。

prop()函数操作的是JS对象的属性,因此设置的属性值可以为包括数组和对象在内的任意类型。

4、其他细节问题

在jQuery 1.6之前,只有attr()函数可用,该函数不仅承担了attribute的设置和获取工作,还同时承担了property的设置和获取工作。例如:在jQuery 1.6之前,attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。

直到jQuery 1.6新增prop()函数,并用来承担property的设置或获取工作之后,attr()才只用来负责attribute的设置和获取工作。

此外,对于表单元素的checked、selected、disabled等属性,在jQuery 1.6之前,attr()获取这些属性的返回值为Boolean类型:如果被选中(或禁用)就返回true,否则返回false。

但是从1.6开始,使用attr()获取这些属性的返回值为String类型,如果被选中(或禁用)就返回checked、selected或disabled,否则(即元素节点没有该属性)返回undefined。并且,在某些版本中,这些属性值表示文档加载时的初始状态值,即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。

因为jQuery认为:attribute的checked、selected、disabled就是表示该属性初始状态的值,property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

因此,在jQuery 1.6及以后版本中,请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作,也尽量使用prop()函数。

<input id="uid" type="checkbox" checked="checked" value="1">

<script type="text/javascript">
// 当前jQuery版本为1.11.1
var uid = document.getElementById("uid");
var $uid = $(uid);

document.writeln( $uid.attr("checked") ); // checked
document.writeln( $uid.prop("checked") ); // true

// 取消复选框uid的选中(将其设为false即可)
// 相当于 uid.checked = false;
$uid.prop("checked", false);

// attr()获取的是初始状态的值,即使取消了选中,也不会改变
document.writeln( $uid.attr("checked") ); // checked
// prop()获取的值已经发生变化
document.writeln( $uid.prop("checked") ); // false
</script>

10.样式操作

1.追加样式
addClass()
首先在<style>标签里添加另一组样式:

<style>
.high{
    font-weight:bold;
    color:red;
    }
.another{
        font-style:italic;/*斜体*/
        color:blue;
        }
</style>

原本代码:<p class="high" title="">abc</p>
执行:$("p").addClass("another");
此时 p的class为“high  another”
如果给一个元素添加了多个class值,那么就相当于合并了他们的样式;如果有不同的class设定了同一个样式属性,则后者覆盖前者。

2.移除样式

$("p").removeClass("high");

或者两个都删除:

`$("p").removeClass("high").removeClass("another");`
$("p").removeClass("high  another");

移除所有class:$("p").removeClass();

3.切换样式

toggleClass()控制样式的重复切换,如果类名存在就删除,类名不在就添加
若本来<p class="myclass"></p>,
jQuery语句为:$("p").toggleClass("another");
点击切换样式按钮,则变成<p class="myclass another"></p>,
再点击一次切换按钮 ,则又变成<p class="myclass"></p>
不断点击他就会在这两种情况中来回切换

4.判断是否含有某个样式
hasClass()判断是否含有某个class 有返回true 没有返回false

 $("p").hasClass("another")

11.设置和获取HTML、文本和值

1.html() 用来读取或设置 某个元素中的HTML内容,可用于XHTML文档,不能用于XML文档
示例:<p><strong>q</strong></p>
jQuery:$("p").html()
获得的结果是:<strong>q</strong>

设置p元素的html代码:$("p").html("<strong>p</strong>")

2.text() 用来读取或设置某个元素的文本内容

获取内容:$("p").text()
设置内容:$("p").text("你最喜欢的水果是?")

3.val()方法 用来获取或设置元素的值

$("p").val();
$("p").val("aaa");
另外,如果this是当前的文本框,则this.defaltValue是当前选中文本框的默认值
$("p").value(this.defaultValue);

另外,val()能使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的选项被选中,这在表单操作中经常会用到
示例:

HTML代码:
 <select id="multiple" multiple="multiple" style="height:120px">
  <option selected="selected">选择1号</option>
  <option >选择2号</option>
  <option >选择3号</option>
  <option >选择4号</option>
  <option selected="selected">选择5号</option>
  </select>

这里写图片描述

如果要使第2,3项被选中,则$("#multiple").val(["选择2号","选择3号"]) ;//以数组形式给出
这里写图片描述
或者单独一个$("#multiple").val("选择2号");
或者用attr(): $("#multiple option:eq(1)").attr("selected","true");

select对应selected ;radio对应checked

12.遍历节点

1.children() 取得匹配元素的子元素集合,此方法只考虑子元素,不考虑其他后代元素。
示例HTML代码:

<body>
  <p></p>
  <ul>
    <li></li>
    <li></li>
  </ul>
</body>

jQuery求子元素个数:

var $body=$("body").children;
alert($body.length);//得到2

2.next() 取得匹配元素后紧邻的同辈元素
根据上个html例子

$("p").next()得到的结果是:
<ul>
  <li></li>
  <li></li>
</ul>

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

$("ul").prev()//得到结果为<p></p>

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

$("p").siblings()
//得到结果为:
<ul>
 <li></li>
 <li></li>
</ul>

6.closest() 取得最近的匹配元素

首先检查当前元素是否匹配,如果匹配则直接返回元素本身 ,如果不匹配则向上查找父元素,逐级向上查找匹配选择器的元素,如果什么都没有则返回一个空的jQuery对象(只返回匹配的第一个元素节点,从自身的节点找起)

给点击目标最近的li元素添加红色:

$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
})

7.parent() 获得每个匹配元素的父级元素,从指定类型的直接父节点开始查找,返回一个元素节点

8.parents() 获得每个匹配元素的祖先元素 返回多个父节点

13.CSS-DOM操作
读取和设置style对象的各种属性
css()获取元素的样式属性:$("p").css("color");
css()设置元素的单个样式:$("p").css("color","red")
css(0设置元素多个样式:
$("p").css({"fontsize":"30px","backgroundColor":"red"})
透明度设置为半透明$("p").css("opacity","0.5")
获取元素高度:$("p").css("height")或者$("p").height()
设置元素高度:$("p").height(100)//如果是数字会自动转化为px
注意:css()获取的高度值与样式的设置有关,可能得到“auto”,也可能得到“10px”之类,但是height获取的高度值是元素在页面中的实际高度,而且不带单位,与样式的设置无关

类似的还有width()

关于元素定位有以下几个常用方法

1.offset()  获取元素在当前视窗的相对偏移,其中返回的对象包含top和left两个属性,向右为正,向下为正,只对可见元素有效,返回值 为object类型

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

2.position() 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,返回对象有两个属性 top与left

var position =$("p").position();
var left=position.left;
var top=position.top;

3.scrollTop()和scrollLeft()
获取滚动条距离左端的距离和顶端的距离

var scrollTop=$("p").scrollTop();
var scrollLeft=$("p").scrollLeft();

也可以指定参数

$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);

案例研究

某网站的超链接
鼠标滑过使title提示快速显示,并且随着鼠标的移动提示也相应跟随移动

<script type="text/javascript">

    $(function() {
        var x=10;
        var y=20;
       $("a.tooltip").mouseover(function(e){
    this.myTitle=this.title;
    this.title="";

    var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
    $("body").append(tooltip);
    $("#tooltip")
    .css({
        "top":(e.pageY+y)+"px",
        "left":(e.pageX+x)+"px"
        }).show("fast");
    }).mouseout(function(){
        this.title=this.myTitle;
         $("#tooltip").remove();   
        }).mousemove(function(e){
            $("#tooltip")
            .css({
                "top":(e.pageY+y)+"px",
                "left":(e.pageX+x)+"px"

                });
            });
    });
</script>
<style>
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
p{
    clear:both;
    margin:0;
    padding:.5em 0;
}
/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
}
</style>
<body>
  <p><a href="" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
  <p><a href="" class="tooltip" title="这是我的超链接提示  2">提示2</a></p>
  <p><a href="" title="这是自带提示1">自带提示1</a></p>
  <p><a href="" title="这是自带提示2">自带提示2</a></p>
</body>

效果图:
修改效果后

修改效果前

图片提示效果

预览
生成图片预览效果,根据鼠标移动
代码如下:

<script type="text/javascript">
$(function(){
    var x=10;
    var y=20;
    $("a.tooltip").mouseover(function(e) {
        this.myTitle=this.title;
        this.title="";
        var imgTitle=this.myTitle?"<br />"+this.myTitle:"";
        var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'>"+imgTitle+"</div>";
        $("body").append(tooltip);
        $("#tooltip")
        .css({
            "top":(e.pageY+y)+"px",
            "left":(e.pageX+x)+"px"
            }).show("fast");
    }).mouseout(function(){
        this.title=this.myTitle;
        $("#tooltip").remove();
        }).mousemove(function(e){
            $("#tooltip")
            .css({
                "top":(e.pageY+y)+"px",
            "left":(e.pageX+x)+"px"
                });
            });
    });
</script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
img{border:none;}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
    border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
}
</style>
</head>

<body>
  <ul>
  <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="apple ipod"><img src="images/apple_1.jpg" alt="apple ipod"></a></li>
  <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="apple ipod nano"><img src="images/apple_2.jpg" alt="apple ipod nano"></a></li>
  <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="apple iphone"><img src="images/apple_3.jpg" alt="apple iphone"></a></li>
  <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="apple Mac"><img src="images/apple_4.jpg" alt="apple Mac"></a></li>

  </ul>
</body>

未经允许不得转载:WEB前端开发 » jQuery一些常用dom操作的方法

赞 (0)

根据您浏览的内容,推荐您可能下面的文章