Javascript & JQuery读书笔记
Hi All,
分享一下我学JS & JQuery的读书笔记:
- JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏。
- Jquery的选择器
a. 基本选择器:通过Id, class, tag Name来选择元素
b. 层次选择器:获取的是后代元素,子元素,相邻元素,同辈元素
1) $(“div span”)获取的是div下所有的span元素;
2) $(“div > span”)获取的是div下元素名是span的子元素
3) $(“.one + div”)选取class名为one的近邻的同辈div元素{结果可能有多个}
4) $(“#two ~ div”)选取id为two的元素后面所有的同辈div元素
c. 过滤选择器:通过过滤规则来筛选出所需的Dom元素,过滤器都是以冒号( :)开头的。其可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤选择器。
d. 基本选择过滤器
1) $(“div : first”)选取所有div元素中的第一个div元素;$(“div :last”)相反。
2) $(“input : not(.myClass)”)选取class名不是myClass的所有input元素
3) $(“input : even”)选取所有索引是偶数的input元素;$(“input : odd”)相反。索引是从0开始的
4) $(“input : eq(1)”)选取索引等于1的input元素;$(“input : gt(1)”)选取索引大于1的input元素;$(“input : lt(1)”)则相反。
5) $(“:header”)选取网页中所有的<h1><h2><h3>…元素
6) $(“:animated”)选取当前正在执行动画的所有元素
7) $(“:focus”)选取当前获得焦点的元素
e. 内容过滤选择器
1) $(“div: contains(‘test’)”)选取文本内容包含‘test’的div元素
2) $(“div: empty”)选取不包含子元素(不包括文本元素)的div元素
3) $(“div : has(p)”)选取含有p元素的div元素
4) $(“div : parent”)选取拥有子元素的div元素
f. 可见性过滤器
1) $(“:hidden”)选取所有不可见的元素,包括type=’hidden’, style=’display : none’, style=’visibility : hidden’
2) $(“:visible”)选取所有可见的元素
g. 属性过滤选择器
1) $(“div[id]”)选取属性包含id的所有div元素
2) $(“div[title = test]”)选取属性包含title且值为‘test’的所有div元素;$(“div[title != test]”)则相反。
3) $(“div[title ^= test]”), $(“div[title $= test]”), $(“div[title *= test]”), $(“div[title |= test]”), $(“div[title ~= test]”), $(“div[id][title $= test]”)
h. 子元素过滤选择器
1) :nth-child(index/ even/ odd/ equation) 选取每个父元素下的第index个子元素或者奇偶元素,index是从1开始的。如:$(“ul li : nth-child(2)”),$(“ul li : nth-child(even)”), $(“ul li : nth-child(2n+1)”)
2) :first-child 选取每个父元素下的第1个子元素,如:$(“ul li : first-child”); :last-child则相反。
3) :only-child 如果某个元素是它父类元素中唯一的子元素,那么将会被选择,反之则不匹配。如:$(“ul li : only-child”)
i. 表单对象属性过滤选择器(主要是对所选择的表单元素进行过滤)
1) :enabled 选取表单内所有可用元素,如:$(“#form1 : enabled”);:disabled则相反。
2) :checked选取所有被选中的元素(单选框,复选框),如: $(“input : checked”)选取所有被选中的input元素
3) :selected选取所有被选中的选项元素(下拉列表),如:$(“selected option : selected”)
j. 表单选择器:能极方便地获取到表单的某个或某类型的元素
1) :input 索取所有的input元素;:text, :password, :radio, :checkbox, :submit, :button, :reset, :image, :file, :hidden
3. Window.onloa()和$(document).ready()的区别
a. 执行时间
Window.onload()的方法是在网页中的所有的DOM元素及所有与DOM元素相关的CSS,图片等加载完毕后被触发;而$(document).ready()方法是只要在所有的DOM元素被加载就可以被触发。所以从响应时间来说,后者快于前者。
b. 多次使用
如果Window.onload注册了多个事件方法,其总是执行最后一次的onload方法;如果$(document).ready()注册了多个事件方法,则所有的事件方法都将被可以执行。
4. append()和appendTo()区别:
$(“#A”).append(“#B”)是把id为B的元素添加到id为 A的元素中; $(“#A”).appendTo(“#B”)是把id为A的元素添加到id为B的元素中。
5. Ajax
a. Ajax的全称是Asynchronous Javascript and XML(异步的Javascript 和XML),不是一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。其核心是XMLHttpRequest对象,它是Ajax的关键 –发送异步请求,接受响应及执行回调都是通过它来完成的。
优点:1). 不需要插件,2). 优秀的用户体验,3). 提高Web程序的性能, 4). 减轻服务器和带宽的负担
缺点:1). 浏览器对XMLHttpRequest对象的支持度不同,2). 破坏浏览器“前进”“后退”按钮的正常功能,3). 对搜索引擎的支持不足,4). 开发和调试工具的不足
b. JQuery中的Ajax对其进行了封装,JQuery中的$.ajax()方法是最底层的方法,第2层是$.load(), $.get(), $.post(),第3层是$.getScript()和$.postJson()
其中最常用的是第2层:load()通常是从Web服务器上获取静态的数据文本
6. serialize()
$.param()是序列化的核心,用来将一个数组或对象按照key/value进行序列化
本比较摘抄于《锋利的JQuery》 第2版,下载地址:http://pan.baidu.com/share/link?shareid=1744508401&uk=3842885577 (提示:大家可以下载到百度网盘中)
Javascript & JQuery读书笔记的更多相关文章
- 《你不知道的javascript》读书笔记2
概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ...
- 《编写可维护的javascript》读书笔记(中)——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- JavaScript设计模式:读书笔记(未完)
该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- JavaScript设计模式 -- 读书笔记
JavaScript设计模式 一. 设计模式 一个模式就是一个可重用的方案: 有效的解决方法.易重用.善于表达该解决方案: 未通过"模式特性"测试的模式称为模式原型: 三规则:适用 ...
随机推荐
- 请不要把‘通知的观察者注册’放在-viewWillAppear:中
接手项目二次开发的吐槽: 接手别人的代码的悲哀之一就是,我反复的把流程走了一遍又一遍,却始终无法发现原来是这个问题. 之前这个人把通知的观察者注册放在了-viewWillAppear:中,导致,我发送 ...
- js计算器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- ajax 大洋与小样的第二步
一.Ajax的对象 XMLHttpRequest的方法 方法 描述 abort() 停止当前请求 getAllResponseHeaders() 把 HTTP请求的所有响应首部作为健/值对返回 get ...
- Redis基础学习(三)—Key操作
一.key的相关操作 1.删除 del key1 key2 ... Keyn 作用: 删除1个或多个键. 返回值: 不存在的key忽略掉,返回真正删除的key的数量. 2.重命名 rename k ...
- 六行python代码的爱心曲线
前些日子在做绩效体系的时候,遇到了一件囧事,居然忘记怎样在Excel上拟合正态分布了,尽管在第二天重新拾起了Excel中那几个常见的函数和图像的做法,还是十分的惭愧.实际上,当时有效偏颇了,忽略了问题 ...
- Java原子变量
实现全局自增id最简单有效的方式是什么?java.util.concurrent.atomic包定义了一些常见类型的原子变量.这些原子变量为我们提供了一种操作单一变量无锁(lock-free)的线程安 ...
- 浅谈访问控制列表(ACL)
1.ACL简介2.前期准备3.ACL的基本操作:添加和修改4.ACL的其他功能:删除和覆盖5.目录的默认ACL6.备份和恢复ACL7.结束语 1.ACL简介 用户权限管理始终是Linux系统管理中最重 ...
- android正则表达式隐藏邮箱地址中间字符
// String emailStr = email.substring(0, email.lastIndexOf("@"));// if (emailStr.length() & ...
- angular 过滤排序
<table class="table"> <thead> <tr> <th ng-click="changeOrder('id ...
- android参数传递的几种方法
Intent Intent i=new Intent(当前Activity.this,目标Activity.class); 1.传单值 传入: i. i.putExtra("名称" ...