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

作者: 嗨黄先生 | 来源:发表于2017-10-16 23:19 被阅读0次

jquery对象和DOM对象的相互转换详解
jQuery查漏补缺之选择器
Dom原生对象和jQuery对象互相转换
初读<锋利的jQuery> $===jQuery
锋利的jQuery总结
锋利的jquery笔记
jQuery
Jquery对象与Dom对象的转换
基础知识
jQuery对象和DOM对象互换

DOM对象此处指的是：使用js操作DOM返回的结果。
var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象
jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。
jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。

var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

DOM对象转换成jQuery对象：

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document）.ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

jQuery对象转换成DOM对象：

// 第一种方式
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）
// 第二种方式
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

体验jquery案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style>
            div{
                height:100px;
                background-color:blue;
                margin:10px;
                display: none;
                
            }
        </style>
        <script src="jquery-1.11.1.js"></script>
        <script>
            $(document).ready(function(){
                
                 //获取元素
            var jQbtn = $("button");//根据标签名获取元素
            var jQdiv = $("div");//根据标签名获取元素
            //绑定事件
            jQbtn.click(function () {
                //事件驱动程序
//                jQdiv.show(1000);//显示盒子。
//                jQdiv.html("tomorrow中秋！");//设置内容
                jQdiv.show(3000).html(1111);
                //1.链式编程。  2.隐式迭代。

            });//事件绑定是通过方法绑定的。

            });
        </script>
    </head>
    <body>
        <button>显示盒子和内容</button>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

JS跟jquery的区别是什么？

js提供的选择DOM元素的方法有几个

document.getElementById;
通过id属性获取指定元素返回唯一的DOM对象
document.getElementsByTagName;
通过标签名获取指定元素返回DOM对象数组（即使只有一个元素）

什么是jquery选择器

jquery选择器是jquery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中元素。

基本选择器

#  ID选择器        $("#btnShow").css("color","red");选择id为btnShow的一个元素（返回值为jquery对象）
. 类选择器        $(".liItem").css("color","red");选择含有类liItem类的所有元素
element  标签选择器      $("li").css("color","red");选择标签名为li的所有元素。

层级选择器

空格  后代选择器     $("#j_wrapli").css("color","red");选择id为j_wrap的元素的所有后代选择器
>  子代选择器  $("j_wrap>ul>li").css("color","red");  选择ID为j_wrap的元素的所有子元素ul的所有子元素li

基本过滤选择器

:eq(index)   选择匹配到元素中索引号为index的一个元素，index从0开始  $("li:eq(2)").css("color","red");选择li元素中索引号为2的一个元素
:od   选择匹配到的元素中索引号为奇数的所有元素，index从0开始
$("li:od").css("color","red");选择li元素中索引号为奇数的所有元素
:even  选择匹配到的元素中索引号为偶数的所有元素，index从0开始
$("li:even").css("color","red");选择Li元素中索引号为偶数的所有元素

筛选选择器

find(selector)   查找指定元素的所有后代元素
$("#j_wrap").find("li").css("color","red");选择id为j_wrap的所有后代元素li
children()  查找指定元素的直接子元素
$("#j_wrap").children("ul").css("color","red");选择id为j_wrap的所有子代元素ul
siblings()   查找所有兄弟元素（不包括自己）
$("#j_liItem").siblings().css("color","red");选择id为j_liItem的所有兄弟元素
parent()  查找父元素
$("#j_liItem").parent("ul").css("color","red");选择id为j_liItem的父元素

如何使用jquery案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script src="jquery-1.11.1.js"></script>
        <script>
            //入口函数
            $(document).ready(function({
                //获取元素和绑定事件（通过方法实现）
                div.click(function({
                    
                    
                });)
            });)
        </script>
    </head>
    <body>
    </body>
</html>