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

随机推荐

jzoj5996
我們可以枚舉每一個串的最短回文後綴,這樣一定不會算重. 雖然一個字符串可能會有多個回文後綴,但是答案只會在最短的後綴被計算記f[i]表示長度為i回文串中,沒有長度>1的回文後綴的個數,將總個數 ...
编写一致的符合习惯的javascript
本文转自我司的编码规范~ ==== 引言将要叙述的这些原则旨对javascript开发的风格做指导,并非指定性的规则需绝对服从.如果需要找出一条必须遵循的原则,应该是保持代码的一致性和风格统一. 除 ...
Google 团队效能研究 | 为什么雇用最聪明的人是远远不够的？
简评:Google 的一项团队效能研究结果,可能会让你重新认识如何建立一个优秀的团队. Google 的搜索业务可能最为人所知,但 Google 可不仅仅有搜索业务,它可能还是最擅于大数据研究的公司之 ...
Redis偶发连接失败案例分析
[作者] 张延俊:携程技术保障中心资深DBA,对数据库架构和疑难问题分析排查有浓厚的兴趣. 寿向晨:携程技术保障中心高级DBA,主要负责携程Redis及DB的运维工作,在自动化运维,流程化及监控排障等 ...
利用Django和装饰器做一个简单的修改密码页面
view视图代码: from django.shortcuts import render,redirect from django.http import HttpResponse from PIL ...
OS之内存管理 ---基本的内存管理策略（二）
分段基本方法分段就是基于用户视图的内存管理方案.逻辑地址空间是由一组段构成的,每个段都有名称和长度.地址指定了段名称和段内偏移.因此用户通过两个量来指定地址:段名称和段偏移. 为了简单,进行对段的 ...
WebDriverAPI（1）
访问某网页地址被测网址http:http://www.baidu.com Java语言版本的API实例代码方法一: @Test public void visitURL(){ String bas ...
支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件
支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...
Binder AIDL中自定义类型传递的源码分析
binder机制实现的IPC和共享内存的方式不同,它采取的是值拷贝的方式,即进程间传递的实体遵循Parcelable协议, Bp端负责向Parcel里写东西,Bn端负责从Parcel里读取还原,顺序是 ...
keepalived安装配置实战心得(实现高可用保证网络服务不间断)
keepalived安装配置实战心得(实现高可用保证网络服务不间断) 一.准备2台虚拟机安装的系统是:centos-release-7-1.1503.el7.centos.2.8.x86_6 ...

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

随机推荐

热门专题