JavaWeb之JQuery脑图（Day01）核心函数和Jquery对象与Dom对象区别

JQuery

JQuery(JavaScript Query)是JavaScript库，对比js代码，JQuery代码更简洁。

JavaScript绑定点击事件

window.onload = function () {
            var bt1Obj = document.getElementById("bt1");
            bt1Obj.onclick = function () {
                alert("Js原生按钮点击事件");
            }
        }

Jquery绑定点击事件（先引入JQuery库）

< script type=“text/javascript” src="…/JQuery1031/script/jquery-1.7.2.js">

$(function () { 
            // 使用JQuery按id查询标签对象
            var $bt1Obj = $("#bt1");
            // 标签对象.click(function(){}); 绑定点击事件
            $bt1Obj.click(function () {
                alert("JQuery的点击事件");
            });
        })

$ ：核心函数

给$函数传参数

在先加载完页面的基础

$(function () { // 页面加载完后
// ...
// ...
}

传入参数为Html标签字符串

            $("<div>" +
                "        <span>lwt1</span>" +
                "        <span>lwt2</span>" +
                "    </div>").appendTo("body"); // 创建元素节点对象

传入参数为选择器字符串

$"#id属性值"

id选择器，根据id查询标签对象

var $btnObj = $("#btn");
            $btnObj.click(function () {
                alert("id选择器，根据id查询标签对象")
            });

$“标签名”

var $buttonObj = $("button");
            alert($buttonObj.length); // 4个按钮

$".class属性值"

类型选择器，可以根据class属性查询标签对象

var $btn1Obj = $(".btn1");
            $btn1Obj.click(function () {
                alert("类型选择器");
            });

传入参数为DOM对象

JQuery对象和Dom对象

区分

[object HTMLButtonElement]：dom对象
[object Object]: jquery对象

JQuery本质

JQuery是dom对象的数组+Jquery提供的功能函数

			var $btns = $("button"); // 通过4个标签
            for (var i = 0; i < $btns.length; i++) {
                alert($btns[i]);
            }

相互转换

dom->jquery: 先创建dom对象，$(dom对象名)就转化为jquery对象
jquery->dom: 因jquery是dom对象的数组，故通过jquery[下标]取出相应的dom对象
例：alert( $(document.getElementById(“testDiv”))[0] );

alert( document.getElementById("testDiv") ); // dom对象
alert( $(document.getElementById("testDiv")) ); // jquery对象
alert( $(document.getElementById("testDiv"))[0] ); // jquery数组中取出的dom对象