【转】 web前端基础知识-（五）jQuery

2024-04-06 23:33:32

通过之前的学习我们已经了解了html、css、javascript的相关知识；本次我们就共同学习进阶知识：jQuery~

一、什么是jQuery?

jQuery其实就是一个轻量级的javascript函数库，通过它我们可以"写的少做的多";

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

二、jQuery使用

jQuery目前分为1.x 2.x和3.x版本，这里咱们以1.12版本为例；

中文文档链接：http://jquery.cuishifeng.cn/

1. 准备工作

1. 网上下载1.12.4，网盘链接：https://pan.baidu.com/s/1hsiFumw 密码: bfmw

2. 将js文件放到同级目录，导入js:

<javascript src="jquery-1.12.4.js"></javascript>

2. 查找元素

2.1 选择器

2.1.1 #id选择器

id是唯一的，可通过#id查找元素；

实例：

1）新建一个html文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="i1"><a>我是i1</a></div>
        <div id="i2"><span>我是I2</span></div>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

2）在谷歌浏览器中打开html文件，F12切换到console下，输入以下代码：

$('#i1');

效果如图所示：

2.1.2 .class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".c1")

实例：

1）在上述html文件中添加一行：

<div class="c1"><span>我是c1</span></div>

2）在谷歌浏览器中打开html文件，F12切换到console下，输入以下代码：

$('.c1');

效果如下：

2.1.3 标签选择器

当然，我们也可以直接查找指定的标签；

拿以上html文件为例，查找a标签：

$('a');

2.1.4 组合选择器

以上方式也可结合使用；

实例：

1）添加html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="i1">按id查找</div>
        <div><a>标签a查找</a></div>
        <div class="c1"><span>我是c1</span></div>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

2）组合查找：

$('#i1,a,.c1');

效果如下：

2.1.5 层级选择器

新建html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="i1">
            <a>我是a1</a>
            <div>
                <a>标签a2查找</a>
                <a>标签a3查找</a>
            </div>
        </div>
        <div id="i2">
            <a>标签a查找</a>
        </div>
        <div class="c1">
            <span>我是c1</span>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

后代选择器

$('#i1 a');

结果如下：

子选择器：

$('#i1>a');

结果如下：

2.1.6 属性选择器

上面的这些基本能够满足咱们常用需求，但是如果我在html文件中再加上两句呢？请帮忙查找代码中含有cc的对象：

<div cc>我是cc</div>
<div cc="boy">我是boy</div>

此时，jQuery引入了一种属性选择器：

$('[cc]');

想要查询指定的属性值：

$('[cc="boy"]');

2.1.7 基本筛选器

$('a:first').text(); //查找符合条件的a标签中的第一个元素
$('a:last').text();  //查找符合条件的a标签中的最后一个元素
$('a:eq(0)').text(); //查找符合条件的a标签中下标为0的元素
$('a:eq(1)').text(); //查找符合条件的a标签中下标为1的元素
$('a:eq(2)').text(); //查找符合条件的a标签中下标为2的元素
$('a:eq(3)').text(); //查找符合条件的a标签中下标为3的元素

2.1.8 其他

$("input[type='text']") #查找input标签中type=text的元素
$(':text') #查找text元素
$(':enabled')
$(':disabled')
$('::checked')
$('::selected')

总结：

结合以上内容，咱们来实现一个全选反选和取消的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <input type="button" value="全选" onclick="chooseALL()"/>
        <input type="button" value="反选" onclick="convertALL()"/>
        <input type="button" value="取消" onclick="cancelALL()"/>
        <thead>
            <tr>
                <th>选项</th>
                <th>姓名</th>
                <th>地址</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>CC</td>
                <td>北京</td>
                <td>男</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>CC</td>
                <td>北京</td>
                <td>男</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>CC</td>
                <td>北京</td>
                <td>男</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>CC</td>
                <td>北京</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script><!--导入jQuery文件-->
    <script>
        function chooseALL() {
            $('#tb :checkbox').prop('checked',true);//全选函数：找到tb下的checkbox元素，并都置为checked
        }
        function convertALL() {
            $(':checkbox').each(function () {
                var v=$(this).prop('checked')?false:true;//反选函数-三元运算符：$(this)表示当前选择的元素；如果当前的元素被选中则取消勾选，如果当前的元素未被勾选则选中；
                $(this).prop('checked',v)
            })
        }
