jQuery对象与js对象互相转换

最新推荐文章于 2024-07-26 03:26:25 发布

JackLiu16

最新推荐文章于 2024-07-26 03:26:25 发布

阅读量5.5k

点赞数 2

分类专栏： web前端

web前端专栏收录该内容

140 篇文章 1 订阅

订阅专栏

两种转换方式将一个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库，除了$之外，还提供了另外一个函数：jQuery

jQuery函数跟$函数的关系：jQuery ===$;

jQuery与js区别

jquery有一层功能皮肤，其内核还是js

JS与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> 元素	在线实例

JackLiu16

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery对象与js对象互相转换

两种转换方式将一个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(...
复制链接

扫一扫

专栏目录