jQuery之DOM

样式操作

i.设置css()

	jquery对象.css("属性名","属性值");
	jquery对象.css({ "属性名":"属性值"      ,"属性名":"属性值" ,...,"属性名":"属性值"     });

ii.追加或移除样式class

	addClass("x");
	addClass("x x x");
	removeClass(x);
	removeClass(x x );
	removeClass():移除全部样式
	toggleClass("x x x"):切换追加与移除

内容操作

	html():获取值 ,获取的是元素 的内容 ,包含了 元素内部的 各种标签
	html(xxxx) :先渲染,后显示

	text()::获取值 ,值获取文本值
	text(xxxx):將值原样显示,没有渲染

	val():获取value值
	val(xxx):设置value值

节点与属性操作

i.节点操作

①查询节点 (jquery选择器)
②创建节点 : $()
	$(选择器):获取节点		
	$(DOM对象):转换
	$(html字符串),   $("
  • xxx
  • ")
    ③插入节点 文档
    内部插入 :
    	$(A).append(B)	将B追加到A中    		  如:$("ul").append($node);
    	$(A).appendTo(B)	把A追加到B中			如:$ node.appendTo("ul");
    	$(A). prepend (B)	将B前置插入到A中		如:$("ul"). prepend ($node);
    	$(A). prependTo (B)	将A前置插入到B中		如:$ node.prependTo ("ul");
    
    外部插入
    $(A).after(B)	将B插入到A之后				如:$("ul").after($node);
    $(A).insertAfter(B)	将A插入到B之后			如:$ node.insertAfter("ul");
    $(A).before(B)	将B插入至A之前				如:$("ul").before($node);
    $(A).insertBefore(B)	将A插入到B之前		如:$ node.insertBefore("ul");
    
    ④替换节点
    	$X.replaceWith($Y)	:用$Y替换$X	
    	replaceAll();
    
    ⑤删除节点
    	remove():彻底删除
    	detach():将结点删除,但关联的事件、数据不会删除(不推荐使用)
    	empty()	:只删除内容
    
    ⑥克隆节点
    			clone(true|false)
    			$(document).ready(function(){     
    				$("li").click(function(){  ... });
    			});			
    
    			  
  • xxxx
  • 属性操作
    	attr("属性名") :获取属性值
    	attr("属性名","属性值") :设置属性值
    	attr({ "属性名":"属性值",    "属性名":"属性值" ,  "属性名":"属性值" } );
    	
    	removeAttr("属性名");  删除属性值
    
    获取集合与遍历集合
    ①子节点集合
    	 $(...).children( "li")
    	后代集合(不推荐使用,影响性能)
    	 $(...).find( "li")
    
    ②同辈集合
    	next():后一个  +
    	prev(): 前一个
    	siblings():同辈,左、右
    
    ③前辈
    	parent():父代
    	parents("ul"):祖先
    
    过滤集合:
    	i.很多方法的()就是一个过滤选择器
    	ii.filter("选择器...");  
    
    遍历集合:
    	$(...).each(function(index,element){
    	
    	});
    

    CSS-dom操作:

    	height(500) ;
    	width(500);
    
    	
    	
    	offset():偏移量(左上角的点),left top
    	offset(function(n,oldOffset){   ... })
    
    
    	offsetParent():获取  (已定位)的最近的祖先元素
    		已定位:元素position属性(默认static)被设置为了relative  absolute  或fixed  
    
    	scrollLet()
    	scrollTop()
    

    你可能感兴趣的:(jQuery)