jQuery学习笔记

文档加载完毕：

$(document).ready(function(){

//TO DO

});

等价于：

$(function(){

//TO DO

});

 

window.onload=function(){

//TO DO

};

DOM对象：DOM（document object model文本对象模型）的每一个页面都是一个DOM对象，可以用var div=document.getElementById()访问dom对象,获取对象内容方法div.innerHTML

jQuery对象：在jQuery库中，通过本身自带的方法获取页面元素的对象称为jQuery对象，访问对象方式，var div=$("#id")  ,获取对象内容方法div.html();

应用程序路径：${pageContext.request.contextPath}

元素操作

增加样式：addClass()

元素属性操作：

获取属性：attr()

删除属性：removeAttr()

设置属性：attr(key0:value0,key1:value1…),value还可以为一个function，返回值value值

元素内容操作：

获取或设置元素的html内容：html()，与javascript的innerHTML属性类似

获取或设置元素的文本内容：text()，与javascript的innerText属性类似

获取或设置元素值：

val()获取元素的值，val(val)设置参数值

样式操作：

直接设置样式：css(name,value)

增加类别：addClass(class1,class2,…),class为类别名称(只是新增样式，原有的没影响)

类别切换：toggleClass(class)

删除类别：removeClass([class])

创建节点元素

$(html)，用于动态创建页面元素

Append()追加html元素

复制节点：

Clone(),只复制元素本身，被复制的新元素不具有任何元素行为，clone(true)可复制行为（事件）

替换节点：

replaceWith(content)

replaceAll(selector)

包裹节点：

遍历元素：

each(callback)

删除元素：

remove([expr])

empty()清空

事件

冒泡过程(执行一个事件也会执行父节点事件)阻止：stopPropagation()或者return false

页面载入：

ready()方法的几种写法：

$(document).ready(function(){})

$(function(){})//使用较广泛

jQuery(document).ready(function(){})

jQuery(function(){})

与javacript的onLoad()方法类似，但是此方法要加载完毕页面所有元素才会触发

绑定事件：

bind(type,[data],fn)

type类型包括：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup

mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown

keypress.keyup,error

切换事件：

hover(over,out)使元素在鼠标悬停与鼠标移出的事件中进行切换，等同于mouseenter和mouseleave

toggle(fn1,fn2,…)依次调用绑定的函数

移除事件：

Unbind([type],[fn]),type为移除事件类型，fn为移除的事件处理函数，没有参数则移除所有

其他事件：

one()为所选元素绑定一个仅触发一次的处理函数，语法格式：one(type,[data],fn)

trigger(type,[data])type为触发事件的类型，事件自动执行，triggerHandler()不会自动执行事件方法

 

应用：

表单应用（邮箱格式验证提示、下拉联动菜单展示）

列表应用（导航菜单显示）

选项卡应用

jQuery中动画与特效

显示：

.css("display":"block")

show(),show(speed,[callback])可以显示动画效果

隐藏：

.css("display":"none")

hide()，hide(speed,[callback])可以显示动画效果

切换状态：

toggle()

toggle(boolean)true显示元素，false隐藏元素

toggle(speed,[callback])

滑动：

slideDown(speed,[callback])

slideUp(speed,[callback])

slideToggle(speed,[callback])

淡入淡出：改变元素的透明度，不修改其他属性

fadeIn(speed,[callback])

fadeOut(speed,[callback])

fadeTo(sppeed,opacity,[callback])opacity为不透明值（0.0-1.0）

自定义动画：

简单动画：animate(params,[duration],[easing],[callback])

params表示用于制作动画效果的属性样式和值的集合

duration默认速度字符slownormal fast或自定义数字

easing为动画插件使用，用于控制动画的表现效果，有linear和swing

移动位置的动画：animate()

队列中的动画

动画停止和延时：

stop()

delay()

加载异步数据（HTML页面加载）

javascript方法

Load(url,[data],[callback])方法

全局函数getJson()

全局函数getScript()

Get()

加载服务器数据：

$.get(),传递数据量小，请求的历史信息会保存在浏览器的缓存里面，有一定的安全风险

$.post()语法格式：$.post(url,[data],[callback],[type])

Serialize()序列化表单，可以简化参数传值的方式，序列化所选择的DOM元素

$.ajaxSetup()设置全局ajax

$.ajax([options]),options为可选参数，格式为key/value形式，P197示例