重温jQuery

Write Less， Do More！

——John Resig(jQuery设计者)

每个HTML元素对象对应着一个DOM节点；
元素节点本身并不包容其内容，其内容是尤其文本子节点所提供的；
文本节点（text node）
文本节点构成树的叶子节点；
在HTML中，文本节点包容了元素的内容；
属性节点（attribute node）
属性节点对应着HTML文档中的元素属性；

一个元素节点可以包容多个属性节点，构成一个集合；

Ajax

封装了浏览器提供的XMLHttpRequest对象，以异步方式向Web Service 发出请求，通过“回调”方式进行后续处理，更新UI界面，整个流程简单明了。

jQuery命令链

jQuery采用一种声明式的编程风范，可以连续调用多个方法。

神奇的”$”

“$”是jQuery的“神奇字符”，通过它可以调用jQuery所提供的各种功能。

//调用函数
var trimmed=$.trim(“…”);
//操作DOM元素（支持CSS选择器，如id，class等）
$(“button.continue”).html(“…”)

编程访问DOM节点

DOM编程的基本思路

访问DOM的入口点是document，它是window的属性，在JavaScript中，可以直接访问它；
document对象还有一个body属性，直接引用<body>元素；
document对象提供了一系列的方法，完成以下工作：

1. 从DOM树中选择特定的节点（或节点集合）
2. 设定这些节点对象的属性
3. 调用这些节点对象的方法
4. 响应这些节点对象特定的事件

DOM 编程要点：操作元素

事件描述	DOM API 中可用的方法
获取特定元素的引用	getElementById、getElementByTagName、GetElementByClassName
要操作元素的属性	通过元素对象的attrbutes集合，对元素属性进行CRUD；使用setAttribute/getAttribute处理单个属性；
处理CSS样式	使用元素对象的style属性可以设定元素的CSS样式规则；使用className可以设定元素的样式类；

DOM API编程核心点：修改DOM树

直接使用DOM API开发存在的问题

浏览器的兼容性问题；
过于底层，开发效率不高，需要编写的代码量大；

jQuery访问DOM树

使用jQuery的优点

灵活的元素选择能力；
具备强大CSS操控能力；
对DOM树节点的增删功能强大；

常用jQuery操作

事件	jQuery提供的方法
获取、创建元素	$()
处理属性	attr()、removeAttr()
操作属性内容	html()、text()、val()
处理样式	css()、addClass()、toggleClass()、removeClass()
外部插入节点	after()、before()、insertAfter()
复制节点	clone()
替换节点	replaceWith、replaceAll()
包裹节点	wrap()、unwrap()、wrapAll()、wrapInner()
移除节点	remove()和empty()

示例

1. 复制元素

<div id="divShow">
    <b><i>This is a Div element!</i></b>
</div>
<div id="divHTML">

</div>
<div id="divText">

</div>
<!--引入jQuery-->
<script src="JS/jquery-3.1.1.min.js"></script>

<script>
    $(function () {
        //获取id为divShow的HTML内容
        var strHTML = $('#divShow').html();
        var strText = $('#divShow').text();
        //设置id为divHTML的hHTML内容
        $('#divHTML').html(strHTML);
        $('#divText').text(strText);
    })
</script>

2. 设置表格样式

jQuery支持CSS3的元素选择方式，可以使用非常灵活的方式选择特定的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exploreDOMNode</title>
    <link href="dist-Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="dist-Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <style>
        #tbStu {
            /*如果在table标签中直接设置border='1', 那么将会是整个表格的线条全部出现*/
            /*如果在样式里面书写border:1px...,将表示只显示整个表格的外框线*/
            border: 1px solid darkblue;
            background-color: #9b9e9d;
             360px;
        }

        #tbStu tr {
            line-height: 25px;
        }

        #tbStu tr th {
            background-color: #2b669a;
            text-align: center;
            color: #f8f8f8;
        }

        #tbStu .trEven {
            background-color: #f8f8f8;
        }
    </style>
