【jquery入门】学习01

最新推荐文章于 2024-08-09 02:16:38 发布

shai1991

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量1.3k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/u010143291/article/details/52127563

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一:什么是jQuery？为什么要使用jQuery？

1.jQuery是一个优秀的实用JavaScript库，内部封装了很多实现的函数和对象.

2.jQuery是目标是：写少代码，做多事情，是相对于原始javascript+dom的方式而言.
3.jQuery是开源的js实用库.
4.jQuery分为min版和非min版，min版适合真正发布Web应用，非min版适合学习使用.
5. jQuery在主流的浏览器中可以使用.
6. jQuery能够做dom能做的一切事情.
7. jQuery文档齐全，便用学习.
8. 提倡对每个元素节点设置一个id属性.

9. jQuery没有将所有的javascript进行封闭，jQuery只争对它所关注的领域进行封装.

二:jQuery的开发步骤？
1.$username.val() vs value属性

2.$username.html() vs innerHTML属性
3.个人代码约束
dom对象 inputElement inputText

jquery对象 $input inputText

4.开发步骤
1)在需要使用jquery技术的页面中（html/jsp)，通过<script>标签引用jquery库
2)使用jquery常用API（重点）

代码实现（jQuery体验入门）

jquery.jsp:

<head>   
    <title></title>
    <!-- 引入js文件 -->
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script> 
  </head>
  <body>
 	<input id="domID" type="button" value="dom的属性">
 	<input id="jqueryID" type="button" value="jquery的属性">
 	<div id="divID">哈哈</div>
  </body>
    <script type="text/javascript">
    	
    	//dom方式获取value的属性值
    	var inputElement = document.getElementById("domID");
    	var inputText = inputElement.value;
    	alert(inputText);
    	
    	//jquery方式获取value的属性值
    	var $input = $("#jqueryID");
    	var inputText = $input.val();
    	alert(inputText);
    	
    	//获取div的内容
    	var $div = $("#divID");
    	var divText = $div.html();
    	alert(divText);
    </script>

三:DOM对象和jQuery对象相互转换

1）按照dom规则，通过javascript语法创建出来的对象，叫dom对象
2）用jquery语法创建出来的对象，叫jquery对象。
3）jquery对象是对dom对象的封装，dom中大部份属性，在jquery封装后，都变化了方法，更加符合OO的设计规则
4）dom对象转成jquery对象 $(dom对象) 返回值：jquery对象
5）jquery对象可以看作是一个封装dom对象的数组，如果只有一个dom对象的话，下标位于0处
方式一:jquery对象[0] 返回值：dom对象

方式二:jquery对象.get(0) 返回值：dom对象

Dom对象转换成jquery对象：

dom2jquery.jsp

<head>   
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
    	<input type="button" id="inputID" value="dom转成jQuery对象">
  </body>
  
  <script type="text/javascript">
  	//dom转成jQuery对象
  	//创建dom对象
  	var inputElement = document.getElementById("inputID");
  	//把dom对象转成jquery对象
  	var $input = $(inputElement);
  	//操作jQuery对象的API
  	var inputText = $input.val();
  		alert(inputText);
  	
  	//jQuery转成dom对象
  	var inputElement = document.getElementById("inputID");
  	var $input = $(inputElement);
  	var inputText = $input.val();
  	alert(inputText);
  </script>

jquery对象转成dom对象的二种方式：

<body>
    <div id="divID">hello jquery</div>
</body>
<script type="text/javascript">
  		//创建jquery对象
		var div1 = $("#divID");
		//jquery对象转成dom对象方法一
		var divElement = div1[0];
		var divText = divElement.innerHTML;
		alert(divText);
  </script>

<body>
    <div id="divID">hello jquery</div>
</body>
<script type="text/javascript">
		//jquery对象转成dom对象方法二
		var div2 = $("#divID");
		var divElement = div2.get(0);
		var divText = divElement.innerHTML;
		alert(divText);
  </script>

四:DOM操作与jQuery操作对错误的处理方式的比较

jquery定位元素节点有三种方式：

方式一：通过id，例如：$("#divID") --------- > getElementById("divID")

方式二：通过标签名，例如：$("div")------------> getElementsByTagName("div")
方式三：通过样式名，例如：$(".oneClass")

