目标
DOM操作
jQuery操作html节点
jQuery属性操作
DOM节点操作
第一节：jQuery事件操作
1.jQuery事件
选择器事件
2.jQuery事件对象event/e属性
<div id="">
</div>
<script type="text/javascript">
//选择一个div标签 然后点击事件方法 控制台输出event 鼠标坐标 给css样式
$("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在之前
//在被选元素的结尾追加元素 创建一个h1 在里面放一个文本在加到元素节位
$("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(
$("<span></span>").text("啦啦啦德玛西亚")
) */
/* //在元素之前插入
$("div").before(
$("<span></span>").text("啦啦啦德玛西亚")
) */
复制克隆 记住克隆完后放在哪
$("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操作
模板法