使用jQuery操作 DOM

使用jQuery操作 DOM

使用jQuery操作CSS样式
使用jQuery操作网页元素
使用jQuery操作文本与属性值内容
使用jQuery操作DOM节点
使用jQuery遍历DOM节点
使用jQuery操作CSS-DOM

1.使用jQuery操作CSS样式

（1）设置一个属性值。
		$("p").css("background-color","red"); 

（2）同时设置多个样式
		$("p").css({            
			"background-color":"blue" ,
			"border-radius":"50%",
			"border":"3px dotted yellow"
		});
（3）获取样式值
		alert($("p").css("border"));  
		
（4）添加类属性值，影响css中操作元素样式。
		元素对象.addClass(类属性值);
		元素对象.addClass(多个类属性值);
		
(5)  移除类属性值，操作样式改变。
		元素对象.removeClass(类属性值);

（6）toggleClass 切换类属性值。影响css样式改变。
		元素对象.toggleClass(类属性值);
		-- 显示class属性值 对应的css样式的显示和隐藏。
		
（7） hasClass(类属性值) 方法，判断，是否包含某个类属性值。
			元素对象.hasClass(类属性值);
			-- 该方法返回true  或 false
			
	示例：
		 $("button").click(function (){
		   //通过hascalss方法 判断，是否具有某个class属性值。
			if ( ! $("p").hasClass("p1")){
				$("p").addClass("p1");
			}else{
				$("p").removeClass("p1");
			}
		})

2. 使用jQuery操作文本与属性值内容

（1）html内容操作。
		js 中。用的是： innerHTML
		JQ 中。 用的是： html()
		
		直接调用属性和方法的时候，就是获取标签中的内容。
				js元素对象.innerHTML;
				jq元素对象.html();
		给属性或方法赋值的时候，就是给标签中设置内容。
				js元素对象.innerHTML= "内容";
				jq元素对象.html("内容");
		
（2）text文本操作
		获取元素的text属性内容。
				jq元素对象.text();
		
		设置元素的text 文本内容。
				jq元素对象.text("内容");
		
		注意：
		-1-  通过text()方法获取元素内容，仅得到元素中的纯文本内容。
			  不会返回子标签。
		-2-  如果元素对象写入文本，那么该元素对象中的子标签被覆盖。不显示。
		-3-  如果元素对象写入的文本中，包含标签内容，也会当作普通文本输出
			，无标签效果。

（3）value 属性值操作。
	    jq中获取元素value值的方法 : val();
		语法：  
			获取value值：	jq元素对象.val();
			设置value值：	jq元素对象.val("value值");

		注意：value值设置的内容，不解析html标签。

3. 使用jQuery操作DOM节点

-1- 查找节点（前面章节已讲）
		通过选择器获取节点：
			id选择器，
			类选择器，
			标签选择器，
			属性选择器，
			层次选择器等。
-2- 创建节点
		工厂函数$()用于获取或创建节点
			$(selector)：通过选择器获取节点
			$(element)：把DOM节点转化成jQuery节点
			$(html)：使用HTML字符串创建jQuery节点		

-3- 插入节点
		append()  向后添加
			语法： 元素1.append(元素2)
					把元素2添加到元素1中，最后的位置。
					
		appendTo() 向后添加
				语法： 元素2.appendTo(元素1)
					把元素2 添加到元素1中，最后的位置。
		
		prepend 向前添加
				语法： 元素1.prepend(元素2)
					把元素2 添加到元素1中，最前面的位置。
	
		prependTo 向前添加
				语法： 元素2.prependTo(元素1)
					把元素2 添加到元素1中，最前面的位置。
					
-4- 元素外部插入同辈节点
		after(content)	
			$(A).after (B) 表示将B插入到A之后
			如：$("ul").after($newNode1);
		insertAfter(content)	
			$(A). insertAfter (B)表示将A插入到B之后
			如：$newNode1.insertAfter("ul");
		before(content)	
			$(A). before (B)表示将B插入至A之前
			如：$("ul").before($newNode1);
		insertBefore(content)	
			$(A). insertBefore (B)表示将A插入到B之前
			如：$newNode1.insertBefore("ul");
					
	
-5- 删除节点
		jQuery提供了三种删除节点的方法
			remove()：删除整个节点
			empty()：清空节点内容			
			detach()：删除整个节点，
					保留元素的绑定事件、附加的数据


	
-6- 复制节点

		clone(参数)用于复制某个节点
			参数： true 代表赋值节点和事件
				   alse 只复制节点。

-7- 替换节点
		元素1.replaceWith(元素2)    
			替换为 ——> 把元素1替换为元素2 ——> 保留元素2
		
		元素1.replaceAll(元素2)
			替换掉 ——> 用元素1替换掉元素2 ——> 保留元素1
		
-8- 获取元素属性
		attr()用来获取与设置元素属性

	(1)获取元素属性
		$(选择器).attr(属性名) ;  
		
	(2)设置元素属性
		$(选择器).attr({[属性名1:属性值1],…}) ;

	(3)删除元素的属性
		$(选择器).removeAttr(属性名)

	注意：当设置和获取表单中的，复选框，下拉菜单的 checked属性，和selected属性时候
			attr()方法无效
			使用prop方法来操作。
			
		attr()方法，操作属性，和prop()方法的相同和区别。
		
		相同点： 都可以操作元素的属性的获取和设置。使用方式相同。
		不同点： attr()方法设置自定义属性
				 prop()方法设置元素固有属性 
					例如：复选框，下拉菜单的 checked属性，和selected属性，用prop()方法

4 .节点的选取遍历操作

（1）选取子元素  $(选择器).children()
		 //获取div下所有子元素，并设置样式
		 $("div").children().css("color","#fff");

（2）选取同辈元素
		prev()获取前一个元素，
		next()获取下一个元素，
		siblings()获取所有兄弟元素
		
（3） 选取前辈元素
		parent()	获取父辈元素		
		parents()	获取祖辈所有元素。

（4）其他的选取遍历方法

		each( ) ：规定为每个匹配元素规定运行的函数
			例如：获取每一个 li标签元素 ，通过回调函数执行操作，例如做样式改变等。
			 $("li").each(function(){

			 })

		end()方法，end方法，获取元素 调用筛选方法之前的状态，
			例如：获取了li标签中的first 元素做完样式改变后，
					用end()方法，返回选择li元素的状态，再选择最后一个元素，  
					设置样式效果。				
			
				$("li").first().css("backgroundColor","#d8abde").
				end().last().css("backgroundColor","#44f58b");

5.CSS-DOM 其他的操作

	语法			功能
	css()			设置或返回匹配元素的样式属性
	height([value])	设置或返回匹配元素的高度
	width([value])	设置或返回匹配元素的宽度 
	offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
	offsetParent( )	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
	position( )		返回第一个匹配元素相对于父元素的位置
	scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
	scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