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

随机推荐

$_ENV和$GLOBALS预定义变量
1,$_ENV该全局数组可以获取环境变量,在php5.3中默认禁用,但是可以在php.ini中启用. variables_order="EGPCS" 2,$GLOBALS一个包含了 ...
python爬虫1——获取网站源代码(豆瓣图书top250信息)
# -*- coding: utf-8 -*- import requests import re import sys reload(sys) sys.setdefaultencoding('utf ...
【xsy1097】拼图构造题
题目大意:请你使用n个图形拼成一个矩形.要求:①这每个图形都由1×1的小正方形组成,而且第i个图形由i个小正方形组成.②除了第1个和第2个图形以外,任意一个图形的所有小正方形,不都在一条直线上. 数据 ...
【PaddlePaddle系列】CIFAR-10图像分类
前言本文与前文对手写数字识别分类基本类似的,同样图像作为输入,类别作为输出.这里不同的是,不仅仅是使用简单的卷积神经网络加上全连接层的模型.卷积神经网络大火以来,发展出来许多经典的卷积神经网络模型, ...
钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例
最近一直着手开发h5仿钉钉项目,使用到了h5+css3+zepto+wcPop2等技术进行开发,实现了消息.表情.动图发送,仿QQ多人拼合图像,可以选择本地图片,并可以图片.视频预览,仿微信发红包及打 ...
(转)更换镜像rootvg卷组中的硬盘
F85系统镜像盘更换实录之一:删除原有镜像操作 # cfgmgr # lsdev -Cc disk hdisk0 Available 11-09-00-8,0 16 Bit LVD SCSI Dis ...
Opserver 初探一《Opserver的搭建》
Opserver 是Stack Overflow的开源监控产品.stackoverflow网站是基于asp.net开发的,具体采用的软硬件配置可以查看<StackOverflow 这么大,究竟用 ...
sublime text3 --前端工程师必备
sublime text3 --前端工程师必备神器导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...
Java之集合(二十三)SynchronousQueue
转载请注明源出处:http://www.cnblogs.com/lighten/p/7515729.html 1.前言本章介绍阻塞队列SynchronousQueue.之前介绍过LinkedTran ...
冒泡排序——Bubble Sort
基本思想:两个数比较大小,较大的数下沉,较小的数冒起来. 过程: 1.比较相邻的两个数据,如果第二个数小,就交换位置. 2.从后向前两两比较,一直到比较最前两个数据.最终最小数被交换到起始的位置,这样 ...

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

随机推荐

热门专题