jQuery基本操作

jQuery基本操作

1. 用jQuery操作DOM

（1）修改元素属性

attr()

获取设置属性值

removeAttr()

移除属性

(2) 修改元素内容

text()

设置或返回所选元素的文本内容

html()

设置或返回所选元素的文本内容（包括HTML标记）

val()

设置或返回表单字段的值

var textStr = $("p").text();
$("#a").text(textStr);

(3) 动态创建内容

$(html)

动态创建HTML元素

$("<div>",{
text: "aaaaa",
click: function(){};
}).appendTo("body")

(4) 动态插入节点

创建的节点动态插入DOM对象树

append() appendTo()

被选元素结尾(内部)插入内容

prepend() prependTo()

被选元素开头（内部）插入内容

after()

被选元素之后插入内容

before()

被选元素之前插入内容

insertAfter

插入到另一个指定元素集合的后面

insertBefore

插入到另一个指定元素集合的前面

$("#a").append("<p>XX</p>");
$("<p>XX</p>").appendTo("#a");

(5) 动态删除节点

remove()

将节点从DOM元素树种移除，但会返回一个指向该节点的引用，可以继续操作该节点

empty()

清空节点中的内容

2. jQuery的事件

事件： 被对象识别的操作，即操作对象对环境变化的感知和反应

事件流：HTML文档使用的是DOM模型，会触发一连串的对象

冒泡型事件流：从出发点元素开始向上层逐级冒泡触发知道document为止

(1) jQuery的事件

简单事件 对js常用事件进行封装

click mousedown keydown unload（卸载页面） resize（文档改变大小） scroll focus blur（焦点丢失） focusin（焦点激活） focusout selest change submit

复合事件 组合简单事件

ready(fn)

DOM加载完触发

hover([fn1,]fn2)

移入触发fn1，移除触发fn2

toggle(fn1,fn2[,fn3])

鼠标单击fn1,再单击fn2

事件对象：

属性：

type target(事件触发者DOM对象) data result …

方法：

preventDefault()

取消可能引起语意操作的事件

isDefaultPrevented()

是否调用过preventDefault()

stopPropagation()

取消事件冒泡

isPropagationStopped()

是否调用过stopPropagation()

stopImmediatePropagation()

取消执行其他事件，即只执行一个事件，并取消事件冒泡

isImmediatePropagationStopped()

是否调用过stopImmediatePropagation()

（2）页面初始事件

$().ready(function)

加载事件，提高响应速度

- 必须确保没有定义onload事件，否则不会触发ready事件，Onload事件是所有元素加载完成后执行的

- 一个页面可定义多个ready()事件，按顺序执行

（3）绑定事件

$(selector).bind(event,data,function)

event: blur,focus,load,resize,scroll,click,mousedown,change,select,submit,keydown,error…

data: 额外数据

function: 函数

可同时关联多个

$("#btn").bind(
click: function(){}
);

$("#btn").bind({
click: function(){},
mouseover:function(){};
});

(4)移除事件绑定

$(selector).unbind(event,function)

event：取消绑定的事件

function:取消绑定的函数名

$(“#a”).unbind("click");
$(“#a”).unbind(); 为空表示取消所有的事件

(5)切换事件

hover([over,]out)

鼠标悬停与鼠标移除的切换 mouseenter mouseleave

toggle 依次调用多个指定函数，直到最后一个，在重复，新版本中已经废弃