Write Less, Do More!

——John Resig(jQuery设计者)

目录

基础知识

概况

编程访问DOM节点

基础知识

Web网页是有结构的HTML文档。浏览器分析HTML文档,将其转换为一棵DOM树,提供一套API,通过JavaScript代码操纵这棵树。

概括

事件处理

不同浏览器之间的事件处理机制存在差异,jQuery统一规范了各种事件响应代码的编写方式,大大地提升了开发效率!

节点类型常量

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

三种节点类型的区分

元素节点(element node)

  • 每个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的更多相关文章

  1. 复习 | 重温jQuery和Zepto的API

    jq和zepto很相似有许多共同的api,zepto也出了很多与jq不一样的api,总的来说,两者更相似,但是zepto更轻量一点,正好公司也在用,复习这两个没错 jq中的zepto的事件和ajax我 ...

  2. 423 重温Java Script and jQuery 葵花宝典 Bootstrap

    Bootstrap需要引的三个文件 <link rel="stylesheet" href="css/bootstrap.css">    表格元素 ...

  3. jQuery 一些神奇的选择器写法

    ======================================================================== =========================== ...

  4. 【JavaScript】重温Javascript继承机制

    上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...

  5. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

  6. 如何写一个jquery插件

      本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...

  7. HTML5 audio元素如何使用js与jquery控制其事件

    前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜 ...

  8. 如果不用jQuery,Ajax你还能写出多少?

    许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下. F ...

  9. 重温ASP.NET WebAPI(一)初阶

    重温ASP.NET WebAPI(一)初阶   前言 本文为个人对WebApi的回顾无参考价值.主要简单介绍WEB api和webapi项目的基本结构,并创建简单地webaapi项目实现CRUD操作. ...

随机推荐

  1. 字符串搜索 find()

    参考 <C++ Primer Plus>中文版 P870 #include <map> #include <fstream> #include <iostre ...

  2. ubuntu16.04配置java环境(重启后不会失效)

    ubuntu16.04配置java环境(重启后不会失效) 1.jdk的安装包(.tar.gz)拷贝到/opt目录下 mv jdk-8u144-linux-x64.tar.gz /opt 2.解压文件 ...

  3. Centos7永久修改IP地址

    Centos7永久修改IP地址 永久修改IP地址,即为设置静态的IP地址. 一.修改IP地址前需要准备的工作 1.虚拟机需要使用桥接的网络模式 虚拟机关机状态下,点击"编辑虚拟机设置&quo ...

  4. JavaScript 常见使用误区

    JavaScript 常见使用误区,都是平时开发过程中填过的一些坑,整理记录下. 比较运算符常见错误 //在常规的==比较中,数据类型是被忽略的,以下 if 条件语句返回 true: var x = ...

  5. 【DB2】How to resolve SQL20249N the statement was not processed with error

    相关链接 https://vinaysdb2blog.blogspot.com/2017/11/how-to-resolve-sql20249n-statement-was-not-processed ...

  6. (转)测试rootvg卷组的镜像的官方做法

    测试rootvg卷组的镜像的官方做法 这篇文档介绍了测试rootvg卷组镜像的方法,此文档仅使用于带有热插拔硬盘的pSeries服务器.由于rootvg卷组包含有AIX操作系统,在做卷组镜像配置上比非 ...

  7. Windows10下简单搭建zookeeper

    转载请注明源出处:http://www.cnblogs.com/lighten/p/6798669.html 1 简介 zookeeper是Apache的一个开源项目,致力于开发和维护一个开源的服务器 ...

  8. EF 数据库连接约定(Connection String Conventions in Code First)

    一个典型的EF应用大多数情况下是一个DbContext的派生类(derived class)来控制,通常可以使用该派生类调用DbContext的构造函数,来控制以下的东西: (1).上下文如何连接到数 ...

  9. Eclipse调用hadoop2运行MR程序(转)

    hadoop:hadoop2.2 ,windows myeclipse环境: Eclipse调用hadoop运行MR程序其实就是普通的java程序可以提交MR任务到集群执行而已.在Hadoop1中,只 ...

  10. Oracle中的层次查询详解

    1 语法格式 select [level], column, expr... from table [where condition] start with condition connect by ...