jQuery如何将选中的对象转化为原始的DOM对象

在jQuery中,在一个页面上选择元素返回的集合是jQuery对象而不是原始的DOM对象. 所以只能运行jQuery方法. 如果要在选择集上运行DOM方法和属性,该集合必须转化为DOM对象

比如你不可以这样使用:

$('div').innerHTML = "hello world";

因为innerHTML是 DOM的属性而不是jQuery对象的属性.如果确实想这么做.那么就需要将jQuery对象转化为DOM对象.方法有两种.

①jQuery提供一种核心方法get(),所以上面的可以写成$('div').get().innerHTML = "hello world";

当然这里对应的是页面中只有一个div的情况.如果有多个div.

那么这种方法不好使,你需要修改一下代码,通过传递给get(index) 这样的索引值进行选择.

$("div").get(0).innerHTML = "hello world";

当然,你可以使用jQuery自带的$.each循环进行全部的赋值操作.

$div1 = $("div").get();


代码如下:

<span style="font-size:18px;">$.each($div1, function(index, val) {
val.innerHTML = 'lc '+ index;
});</span>

②我们可以使用[ ] 来使用数组的形式获取内容.

比如 $('div')[0].innerHTML = "hello world";

下面我们来看一个完整的例子吧.


代码如下:

<span style="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<h3>Books</h3>
<ol>
<li>Head First jQuery</li>
<li>Data Structrue and Algorithm with Javascript</li>
<li>Nodejs up and running</li>
<li>Node js with PHP expert</li>
<li>Sharp jQuery</li>
<li>Professional Javascript</li>
</ol>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var lis = $('ol li').get().reverse();
$ol = $('ol');
$ol1 = $ol.clone(false, false);
$ol1.empty();
$.each(lis, function(index, val) {
$ol1.append('<li>'+val.innerHTML+'</li>');
});
$ol1.appendTo('body');
});
</script>
</body>
</html>
</span>

下面我补充一下将DOM对象转化为jQuery对象的过程.

这里我使用的是这个例子.


代码如下:

<html>
<head>
<title></title>
<style type="text/css">
.clicked{
width:100px;
height: 40px;
border: 1px solid #cba;
border-radius: 3px;
}
</style>
</head>
<body>
<a href="#" id="cli" onclick="click(this)">Click Me</a>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function click(it){
$(it).addClass('clicked');
console.log('yes');
}
</script>
</body>
</html>

这里就是用到了我们的DOM对象转化为jQuery对象的过程.

注意看: 其实it指的是我们的a这个链接对象.是普通的DOM对象,我们在onclick 事件中this传入.

然后我们用$()对DOM对象进行了封装,然后才可以使用addClass函数.

赞 (0)

相关推荐

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

    父窗口中操作iframe:$(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作父窗口:$(window.parent.document) 接下来就可以继续获取iframe内的dom了. 获取iframe内的dom对象有两种方法 1 $(window.frames["iframeChild"].document).find("#child") 2 $(&

  • JQUERY 对象与DOM对象之两者相互间的转换

    刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换 这几天会将jQuery的一些使用方法总结一下,希望能对jQuery初学者起到一定的帮助作用. 今天主要看看jQuery对象和dom对象的相互转换,明白了这个,以后用起jQuery会方便很多. 1.方法名冲突的解决办法 在开始使用jQuery时,我们首先应该避免jQuery与其他类库或自定义js的冲突. 先看一段最简单的代

  • jQuery对象和DOM对象的相互转化实现代码

    jQuery对象和DOM对象相互转化 jQuery对象和DOM对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法:例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象: DOM对象就是Javascript固有的一些对象操作.DOM对象能使用Javasc

  • jquery入门—访问DOM对象方法

    jquery入门—访问DOM对象方法

    1.JavaScript访问DOM对象方法: var oTxtValue=document.getElementById("Text1").value; 2.JQuery访问DOM对象方法: var oTxtValue=$("#Text1").val(); 通过JQuery库中的方法访问或控制页面中的元素,比使用JavaScript代码要简洁得多,而且兼容各浏览器. 示例代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-/

  • jquery对象和DOM对象的区别介绍

    第一步,http://www.k99k.com/jQuery_getting_started.html 第二步,新手先仔细得全部看一遍jQuery的选择器,很重要!!! (http://shawphy.com/jqueryapi/ 这里是最新文档,有离线版下载) 第三步,深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的$("#save&quo

  • jQuery对象和DOM对象相互转化

    DOM对象就是Javascript固有的一些对象操作.DOM对象能使用Javascript固有的方法,但是不能使用jQuery里的方法.例如:document.getElementById("img").src="test.jpg";这里的document.getElementById("img")就是DOM对象:$("#img").attr("src","test.jpg"); 和do

  • javascript中html字符串转化为jquery dom对象的方法

    原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px

  • jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象. DOM对象就是Javascript 固有的一些对象操作.DOM 对象能使用Javascript 固有的方法,但是不能使用

  • jQuery对象和DOM对象使用说明

    1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系. DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; 复制代码 代码如下: var domObj = document.getElementById("id"); //DOM对象 var $obj = $("#id")

  • jquery对象与DOM对象转化

    jquery对象是一个集合,相当于元素集合成的数组,而DOM对象是一个单独的DOM元素 jquery对象转化为DOM元素: 1.利用数组下标的方式  例var $div = $('div')  var div = $div[0] 2.通过jQuery自带的get()方法 var div = $div.get(0) DOM对象转化为jquery元素直接$() 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

随机推荐