重温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;
            width: 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 {
            width: 200px;
            margin: 20px auto;
            background-color: #e2ebff;
            box-shadow: 5px 8px;
            cursor: pointer;
        }

        .divBtnPressed {
            width: 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;
            width: 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>

绕来绕去，还是回来了！

重温jQuery的更多相关文章

复习 | 重温jQuery和Zepto的API
jq和zepto很相似有许多共同的api,zepto也出了很多与jq不一样的api,总的来说,两者更相似,但是zepto更轻量一点,正好公司也在用,复习这两个没错 jq中的zepto的事件和ajax我 ...
423 重温Java Script and jQuery 葵花宝典 Bootstrap
Bootstrap需要引的三个文件 <link rel="stylesheet" href="css/bootstrap.css"> 表格元素 ...
jQuery 一些神奇的选择器写法
======================================================================== =========================== ...
【JavaScript】重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
如何写一个jquery插件
本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...
HTML5 audio元素如何使用js与jquery控制其事件
前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜 ...
如果不用jQuery,Ajax你还能写出多少?
许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下. F ...
重温ASP.NET WebAPI（一）初阶
重温ASP.NET WebAPI(一)初阶前言本文为个人对WebApi的回顾无参考价值.主要简单介绍WEB api和webapi项目的基本结构,并创建简单地webaapi项目实现CRUD操作. ...

随机推荐

Codeforces Round #452 (Div. 2) C. Dividing the numbers(水)
C. Dividing the numbers Petya has n integers: 1, 2, 3, ..., n. He wants to split these integers in t ...
mysql 1093 - You can't specify target table 'xx表' for update in FROM clause
为了修复节点表某批次数据的用户数据,做出了以下尝试: , name , , )); 执行:[Err] 1093 - You can't specify target table 'zs_work_ap ...
jmeter插件之自定义场景图(万能场景设计)
添加扩展插件自定义线程组:jp@gc - Ultimate Thread Group 此线程组功能强大,可以实现多种场景设置,添加路径如图参数含义解释 Start Threads Count:当前 ...
【codeforces 623E】dp+FFT+快速幂
题目大意:用$[1,2^k-1]$之间的证书构造一个长度为$n$的序列$a_i$,令$b_i=a_1\ or\ a_2\ or\ ...\ or a_i$,问使得b序列严格递增的方案数,答案对$10^ ...
nodeJS搭建一个简单的(代理)web服务器
前端获取数据时经常遇见跨域问题,以前一直用nginx做反向代理.最近在用vuejs,发现webpack-dev-server的代理简单好用.于是仿照写了一个简单的web服务器,用于非webpack的项 ...
LabelRank非重叠社区发现算法介绍及代码实现（A Stabilized Label Propagation Algorithm for Community Detection in Networks）
最近在研究基于标签传播的社区分类,LabelRank算法基于标签传播和马尔科夫随机游走思路上改装的算法,引用率较高,打算将代码实现,便于加深理解. 这个算法和Label Propagation 算法不 ...
连接TFS,报TF31004错误码的一种解决方案
最近研究GIT连接TFS.在用VS2013上使用GIT成功连接了TFS服务器. TFS同时包含GIT团队项目和常规团队项目之后关机重启后,连接TFS团队项目时发生错误,报TF31004错误. 解决过 ...
springboot打包成jar包后找不到xml,找不到主类的解决方法
springboot打包成jar包后找不到xml,找不到主类的解决方法请首先保证你的项目能正常运行(即不打包的时候运行无误),我们在打包时经常遇到如下问题: springboot打包成jar包后找不 ...
暴力攻击 PHP 脚本初探
考虑下面的HTML表单: CODE: <form action="http://example.org/login.php" method="POST"& ...
webpack4重新梳理一下2
上一篇已经实现了webpack的基本打包操作,但是并没有使用配置文件,而是使用 CLI 来实现打包. 配置文件 // webpack.config.js module.exports = { //入口 ...

节点类型常量	值
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树

重温jQuery的更多相关文章

随机推荐

热门专题