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>
        <meta charset="{CHARSET}">
        <title></title>
        <style>
                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>
        <button>显示盒子和内容</button>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

JS跟jquery的区别是什么？

通过标签名获取指定元素返回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>
        <meta charset="{CHARSET}">
        <title></title>
        <script src="jquery-1.11.1.js"></script>
        <script>
            //入口函数
            $(document).ready(function({
                //获取元素和绑定事件（通过方法实现）
                div.click(function({
        </script>
    </head>