//        function convertALL() {
//            $(':checkbox').each(function () {
//                if ($(this).prop('checked')) {
//                    $(this).prop('checked', false);
//                } else {
//                    $(this).prop('checked', true);
//                }//反选函数：$(this)表示当前选择的元素；如果当前的元素被选中则取消勾选，如果当前的元素未被勾选则选中；
//            })
//        }
        function cancelALL() {
            $('#tb :checkbox').prop('checked',false);//取消函数:查找tb下的checkbox元素，若被选中则取消勾选
        }
    </script>
</body>
</html>

2.2 筛选

筛选器是对选择器选定的jQuery对象做进一步选择。

2.2.1 next

获取指定元素的下一个兄弟元素

$(".p2").next();

2.2.2 nextAll

获取其后的所有兄弟元素

$(".p2").nextAll();

2.2.3 nextUntil

获取其后的元素，直到参数能匹配上的为止,不包括结束条件那个

$(".p2").nextUntil('.p4');

2.2.4 prev

获取指定元素的前一个兄弟元素

$(".p3").prev();

2.2.5 prevAll

获取指定元素前面的所有兄弟元素

$(".p3").prevAll();

2.2.6 prevUntil

获取指定元素前面的所有兄弟元素，直到参数里的条件能够匹配到的。注意参数条件本身不会被匹配

$(".p4").prevUntil("p1");

2.2.7 parent

获取指定元素的直接父元素

html文件：

<div style="position:relative">　　　　
    <p>//我是span的直接父元素，我会被匹配到
　　　　<span>我是一个span</span>
　　</p>
</div>

console输出：

$("span").parent();

2.2.8 parents

获取指定元素的所有祖先元素，一直到<body></body>

$("span").parents();

2.2.9 parentsUntil

获取指定元素的祖先元素，直到参数里能匹配到的为止

$("span").parentUntil("div");

2.2.10 children

筛选获取指定元素的资源

语法：children(expr);　　获取指定元素的资源，expr为子元素筛选条件

$("div").children(".p2");

2.2.11 siblings

获取指定元素的兄弟元素，不分前后

语法：siblings(expr);　　expr为筛选条件，不符合条件的不会选中；

html文件：

<div>
    <p>我是第一个P</p>　　　　　　　　//会被选中，我是.p2的兄弟元素
    <p class="p2">我是第二个P</p>　 //不会被选中，我是自己
    <p>我是第三个P</p>　　　　　　　　//会被选中，我是.p2的兄弟元素
    <p class="p4">我是第四个P</p> 　//会被选中，我是.p2的兄弟元素
</div>

console输出：

$(".p2").siblings();

2.2.12 find

从指定元素中查找子元素

语法：find(expr|obj|ele)　　expr:匹配表达式 | obj用于匹配的jQuery对象 | DOM元素

$("div").find(".p2");

2.2.13 eq

筛选指定索引号的元素

语法：eq(index|-index)　　索引号从0开始，若为负值，则从最后一个开始倒数，最后一个从-1开始

$("p").eq(1);　　//如果选择器改为  $("p").eq(-1)，则我是第四个P会被选中

<!--html文件如下：-->　　　　
　　<div>
　　　　<p>我是第一个P</p>
　　　　<p>我是第二个P</p>　　//会被选中，索引值为1
　　　　<p>我是第三个P</p>
　　　　<p>我是第四个P</p>
　　</div>

2.2.14 first

筛选出第一个匹配的元素

$("p").first();

2.2.15 last

筛选出最后一个匹配的元素

$("p").last();

2.2.16 hasClass

检查匹配的元素是否含有指定的类

语法：hasClass(class)　　class为类别名　　//返回布尔值

html文件：

<div>
　　　　<p>我是第一个P</p>
　　　　<p class="p2">我是第二个P</p>
　　　　<p>我是第三个P</p>
　　　　<p>我是第四个P</p>
</div>

console下输出：

if($("p").hasClass("p2"))
　　{
　　　　alert("我里面含有class=p2的元素");　　//会弹出，p里的确存在class="p2"的元素
　　}

3. 操作元素

3.1 文本操作

