jquery_01_选择器，处理DOM节点

jquery简介：它是JavaScript库，是JavaScript的一个框架，封装JavaScript常用的功能代码，

百度百科

选择器

选择器，故名思意就是能对整个界面的东西进行选择。包括一些html，文本，以及值。

分为基本选择器，属性选择器，其他选择器。

它基本的写法就是：$("#id")   $(".类")   $("标签")

下面是demo:

给出下面的html界面：

<p class="c1">Jquery选择器</p>
<ul>
	<li id="i1">
		<a id="a1" class="c1" href="http://www.java1234.com" >Java知识分享网</a>
	</li>
	
	<li><a id="a2" class="c1" href="http://www.csdn.net">CSDN</a></li>
	<li><a href="http://www.iteye.com">iteye</a></li>
	<li><a href="http://www.cnblogs.com">博客园</a></li>
	<li><a class="c1" href="#">百度</a></li>
	<li><a href="http://www.google.com">谷歌</a></li>
</ul>

<script type="text/javascript">
	//在文档结束之后执行
	$(document).ready(function(){
		      //基本选择器
		//$("#a1").css("background-color","red"); //根据id
	    //$(".c1").css("background-color","red");  //根据class
		//$("a").css("background-color","red");   //根据标签
		     //属性选择器
		//$("[href]").css("background-color","red");  //有属性href的
		//$("[href='#']").css("background-color","red"); //属性href等于"#"的
		//$("[href$='com']").css("background-color","red"); //属性值以com结尾的
		     //其他选择器
		//$("p.c1").css("background-color","red");   //p标签下的class为c1的
		//$("ul li:first").css("background-color","red");  //找ul 下的li 的第一个
		//$("ul li:last").css("background-color","red");   //找ul 下的li 的最后一个
	});
</script>

处理DOM节点：

jquery可以操作DOM节点对象：通过.text()可以获取文本内容，.html()可以获取里面的html属性，.val()可以获取值，如果有的话，常见是向输入框索取输入的值，通过.children可以获取其子节点，可以遍历所有的子节点，但这里要注意的是，在遍历时，每一个.[i]的对象，是原生的对象，不经过jquery修饰的，因此不能直接用.html获取其html的值，可以用$()包起来就可以了。不但可以获取子节点，还可以通过.next()获取下一个节点，prev获取上一个节点。jquery还可以获取并设置css样式。

<p>你最喜欢的名人是？</p>
<ul>
	<li title="这是乔布斯"><font color="green">乔布斯</font></li>
	<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
	<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>
<input type="text" id="userName"/>
<input type="button" value="获取值" onclick="getUserName()"/>
<input type="button" value="设置值" onclick="setUserName()"/>
<p style="color:red" id="p">操作CSS样式</p>

下面是demo:

	$(document).ready(function(){
		    		//操作DOM节点
		    
			//1.查找DOM节点
			/* var li2 = $("ul li:eq(1)");  //查找ul li是一个数组，取数组里的第二个对象
			var li2_txt = li2.text();	    //对象的text()方法：取对象里的txt文本
			alert(li2_txt); */
			
			//2.创建DOM节点
			//var li4 = $("<li title='这是马化腾'>马化腾</li>"); //创建节点
			//$("ul").append(li4);         //在ul标签后添加节点
			//var li2 = $("ul li:eq(1)");    //获取DOM节点对象
			//li4.insertAfter(li2);          //将li4节点插到li2后面。
			
			//3.删除DOM节点
			//$("ul li:eq(1)").remove(); //删除DOM对象
			
			      //操作DOM对象属性
			    
			//1.获取属性
			//var li2 = $("ul li:eq(1)");
			//var li2_attr = li2.attr("title");
			//alert(li2_attr);
			
			//2.设置属性
			//var li2 = $("ul li:eq(1)");
			//li2.attr("title","这不是马化腾");
			
			//3.删除属性
			//var li2 = $("ul li:eq(1)");
			//li2.removeAttr("title");
			
			     //操作DOM节点样式
			//1.获取样式
		   //var li2 = $("ul li:eq(1)");
		   //var li2_css = li2.attr("class");
		   //alert(li2_css);
		   //2.设置样式
		   //var li2 = $("ul li:eq(1)");
		   //li2.attr("class","lc2");
		   //3.追加样式
		   //var li2 = $("ul li:eq(1)");
		   //li2.addClass("lc3");
		   //4.删除样式
		   //var li2 = $("ul li:eq(1)");
		   //li2.removeClass("lc");
		   
		       //操作html，文本
		   //1.获取html
		   //var li2 = $("ul li:eq(0)");
		   //var li2_html = li2.html();
		   //alert(li2_html);
		   //2.设置html
		   //var li2 = $("ul li:eq(0)");
		   //li2.html("<font color='red'>设置html</font>");
		   //3.获取text
		   //var li2 = $("ul li:eq(0)");
		   //var li2_text = li2.text();
		   //alert(li2_text);
		   //4.设置text
		   //var li2 = $("ul li:eq(0)");
		   //li2.text("设置text的值");
		     
		      //遍历节点
		      
		    //var b = $("body").children();
		    //alert(b.length);
		    //for(var i=0;i<b.length;i++){
		    //	alert(b[i].innerHTML);
		    //}
		      //var u = $("ul").children();
		      //for(var i =0;i<u.length;i++){
		    	  //alert(u[i].innerHTML);----获取的每一个子节点都是原生的DOM对象，没有经过jquery包装的
		    	//  alert($(u[i]).html());
		      //} 
		      
		      /* var nextul = $("ul li:eq(1)").next();
		      alert(nextul.html());
		      var prevul = $("ul li:eq(1)").prev();
		      alert(prevul.html()); */
		      //操作CSS节点
		      //1.获取css样式的值
		      //var p_css = $("#p").css("color");
		      //alert(p_css);
		      //2.设置css的值
		      $("#p").css("color","blue");
	});
	function getUserName(){
	   	var userName = $("#userName").val();
	   	alert(userName);
	}   		
	function setUserName(){
		$("#userName").val("你好");
	}  
	   
</script>
<style type="text/css">
	.lc{
		background-color: red;
	}
	
	.lc2{
		background-color: blue;
	}
	
	.lc3{
		font-weight: bold;
	}
</style>