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相关的内容也不介绍了。

原文地址:https://www.cnblogs.com/miaosj/p/11337773.html

时间: 2024-10-06 22:24:06

jquery高级编程学习的相关文章

jQuery高级编程

jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术4.选择和操作Dom元素5.事件处理6.Html表单,数据和AJAX7.动画和特效jQuery应用8.jQueryUI 更轻松创建web界面9.jQueryUI 鼠标交互10.编写高效的jQuery代码11.jQuery模板12.编写jQuery插件13.使用jQuery Deferred对象,进行高级异步编程14.使用QUnit进行单元测试

UNIX环境高级编程学习环境搭建---apue.h

本菜刚刚学习UNIX下高级编程,无奈搭建本书编程环境时遇到不少问题.幸好网上有各种大神的解决办法让我最终解决了问题.在这里感谢为LINUX开源操作系统奋斗的大神. 不过话说回来,网上大都是针对UNIX高级编程第二版的头文件搭建,现在对于第三版来说,有些过时,因为很对针对linux的make文件已经改变了很多. 话不多说,下面就来看看具体的搭建过程:(本人用的操作系统是ubuntu 14.04LTS) 1.在网上下载书中源代码,点击打开链接 2.解压文件:tar -zxvf *.tar.gz 3.

UNIX环境高级编程学习笔记(第一章UNIX基础知识)

总所周知,UNIX环境高级编程是一本很经典的书,之前我粗略的看了一遍,感觉理解得不够深入. 听说写博客可以提高自己的水平,因此趁着这个机会我想把它重新看一遍,并把每一章的笔记写在博客里面. 我学习的时候使用的平台是Windows+VMware+debian,使用secureCRT来连接(可以实现多个终端连接). 因为第一章是本书大概的描述,所以第一章的我打算写得详细一点,而且书本的原话占的比例会比较多,重点的东西会用粗体显示出来. 1.1  引言 所有操作系统都为他们所运行的程序提供服务.典型的

Boolan C++面向对象高级编程学习第五周

本周C++面向对象高级编程编程主要是讲三个方面 1.虚表和虚指针 虚指针:如果类(包括父类)中有虚函数,就一定会有虚指针,虚指针是指向虚函数的虚表. 虚表:虚指针指向的一种类的表,表上存有类里面虚函数的实现的指针 这里虚函数和虚表一般是和类的多太性结合在一起来使用的,子类调用虚函数是通过调用虚指针来调用虚函数表里面的指针再来实现函数特性 这种调用的方式叫做动态绑定,是一种通过指针类型自动来判断调用的对象,在实现中可以不用区分哪个对象从而调用对应的函数 我们普通的调用类里面的函数叫做静态绑定 2.

javascript高级编程学习笔记(二)

写读书笔记的好处在于加深记忆,前一篇总结了编程中创建的对象的几种方式,以及常用的方式,这一篇总结实现继承的方式: 1.对象冒充: function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.color); }; } function ClassB(sColor, sName) { this.newMethod = ClassA; this.newMethod(sColor); de

[ASP.NET MVC4高级编程] 学习记录(一)

理论: 先有GUI在发展,当用户按下某个键,某个进程会监听到这个动作,这个进程就是控制器.这就是MVC模式. 后来有了事件驱动编程,响应动作的是按钮本身,而不是控制器. 再后来webForm中,事件驱动需要通过隐藏域保存页面的状态.看起来提交一次没有变化,实际上经历了保存状态.销毁页面.服务端处理.恢复页面几个过程,究其本质,是因为web是无状态的. 最后的MVC,由用户提交一个请求,控制器选择相应视图,操纵模型,然后反馈给用户 控制器把视图渲染成html或其他,再由浏览器解释html.浏览器无

asp.net mvc 4 高级编程学习笔记:第四章 模型

数据模型 数据模型及O/R转化,采用EntityFramework实现. 可以采用firstCode模型,首先定义模型,通过模型生成数据库,也可以通过安装EFPowerTools,通过数据库自动生成对应的数据模型(习惯使用此种方式). 构造基架 构造基架就是提供了数据维护的模板,可以自动完成数据的增改删除等相关的基础代码,通过修改基础代码,就可以快速的完成基本的数据维护. 使用基架模板,首先需要选择一个模型类,在选择访问数据库所用的上下文类. 模型绑定 在进行数据维护时,表单和数据模型之间是双向

JavaScript高级编程(学习笔记)

一 内存分配 1,栈:由计算机管理,先进后出,快但不自由  堆:由程序员控制,自由 2,引用类型存于堆,值类型存于声明它的地方 二 垃圾回收 1,找出不再使用的变量(堆内存中,没有栈内存指向它),然后释放掉其占用的内存,但是这个过程不是时时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行. 2,离开作用域标记可删,大部分浏览器都是使用这种方式进行垃圾回收,区别在于如何标记及垃圾回收间隔而已 3,JavaScript对象通过标记清除的方式进行垃圾回收,但非JavaScript原

Unix环境高级编程学习笔记(五):进程控制

1 getpid函数,getppid函数,得到进程id,得到父进程id #include<unistd.h> pid_t getpid(void) pid_t getppid(void) uid_t getuid(void)得到实际用户id uid_t geteuid(void)得到有效用户id gid_t getgid(void)得到实际组id gid_t getegid(void)得到有效组id 2 fork函数,当前进程创建新进程 #include<unistd.h> pid