jQuery 对象

jQuery 对象

 　　版权声明：未经博主授权，严禁转载分享　　

 什么是 jQuery 对象

　　jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。

　　jQuery 对象是一个类数组对象。

　　jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象，就可以使用 jQuery 的方法。

　　在 jQuery 对象中无法使用 DOM 对象的任何方法，反正在 DOM 对象也无法使用任何 jQuery 的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery对象</title>
</head>
<body>
<p id="p1">我是p1元素</p>
<p id="p2">我是p2元素</p>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*修改p元素的文本*/
    // 使用核心DOM的方法,
    // 使用核心dom获取的元素是dom对象
    //之能使用核心dom的API
    var p1 = document.getElementById("p1");
    p1.innerHTML = "我是核心DOM的方法";
    // 使用 jquery 函数库的API，只能使用jquery对象的api
    var p2 = document.getElementById("p2"); // dom对象
    p2.html("我是jquery函数库中的方法！") // 不能使用 错的

</script>
</body>
</html>

 

 如何创建 jQuery 对象

使用 jQuery() 构造函数创建 jQuery 类型的对象。

1.将已经获得的 DOM 对象使用 jQuery 函数封装为 jQuery 对象。

　　- jQuery( domObj )

<p id="p1">我是p1元素</p>
<p id="p2">我是p2元素</p>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*修改p元素的文本*/
    // 使用核心DOM的方法,
    // 使用核心dom获取的元素是dom对象
    //之能使用核心dom的API
    var p1 = document.getElementById("p1");
    p1.innerHTML = "我是核心DOM的方法";
    // 使用 jquery 函数库的API，只能使用jquery对象的api
    var p2 = document.getElementById("p2"); // dom对象
    p2 = jQuery(p2); // 将dom对象封装为jquery对象
    p2.html("我是jquery函数库中的方法！") // 可以使用
</script>

 　

　　

　　- $( domObj )

<p id="p1">我是p1元素</p>
<p id="p2">我是p2元素</p>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*修改p元素的文本*/
    // 使用核心DOM的方法,
    // 使用核心dom获取的元素是dom对象
    //之能使用核心dom的API
    var p1 = document.getElementById("p1");
    p1.innerHTML = "我是核心DOM的方法";
    // 使用 jquery 函数库的API，只能使用jquery对象的api
    var p2 = document.getElementById("p2"); // dom对象
    // p2 = jQuery(p2); // 将dom对象封装为jquery对象
    p2 = $(p2); // 将dom对象封装为jquery对象
    p2.html("我是jquery函数库中的方法！") // 可以使用
</script>

 

　　

2.使用选择器查找 DOM 元素，并封装 DOM 元素。

　　-  jQuery( "selecter" )

　　-  $( "select" ) 

<p id="p1">我是p1元素</p>
<p id="p2">我是p2元素</p>
<p id="p3">我是p3元素</p>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*修改p元素的文本*/
    // 使用核心DOM的方法,
    // 使用核心dom获取的元素是dom对象
    //之能使用核心dom的API
    var p1 = document.getElementById("p1");
    p1.innerHTML = "我是核心DOM的方法";
    // 使用 jquery 函数库的API，只能使用jquery对象的api
    var p2 = document.getElementById("p2"); // dom对象
    // p2 = jQuery(p2); // 将dom对象封装为jquery对象
    p2 = $(p2); // 将dom对象封装为jquery对象
    p2.html("我是jquery函数库中的方法！") // 可以使用
    // 直接获取 jquery对象
    // var p3 = jQuery("#p3");
    var p3 = $("#p3");
    p3.html("我是jquery函数库中的方法")
</script>

 　　

 

 课堂练习

　　分别使用核心dom 和 jquery 方法修改div中文本的颜色

<div id="d1">我是d1标记</div>
<div id="d2">我是d2标记</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 分别使用核心dom 和 jquery 方法修改div中文本的颜色
    // ：css（‘样式名’，‘值’）

    // 核心 dom 方法
    var d1 = document.getElementById("d1");
    d1.style.color = "#f00";

    // jquery 方法
    // var $d2 = $("#d2");
    // $d2.css("color","#f00");
    $("#d2").css("color","#f00");
</script>

 

 jQuery 对象 和 DOM 对象之间的相互转换

 DOM 对象封装为 jQuery 对象 （DOM => jQuery ）

　　- jQuery（domObj）

　　- $（domObj）

　　- 如：$( this )、   $( document )、   $( window )

 

<button type="button" id="btn1">我是btn1</button>
<button type="button" id="btn2">我是btn2</button>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*实现单击按钮式修改按钮背景颜色*/
    // DOM
    var btn1 =document.getElementById("btn1");
    btn1.onclick = function () {
        this.style.backgroundColor="#0ff";
    }
    //jquery
    $("#btn2").click(function () {
        // this是一个DOM对象，所以必须封装为一个 jquery对象
        $(this).css("background-color","#0ff");
    });
</script>

 

 　　

 

 jQuery 对象拆解为 DOM 对象 （jQuery => DOM）

 　　- $( ".mybox" )[0]

 　　- $( "input" ).get(1)

<button type="button" id="btn1">我是btn1</button>
<button type="button" id="btn2">我是btn2</button>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*实现单击按钮式修改按钮背景颜色*/
    // DOM
    var btn1 =document.getElementById("btn1");
    btn1.onclick = function () {
        this.style.backgroundColor="#0ff";
    }
    //jquery
    $("#btn2").click(function () {
        // this是一个DOM对象，所以必须封装为一个 jquery对象
        $(this).css("background-color","#0ff");
    });

    // jQuery对象拆解为DOM对象
    var $btns = $("button");
    console.log($btns);
    var domObj1 = $btns[0]; // 拆解为DOM对象
    domObj1.innerHTML="[]使用DOM对象的API修改内容";
    var domObj2 = $btns.get(1); // 拆解为DOM对象
    domObj2.innerHTML="()使用DOM对象的API修改内容";

</script>

 　　

 

完成！

 

posted @ 2018-05-30 13:10  叫我+V  阅读(443)  评论(0)  编辑  收藏  举报