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 依次调用多个指定函数，直到最后一个，在重复，新版本中已经废弃