jqueryn内容

在文档目录下创建一个script文件夹
里面放上jquert-1.7.2.js文件
引入jquert目录

1
2
3
4
5
6
7

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
$(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}
            var $btnObj = $("#btnId"); // 表示按id查询标签对象
            $btnObj.click(function () { // 绑定单击事件
                alert("jQuery 的单击事件");
            });
        });

$是一个函数
window.jQuery = window.$ = jQuery;

jquery 核心函数

//核心函数的4个作用
$(function () {
// alert(“页面加载完成之后，自动调用”);

    $("    <div>" +
        "        <span>div-span1</span>" +
        "        <span>div-span2</span>" +
        "    </div>").appendTo("body");

    // alert($("button").length);

    var btnObj = document.getElementById("btn01");
    // alert(btnObj);
    // alert( $(btnObj) );

    // alert( $("<h1></h1>") );
    alert($("button"));

});
//传入参数为[函数]时：在文档加载完成后执行这个函数
//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回

jquery和dom对象区分

通过jQuery提供的api创建的对象，是jquery对象
通过jquery包装的dom对象也是jquery对象
通过jquery提供的api查询到的对象，是jquery对象
alert 为 [object] [object]

document.getElementById(“testDiv”).innerHTML = “这是dom对象的属性InnerHTML”; //可以使用
$(“#testDiv”).innerHTML = “这是dom对象的属性InnerHTML”; //dom对象的使用不了
jquery对象不能使用dom对象的属性和方法
dom对象不能使用jquery的属性和方法

jquery本质

jquery是dom对象的数组+jquery提供的一系列函数

dom对象和jquery对象互转

dom对象转jquery对象

1.先有dom对象
2.$(dom对象)就可以转换成jquery对象
var $obj = $(dom)对象

jquery对象转dom对象

1.先有jquery对象
2.jquery对象下标取出相应的dom对象
var dom = $obj[下标]