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

第一部分 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!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,159评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0 2
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,635评论 18 503
  • 有多少爱情与做爱无关 有多少婚姻与性别有关 在雾里 在云里 你在纷飞的花瓣中起舞 我为你束起长发 你说结婚吧 和...
    几年白光阅读 189评论 0 0
  • Git基础 github—New repository—Repository name:blog—README—C...