美文网首页我爱编程
《jQuery实战(第二版)》读书笔记

《jQuery实战(第二版)》读书笔记

作者: GQM_Dong | 来源:发表于2017-03-14 11:33 被阅读28次

    第一部分 jQuery核心

    1、jQuery基础

    第一章总结了jquery的大致功能,基本原理,使用方式。

    point:

    (1)、引入:<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js">

    (2)、强大的选择器:var checkedValue = $('[name="someRadioGroup"]:checked').val();用于选择分组名为someRadioGroup的单选按钮中被选中的按钮的值。更高级选择器:$("p:even")选择所有偶数行的p元素、$("tr:nth-child(1)")选择每个表格的第一行元素、$("body > div:has(a)")选择body中的直接子节点中包括a标签的div元素。

    (3)、实用函数。jQuery会提供一些实用函数,例如trim等便于编写jQuery插件等。

    (4)、文档就绪处理机制。由于window.onload = function () { // 触发脚本}该方法需要将文档完全加载完成,包括外部资源之后才可以执行脚本。而使用$(document).ready(function() { //加载完毕后触发的脚本} ),则是在DOM树加载完毕之后就可以触发,页面加载延迟问题得以优化。

    (5)、创建DOM元素。$("<p>HI<p>").insertAfter("#followMe")可通过$()函数直接创建,并通过insertAfter函数将新创建的DOM元素放在指定元素后。

    (6)、拓展jQuery。为了保持功能的简洁和高可用性,jQuery并未提供满足用户所有需求的函数,不过为用户提供了自定义函数方法来拓展$包装器。

    $.fn.disable= function() { //自定义函数实现  

            return this.each( function () {

                  if ( this.disable != null) this.disable = true;

                  //XXX != null 会正确的测试null和undefined

            });

    }。

    返回each方法的执行结果(即包装器),保持jQuery的函数特性,支持链式操作。

    (7)、jQuery与其他库共存。当$或者jQuery全局变量发生冲突的时候,调用jQuery.noConflict()函数。

    2、选择要操作的元素

    第二章玩转选择器,从选择器到创建新元素再到管理包装集。

    (1)、$(selector)或$(selector,'div#sampleDOM'),第一个参数为选择器,第二个参数为操作的上下文,如果省略的话,上下文为" * "即整个document。例中表示的是在id为sampleDOM的div元素的子集中选择符合选择器selector的元素。

    (2)、选择器。标签选择器li,id选择器#id,类选择器.class,按照DOM之间层级关系选择,以及自定义选择器等。

    a、其中基础选择器有:

    *        匹配所有元素;  

    E       匹配标签名为E的所有元素,如$("div");

    E  F  匹配E的子节点中标签名为F的所有元素,如$("div p");

    E>F  匹配E的直接子节点中标签名为F的所有元素,如$("div>p");

    E+F  匹配E后边的第一个兄弟元素中标签名为F的所有元素,如$("li+li");

    E~F  匹配E后边的所有兄弟元素中标签名为F的所有元素,如$("li~li");

    E .C  匹配E的所有元素中类名为C的元素,如$("div .sampleClass");

    E #I  匹配E的所有元素中ID为I的元素,如$("div #ID");

    E[A]  匹配E的所有所有元素中含有A属性的元素,如$("a[href]");

    E[A=V]  匹配E的所有元素中A属性的值为V的元素,如$("a[href='url']");

    E[A^=V] 匹配E的所有元素中A属性值以V开头的元素,如$("a[href^='my']");

    E[A$=V] 匹配E的所有元素中A属性值以V结尾的元素,如$("a[href$='.html']");

    E[A!=V] 匹配E的所有元素中A属性值以V结尾的元素,如$("a[href!='url']");

    E[A*=V] 匹配E的所有元素中A属性值以V结尾的元素,如$("a[href*='jquery']");

    b、通过位置选择:

    :even,:odd,:first,:last,:first-child,:last-child   如字面意思;

    :nth-child(n)  匹配上下文中的第n个子节点,可以拓展为函数式例如:nth-child(5n+1) ;

    :eq(n)  第n个元素,:gt(n)  第n个元素之后的(不包含n),:lt(n) 第n个元素之前的(不包含n);

    注意:nth-child(n)是从1开始计数,而其他的选择器是从0开始计数。

    c、自定义选择器

    :animated   选择处于动画状态的元素;

    :button  选择按钮元素(包括button以及input中type为submit、reset、button的元素);

    :checkbox   选择复选框元素(input[type = checkbox]) ;

    :checked   选择处于选中状态的复选框或者单选按钮元素;

    :contains(food)   选择包含文本food的元素;

    :disabled / :enabled   选择处于禁用 / 启用状态的元素;

    :file   选择文件输入元素(input[type = file]);

    :has(selector) / not(selector)   选择 至少包含一个 / 没有包含   选择器选中的元素    的元素;

    :header   选择标题元素  <h1>到<h6>;

    :hidden / :visible  选择隐藏 / 可见元素;

    :image   选择图片输入元素(input[type = image]);

    :input    选择表单元素(input、select、textarea、button);

    :parent   选择有子节点(包含文本)的元素,空元素除外;(是:empty的取反);

    :password   选择口令元素(input[ type = password ]);

    :radio    选择单选框元素(input [ type = radio ]);

    :reset    选择重置按钮元素(input[ type = reset ] 或者 button[ type = reset ]);

    :selected    选择列表中处于选中状态下的<option>元素;

    :submit    选择提交按钮(input [ type = submit]或者button[ type = submit]);

    :text   选择文本输入框(input [ type = text ]);

    To Be Continue!!

    相关文章

      网友评论

        本文标题:《jQuery实战(第二版)》读书笔记

        本文链接:https://www.haomeiwen.com/subject/pyvcnttx.html