json Jquery

1.JSON

是一种数据格式,全称:JavaScript Object Notation.

用于Javascript与服务器进行数据交互的一种格式。

2.Prototype对Ajax技术的支持

Ajax.Request():封装XMLHttpRequest对象的创建和请求发送

Ajax.Updater():封装了Ajax请求的发送,将响应回来信息更新到指定div区域

$()、$F()

evalJSON()

3.jQuery框架的使用

jQuery用于简化客户端JavaScript编程。write less do more!

jQuery提供了很多功能强大的函数,主要功能:

a.提供了强大、多样的选择器,可以方便我们选取要操作的对象元素

b.提供了样式控制和属性控制函数

c.提供了文档处理函数

d.提供了事件处理函数

e.提供了Ajax支持

f.提供了特效函数

jQuery特点:

a.将jshtml元素彻底分离

b.提供了功能强大处理函数

c.代码简洁,易于编程

4.jQuery的基本应用

1)注意事项

a.区分jQuery对象和前期的javascript DOM对象

DOM对象:window、document、document.getElementById、this等

jQuery对象:使用jQuery选择器选出的对象

将DOM对象转换成jQuery对象:$(this)、$(document)等

将jQuery对象转换成DOM对象:jQuery对象[0]、jQuery对象.get(0)等

将字符串封装成jQuery对象:$("<div>hello</div>")等

b.jQuery对象是DOM对象的集合,以集合形式存在。

c.页面载入函数

$(document).ready(fn):fn是在HTML文档被浏览器完全载入之后执行。

等价于body中的onload时机。

$(document).ready(function(){

//处理代码

});

//简写

$(function(){

//处理代码

})

d.$符号是jQuery符号的简写,如果遇到js库冲突,jQuery框架需要让出$符号的使用权

 

2)选择器

a.基本选择器:$("#id属性值"), $("元素名称"), $(".class属性值")

b.层级选择器:$("祖先 后代")

c.简单选择器::first ,:last, :even, :odd, :not, :eq, :gt, :lt

d.内容选择器::contains(), :empty

e.可见性选择器::hidden, :visible

f.表单元素::input, :text, :radio 等

g.表单对象属性::enabled, :disabled, :checked, :selected

h.属性选择器:[属性名=属性值]

 

 

 

1.属性控制函数

value属性控制:val(),val(val)

innerHTML值控制:text()、text(val)、html()、html(val)

class属性控制:addClass(class), removeClass(class)

其他属性控制:attr(key),attr(key,value),removeAttr(key)

2.css控制函数

css(name):获取name样式值

css(name,value):设置样式值

height()/height(val), width()/width(val)

3.事件函数 

click():触发元素的单击处理

click(fn):邦定元素的单击处理

... ...

hover(overfn,outfn):鼠标移上去调用overfn,移开调用outfn

toggle(fn1,fn2,fn...):第一次单击时调用fn1,第二次调用fn2,依次执行

bind(type,fn):邦定元素的type类型事件的处理

unbind(type):取消邦定的type事件,如果要取消所有事件处理,使用unbind()无参

trigger(type):触发元素的type事件处理

live(type,fn):给现有元素或将来匹配的元素邦定type类型处理

4.效果函数

基本效果:show()、show(speed,fn)、hide()、hide(speed,fn)、toggle()、toggle(speed,fn)

滑动效果:slideUp()、slideDown()、slideToggle()

淡入淡出效果:fadeOut()、fadeIn()

自定义动画函数:animate(终止样式属性,动画参数)

5.文档处理函数

内部插入:

A.append(B):将B插入到A元素内部的末尾处

A.appendTo(B):将A插入到B元素内部的末尾处

外部插入:

A.after(B):将B放到A元素的后面

A.before(B):将B放到A元素的前面

复制元素:

clone():复制元素

clone(true):复制元素及其事件

删除元素:

empty:清空元素

remove():彻底删除元素

包裹元素:

A.wrap("<p></p>"):使用p标记将A元素包裹起来

6.Ajax函数

1)Ajax请求:

$.ajax()函数是$.get()、$.post()、$.getJSON()等函数的底层实现。

$.get():以get方式发送ajax请求

$.getJSON():以get方式发送ajax请求,接收服务器返回的json数据

$.post():以post方式发送ajax请求

load():加载服务器返回的HTML页面。

2)Ajax(全局)事件

ajaxStart-->ajaxSend-->ajaxSuccess/ajaxError-->ajaxComplete-->ajaxStop

 

 

 

 

 

 

1.筛选函数/工具函数

过滤功能

1) eq(index):获取指定索引的元素.$("tr").eq(0)等价于$("tr:eq(0)")

2) is(选择器表达式):判断集合中元素是否满足指定表达式。例如$("input[type='checkbox']").is(":checked")

3) not(选择器表达式):等价于:not选择器

4) slice(begin,end):从集合中截取索引大于等于begin,小于end之间的元素

5) filter(选择器表达式):按指定表达式筛选出元素

查找功能

1) children(表达式):按指定表达式查找当前元素的孩子(儿子)

2) find(表达式):按指定表达式查找当前元素的后代元素

3) parent():查找当前元素的父元素

4) siblings():查找当前元素的兄弟元素

串联函数

end() :使元素的状态退回到前一次的状态。将函数控制的jQuery元素对象退回到上一层.

工具函数

$.trim(str):过滤空格

$.each():循环遍历(参见sample01.html)

 

2.事件冒泡/终止浏览器默认事件处理(参见sample02.html)

3.如何解决jQuery和其他js库之间的$符号冲突

如果jQuery还想使用$符号,可以使用闭包结构编写。(参见帮助文档,闭包概念参阅其他资料)

//外环境传入参数,将jQuery名称对象传给$

(function($){

function(){

//可使用$符号编jQuery代码

}

})(jQuery)

//外环境不需要传参数

(function(){

function(){

//javascript代码

}

})

4.典型的jQuery插件

jQuery插件就是基于jQuery核心库进行再复杂功能封装,对原有功能和函数进行扩展。

1.表单校验插件validate

2.日历插件dataPicker

3.拖拽插件easydrag,draggables,sortable

5.如何开发插件

使用闭包封装。参见sample05.html

 

 

 

 

 

 

你可能感兴趣的:(jquery,json,职场,休闲)