html文档如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="i1">
            <a>我是a1</a>
            <div>
                <a>标签a2查找</a>
                <a>标签a3查找</a>
            </div>
        </div>
        <input type="text" value="测试"/>
        <div cc>我是cc</div>
        <div cc="boy">我是boy</div>
        <div id="i2">
            <a>标签a4查找</a>
        </div>
        <div class="c1">
            <span>我是c1</span>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

1）text() 方法返回被选元素的文本内容。

$("#i1").text();

效果如下：

2）text("XXXX") 设置被选元素的文本内容；

$("#i1").text("我是修改后的内容");

效果如下：

3）html() 方法返回被选元素的内容 (inner HTML)。如果该方法未设置参数，则返回被选元素的当前内容。

$("#i1").html();

效果如下：

4）html("XXXX") 方法设置被选元素的内容 (inner HTML)

$("#i1").html("<a>修改html内容</a>");
$("#i1").html();

效果如下：

5）val()返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

$(":text").val(); //返回指定元素的值
$(":text").val("修改后的测试内容"); //设置指定元素的值

效果如下：

3.2 样式操作

1）addClass()

向匹配的元素添加指定的类名，多个类名以空格隔开；

$("#i1").addClass("c1");
$("#i1").addClass("c2 c3");

2）removeClass()

从所有匹配的元素中删除全部或指定的类；多个类名以空格隔开；

$("#i1").removeClass("c1");
$("#i1").removeClass("c1 c3")

3）toggleClass()

从匹配的元素中删除或者添加一个类；该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。

//如某个div已存在c1类
$("#i1").toggleClass("c1"); //删除c1类
$("#i1").toggleClass("c2 c3");//添加c2 c3类

3.3 属性操作

1）attr() 设置或返回被选元素的属性值，专门用于自定义属性；

html文件如下：

<div>
    <div id="i1" cc="c1">
        我是C1
    </div>
    <div id="i2" cc="love">
        我是C2
    </div>

console输出：

$("#i1").attr("cc"); //获取元素cc的属性值
$("#i1").attr("cc","修改后的c1"); //修改元素cc的值
$("#i1").attr("cc");

2）removeAttr() 删除被指定元素

$("#i1").removeAttr("cc"); //删除指定元素cc
$("#i1").attr("cc"); //返回被指定元素的属性值，结果为undefined

3）prop() 设置或返回被选元素的属性和值；专门用于checkbox,radio

html文件：

<div>
    <input type="checkbox" id="c1"/> 北京
    <input type="checkbox" id="c2"/> 上海
</div>

console输出：

$("#c1").prop("checked");  //北京未被选中，返回false
$("#c1").prop("checked",true);  //设置北京被选中

3.4 文档处理

1）append()

方法在被选元素的结尾（仍然在内部）插入指定内容。

html文件：

<div>
    <p id="p1"> 北京</p>
    <p id="p2"> 上海</p>
</div>

console输出：

$("p").append("--------我是添加的内容");

2）prepend()

方法在被选元素的开头（仍然在内部）插入指定内容。

console输出：

$("p").prepend("--------我是添加的内容");

3）after()

在被选元素后插入指定的内容。

$("p").after("--------我是添加的内容");

4）before()

在被选元素前插入指定的内容。

$("p").before("--------我是添加的内容");

5）remove()

移除被选元素，包括所有文本和子节点；不会保留元素占用的位置；

$("p").remove();

6）empty()

从被选元素移除所有内容，包括所有文本和子节点；只是清除内容，会保留元素占用的位置

$("p").empty();

7）clone()

生成被选元素的副本，包含子节点、文本和属性。

$("p").append($("p").clone());

3.5 CSS处理

css() 返回或设置匹配的元素的一个或多个样式属性。

html文件：

<p id="p1" style="color: blue;height:20px;"> 北京</p>

console输出：

$("p").css('color'); //获取p标签的color属性值
$("p").css('color','red'); //设置P标签的color属性值为red

总结：

结合以上例子，我们来实现一个点赞的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="day17-test/jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            addFavor(this);
        });
        function addFavor(self) {
            var fontSize=15;
            var top=0;
            var right=0;
            var opacity=1;
            var tag=document.createElement('span');
            $(tag).text("+1");
            $(tag).css("color","green");
            $(tag).css("position","absolute");
            $(tag).css("fontSize",fontSize+"px");
            $(tag).css("top",top+"px");
            $(tag).css("right",right+"px");
            $(tag).css("opacity",opacity);
            $(self).append(tag);
            var obj=setInterval(function () {
                fontSize = fontSize + 5;
                top = top - 5;
                right = right - 5;
                opacity = opacity - 0.1;
                $(tag).css("fontSize",fontSize+"px");
                $(tag).css("top",top+"px");
                $(tag).css("right",right+"px");
                $(tag).css("opacity",opacity);
                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            },100);
        }
    </script>