代码体现如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>DOM操作与jQuery操作对错误的处理方式的比较</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style type="text/css">
			.oneClass {
				font-size: 44px;
				color: red
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
	</head>
	<body>
		<input type="text" id="usernameID" value="[这就是jQuery]" />
		<div id="divID" class="oneClass">这是div中的内容</div>
		<script type="text/javascript">
  		//通过"#id"定位<input>
		//var $input=$("#usernameID");
		//var inputText=$input.val();
		//alert(inputText);
	  		
  		//通过"标签名"定位<input>
  		//var $input=$("input");
  		//var inputText=$input.val();
  		//alert(inputText);
  		
  		//通过"样式名"定位<div>
  		//var $div=$(".oneClass");
		//var divText=$div.html();
		//alert(divText);  <span style="font-family: Arial, Helvetica, sans-serif;">		</span>

<body>
   <input type="text" id="inputID" value="这是jQuery"/> 
   <div id="divID" class="oneClass">这是div中的内容</div>
  </body>
  
  <script type="text/javascript"> 
  	//dom错误处理和jquery错误处理
  		//dom错误处理
  		var inputID = document.getElementById("inputID");
  		if(inputID != null){
  			var inText = inputID.value;
  			alert(inText);
  		}else{
  			alert("查无此元素节点!");
  		}
  		
  		//jquery错误处理
  		var inputElement = $("#inputID");
  		var inputText = inputElement.val();
  		//alert(inputText);
  		
  </script>

需要注意的是：jquery对象只能调用jquery对象的方法或属性，不能调用dom对象的方法或属性，反之一样。

五：jQuery九类选择器【在网页中获取你需要的节点(参见jQueryAPI.chm手册)】
1）基本选择器
$("#div1ID")
$("div")
$(".myClass")
$("div,span,p")
$("#div1ID,.myClass,p")

<body>
   	<div id="div1ID">div1</div>
  	<div id="div2ID">div2</div>
  	<span class="myClass">span</span>
  	<p>p</p>
  </body>
  	<script type="text/javascript">
  		//1)查找ID为"div1ID"的元素个数
   		//alert($("#div1ID").size());
   		//alert($("#div2ID").size());
  		//2)查找DIV元素的个数(标签名大小写不敏感，但id属性值大小写敏感)
  		//alert($("div").size());
  	
  		//3)查找所有样式是"myClass"的元素的个数(标签名大小写不敏感，但class属性值大小写敏感)
  		//alert($(".myClass").size());
  		
  		//4)查找所有DIV,SPAN,P元素的个数
  		//alert($("div,span,p").size());
  		//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
		alert($("#div1ID,.myClass,p").size());
  	</script>

2）层次选择器

$("from input")祖先后代
$("form>input")父亲孩子
$("form+input")第一个兄弟
$("form~input")所有兄弟

<body>
  	<form>
		<input type="text" value="a"/>		
		<table>
			<tr>
				<td>
					<input type="checkbox" value="b"/>
				</td>
			</tr>			
		</table>
	</form>
	<input type="radio" value="a"/>
	<input type="radio" value="d"/>
	<input type="radio" value="e"/> 
  </body>
  
  <script type="text/javascript">
  	//1)找到表单form下[后代]所有的input元素的个数
		//alert($("form input").size());
		
  	//2)找到表单form下所有的子级[第一级孩子]input元素个数
  	    //alert($("form>input").size());
  	
  	//3)找到表单form同级[兄弟]第一个input元素的value属性值
  	   //alert($("form+input").val());
  	
  	//4)找到所有与表单form同级[兄弟]的input元素个数
  	     alert($("form~input").size());
  
  </script>

3）增强基本选择器
$("ul li:first")
$("ul li:last")
$(":checkbox:not(:checked)")找查所有未选中的复选框
$(":checkbox:checked")找查所有选中的复选框
$("table tr:even")，索引号为偶数
$("table tr:odd")，索引号为奇数
$("table tr:eq(0)"，从0开始
$("table tr:gt(1)"
$("table tr:eq(1)"
$(":header")

<body>
   	<ul>
	    <li>list item 1</li>
	    <li>list item 2</li>
	    <li>list item 3</li>
	    <li>list item 4</li>
	    <li>list item 5</li>
	</ul>
	<input type="checkbox" checked/>
	<input type="checkbox" checked/>
	<input type="checkbox"/>
	<table border="1">
	  <tr><td>line1[0]</td></tr>
	  <tr><td>line2[1]</td></tr>
	  <tr><td>line3[2]</td></tr>
	</table>	
	<h1>h1</h1>
	<h2>h2</h2>
	<h3>h3</h3>
	<p>p</p>
	<script type="text/javascript">
	//1)查找UL中第一个元素的内容
	    //alert($("ul li:first").html());
	    
  	//2)查找UL中最后个元素的内容
		//alert($("ul li:last").html());	
  	
  	//3)查找所有未选中的input元素个数
  	    //alert($(":checkbox:not(:checked)").size());
  	
  	//4)查找表格的1、3、5...奇数行个数，索引号，从0开始
  		//alert($("table tr:even").size());
  	
  	//5)查找表格的2、4、6...偶数行个数，索引号，从0开始
  		//alert($("table tr:odd").size());
  	
  	//6)查找表格中第二行的内容，从索引号0开始
  	    //alert($("table tr:eq(1)").html());
  	
  	//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
  	    //alert($("table tr:gt(0)").size());
  	
  	//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
  	    //alert($("table tr:lt(2)").size());
  	
  	//9)给页面内所有标题<h1><h2><h3>加上红色背景色
  	    //$(":header").css("color","red");
  	
	</script>

4）内容选择器：
$("div:contains('John')")
$("p:empty")
$("div:has(p:has(span))")
$("p:parent")

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <style type="text/css">
    	.myClass{
    		font-size:44px;
    		color:blue
    	} 
    </style>
  </head>
  <body>
	<div><p>John Resig</p></div>
	<div><p>George Martin</p></div>
	<div>Malcom John Sinclair</div>
	<div>J. Ohn</div>
	<p></p>
	<p></p>
	<div></div>
	<script type="text/javascript">
	
	//1)查找所有包含文本"John"的div元素的个数
		//alert($("div:contains('John')").size());
		
  	//2)查找所有p元素为空的元素个数
  	    //alert($("p:empty").size());
  	
  	//3)给所有包含p元素的div元素添加一个myClass样式
  	    // alert($("div:has(p:has(span))").size());
  	
  	//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
  	    alert($("p:parent").size());
  	
	</script>

5）可见性选器
$("table tr:hidden")
$("table tr:visible")

<table border="1" align="center">
	  <tr style="display:none">
	  	<td>Value 1</td>
	  </tr>
	  <tr>
	  	<td>Value 2</td>
	  </tr>
	  <tr>
	  	<td>Value 3</td>
	  </tr>
	</table>
	<script type="text/javascript">
	//1)查找隐藏的tr元素的个数
	    //alert($("table tr:hidden").size());
	    //alert($("tr:hidden").size());
	    
  	//2)查找所有可见的tr元素的个数
  	    alert($("tr:visible").size());
	</script>

6）属性选择器
$("div[id]")
$("input[name='newsletter']")
$("input[name!='newsletter']")
$("input[name^='news']")
$("input[name$='letter']")
$("input[name*='letter']")
$("input[id][name$='letter']")

<div>
	  <p>Hello!</p>
	</div>
	<div id="test2"></div>
	<input type="checkbox" name="newsletter" value="Hot Fuzz" />
	<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
	<input type="checkbox" name="newsaccept" value="Evil Plans" />
	<script type="text/javascript">
	//1)查找所有含有id属性的div元素个数
	    //alert($("div[id]").size());
	    
 	//2)查找所有name属性是newsletter的input元素，并将其选中
 	    //$("input[name='newsletter']").attr("checked","checked");
 	
  	//3)查找所有name属性不是newsletter的input元素，并将其选中
  	    //$("input[name!='newsletter']").attr("checked","checked");
  	
  	//4)查找所有name属性以'news'开始的input元素，并将其选中
  	    //$("input[name^='news']").attr("checked","checked");
  	
  	//5)查找所有name属性以'letter'结尾的input元素，并将其选中
  	    //$("input[name$='letter']").attr("checked","checked");
  	
  	//6)查找所有name属性包含'news'的input元素，并将其选中
  	    //$("input[name*='ws']").attr("checked","checked");
  	
  	//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的，并将其选中
  	    $("input[id][name$='letter']").attr("checked","checked");
  	
	</script>

7）子元素选择器：
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")
$("ul li:nth-child(1)")从1开始

<ul>
	  <li>John</li>
	  <li>Karl</li>
	  <li>Brandon</li>
	</ul>
	<ul>
	  <li>Glen</li>
	  <li>Tane</li>
	  <li>Ralph</li>
	</ul>
    <ul>
	  <li>Jack</li>
	</ul>
	<script type="text/javascript">
	//1)迭代每个ul中第1个li元素中的内容,索引从1开始
	    //$("ul li:first")---size---1 
	    //$("ul li:first-child")size---3 
	    //$("ul li:first-child").each(function(){
	    //		//此时this表示<li>元素节点
	    //		//将this这个dom对象转成jquery对象
	    //		alert($(this).html());
	    //	}
	    //);
	    $("ul li:nth-child(2)").each(function(){
	    	alert($(this).html());
	    });
	    
	     
 	//2)迭代每个ul中最后1个li元素中的内容,索引从1开始
 	    //$("ul li:last-child").each(function(){
 	    //	alert($(this).html());
 	    //});
 	
 	//3)在ul中查找是唯一子元素的li元素的内容
 	    //$("ul li:only-child").each(function(){
 	    //	alert($(this).html());
 	    //});
 	
 	
	</script>

8）表单选择器：
$(":input")
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":input:hidden")

<form>
	    <input type="button" value="Input Button"/><br/>
	    <input type="checkbox" /><br/>
	    <input type="file" /><br/>
	    <input type="hidden" /><br/>
	    <input type="image" /><br/>
	    <input type="password" /><br/>
	    <input type="radio" /><br/>
	    <input type="reset" /><br/>
	    <input type="submit" /><br/>
	    <input type="text" /><br/>
	    <select><option>Option</option></select><br/>
	    <textarea></textarea><br/>
	    <button>Button</button><br/>
	</form>
	<script type="text/javascript">
	
	//1)查找所有input元素的个数
	    //alert($(":input").size());
	
  	//2)查找所有文本框的个数
  	    //alert($(":text").size()); 
  	
  	//3)查找所有密码框的个数
  	    //alert($(":password").size()); 
  	
  	//4)查找所有单选按钮的个数
  	    //alert($(":radio").size());
  		
  	//5)查找所有复选框的个数
  	 	//alert($(":checkbox").size());
  	
  	//6)查找所有提交按钮的个数
  	    //alert($(":submit").size());
  	
  	//7)匹配所有图像域的个数
  	    //alert($(":image").size());
  	
  	//8)查找所有重置按钮的个数
  	    //alert($(":reset").size());
  	
  	//9)查找所有普通按钮的个数
  	    //alert($(":button").size()); 
  	
 	//10)查找所有文件域的个数
 	     //alert($(":file").size());
 	
 	//11)查找所有input元素为隐藏域的个数
 	     //alert($(":input:hidden").size());
 	     alert($("input[type='hidden']").size());
	</script>

9）表单对象属性选择器：
$("input:enabled")
$("input:disabled")
$(":checkbox:checked")
$(":checkbox:not(:checked)")
$("select option:selected")
$("select option:selected")

<form>
	  <input name="email" disabled="disabled" />
	  <input name="password" disabled="disabled" />
	  <input name="id" />
	  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
	  <input type="checkbox" name="newsletter" value="Weekly" />
	  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
		<select>
		  <option value="1">北京</option>
		  <option value="2" selected="selected">广州</option>
		  <option value="3">上海</option>
		</select>
	</form>
	<script type="text/javascript">
	
	//1)查找所有可用的input元素的个数
	    //alert($("input:enabled").size());
	
 	//2)查找所有不可用的input元素的个数
 	    //alert($("input:disabled").size());
 	
 	//3)查找所有选中的复选框元素的个数
 	    //alert($(":checkbox:checked").size());
 	
 	//4)查找所有未选中的复选框元素的个数
 	    //alert($(":checkbox:not(:checked)").size());
 	
 	//5)查找所有选中的选项元素的个数
 	    //alert($("select option:selected").size());
 	
 	//6)查找所有选中的选项元素的内容
 	    //alert($("select option:checked").html());
 	    //alert($("select option:selected").html());
 	    
	</script>

六：jQuery中常用方法（上）【在网页中操作需要的节点】
1）val()：取得标签的value属性值

2）html()：取得标签之间的文本值

<p>段落1</p>
  	<p>段落2</p>
  	<p>段落3</p>
  	<script type="text/javascript">
  		$("p").each(function(){
  			//为每一个<p>元素节点添加单击事件
  			$(this).click(function(){
  				//获取每一个<p>元素节点的内容
  				alert($(this).html());
  			})
  		});
  	</script>

3）size()或length：取得jquery对象的个数
4）css("background-color","red")：设置背景色

5）css("color","red")：设置前景色，即字体色

<table border="1" align="center">
		<tr>
			<th>用户名</th>
			<th>密码</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>123456</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>654321</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>162534</td>
		</tr>
	</table> 
	<script type="text/javascript">
		$("table tr:first").css("background-color","pink");
		$("table tr:gt(0):odd").css("background-color","yellow");
		$("table tr:gt(0):even").css("background-color","blue");
	</script>

6）addClass("样式名")
7）attr("checked","checked")
8）each(函数)
9）click(函数)

<input type="checkbox" value="篮球"/>篮球
	<input type="checkbox" value="排球"/>排球	
	<input type="checkbox" value="羽毛球"/>羽毛球	
	<input type="checkbox" value="乒乓球"/>乒乓球
	
	
	
	<input type="button" value="选中的个数"/>
	<input type="button" value="迭代显示选中的value"/>
	<script type="text/javascript">
		$(":button:first").click(function(){
			alert($(":checkbox:checked").size())
		});
		$(":button:last").click(function(){
			$(":checkbox:checked").each(function(){
				alert($(this).val());
			});
		});
	</script>