jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var btnObj = document.getElementById("btnId");
            btnObj.onclick = function () {
                alert("JS的单击事件");
            }
        }
    </script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
</html>

使用jQuery写出onclick单击事件
1.复制合适版本的jQuery

2.将jQuery拷贝进入你的工程

3.引入jquery

通过<script type="text/javascript" src="jquery-1.7.js"></script>引入jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {  //表示页面加载完成之后，相当于window.onload = function(){}
            var $btnObj = $("#btnId");  //表示按id查询标签对象（id选择器）
            $btnObj.click(function () { //绑定单击事件
                alert("jQuery的单击事件");
            });
        });
    </script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
</html>

3.jQuery的函数核心

$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数
1、传入参数为函数时，在文档加载完成后执行这个函数
2、传入参数为HTML字符串时，根据这个字符串创建元素节点对象
3、传入参数为选择器字符串时，根据这个字符串查找元素节点对象
4、传入参数为DOM对象时，将DOM对象包装为jQuery对象返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            alert("作用一");
            //作用二
            $("<div>" +                    //不用再定义div和span标签
                "        <span>div-span1</span>" +
                "        <span>div-span2</span>" +
                "    </div>").appendTo("body");
            //作用三
            alert($("button").length);     //标签选择器
            //作用四
            var btnObj = document.getElementById("btn01");
            alert(btnObj);                 
            alert($(btnObj));              //DOM对象包装成jQuery对象返回
        });
    </script>
</head>
<body>
    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

4.区分jQuery对象和DOM对象

jQuery对象

1.通过jQuery提供的API创建的对象，是jQuery对象
alert($("<h1></h1>"));
2.通过jQuery包装的DOM对象，是jQuery对象
var btnObj = document.getElementById("btn01"); btnObj是dom对象
alert($(btnObj)); 包装后为jQuery对象
3.通过jQuery提供的API查询到的对象，是jQuery对象
alert($("#btn01"));

jQuery对象alert出来的效果是：[object Object]

DOM对象

1.通过getElementById()查询出来的标签对象是DOM对象
2.通过getElementsByName()查询出来的标签对象是DOM对象
3.通过getElementsByTagName()查询出来的标签对象是DOM对象
4.通过createElement()方法创建的对象，是DOM对象

DOM对象alert出来的效果是：[object HTML标签名Element]

jQuery对象和DOM对象不能使用对方的属性和方法
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {
//正确
        //document.getElementById("btn01").innerHTML = "Hello Javaweb";//DOM对象的属性和方法

        //$("#btn01").click(function () {                           //jQuery对象的属性和方法
        //     alert("Hello Javaweb");
        // });

//错误
        //$("#btn01").innerHTML = "Hello Javaweb";                   //不能混用

        //document.getElementById("btn01").click(function () {       //不能混用                    
        //     alert("Hello Javaweb");
        // });

    });
    </script>
</head>
<body>
    <div id="btn01">Hello World</div>
</body>
</html>

5.jQuery对象的本质

jQuery对象的本质是DOM对象的数组+jQuery提供的一系列功能函数

//运行过后可以看到$btns[i]在alert中的结果均为[object HTMLbuttonElement]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            var $btns = $("button");
            for(var i=0;i<$btns.length;i++){
            alert($btns[i]);
            }
        });
    </script>
</head>
<body>
        <button id="dom2dom">用DOM调用DOM</button>
        <button id="dom2jQuery">用DOM调用jQuery</button>
        <button id="jQuery2jQuery">用jQuery调用jQuery</button>
        <button id="jQuery2dom">用jQuery 调用DOM</button>
</body>
</html>

6.DOM对象和jQuery对象相互转换

1.DOM对象转化为jQuery对象
1、先有DOM对象
2、$ ( DOM对象 ) 就可以转化为 jQuery 对象

2.jQuery对象转化为DOM对象
1、先有jQuery对象
2、jQuery对象【下标】取出相应的DOM对象

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {
    /*DOM*/ alert(document.getElementById("btn01"));
    /*转化*/
    /*jQuery*/alert($(document.getElementById("btn01")))

    /*jQuery*/ alert($(document.getElementById("btn01")))
    /*转化*/
    /*DOM*/alert($(document.getElementById("btn01"))[0])
        });
    </script>
