|
目标
DOM操作
jQuery操作html节点
jQuery属性操作
DOM节点操作
第一节：jQuery事件操作
1.jQuery事件
选择器事件
2.jQuery事件对象event/e属性
<div id="">
</div>
<script type="text/javascript">
$("div").click(function(e){
console.log(window.event);
} ).width(200).height(200).css("border","1px solid red");
</script>
事件对象：e<===>window.event 表示事件对象，其中包含事件发生时周围的各种信息。
| $(“选择器”).click(function(){ })；常用 |
|---|
$(“选择器”).on("事件类型1 事件类型2。。。 "，“子元素” , function(){});常用
动态 绑定 如果想给某个父元素中的子元素绑定事件，但是 这个子元素 不存在不是我们自己写的，而是通过js代码动态添加的时候，此时绑定事件用。 |
二、Dom操作
模板法
增：创建，美化，添加
document.createElement(“标签名”)；
删: 自已.remove() 父.removeChild(“子节点”);
改：父.replace（新节点，老节点）；
1.创建节点
js: document.creatElement(“标签名”);
jq:$(“标签名”)
2.添加节点
js添加节点：对象.appendChild(要添加的标签);
jq:
| 方法 | 含义 |
|---|
| append() | 在被选元素的结尾追加元素 | | prepend() | 在被选元素的开头插入内容 | | after() | 在被选元素之后插入内容 | | before() | 在被选元素之前插入内容 |
append
prepend在之前
$("div").append(
$("<h1></h1>").text("你好哈")
).css({"border":"1px solid red","width":"200px"})
prepend在之前
$("div").prepend(
$("<h1></h1>").text("你好哈")
).css({"border":"1px solid red","width":"200px"})
复制克隆 记住克隆完后放在哪
$("div").after(
$("div").clone()
);
3、删除节点
| 方法 | 含义 |
|---|
| remove() | 删除被选元素（及其子元素） | | empty() | 从被选元素删除子元素 |
$("div").remove();
empty
$("div").empty()[0];
4、复制节点
| 方法 | 含义 |
|---|
| clone(includeEvents) | 生成被选元素的副本，包含子节点、文本和属性。 |
克隆
*includeEvents：*可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。
三、节点属性方法
| 方法名 | 含义 |
|---|
| parent() | 返回被选元素的直接父元素。—》parentNode | | parents() | 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 () | | children() | 返回被选元素的所有直接子元素 | | find() | 方法返回被选元素的后代元素，一路向下直到最后一个后代 | | contents() | 返回被选元素的所有直接子元素（包含文本和注释节点） | | next() | 返回被选元素的下一个同胞元素。 | | nextAll() | 返回被选元素的所有跟随的同胞元素。 | | prev() | 返回被选元素的上一个同胞元素 | | prevAll() | 返回被选元素的所有上边的同胞元素 | | siblings() | 返回被选元素的所有同胞元素。 | | first() | 返回被选元素的首个元素。 | | last() | 返回被选元素的最后一个元素。 | | eq() | 返回被选元素中带有指定索引号的元素。 |
案例发表说说
分析
先达ui 在分析js 或者jq
案例2：去左边去右边
案例3：JQ完成购物车
四、工具函数
| 方法 | 含义 |
|---|
| $. type( ) | 用来测试数据的类型 | | $.isNumeric() | 用来测试数据是否为数字 | | $.trim() | 用来去除字符串两端的空格 | | $.parseJSON() | 用来把字符串解析成JSON对象 |
总结：
j
Query循环不能用break；终止循环 需要用return false；
jquery事件绑定
jquery的DOM操作
模板法
|