jQuery 事件和Dom 二

目标

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操作

模板法