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

时间:2023-03-08 18:03:04

资料在百度云盘

一、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的方式来开发)