【jquery】 API讲解内部培训资料

资料在百度云盘

一、jquery API讲解

1、jquery api如何使用

jquery api

http://www.hemin.cn/jq/

2、常用api讲解

选择器：

通过$()获取jquery对象的常用方式：

#div1 根据元素id获取

.red 根据class获取

div 根据标签名字获取

#div1 ul li input 混合模式

li.red 查找带red这个class的li

input[type=button] type值为button的input

li:first 所有li中的第一个

li:last 所有li中的最后一个

li:eq(2) 所有的li中的第2个

li:lt(4) 所有li中第4个以前的li

li:gt(4) 所有li中第4个以后的li

li:odd 所有li中的奇数li

li:even 所有li中的偶数li

属性：

attr(name) 获取属性值(主要用来设置可见属性)

attr(name, value) 单个设置属性

attr(obj) 批量设置属性

prop(name) 获取属性值(主要用来设置/获取不可见属性)

prop (name, value) 单个设置属性

prop (obj) 批量设置属性

removeAttr(name) 删除属性

addClass(className) 增加class

removeClass(className) 删除class

html() 获取节点的html的值

html(htmlContext) 把该节点的html设置为htmlContext

text() 获取节点的文本的值

val() 获取节点的value值，这个方法主要针对表单一类的元素，因为它们大部分都有value属性

val(valContext)设置节点的value值(针对的是input、button等表单元素的value属性的设置和获取)

css(name) 获取该元素的

css(name, value) 设置单个css属性

css({name1:value, name2:value…..}) 批量设置css属性

height() css获取/设置的高度

width() css获取/设置的高度

innerHeight() 获取内高度，包括padding，不包括border

innerWidth() 内宽度

outerHeight() 盒模型高度

outerWidth() 盒模型宽度

文档处理：

参考jquery api

内部插入

A.append(B) A的内部插入B，B作为最后一个子节点

A.appendTo(B) B的内部插入A，A作为最后一个子节点

A.prepend(B) A的内部插入B，B作为第一个节点

A.prependTo(B) B的内部插入A，A作为最后一个节点

外部插入

A.after(B) A节点的后边插入B，A和B是同级的

A.before(B) A节点的前边插入B，A和B是同级的

A.insertAfter(B) B节点的后边插入A

A.insertBefore(B) B节点的前边插入A

删除

empty() //清空该对象下的所有html

remove() //删除该jquery对象

筛选

参考jquery api

eq()

hasClass()

children()

find()

next()

nextAll()

prev()

peevAll()

二、js array、string、Date、Number对象讲解

js数据类型：

字符串：string

数字：number

布尔：boolean

undefined

复合类型：object function

typeof

出现undefined的两种情况

1、定义了没有赋值

2、typeof a根本就没有定义

3、函数没有返回值

4、访问一个不存在的属性

5、return ;

instanceof

null和undefined的区别

两者都是空

typeof null 是 object

typeof undefined 是 undefined

数组typeof也是object

数组去重

数组排序

json对象和字符串的转换

1、JSON.parse() IE8+要求字符串格式严格, 区别下面两个：

‘{“name”:”myname”, “sex”:23}’

‘{name:”myname”, sex:23}’

2、eval(“(” +jsonStr +“)”)

3、new Function(“return ”+jsonStr);

注入攻击：

alert(eval("document.body.style.background='red';12+4"));

alert(new Function("return document.body.style.background='red',12+4")());

4、http://www.json.org/

搜javascript，然后点击它下面的json2.js

三、jquery事件绑定(on和delegate)

添加事件：

on、delegate on是最新的方法 1.7开始取代delegate

解除事件：

off、undelegate

四、jquery实战、插件写法

jquery有一个好处就是支持插件扩展机制，通过这个方法，我们可以给jquery增加一些新的功能。

比如我们平时用的dialog，轮播，选项卡，菜单插件等，都是通过jquery插件机制来写的。

我们一般需要什么插件，在网上一般都能搜到，但也存在一下的一些问题：

1、有些插件的功能不适合业务需求。

2、大多功能齐全的插件都比较大，而我们的业务需求可能仅用到它的一部分功能，导致资源浪费。

3、修改起来比较有难度：代码的维护、升级、团队协作

4、一些插件里可能存在安全隐患。

5、插件的增加对依赖项及本身的加载、维护都会增加相应的成本。

自定义select框

面向对象，继承

if中为false的情况：
false,0,"",null, undefined, NaN

五、写一个js文件的步骤(用prototype的方式来开发)