jquery对象可以调用dom种方法（怎么把jquery对象于document对象的相互转换）

本文目录

• 怎么把jquery对象于document对象的相互转换
• 有这方面的文档吗
• jquery获取iframe中的dom对象(两种方法)
• 为什么jquery对象的操作是调用它的各种方法
• 为什么jquery对象可以用js DOM对象的方法
• jquery中有哪些dom操作
• 如何将jquery对象转换成dom对象
• js原生dom对象和jQuery对象可以混合使用吗
• “JQuery对象”和“DOM对象”的区别

怎么把jquery对象于document对象的相互转换

《script type="text/javascript" src="*****"》《/script》
《script type="text/javascript"》
function t1() {
var jtest = $(’#test’);
var dtest = *****(’test’);
*****(’background’,’blue’);
/*
alert(*****=’blue’); // 不好使,可证明jquery对象不是DOM对象
alert(*****=’blue’);
*/
}
function t2() {
var divs = $(’div’);
// 让你从divs中选出中国对应的DOM对象,然后改变他的背景.
alert(divs);
*****=’red’;
}
function t3() {
var div0 = *****(’div’); // 选中第1个div
*****="red";
alert(’转换为jquery对象并改成蓝色’);
// 直接把DOM对象以参数形式传给$方法就可以了.
// 如何来理解jquery的$方法
// $方法是个包装器, 能把给的参数包装成jquery对象.
// 如果给的字符串,他会先当成选择器,并根据选择器选中DOM对象,并打包.
// 如果给的直接是DOM对象, 直接打包.
$(div0).css(’background’,’blue’);
}
《/script》
《style type="text/css"》
《/style》
《/head》
《body》
《h1》jquery对象和DOM对象的关系《/h1》
《p id="test"》随便打点《/p》
《div》美国《/div》
《div》中国《/div》
《div》英国《/div》
《input type="button" value="选中test" onclick="t1();" /》
《input type="button" value="jquery对象转成DOM对象" onclick="t2();" /》
《input type="button" value="DOM对象转成jquery对象" onclick="t3();" /》
《/body》

有这方面的文档吗

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(*****("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg").innerHTML;
$("#msg").eq(0).innerHTML;
$("#msg").get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个《div》元素的内容。有如下两种方法：
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性
4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("《b》new content《/b》");
//将“《b》new content《/b》” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("《b》new content《/b》");
//将“《b》new content《/b》” 作为普通文本串写入id为msg的元素节点内容中,页面显示《b》new content《/b》
$("#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){*****=})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。
$("tr").each(function(i){*****=})
//实现表格的隔行换色效果
$("p").click(function(){alert($(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两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert(’mouse over event’)})
.each(function(i){*****=});
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){*****=})
//为三个不同的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(){alert("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(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件
10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.*****，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( , function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
var tempArr=;
for(var i=0;i《*****;i++){
alert("Item #"+i+": "+tempArr);
}
也可以处理json数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, opti***);
//合并settings和opti***，并将合并结果返回settings中，相当于opti***继承setting并将继承结果保存在 setting中。
var settings = $.extend({}, defaults, opti***);
//合并defaults和opti***，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( , function(i){ return i + 4; });
tempArr内容为：
var tempArr=$.map( , function(i){ return i 》 0 ? i + 1 : null; });
tempArr内容为：
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge(
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "
12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的*****();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。
如：
*****();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").***** = ’none’;
打字不易，如满意，望采纳。

jquery获取iframe中的dom对象(两种方法)

　　父窗口中操作iframe $(window frames document) //假如iframe的id为iframeChild 在子窗口中操作父窗口 $(window parent document) 接下来就可以继续获取iframe内的dom了 获取iframe内的dom对象有两种方法 $(window frames document) 在父窗口中操作 选中IFRAME中的所有单选按钮

　　 在IFRAME中操作 选中父窗口中的所有单选按钮

为什么jquery对象的操作是调用它的各种方法

简便。jquery对象的操作通常是通过调用各种方法来实现的，而不是直接更改它的属性，因jQuery提供了许多方便快捷的方法来处理DOM元素，这些方法对开发人员来说更加简便，且易于使用，而且更加适合于jQuery对象的操作。

为什么jquery对象可以用js DOM对象的方法

想法很好, 理论不足

splice是JavaScript的Array对象的函数, 而不是DOM对象的方法

DOM对象的方法大多都很长, 比如setAttribute

jQuery的包装你可以理解为这样

{
先是所有选中的元素
0 : ,
1 : ,
....
然後显示给个length
length : 8,
接下来是一堆附加在prototype上的方法
attr : function,
html : function,
css : function,
....
然後把*****中的几个函数直接附加进来,
splice : *****,
push : *****
}

在这个问题中, splice只操作运行时的this对象, 所以可以正常运行

另外, 同时具有length属性和splice方法的对象都会被开发者工具当作数组展示

比如c********({length:0,splice:function(){}})

jquery中有哪些dom操作

　　DOM操作的分类
　　DOM Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。
　　它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如XML
　　javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，这些都是Dom Core的组成部分。
　　
　　使用DOM Core来获取表单对象的方法
　　*****("from");
　　使用DOM Core来获取某元素的src属性的方法：
　　*****("src");
　　
　　构建DOM元素
　　《body》
　　《p title="选择你最喜欢的水果"》你最喜欢的水果是?《/p》
　　《ul》
　　《li title=’苹果’》苹果《/li》
　　《li title=’橘子’》橘子《/li》
　　《li title=’菠萝’》菠萝《/li》
　　《/ul》
　　《/body》
　　使用jQeruy在文档数上查找节点非常容易，可以通过在第2章介绍的jQuery选择器来完成。
　　1.查找元素节点
　　获取元素节点并打印出它的文本内容，jQuery代码如下:
　　var $li = $("ul li:eq(1)"); 获取《ul》里第2个《li》 节点
　　var li_txt=$*****(); //获取第2个《li》元素节点的文本内容
　　alert(li_txt); //打印文本内容，这里会打印出橘子
　　
　　以上代码获取了《ul》元素里第2个《li》节点，并将它的文本内容"橘子"打印出来
　　
　　2.查找属性节点
　　利用jQuery 选择器查找到需要的元素后，就可以使用attr()方法来获取它的各种属性的值.attr()方法得参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字。
　　获取属性节点并打印出它的文本内容，jQuery代码如下：
　　var $para = $("p"); //获取《p》节点
　　var p_txt=$*****("title"); //获取《p》元素节点属性title
　　alert(p_txt); //打印title属性值
　　
　　
　　创建节点
　　在dom 操作中，常常需要动态创建HTML内容，是文档在浏览器里面的呈现效果发生变法，并且达到各种各样的人机交互的目的。
　　
　　1. 创建元素节点
　　例如要创建两个《li》元素节点，并且要把它们作为《ul》元素节点的子节点添加到DOM节点树上。
　　(1)创建两个《li》新元素。
　　(2)将这两个新元素插入文档中。
　　第(1)个步骤可以使用jQuery的工厂函数$()来完成。
　　$(html);
　　$(html)方**根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
　　首先创建两个《li》元素,jQuery代码如下:
　　$("ul").append($li_1); //添加到《ul》节点中，使之能在网页中显示
　　$("ul").append($li_2); //可以采取链式写法:$("ul").append($li_1).append($li_2);
　　注意事项：
　　(1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。
　　(2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。
　　例如创建一个《p》 元素，使用$("《p/》")或者("《p》《/p》"),但是不要使用$("《p》")或者大写的$("《P/》");
　　
　　2.创建文档节点
　　var $li_1= $("《li》香蕉《/li》"); //创建一个《li》 元素，包括元素节点和文本节点，香蕉就是创建的文本节点
　　var $li_2 =$("《li》雪梨《/li》"); //创建一个《li》 元素，包括元素节点和文本节点，雪梨就是创建的文本节点。
　　$("ul").append($li_1); //添加到《ul》节点中，使之能在网页中显示
　　$("ul").append($li_2); //添加到《ul》节点中，使之能在网页中显示
　　以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将他们添加到文档中就可以了。
　　注意事项：
　　无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。
　　例如$("《li》《em》这是《/em》《b》一个《/b》《a href=’#’》复杂的组合《/a》《/li》");
　　
　　
　　3.创建属性节点
　　创建属性及节点与创建文本节点类似，也是直接在创建元素节点时一起创建。
　　jQuery代码如下:
　　var $li_1=$("《li title=’香蕉’》香蕉《/li》");//创建一个《li》元素，包含元素节点，文本节点和属性节点 其中title=’香蕉’就是创建的属性节点
　　var $li_2=$("《li title=’雪梨’》雪梨《/li》");//创建一个《li》元素 包括元素节点，文本节点和属性节点，其中title=‘雪梨’就是创建的属性节点
　　$("ul").append($li_1);
　　$("ul").append($li_2); //添加到《ul》 节点中，使之能在网页中显示
　　
　　插入节点
　　动态创建HTML元素并没有世界用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。
　　使用append(),它会在元素内部追加新创建的内容。
　　
　　jQuery中还有提供了其他几种插入节点的方法。
　　
　　方法 描述 示例
　　append() 向每个匹配的元素内部追加内容 HTML代码
　　《p》我想说:《/p》
　　jQuery代码: $("p").append("《b》你好《/b》"); 结果: 《p》我想说:《b》你好《/b》《/p》
　　appendTo() 将所有匹配的元素追加到指定的元素中，
　　实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中 HTML 代码 《p》我想说:《p》 jQuery代码： $("《b》你好《/b》").appendTo("p"); 结果: 《p》我想说：《b》你好《/b》《/p》
　　
　　prepend() 向每个匹配的元素内部前置内容 HTML代码: 《p》我想说:《/p 》 jQuery代码: $("p").prepend("《b》你好《/b》");结果《p》《b》你好《/b》我想说:《/p》
　　
　　prependTo() 将所有匹配的元素前置到指定的元素中，实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。HTML 代码 《p》我想说:《/p》 jQuery代码: $("《b》你好《/b》").prependTo("p"); 结果《p》《b》你好《/b》我想说《p》
　　
　　after() 在每个匹配的元素之后插入内容 HTML代码 《p》我想说:《p》 jQuery代码: $("p").after("《b》你好《b》"); 结果: 《p》我想说:《/p》《b》你好《/b》
　　
　　insertAfter() 将所有匹配的元素插入到指定元素的后面，与after()颠倒了 HTML代码《p》 我想说《/p》 jQuery代码：$("《b》你好《/b》").insertAfter("p"); 结果《p》我想说：《/p》《b》你好《/b》
　　
　　before() 将每个匹配的元素之前插入内容 HTML代码 《p》我想说:《/p》 jQuery 代码：$("p").before("《b》你好《/br》"); 结果《b》你好《/b》我想说:《/p》
　　
　　insertBefore() 将所有匹配的元素插入到指定的元素的前面，实际上，使用该方法是颠倒了常规的before的操作 $("《b》 你好《/b》").insertBefore("p"); 结果:《b》你好《/b》《p》我想说:《/p》
　　
　　删除节点
　　如果文档中某一个元素多余，那么应将其删除，jQuery提供了两种删除节点的方法，即remove() 和empty()
　　
　　*****()方法
　　作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式类筛选元素。
　　
　　例如删除图3-11中《ul》节点中的第2个《li》元素节点，jQuery代码如下:
　　$("ul li:eq(1)").remove();//获取第2个《li》元素节后，将它从网页中移除
　　当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
　　下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。
　　var $li = $("ul li:eq(1)").remove();//获取第2个《li》元素节点后，将它从网页中删除
　　$*****("ul");//把刚删除的节点又重新添加到《ul》元素里
　　可以直接使用appendTo()方法得特性来简化以上代码：
　　$("ul li:eq(1)").appendTo("ul");
　　//appendTo()方法也可以用来移动元素
　　//移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。
　　另外remove()方法也可以通过传递参数来选择性地删除元素
　　$("ul li").remove("li"); //将《li》元素属性title不等于"菠萝" 的《li》元素删除。
　　
　　
　　*****()方法
　　严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。
　　$("ul li:eq(1)").empty(); //获取第2个《li》元素节点后，清空此元素里的内容，注意是元素里面。
　　使用firebud查看橘子节点发生变化 《li title=’橘子’/》
　　
　　3.复制节点
　　复制节点也是常用的DOM操作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品
　　并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果
　　$("ul li").click(function(){
　　$(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到《ul》元素中
　　});
　　//在页面中点击"菠萝"后，列表最下方出现新节点"菠萝"。
　　$(this).clone(true).appendTo("body");//注意参数true
　　在clone()方法传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具备复制功能。
　　
　　替换节点
　　如果要替换某个节点，jQuery提供了相应的方法，即replaceWith和 replaceAll()
　　replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。
　　例如要将网页中《p title="选择你最喜欢的水果"》你最喜欢的水果是?《/p》 替换成《strong》 你最不喜欢的水果是?《/strong》 可以使用如下jQuery代码：
　　$("p").replaceWith("《strong》你最不喜欢的水果是?");
　　也可以使用jQuery中另一个方法repalceAll()来实现，该方法与replaceWith()方法得作用相同，只是颠倒了replaceWith的操作。
　　$("《strong》你最不喜欢的水果是?《/strong》").replaceAll("p");
　　注意：
　　如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
　　
　　4. 包裹节点
　　如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，wrap()，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。
　　jQuery代码如下：
　　$("strong").wrap("《b》《/b》");//用《b》标签把《strong》 元素包裹起来
　　得到的结果如下：
　　《b》《strong title="选择你最喜欢的水果"》 你最喜欢的水果是?《/strong》《/b》
　　
　　*****()方法
　　该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法，wrap()方法将所有的元素进行单独的包裹。
　　$("strong").wrap("《b》《/b》");
　　
　　*****()方法
　　该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来，例如可以使用它来包裹《strong》 标签的子内容:jQuery代码如下：
　　$("strong").wrapInner("《b》《/b》");
　　运行代码后，发现《strong》标签内的内容被一对《b》标签包裹了。
　　《strong title="选择你最喜欢的水果"》《b》你最喜欢的水果是?《/b》《/strong》
　　
　　属性操作
　　在jQuery 中，用attr() 方法来获取和设置元素属性，removeAtt() 方法来删除元素属性。
　　1.获取属性和设置属性
　　如果要获取《p》元素的属性title,那么只需要给attr()方法传递一个参数，即属性名称。
　　var $para=$("p"); //获取《p》节点
　　var p_txt=$*****("title"); //获取《p》元素节点属性title
　　
　　如果要设置《p》元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。
　　jQuery代码如下：
　　$("p").attr("title","your title");//设置单个的属性值
　　//为同一个元素设置多个属性值
　　$("p").attr({"title":"your title","name":"test"});//将一个 "名值" 形式的对象设置为匹配元素的属性。
　　
　　jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，即能设置元素属性的值，也能获取元素属性的值，类似的还有html(),text(),height(),width(),val(),css()等方法。
　　
　　2.删除属性
　　有时候需要删除文档元素的特定属性，可以使用removeAttr()方法
　　删除《p》元素的title属性
　　$("p").removeAttr("title");
　　
　　操作样式
　　获取样式和设置样式
　　HTML代码如下：
　　《p class="myclass" title="选择你最喜欢的水果"》 你最喜欢的水果是?《/p》
　　class 也是《p》元素的属性，因此获取class 和设置class都可以使用attr()方法。
　　var p_class = $("p").attr("class");//获取《p》元素的class
　　
　　可以使用attr()方法来设置《p》元素的class，jquery代码如下：
　　$("p").attr("class","high");//设置《p》元素的class为high
　　他是将原来的class替换为class，而不是在原来的基础上追加新的class
　　
　　追加样式
　　jQuery提供了专门的addClass()方法来追加样式，为了使例子更为容易理解，首先在《style》标签里添加另一组样式
　　《style》
　　.high{
　　font-weight:bold;
　　color:red;
　　}
　　
　　.another{
　　font-style:italic;
　　color:blue;
　　}
　　//在网页中追加class类的按钮.
　　$("input:eq(2)").click(function(){
　　$("p").addClass("another"); //给《p》元素追加"another"类
　　})
　　
　　attr() 和addClass()的区别
　　用途 追加样式 设置样式
　　对同一个网页元素操作 《p》test《/p》
　　第一次使用方法 $("p").addClass("high"); $("p").attr("class","high");
　　第1次结果 《p class="high"》test《/p》
　　再次使用方法 $("p").addClass("another"); $("p").attr("class","another");
　　结果 《p class="high another"》 test《/p》 《p class="another"》 test《/p》
　　
　　3移除样式
　　如果单击某一个按钮时，删除class的某个值，那么可以使用addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class
　　如下jQuery代码来删除
　　
　　$("p").removeClass("high");//移除《p》元素中为"high"的class
　　//如果要把《p》元素的两个class都删除，就要使用removeClass()
　　$("p").removeClass("high").removeClass("another");
　　//jquery提供了更简单的方法
　　$("p").removeClass("high another");
　　另外，还可以使用removeClass()方法得一个特性来完成同样的效果，它不带参数的时候会将 class的值全部删除.
　　$("p").removeClass();
　　
　　切换样式
　　$*****(function(){
　　//3
　　},function(){
　　//4
　　});
　　
　　toggle()方法此处的作用是交替执行代码3和4两个函数，如果元素原来是显示的，则隐藏它，如果隐藏的，则显示它，此时，toggle()方法主要是控制行为上的重复切换。
　　
　　判断是否含有某个样式
　　hasClass可以用来判断元素中是否有某个class，如果有，则返回true，否则返回false
　　$("p").hasClass("another");
　　//jQuery内部实际上是调用了is()方法来完成这个功能的，该方法等价于
　　$("p").is(".another")
　　1.设置和获取HTML，文本和值
　　html()方法
　　$("P").html();//获取元素的html代码
　　
　　*****() 方法
　　$("p").text(); //获取《p》元素的文本内容
　　//text()可以对文本内容设置内容
　　$("p").text("你最喜欢的水果是?"); //设置《p》元素的文本内容
　　
　　*****()方法
　　val()方法取值
　　通过上面的例子可以发现val()方法不仅能设置元素的值，同时也能获取元素的值，另外val() 方法还有另外一个用处，就是它能select(下拉列表框)，checkbox(多选框)和radio(单选框) 相应的选项被选中，在表单操作中会经常用到。
　　//使用val设置选中项
　　$("#single").val("选择2号");
　　//如果要使下拉列表的第2项和第3项被选中
　　$("#multiple").val(); //以数组的形式赋值
　　使多个文本框被选中
　　$(":checkbox").val();
　　$(":radio").val();
　　
　　也可以使用attr()方法来实现同样的功能
　　$("#single option:eq(1)").attr("selected",true); //设置属性selected
　　$(":radio").attr("checked",true);
　　
　　1 children()方法
　　该方法用于取得匹配元素的子元素集合
　　var $body = $("body") .children();
　　var $p=$("p").children();
　　var $ul = $("ul").children();
　　alert($*****);
　　alert($*****);
　　alert($*****);
　　
　　*****方法
　　该方法用于取得匹配元素后面紧邻的同辈元素。
　　从dom树的结构可以知道《p》元素的下一个同辈节点时《ul》，因此可以通过next() 方法来获取《ul》 元素
　　var $p1 = $("p").next();//取得紧邻《p》元素后的同辈元素
　　《ul》
　　《li title=’苹果’》苹果《/li》
　　《li title=’橘子’》橘子《/li》
　　《li title=’菠萝’》菠萝《/li》
　　《/ul》
　　
　　prev()方法
　　该方法用于取得匹配元素前面紧邻的同辈元素。
　　从DOM树的结构中可以知道《ul》元素的上一个同辈节点时《p》，因此可以通过prev()方法类获取《p》元素
　　var $ul = $("ul").prev(); //取得紧邻《ul》元素前得同辈元素
　　得到的结果将是:
　　《p title="选择你最喜欢的水果"》你最喜欢的水果是?《/p》
　　
　　*****()方法
　　该方法用于取得匹配元素前后所有的同辈元素。
　　在第1章导航栏的例子中有段代码如下：
　　$(".has_children").click(function() {
　　$(this).addClass("highlight"); //为当前元素增加highlight类
　　.children("a").show().end()
　　.siblings().removeClass("highlight")
　　.children("a").hide();
　　})

如何将jquery对象转换成dom对象

jQuery对象转成DOM对象：
两种转换方式将一个jQuery对象转换成DOM对象：和.get(index);
(1)jQuery对象是一个数据对象，可以通过的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v; //DOM对象
alert(*****) //检测这个checkbox是否被选中
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$*****(0); //DOM对象
alert(*****) //检测这个checkbox是否被选中
望采纳！

js原生dom对象和jQuery对象可以混合使用吗

Dom原生对象和jQuery对象的区别：
*****选择器得到的jquery对象和标准的 javascript中的*****()取得的dom对象是 两种不同的对象类型，两者不等价 ；
注：js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来元素的数组集合。所以说他们两者是不同的对象类型不等价。
*****无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
例如（文章下面有两个踩坑经历。）：
$("#id").html();
*****("id").innerHTML;
意思是指：获取ID为id的元素内的html代码。这两段代码 结果相同，但中间的取值过程不同 。
即：$("#id").innerHTML、*****("id").html()之类的写法都是错误的。
注：jQuery是从js衍生出来的，师出同源，但是jQuery是 经过一系列操作 之后，将其封装成了一个个不同的方法，学习jQuery开始就应当树立正确的观念，分清jQuery对象和DOM对象之间的区别，之后学习 jQuery就会轻松很多的。

“JQuery对象”和“DOM对象”的区别

*****对象和DOM对象

第一次学习jQuery,经常分辨不清哪些是jQuery对象，哪些是 DOM对象，因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.

DOM对象，即是我们用传统的方法(javascript)获得的对象，jQuery对象即是用jQuery类库的选择器获得的对象;

复制代码 代码如下:
var domObj = *****("id"); //DOM对象

var $obj = $("#id"); //jQuery对象;

jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。如果一个对象是

jQuery对象，那么就可以使用jQuery里的方法，例:

$("#foo").html(); //获取id为foo的元素内的html代码，html()是jQuery特有的方法;

上面的那段代码等同于:

*****("foo").innerHTML;

注意：在jQuery对象中无法使用DOM对象的任何方法。

例如$("#id").innerHTML 和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。

同样，DOM对象也不能使用jQuery方法。学习jQuery开始就应当树立正确的观念，分清jQuery对象和DOM对象之间的区别，之后学习 jQuery就会轻松很多的。

*****对象和DOM对象的互相转换

在上面第一点说了，jquery对象和dom对象是不一样的！比如jquery对象不能使用dom的方法，dom对象不能使用jquery方法，那假如我 jquery没有封装我要的方法，那能怎么办呢？

这时我们可以将jquer对象转换成dom对象

jquery对象转换成 dom对象

jquery提供了两种方法将一个jquery对象转换成一个dom对象，即和get(index)。可能有人会觉得奇怪，怎么是用下标呢，没错，jquery对象就是一个数组对象.

下面代码将演示一个jquery对象转换成dom对象，再使用dom对象的方法

复制代码 代码如下:

var $cr=$("#cr"); //jquery对象

var cr = $cr; //dom对象 也可写成 var cr=$*****(0);

alert(*****); //检测这个checkbox是否给选中

dom对象转换成jquery对象

对于一个dom对象，只需要用$()把dom对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象);

复制代码 代码如下:

var cr=*****("cr"); //dom对象

var $cr = $(cr); //转换成jquery对象

转换后可以任意使用jquery中的方法了.

通过以上的方法，可以任意的相互转换jquery对象和dom对象.