</head>
<body class="container text-center">
<div class="row">

    <table class="col-xs-4 col-xs-offset-4" id="tbStu" cellspacing="0">
        <caption><h3>使用jQuery添加样式</h3></caption>
        <!--第0行-->
        <!--注意数字0是偶数-->
        <tr>
            <th>
                学号
            </th>
            <th>
                姓名
            </th>
            <th>性别</th>
            <th>总分</th>
        </tr>
        <!--第1行-->
        <tr>
            <td>1001</td>
            <td>张晓明</td>
            <td>男</td>
            <td>320</td>
        </tr>
        <!--第2行-->
        <tr>
            <td>1002</td>
            <td>Jener</td>
            <td>男</td>
            <td>450</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>1003</td>
            <td>黄子玉</td>
            <td>女</td>
            <td>500</td>
        </tr>
        <!--第4行-->
        <tr>
            <td>1003</td>
            <td>于文华</td>
            <td>女</td>
            <td>620</td>
        </tr>
    </table>
</div>
<script src="JS/jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        //为序号为偶数的tr添加样式trEven
        $("#tbStu tr:nth-child(even)").addClass("trEven");
    })
</script>
</body>
</html>

3. 修改表格样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exploreDOMNode</title>
    <link href="dist-Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="dist-Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <style>
        .divBtn {
             200px;
            margin: 20px auto;
            background-color: #e2ebff;
            box-shadow: 5px 8px;
            cursor: pointer;
        }

        .divBtnPressed {
             200px;
            margin: 20px auto;
            background-color: #d58512;
            font-weight: bolder;
            /* 取消阴影区 */
            box-shadow: 0 0;
            cursor: pointer;
        }
    </style>
</head>
<body class="container text-center">
<div class="divBtn">Click to Change Style!</div>
<script src="JS/jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        $('.divBtn').click(function () {
            $(this).toggleClass('divBtnPressed');
        })
    })
</script>
</body>
</html>

4. 复制DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exploreDOMNode</title>
    <link href="dist-Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="dist-Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <style>
        .clicktoPate {
            border: 1px solid darkgray;
            border-radius: 25%;
            padding: 5px;
             80px;
            height: 80px;
            background-color: #2b669a;
            color: #fff;
            display: inline;
            cursor: pointer;
        }

        .divShow {
            margin: 20px auto;
        }
    </style>
</head>
<body class="container text-center">
<script src="JS/jquery-3.1.1.min.js"></script>

<div class="clicktoPate">点击进行复制</div>
<!--指定复制内容的输出的区域-->
<div class="divShow">
</div>
<script>
    $(function () {
        $('.clicktoPate').click(function () {
            //制定输出区域为.divShow
            $(this).clone(true).appendTo('.divShow');
        })
    })
</script>
</body>
</html>

5. 动态创建DOM节点对象

<style>
    ul {
        list-style: none;
    }

    ul li {
        line-height: 2em;
    }
</style>

<fieldset>
    <legend><h2>DynamicCreateDOMElement</h2></legend>
    <ul>选择创建的DOM节点：
        <li><select id="selectType">
            <option value="p">P元素</option>
            <option value="div">DIV元素</option>
        </select>
        </li>
        输入节点的内容：
        <li>
            <input type="text" id="contentValue">
        </li>
        <li>
            <button id="btn">创建节点</button>
        </li>
    </ul>
</fieldset>
<div id="showDiv"></div>

<script src="JS/jquery-3.1.1.min.js"></script>

<script>
    $(function () {
        $("#btn").click(function () {
            /*获取参数*/
            var str1 = $("#select1").val();//获取元素名
            var str2 = $("#contentValue").val();//获取插入节点的内容
            var div = $("<" + str1 + ">" + str2 + "</" + str1 + ">" + "<hr/>");//创建DOM对象
            $("#showDiv").show().append(div);//c插入节点中
        })
    })
</script>

绕来绕去，还是回来了！

节点类型常量	值
Node.ELEMENT_NODE	1
Node.ATTRIBUTE_NODE	2
Node.TEXT_NODE	3
Node.CDATA_SECTION_NODE	4
de.ENTITY_REFERENCE_NODE	5
Node.ENTITY_NODE	6
Node.PROCESSING_INSTRUCTION_NODE	7
Node.COMMENT_NODE	8
Node.DOCUMENT_NODE	9
Node.DOCUMENT_TYPE_NODE	10
Node.DOCUMENT_FRAGMENT_NODE	11
Node.NOTATION_NODE	12

重温jQuery

目录

基础知识

概括

编程访问DOM节点

jQuery访问DOM树