</body>
</html>

3.6 位置

3.6.1 offset

获取匹配元素在相对浏览器窗口的偏移量;

返回一个对象，包括两个属性。left:相对浏览器窗口左边的距离。top:相对浏览器顶部的距离。

$("#div1").offset().left;　　//返回id为div1相对于浏览器窗口最左边的距离

$("#div1").offset().top;　　//返回id为div1相对于浏览器窗口最顶部的距离

3.6.2 position

获取匹配元素在相对父元素的偏移量;

返回一个对象，包括两个属性。left:相对父元素最左边的距离。top:相对父元素最右边的距离。只对可见元素有效。

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position:relative;background-color:red;height:200px;width:100px;">
        <div>
            <div id='i1' style='position:absolute;height:80px;border:1px;background-color:blue;top:8px;left:10px;'>测试</div>
        </div>
    </div>
</body>
<script src="jquery-1.12.4.js"></script>
</html>

console输出：

$("#i1").position();

3.6.3 scrollTop

scrollTop()获取匹配元素距离滚动条顶部的距离，说白了就是边框的最顶部与当前显示出来的最顶部的距离。

scrollTop(val)设置匹配元素距离滚动条顶部的距离;

//html文件内容：
<div style="background-color:red;height:2000px;width:2000px;"></div>

//console输出：
$(window).scrollTop();
$(window).scrollTop(0);

3.6.4 scrollLeft

scrollLeft() 获取匹配元素距离滚动条顶部的距离,说白了就是边框的最左边与当前显示出来的最左边的距离。

scrollLeft(val) 设置匹配元素距离滚动条顶部的距离;

//html文件内容：
<div style="background-color:red;height:2000px;width:2000px;"></div>

//console输出：
$(window).scrollLeft();
$(window).scrollLeft(0);

3.6.5 height

height() 获取匹配元素的高度值　　//不包括padding,不包括边框 val可以是字符串"300px"、也可以是数字300，还可以是一个函数，返回值作为参数

height(val)　　设置匹配元素的高度值

3.6.6 width

width()　　　　获取匹配元素的宽度值　　//不包括padding,不包括边框

width(val)　　设置匹配元素的宽度值

3.6.7 innerHeight

innerHeight()　　　　获取匹配元素的高度值　//包括padding但不包括border

innerHenght(val)　　设置匹配元素的高度值

3.6.8 innerWidth

innerWidth() 　　　　获取匹配元素的宽度值　　//包括padding但不包括border

innerWidth(val)　　设置匹配元素的宽度值

3.6.9 outerHeight

outerHeight()　　　　获取元素的高度值　　//包括padding和border

outerHeight(val)　　设置元素的高度值

3.6.10 outerWidth

outerWidth()　　　　获取匹配元素的宽度值　　//(包括padding和border)

outerWidth()　　　设置匹配元素的宽度值

3.7 事件

3.7.1 事件列表

1.blur()　　　　    当失去焦点时触发。包括鼠标点击离开和TAB键离开。
2.change()　　　　  当元素获取焦点后，值改变失去焦点事触发。
3.click()　　　　   当鼠标单击时触发。
4.dblclick()　　    当鼠标双击时触发。
5.error()　　　　　 当javascript出错或img的src属性无效时触发。
6.focus()　　　　   当元素获取焦点时触发。注意：某些对象不支持。
7.focusin()　　　   当元素或其子元素获取焦点时触发，与focus()区别在于能够检测其内部子元素获取焦点的情况。
8.focusout()　　　  当元素或者其子元素失去焦点时触发，与focusout()区别在于能够检测内部子元素失去焦点的情况。　
9.keydown()　　     当键盘按下时触发。
10.keyup()　　　　  当按键松开时触发。
11.mousedown()　　　当鼠标在元素上点击后触发。
12.mouseenter()　　 当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是，鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。
13.mouseleave()　　 当鼠标从元素上移出时触发。
14.mousemove()　　　当鼠标在元素上移动时触发。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。
15.mouseout()　　　 当鼠标从元素上移开时触发。
16.mouseover()　　　当鼠标移入元素时触发。
17.mouseup()　　　　当鼠标左键按下释放时触发。
18.resize()　　　　 当浏览器窗口大小改变时触发。 $(window).resize();
19.scroll()　　　　 当滚动条发生变化时触发。
20.select()　　　　 当input里的内容被选中时触发。
21.submit()　　　　 提交选中的表单。
22.unload()　　　　 当页面卸载时触发。

