1、JQuery（辅助js开发的js类库）

1.1 jQuery核心函数 $()

1.1.1 传入参数为函数时

传入参数为函数时，表示页面加载完成之后，相当于window.onload = function(){}。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
    //全写为$(document).ready(function(){})
        $(function () {
            alert("传入参数为函数！");
        })
    </script>
</head>
<body>
</body>
</html>

1.1.2 传入参数为 html字符串时

根据这个字符串创建元素节点对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $("<div>\n" +
                "<span>hello!</span>\n" +
                "<span>world!</span>\n" +
                "</div>").appendTo("body");
        })
    </script>
</head>
<body>
<!--    <div>-->
<!--        <span>hello!</span>-->
<!--        <span>world!</span>-->
<!--    </div>-->
</body>
</html>

1.1.3 传入参数为选择器字符串时

$("#id属性值") id选择器，根据id查询标签对象；
$(".class属性值") 类型选择器，根据class属性查询标签对象；
$(“标签名”) 标签名选择器，根据标签名查询标签对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            alert($("#div01").length);
            alert($(".divClass").length);
            alert($("div").length);
        })
    </script>
</head>
<body>
    <div class="divClass" id="div01">hello!</div>
    <div class="divClass" id="div02">world!</div>
</body>
</html>

1.1.4 当传入参数为 Dom对象时

将Dom对象包装为jQuery对象返回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            var divObj = document.getElementById("div01");
            alert(divObj);
            alert($(divObj));
        })
    </script>
</head>
<body>
    <div id="div01">hello!</div>
</body>
</html>

1.2 jQuery对象的本质

是Dom对象的数组+jQuery提供的一系列功能函数。

1.2.1 jQuery对象与Dom对象的区别

由getElementById()、getElementByName() 、getElementByTagName()查询、createElement()创建出来的对象是Dom对象。
由jQuery提供的API创建的对象、通过jQuery包装的Dom对象、通过jQuery提供的API查询到的对象为jQuery对象。

1.2.2 jQuery对象与Dom对象在使用上的区别

两者间互相不能使用对方的属性和方法。

1.2.3 jQuery对象和Dom对象之间的互相转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            var divObj = document.getElementById("div01");
            alert(divObj);
            //Dom对象转jQuery对象
            alert($(divObj));
            //jQuery对象取Dom对象
            alert($(divObj)[0]);
        })
    </script>
</head>
<body>
    <div id="div01">hello!</div>
</body>
</html>

1.3 jQuery对象的选择器

1.3.1 基础选择器

$("#id属性值") id选择器，根据id查询元素；
$(".class属性值") 类型选择器，根据class属性查询元素；
$(“标签名”) 标签名选择器，根据标签名查询元素；
$("*")查询所有元素；
$(“selector1, selector2…”)将匹配到的元素合并到一个结果内。

1.3.2 层级选择器

$(“ancestor， descendant”)在给定的的祖先元素下匹配所有的后代元素；
$(“parent>child”)在给定的父元素下匹配所有的子元素；
$(“prev+next”)匹配所有紧接在prev元素后的next元素；
$(“prev~siblings”)匹配prev元素之后的所有siblings元素；

1.3.3 基本过滤选择器

：first获取匹配的第一个元素；
：last获取匹配的最后一个元素；
：not(selector)去除所有与给定选择器匹配的元素；
：even匹配所有索引值为偶数的元素，从0开始计数；
：odd匹配所有索引值为奇数的元素，从0开始计数；
：eq(index)匹配一个给定索引值的元素；
：gt(index)匹配所有大于给定索引值的元素；
：lt(index)匹配所有小于给定索引值的元素；
：header匹配如h1,h2,h3之类的标题元素。
：animated匹配所有正在执行动画效果的元素。

1.3.4 内容过滤选择器

：contains(text)匹配包含给定文本的元素；
：empty匹配所有不包含子元素或文本的空元素；
：parent匹配含有子元素或文本的元素；
：has(selector)匹配含有选择器所匹配的元素的元素。

1.3.5 属性过滤选择器

[attribute]匹配包含给定属性的元素；
[attribute = value]匹配给定的属性是某个特定值的元素；
[attribute != value]匹配所有不含有指定的属性，或者属性不等于特定值的元素；
[attribute ^= value]匹配给定的属性是以某些值开始的元素；
[attribute $= value]匹配给定的属性是以某些值结尾的元素；
[attribute *= value]匹配给定的属性是以包含某些值的元素；
[selector1][selector2][selectorN]需要同时满足多个条件时使用。

1.3.6 表单过滤选择器

：input匹配所有input、textarea、select、button元素；
：text匹配左右单行文本框；
：password匹配左右密码框；
：radio匹配所有单选按钮
：checkbox匹配左右复选框；
：submit匹配所有提交按钮；
：reset匹配所有重置按钮；
：button匹配所有按钮；
：file匹配所有文件域；
：hidden匹配左右不可见的元素，或type="hidden"的元素。
：enable匹配所有可用元素；
：disable匹配所有不可用元素；
：checked匹配所有选中的被选中元素（一般指单选和复选，不包括select中的option）。
PS：
val（）方法可以操作表单项的value属性值，可以设置和获取；
each（）方法时jQuery对象提供的用来遍历元素的方法；