JQUERY-修改-API-事件绑定

正课:

1. 修改:

2. 按节点间关系查找:

3. 添加，删除，克隆，替换:

4. 事件绑定:

1. 修改:

内容:

html片段: .html(["html片段"])     .innerHTML

text文本: .text(["文本"])      .textContent

表单元素值: .val(["值"])     .value

属性:

HTML标准属性:

$elem.attr("属性名"[,"值"])

代替: setAttribute()  getAttribute();

简写: 可用一个attr，修改多个属性值:

$elem.attr({

属性名: "值",
          ... : ...

})

状态属性:

$elem.prop("状态名"[,true/false])

attr vs prop

本质: attr: 读取HTML中开始标签中的任意属性

prop: 读取内存对象中的属性

自定义扩展属性:

$elem.data("自定义扩展属性名"[,"值"])

//.dataset

样式:

$elem.css("css属性名","属性值")

强调: 单个数值，不用加px单位

修改时: 等效于elem.style.css属性

获取时: 等效于getComputedStyle()

简写: 同时修改多个css属性:

$elem.css({

css属性名:"值",

... : ...

})

问题: 代码繁琐

解决: 用class批量应用/撤销样式

$elem.addClass("class");

$elem.removeClass("class");

$elem.hasClass("class");

$elem.toggleClass("class")

等效: if(hasClass())  removeClass()  else  addClass()

2. 按节点间关系查找:

2大类关系:

1. 父子:

.parent()     .parentNode

.children(["selector"])    .children

.find("selector")  在所有后代中查找符合条件的

.children().first()  .firstElementChild

.children(":first")

.children(":first-child")

.children().last()   .lastElemenChild

.children(":last")

.children(":last-child")

2. 兄弟:

.prev()     .previousElementSibling

.prevAll(["selector"])

.next()     .nextElementSibling

.nextAll(["selector"])

.siblings(["selector"])

3. 添加，删除，替换，克隆:

添加: 2步:

1. 用HTML代码片段创建新元素:

var $elem=$("html片段")

2. 将新元素添加到DOM树

$parent.append ($elem) //返回父元素，无法继续对新元素操作

$elem.appendTo("parent") //返回新元素，可继续对新元素操作

$parent.prepend($elem)

$elem.prependTo($parent)

$child.before($elem)

$child.after($elem)

简化: $parent.append/prepend("html")

删除: $elem.remove();

替换: $旧.replaceWith($新) //$旧

$新.replaceAll($旧)  //$新

克隆: $elem.clone();

默认: 浅克隆: 只复制属性和样式，不复制行为

深克隆: 即复制属性和样式，又复制行为

$elem.clone(true)

4. 事件绑定:

鄙视: jquery中共有几种事件绑定方式，有什么不同?

DOM: .addEventListener();

.removeEventListener();

1. .bind()/.unbind()

.unbind() 3种重载:

.unbind("事件名",处理函数) 移除指定事件上的一个指定的处理函数

.unbind("事件名")  移除指定事件上绑定的所有处理函数

.unbind()  移除所有事件上的所有处理函数

2. .one()  绑定后，只触发一次处理函数，触发后自动解绑

3. .delegate() 事件委托

其实就是利用冒泡的简化版

$parent.delegate("selector","事件",function(){

var $tar=$(this);

})

.undelegate(...)

4. 废弃: .live/die()  废弃

5. .on()/off()

2个重载:

1. 代替bind， 2个参数: .on("事件名",function(){ ... })

2. 代替delegate, 3个参数:

.on("事件名","选择器",function(){ ... })

6. 更简化:  .事件名()