</head>
<body>
    <div id="btn01">Hello World</div>
</body>
</html>

7.jQuery选择器

基本选择器

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$('*')	匹配所有元素
类选择器	$(".class")	获取同一类的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

层级选择器

子代选择器	$("ul>li");	使用>号,获取儿子层级的元素;不会获取孙子层级的元素
后代选择器	$("ul li");	使用空格,代表后代选择器,获取ul下的所有li元素，包括孙子层级等

筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个li元素
:last	$('li:last')	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引号为偶数的元素

8.jQuery属性操作

1.html、text、val

html() 可以设置和获取起始标签和结束标签中的内容。与dom属性innerHTML一样
text() 可以设置和获取起始标签和结束标签中的文本。与dom属性inneText一样
val() 可以设置和获取表单项的value属性值。与dom属性value一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            // //不传参数是获取，传递参数是设置
            // alert($("div").html());
            // $("div").html("<h1>Hello</h1>");
            // //结果为Hello

            // alert($("div").text());
            // $("div").text("<h1>Hello</h1>");
            // //结果为<h1>Hello</h1>

            //不传参
            // $("button").click(function () {
            //     alert($("#username").val());
            // });

            //传参
            // $("button").click(function () {
            //     alert($("#username").val());
            //      $("#username").val("111")
            // });
        });
    </script>
</head>
<body>
    <div>div标签
        <span>
            div中的span标签
        </span>
    </div>
    <input type="text" name="username" id="username"/>
    <button>按钮</button>
</body>
</html>

val()的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            $(":checkbox").val(["checkbox1","checkbox2"])
        });
    </script>
</head>
<body>
    单选：
    <input name="radio" type="radio" value="radio1"/>radio1
    <input name="radio" type="radio" value="radio2"/>radio2
    <br/>
    多选：
    <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
    <br/>
    下拉多选：
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br/>
    下拉单选：
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>
</body>
</html>

2.attr、prop

attr()均可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等等
attr()可以操作非标准的属性，如自定义属性

prop()均可以设置和获取属性的值，只推荐操作checked、readOnly、selected、disabled等等
区别：
attr()和prop()的作用是选中获取属性值，要求对此标签进行选中。
在查询的标签中，当attr("")中的属性此标签没有，则alert返回undefined(未定义)，并非是未选中，因此官方认为这是一个错误，只需要将attr改为prop，则alert返回false(失败)，对结果更直观。

alert($(":checkbox").attr("value"));
alert($(":checkbox").prop("value"));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            //attr
            alert($(":checkbox:first").attr("value"));//获取value的值
            $(":checkbox:first").attr("name","abc");//重新设置已定义属性的值
            $(":checkbox:first").attr("abc","abcd");//设置自定义属性的值
        });
    </script>
</head>
<body>
    多选：
    <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
    <br/>
</body>
</html>

9.jQuery的增删改

内部插入：
appendTo() a.appendTo(b) 把a插入到每一个b子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b) 把a插到每一个b子元素前面，成为第一个子元素

外部插入：
insertAfter() a.insertAfter(b) 得到ba
insertBefore() a.insertBefore(b) 得到ab

替换：
replaceWith() a.replaceWith(b) 用b替换a，一个b替换所有a
replaceAll() a.replaceAll(b) 用a替换所有的b

删除：
remove() a.remove() 删除a标签
empty() a.empty() 清空a标签的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            $("<h1>World</h1>").appendTo("div");
            $("<h1>World</h1>").prependTo("div");
            $("<h1>World</h1>").insertAfter("div");
            $("<h1>World</h1>").insertBefore("div");
            $("div").replaceWith($("<h1>World</h1>");
            $("<h1>World</h1>").replaceAll("div");
            $("div").remove();
            $("div").empty();
        });
    </script>
</head>
<body>
    <div>Hello</div>
</body>
</html>