JQuery学习笔记(二)：对象访问

来源：互联网发布：金色平原知乎编辑：程序博客网时间：2024/06/13 21:28

在上一篇的博客中，我们介绍了Jquery的一些基础知识，知道了什么是jQuery，以及jQuery可以做什么等问题。在这篇文章中，我将介绍在这两天学习的jQuery的核心之对象访问(其实就是一些jQuery库函数的使用)。

在具体学习这些对象访问函数前，我先做了这些内容的学习：

一、加载事件ready(fn)：

1、当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

2、参数fn：function，要在DOM就绪时执行的函数

3、示例代码：

<html> <head> <title>页面载入事件ready(fn)</title>  <script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></script> <script type="text/javascript"> //当页面载入时即弹出一个对话框 $(document).ready(function(){ window.alert("页面载入事件：Hello jQuery"); }); //上面事件的简写可以是这样 $(function(){window.alert("页面载入事件：Hello jQuery")}); </script> </head></html>

二、然后学习了两个基本的选择器和一个属性，因为在后续的对象访问函数中要用到

1、#id选择器：根据给定的ID匹配一个元素，例如：查找 ID 为"txtName"的元素

html代码：<input type="text" id="txtName" />

使用jQuery代码如下：$("#txtName");

2、element选择器：根据给定的元素名匹配所有元素，例如页面中有好几个input表单元素

html代码：<input type="text" id="txtName"/><input type="text" id="txtage"/>

使用jQuery：$("input");那么将会自动的去匹配页面中的input表单元素

3、属性attr(name)：取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。

如果元素没有相应属性，则返回 undefined。该属性的返回类型为string.

三、准备工作做好后，开始来学习jQuery中的对象访问函数

1、each(callback)：以每一个匹配的元素作为上下文来执行一个函数。以我的理解，它是jQuery的一种循环机制，一般与this关键字结合使用，意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。参数callback：对于每个匹配的元素所要执行的函数，了解了这些之后，开始来编写一个小的入门案例：

html内容：

jQuery代码：

输出结果为：弹出对话框内容分别为：txtname和btnshow

2、size()函数：jQuery 对象中元素的个数。

length属性：同上。

这个函数的返回值与 jQuery 对象的'length' 属性一致

示例代码:

html：

    <input type="text" id="text1" width="100" value="文本框" />
    <input type="password" id="text2" width="100" value="密码框" />
    <input type="button" id="button1" width="50" value="按钮1" onClick="printInputNum()" />
    <div style="background-color: red; width: 350">
        点我，就知道该页面中有几个input表单表单元素
    </div>

Jquery代码：

        //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
        $(document).ready(function() {
            //注册div的click事件--用到第一章中的知识点
            $("div").click(function() {
                //输出页面中input标签的个数
                alert("使用length属性获取：" + $("input").length + "个input表单元素");
            });
        });

        //传统的js函数实现统计当前页面中有几个input表单元素
        function printInputNum() {
            var num = document.getElementsByTagName("input");
            alert("使用传统的方式，input标签有：" + num.length + "个");

}

        //jq函数
        $(document).ready(function() {
            $("#text1").click(function() {
                alert("使用size函数获取：" + $("input").size());
            });
        });
    </script>

当运行页面，即弹出该html页面中有几个input表单元素

3、get和get(index)函数：

get：取得所有匹配的 DOM 元素集合。这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。

如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用

get(index)：取得其中一个匹配的元素。 index表示取得第几个匹配的元素，类型为number。

这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。

示例代码：

html代码：

JQuery代码：

4、index(subject)函数：

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。

如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1

示例代码：

html：

jQuery代码：

运行页面，点击按钮btnLogin，将输出txtPwd控件的索引为1。

到此，jQuery常用的对象访问函数我们就学完了，还有两个函数：selector和context，将在后续的文章中结合文档处理相关函数一起介绍