重温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操作. ...

随机推荐

Java原子操作类汇总
当程序更新一个变量时,如果是多线程同时更新这个变量,可能得到的结果与期望值不同.比如:有一个变量i,A线程执行i+1,B线程也执行i+1,经过两个线程的操作后,变量i的值可能不是期望的3,而是2.这是 ...
JVM中的对象生命周期
在JVM运行空间中,对象的整个生命周期大致可以分为七个阶段:创建阶段(Creation).应用阶段(Using).不可视阶段(Invisible).不可到达阶段( Unreachable).可收集阶段 ...
一个自动换行，不可以滚动的 textview
主要效果有几点只显示一行文字输入文字过长时,自动换行上下不可以滑动删除时,自动显示上一行文字. 如何做到只显示一行 textView.heightAnchor.constraint(eq ...
JAVA线程本地变量ThreadLocal和私有变量的区别
ThreadLocal并不是一个Thread,而是Thread的局部变量,也许把它命名为ThreadLocalVariable更容易让人理解一些. 所以,在Java中编写线程局部变量的代码相对来说要笨 ...
centos6创建用户，设置ssh登录
创建用户 #创建用户 useradd -s /sbin/nologin mysql useradd –d /usr/china -m china #设置密码 passwd mysql passwd c ...
vmware安装——CentOS-6.5和Mysql
1.新建虚拟机 2.安装centos6.5 3.centos设置查看网络 4.vmware设置网络连接关闭selinux [root@china ~]# vim /etc/selinux/conf ...
【apio2007】【ctsc2007】数据备份贪心+链表+堆
题目大意:有n个点,k条链,每个点离原点有一定的距离.要你用k条链连接2k个点,使得k条链的长度最短. 首先每次肯定是链相邻的2个点,所以我们先把相邻2个点的差值求出来,得到有n-1个数的数列. 然后 ...
【bzoj2961】共点圆 k-d树
更新:此题我的代码设置eps=1e-8会WA,现在改为1e-9貌似T了此题网上的大部分做法是cdq分治+凸包,然而我觉得太烦了,于是自己口胡了一个k-d树做法: 加入一个圆$(x,y)$,直接在k- ...
Redis数据类型之SDS简单动态字符串
一,简单的动态字符串 1,Redis自己构建了一种名为简单动态字符串的抽象类型,并将SDS用作Redis的默认字符串表示, 2,在redis的数据库里面,包含字符串值的键值对在底层都是由SDS实现的 ...
Vue的Computed的使用
Vue的Computed的使用相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

节点类型常量	值
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的更多相关文章

随机推荐

热门专题