jquery高级编程
第1章、jQuery入门
类型检查 | |
对象 | 类型检查表达式 |
String | typeof object === "string" |
Number | typeof object === "number" |
Boolean | typeof object === "boolean" |
Object | typeof object === "object" |
Element | object.nodeType |
null | object === null |
null 或 undefined | object == null |
使用jQuery API执行类型检查 | |
对象 | 用于类型检查的jquery方法 |
Plain Object | jQuery.isPlainObject(object) jQuery 可以缩写为$ |
Function | $.isFunction(object) |
Array | $.isArray(object) |
检查undefined | |
对象 | |
Global Variables | typeof variable === "undefined" |
Local Variables | variable === undefined |
Properties | object.prop === undefined |
第2章、JavaScript 基础
2.1、理解数值
2.1.1、在JavaScript中,所有的数值都是64位双精度,取值范围从-5e-324到1.7976931348623157e308。
2.1.2、直接加减会导致精度丢失问题。0.2+0.1 => 0.30000000000000004
2.1.3、JavaScript中没有内置十进制数据类型,通过toPrecision和toFixed来按照固定位数的小数来格式化数值。
2.1.4、JavaScript中支持八进制和十六进制分别以0、0x开头。
2.2、使用字符串
2.2.1、字符串是一个由0个或者多个16位unicode字符组成。
2.3、理解布尔类型
2.3.1、Boolean类型表示true和false。在判断条件中 空字符串、NaN、null、undefined、0、false都将计算为false,其他任何值都为true
2.4、类型之间的比较
2.4.1、等于==,等同===,不等于!=,不等同!==
2.5、日期简介
2.5.1、内置Date对象,可以使用new操作符和Date()构造函数来创建Date对象,默认是当前日期和时间的Date对象。
2.6、其他类型
2.6.1、声明变量未赋值或访问不存在对象属性都会产生undefined类型,尽量避免使用undefined因为可以重新赋值的(ie9才修复这个问题)
undefined = true; if(undefined){console.log(111)},在ie8及之前版本都会显示出111;
2.7、变量
可以通过赋值操作(隐式声明)或者使用var关键字,const(常量),let来声明变量,变量可以多次声明
Scope隐式声明作用域为全局变量
2.8、理解对象
对象使用
2.8.1、var obj = {‘xxx‘:‘xxx‘};
2.8.2、var date = new Date();
2.8.3、构造函数 function People(name){this.name=name;}
2.8.4、People.prototype.getName = function(){ return this.name; }
2.9、使用函数
2.9.1、匿名函数(function(x,y){console.log(x*y)})(3,5)
2.9.2、function sum(x,y){return x+y;};或者var sum=function(x,y){return x+y;}
2.10、理解执行上下文
通过this关键字访问执行上下文,如果不存在用户自定义对象或者函数中,属于全局上下文
2.11、作用域和闭包
作用域维持在函数级别,如外部函数结束后,嵌套函数依然可以获取外部函数定义变量。
闭包在函数里将this赋值给定义的变量。
2.12、使用访问级别
对象所有成员默认都是公有和可访问的,使用闭包可以实现与私有属性类似的访问级别
example:name设置为私有属性,只能通过getName()方法访问。
function People(){ var name = "11"; this.getName = function() { return name; } this.setName = function(name_) { name = name_; } }
2.13、使用模块
模块化编程,上面就是模块化编程。
2.14、使用Js数组
var arr = new Array(); arr[0] = 0; arr[1] = "hello,Rocky!"; var arr = [0,"hello,Rocky"]
2.15、扩展类型
js支持将方法或者其他属性绑定到内置类型。
Function.prototype.method = function(name, func) { this.prototype[name] = func; return this; }
第3章、jQuery核心技术
表3-1 jQuery方法 | ||
方法 | 分类 | 描述 |
.ready() | 事件 | 声明一个函数,当DOM完全加载后执行该函数 |
.click() | 事件 | 为匹配的元素集设置click事件处理程序 |
.ajax() | Ajax | jQuery的Ajax工具函数 |
.addClass() | CSS | 为匹配的元素集添加一个CSS类 |
.removeClass() | CSS | 从匹配的元素集中移除一个CSS类 |
.attr() | Attributes | 获取或者设置指定属性的值 |
.html() |
Atrributes、 DOM插入 |
获取匹配的第一个元素的html内容, 设置匹配元素的html内容 |
.type() | 工具方法 | 判断一个对象在js内部的类型 |
3.1.1 工具函数
jQuery函数 | ||
$.type() |
判断对象类型 |
$.type(null) "null" $.type([]) "array" $.type({}) "object" |
$.isEmptyObject() | 判断对象是否包含任何属性,包括继承的属性 |
$.isEmptyObject([]) true $.isEmptyObject("") true |
$.isPlainObject() | 判断是否是对象 |
$.isPlainObject("111") false $.isPlainObject({}) true |
$.extend() | 将一个或多个对象的内容合并到目标对象 |
$.extend(a,b,c) 将bc对象属性合并到a中,有重复属性覆盖 $.extend(a,b) 将b对象浅拷贝到a对象 $.extend(true,a,b) 将b对象深拷贝到a对象 |
$.isFunction() | 判断是否是函数 |
$.isFunction($.isFunction) true $.isFunction($.isFunction()) false 不能用圆括号 |
$.noop() | 存根函数 |
空函数 |
$.makeArray() | 将一个类似数组的对象转换为真正的数组对象 |
$.makeArray(obj) |
$.merge() | 将第二个数组元素追加到第一个数组中 |
$.merge(arr1,arr2) |
$.inArray() | 判断数组是否包含元素,成功返回索引,失败返回-1 |
$.inArray(vaule,arr) |
$.unique() | 删除dom元素数组中重复的元素 |
c =$.makeArray($("div")) $.unique(c.concat(c)) |
$.map() | 循环处理数组元素 |
$.map(c,function(v,i){console.log(v)}) |
$.trim() | 去除字符串首尾空格字符 |
$.trim(" string ") |
$.each() | 迭代函数 |
$.each([1,2,3,4],function(i,v){console.log(v)}) |
$.queue() | 在匹配元素上显示将要执行的函数队列 | |
$.clearQueue() | 从队列中移除所有还没被运行的函数 | |
$.dequeue() | 对于匹配的元素执行下一个函数 | |
$.grep() | 在数组中查找满足条件的元素 |
$.grep([1,2,3,4,5,6,7],function(value,index){ return value>2; },false) false代表不反转结果,true反转结果 |
$.contains() | 检查dom元素是否是另外一个dom元素的子元素 |
$.contains($("head")[0],$("title")[0]) true |
$.data() | 存储与特定元素相关的数据 | |
$.parseXML() | 将字符串解析为XML文档 | |
$.parseJSON() | 解析JSON字符串 | $.parseJSON("{\"xx\":\"xxx\"}") |
$.isWindow() | 判断是否是一个浏览器窗口 | $.isWindow(window) true |
$.isXMLDoc() | 判断一个Dom节点是否属于一个XML文档,或该节点是否是XML文档 | |
$.now() | 获取当前时间的数值 | |
$.support | 属性集合,表示不同浏览器的特性和bug | $.support.ajax 是否支付ajax |
$.globalEval() | 在全局上下文执行某些js代码 | $.globalEval("console.log(1223);") |
第4章、选择和操作DOM元素
jQuery 选择器
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | class="intro" 的所有元素 |
.class,.class | $(".intro,.demo") | class 为 "intro" 或 "demo" 的所有元素 |
element | $("p") | 所有 <p> 元素 |
el1,el2,el3 | $("h1,div,p") | 所有 <h1>、<div> 和 <p> 元素 |
:first | $("p:first") | 第一个 <p> 元素 |
:last | $("p:last") | 最后一个 <p> 元素 |
:even | $("tr:even") | 所有偶数 <tr> 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。 |
:odd | $("tr:odd") | 所有奇数 <tr> 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。 |
:first-child | $("p:first-child") | 属于其父元素的第一个子元素的所有 <p> 元素 |
:first-of-type | $("p:first-of-type") | 属于其父元素的第一个 <p> 元素的所有 <p> 元素 |
:last-child | $("p:last-child") | 属于其父元素的最后一个子元素的所有 <p> 元素 |
:last-of-type | $("p:last-of-type") | 属于其父元素的最后一个 <p> 元素的所有 <p> 元素 |
:nth-child(n) | $("p:nth-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素 |
:nth-last-child(n) | $("p:nth-last-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素,从最后一个子元素开始计数 |
:nth-of-type(n) | $("p:nth-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素 |
:nth-last-of-type(n) | $("p:nth-last-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素,从最后一个子元素开始计数 |
:only-child | $("p:only-child") | 属于其父元素的唯一子元素的所有 <p> 元素 |
:only-of-type | $("p:only-of-type") | 属于其父元素的特定类型的唯一子元素的所有 <p> 元素 |
parent > child | $("div > p") | <div> 元素的直接子元素的所有 <p> 元素 |
parent descendant | $("div p") | <div> 元素的后代的所有 <p> 元素 |
element + next | $("div + p") | 每个 <div> 元素相邻的下一个 <p> 元素 |
element ~ siblings | $("div ~ p") | <div> 元素同级的所有 <p> 元素 |
:eq(index) | $("ul li:eq(3)") | 列表中的第四个元素(index 值从 0 开始) |
:gt(no) | $("ul li:gt(3)") | 列举 index 大于 3 的元素 |
:lt(no) | $("ul li:lt(3)") | 列举 index 小于 3 的元素 |
:not(selector) | $("input:not(:empty)") | 所有不为空的输入元素 |
:header | $(":header") | 所有标题元素 <h1>, <h2> ... |
:animated | $(":animated") | 所有动画元素 |
:focus | $(":focus") | 当前具有焦点的元素 |
:contains(text) | $(":contains(‘Hello‘)") | 所有包含文本 "Hello" 的元素 |
:has(selector) | $("div:has(p)") | 所有包含有 <p> 元素在其内的 <div> 元素 |
:empty | $(":empty") | 所有空元素 |
:parent | $(":parent") | 匹配所有含有子元素或者文本的父元素。 |
:hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
:visible | $("table:visible") | 所有可见的表格 |
:root | $(":root") | 文档的根元素 |
:lang(language) | $("p:lang(de)") | 所有 lang 属性值为 "de" 的 <p> 元素 |
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href=‘default.htm‘]") | 所有带有 href 属性且值等于 "default.htm" 的元素 |
[attribute!=value] | $("[href!=‘default.htm‘]") | 所有带有 href 属性且值不等于 "default.htm" 的元素 |
[attribute$=value] | $("[href$=‘.jpg‘]") | 所有带有 href 属性且值以 ".jpg" 结尾的元素 |
[attribute|=value] | $("[title|=‘Tomorrow‘]") | 所有带有 title 属性且值等于 ‘Tomorrow‘ 或者以 ‘Tomorrow‘ 后跟连接符作为开头的字符串 |
[attribute^=value] | $("[title^=‘Tom‘]") | 所有带有 title 属性且值以 "Tom" 开头的元素 |
[attribute~=value] | $("[title~=‘hello‘]") | 所有带有 title 属性且值包含单词 "hello" 的元素 |
[attribute*=value] | $("[title*=‘hello‘]") | 所有带有 title 属性且值包含字符串 "hello" 的元素 |
[name=value][name2=value2] | $( "input[id][name$=‘man‘]" ) | 带有 id 属性,并且 name 属性以 man 结尾的输入框 |
:input | $(":input") | 所有 input 元素 |
:text | $(":text") | 所有带有 type="text" 的 input 元素 |
:password | $(":password") | 所有带有 type="password" 的 input 元素 |
:radio | $(":radio") | 所有带有 type="radio" 的 input 元素 |
:checkbox | $(":checkbox") | 所有带有 type="checkbox" 的 input 元素 |
:submit | $(":submit") | 所有带有 type="submit" 的 input 元素 |
:reset | $(":reset") | 所有带有 type="reset" 的 input 元素 |
:button | $(":button") | 所有带有 type="button" 的 input 元素 |
:image | $(":image") | 所有带有 type="image" 的 input 元素 |
:file | $(":file") | 所有带有 type="file" 的 input 元素 |
:enabled | $(":enabled") | 所有启用的元素 |
:disabled | $(":disabled") | 所有禁用的元素 |
:selected | $(":selected") | 所有选定的下拉列表元素 |
:checked | $(":checked") | 所有选中的复选框选项 |
.selector | $(selector).selector | 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器 |
:target | $( "p:target" ) | 选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素 |
第5章、事件处理
jQuery 事件方法
方法 | 描述 |
bind() | 向元素添加事件处理程序 |
blur() | 添加/触发失去焦点事件 |
change() | 添加/触发 change 事件 |
click() | 添加/触发 click 事件 |
dblclick() | 添加/触发 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素添加处理程序 |
die() | 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 |
error() | 在版本 1.8 中被废弃。添加/触发 error 事件 |
event.currentTarget | 在事件冒泡阶段内的当前 DOM 元素 |
event.data | 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 |
event.delegateTarget | 返回当前调用的 jQuery 事件处理程序所添加的元素 |
event.isDefaultPrevented() | 返回指定的 event 对象上是否调用了 event.preventDefault() |
event.isImmediatePropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation() |
event.isPropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopPropagation() |
event.namespace | 返回当事件被触发时指定的命名空间 |
event.pageX | 返回相对于文档左边缘的鼠标位置 |
event.pageY | 返回相对于文档上边缘的鼠标位置 |
event.preventDefault() | 阻止事件的默认行为 |
event.relatedTarget | 返回当鼠标移动时哪个元素进入或退出 |
event.result | 包含由被指定事件触发的事件处理程序返回的最后一个值 |
event.stopImmediatePropagation() | 阻止其他事件处理程序被调用 |
event.stopPropagation() | 阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知 |
event.target | 返回哪个 DOM 元素触发事件 |
event.timeStamp | 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 |
event.type | 返回哪种事件类型被触发 |
event.which | 返回指定事件上哪个键盘键或鼠标按钮被按下 |
event.metaKey | 事件触发时 META 键是否被按下 |
focus() | 添加/触发 focus 事件 |
focusin() | 添加事件处理程序到 focusin 事件 |
focusout() | 添加事件处理程序到 focusout 事件 |
hover() | 添加两个事件处理程序到 hover 事件 |
keydown() | 添加/触发 keydown 事件 |
keypress() | 添加/触发 keypress 事件 |
keyup() | 添加/触发 keyup 事件 |
live() | 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 |
load() | 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件 |
mousedown() | 添加/触发 mousedown 事件 |
mouseenter() | 添加/触发 mouseenter 事件 |
mouseleave() | 添加/触发 mouseleave 事件 |
mousemove() | 添加/触发 mousemove 事件 |
mouseout() | 添加/触发 mouseout 事件 |
mouseover() | 添加/触发 mouseover 事件 |
mouseup() | 添加/触发 mouseup 事件 |
off() | 移除通过 on() 方法添加的事件处理程序 |
on() | 向元素添加事件处理程序 |
one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
$.proxy() | 接受一个已有的函数,并返回一个带特定上下文的新的函数 |
ready() | 规定当 DOM 完全加载时要执行的函数 |
resize() | 添加/触发 resize 事件 |
scroll() | 添加/触发 scroll 事件 |
select() | 添加/触发 select 事件 |
submit() | 添加/触发 submit 事件 |
toggle() | 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数 |
trigger() | 触发绑定到被选元素的所有事件 |
triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数 |
unbind() | 从被选元素上移除添加的事件处理程序 |
undelegate() | 从现在或未来的被选元素上移除事件处理程序 |
unload() | 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件 |
contextmenu() | 添加事件处理程序到 contextmenu 事件 |
$.holdReady() | 用于暂停或恢复.ready() 事件的执行 |
第6章、HTML表单、数据和Ajax
$.data(element,key,value)存储数据 $.data(element,key) 获取数据 等价于 $(element).data(key,value) 和 $(element).data(key)
关于动画和特效就不写了,以及与jquery ui相关的内容也不介绍了。
原文地址:https://www.cnblogs.com/miaosj/p/11337773.html