3.7.2 事件常用方法

1）bind() 绑定事件

语法：bind(type,[data],fn)

type参数可以是上面的22个方法(注意：不能带括号); 参数data是属性值传递给事件对象的额外数据，fn是处理函数。可以bind多个事件，也可以为同一事件绑定多个函数。

//html文件
<div id="d1">我是d1，点我！</div>
//console输出
$("#d1").bind("click",function(){ alert("你好！"); });

2）unbind() 移除事件

语法：unbind([type],[fn])　　　　

移除元素已经绑定的事件；type：指定要移除的事件，fn指定要移除的方法。当没有参数时，所有的事件都移除。

$("#d1").unbind();//移除id为d1元素的所有绑定事件
$("#d1").unbind("click");//移除id为d1元素的click事件
$("#d1").unbind("click",fn1);//移除id为d1元素单击事件中的fn1函数，如果该事件绑定了多个函数，对其他函数没影响。

3）delegate()

为指定的元素添加一个或多个事件，并绑定处理函数，一个事件也可以绑定多个函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1">
        <p>我是p1
            <a>我是a1</a>
            <a>我是a2</a>
            <a>我是a3</a>
        </p>
    </div>
    <div id="d2">
        <p>我是d2</p>
        <a>我是a4</a>
    </div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
    $("#d1").delegate('a','click',function(){alert("123")});
</script>
</html>

4）undelegate()

删除有delegate()函数绑定的一个或多个事件处理函数；

$("#d1").undelegate('a','click');

5）on()--官方推荐用法

函数用于为指定元素的一个或多个事件绑定事件处理函数。

此外，你还可以额外传递给事件处理函数一些所需的数据。

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()等事件函数。

on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

$("#d1").on('click','a',function(){alert("123")});

6）off()

跟on()成对匹配使用，移除指定元素的绑定事件

$("#d1").off('click','a');
$("#d1").off('click','a',function(){alert("123")});

3.7.3 其他

1）阻止事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="text" id="i1"/>
        <a href="http://www.baidu.com">
            <input type="button" id="b1" value="提交"/>
        </a>
    </div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
    $("#b1").bind("click",function () {
        val= $("#i1").val();
        if (val== ""){
            $("#i1").css("color","red");
            $("#i1").val("输入不能为空");
            return false;
        }
        else{
            return true;
        }
    })
</script>
</html>

2）外部js引用时自动执行

在实际工作中我们会大量引用外部js，难免碰到同名的情况，为了解决这个问题，我们就需要在引用时自动执行文件；

$(function(){					
    $(...)					
})

码农公寓

一、什么是jQuery?

二、jQuery使用

1. 准备工作

2. 查找元素

2.1.1 #id选择器

2.1.2 .class选择器

2.1.3 标签选择器

2.1.4 组合选择器

2.1.5 层级选择器

2.1.6 属性选择器

2.1.7 基本筛选器

2.1.8 其他

2.2.1 next

2.2.2 nextAll

2.2.3 nextUntil

2.2.4 prev

2.2.5 prevAll

2.2.6 prevUntil

2.2.7 parent

2.2.8 parents

2.2.9 parentsUntil

2.2.10 children

2.2.11 siblings

2.2.12 find

2.2.13 eq

2.2.14 first

2.2.15 last

2.2.16 hasClass

3. 操作元素

3.1 文本操作

3.2 样式操作

3.3 属性操作

3.4 文档处理

3.5 CSS处理

3.6 位置

3.6.1 offset

3.6.2 position

3.6.3 scrollTop

3.6.4 scrollLeft

3.6.5 height

3.6.6 width

3.6.7 innerHeight

3.6.8 innerWidth

3.6.9 outerHeight

3.6.10 outerWidth

3.7 事件

3.7.1 事件列表

3.7.2 事件常用方法

3.7.3 其他

3.8 jQuery扩展

相关文章