jquery高级编程学习
Posted miaosj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery高级编程学习相关的知识，希望对你有一定的参考价值。
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相关的内容也不介绍了。
以上是关于jquery高级编程学习的主要内容，如果未能解决你的问题，请参考以下文章