您的位置：首页 > Web前端 > JQuery

jQuery对象与js对象互相转换

2018-03-18 11:42 323 查看

两种转换方式将一个jQuery对象转换成js对象：[index]和.get(index)：

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的js对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0]; //js对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的js对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //js对象
alert(v.checked) //检测这个checkbox是否被选中 js对象转成jQuery对象:

对于已经是一个js对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(js对象)

如：var v=document.getElementById("v"); //js对象

var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。
出处：https://www.cnblogs.com/big-lll/p/6957451.html补充阅读：
$()与jQuery()jQuery中$函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象jQuery这个js库，除了$之外，还提供了另外一个函数：jQueryjQuery函数跟$函数的关系：jQuery ===
4000
$;jQuery与js区别jquery有一层功能皮肤，其内核还是jsJS与jQuery对象之间的转换1、js对象转换成jquery对象。 $(js对象);2、jquery对象转换成js对象。 (1)jquery对象[索引值] (2)jquery对象.get(索引值)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//入口函数
jQuery(document).ready(function () {
//js方式获取元素
var box = document.getElementById("box");
var cbox = document.getElementsByClassName("box");
var div = document.getElementsByTagName("div");
//jquery方式获取元素
var jqbox = $("#box");
var jqCbox = $(".box");
var jqdiv = $("div");
//js转换成juery转换。
box = $(box);
cbox = $(cbox);
div = $(div);
//js转换成了jquery对象，皮上面有功能可以直接调用。
div.css({"width": 100, "height": 100, "border": "1px solid red"});
box.css("background", "red");
cbox.css("background", "yellow");
//jquery对象转换成js对象
jqdiv[0].style.backgroundColor = "black";
jqdiv.get(4).style.backgroundColor = "pink";
});
</script>
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>
</body>
</html>

注意事项1、jQuery对象是一个数组。数组中包含着原生JS中的DOM对象，还有其他特有的属性2、jQuery对象数组中包含的东西很多，但是jQuery对象.length依然是计算原生js中的DOM对象

更多实例

语法	描述	实例
$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 <p> 元素	在线实例
$("p:first")	选取第一个 <p> 元素	在线实例
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素	在线实例
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	在线实例
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素	在线实例
$("tr:even")	选取偶数位置的 <tr> 元素	在线实例
$("tr:odd")	选取奇数位置的 <tr> 元素	在线实例

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航