小白的自身Jquery入門基礎

阿新 • • 發佈：2018-11-13

什麼是jQuery？

簡單的說它是一個較量級的javascript類庫。

注1：就一個類“jQuery”，簡寫“$”

jQuery的優點

第一點：總是面向集合。

第二點：多行操作急於一行

hello jQuery的基本寫法

1.匯入js庫

<script type="text/javascript" src="jQuery所在位置路徑"></script>

2.程式的入口（ $(function) ），三種寫法的區別：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
       //第一種
	$(function() {
       alert("hello jquery1");
	})
	
       //第二種
       $(document).ready(function){
       alert("hello jquery2");
      }

       //第三種
       window.onlod = function(){
       alert("hello jquery3");
     }
</script>

三種寫法的區別通過以上程式碼可得到結論：

$(fn)、$(document).ready(fn)是等價的，哪個程式碼在前面就先執行（jsp的dom樹結構載入完畢即刻呼叫方法執行），window.onlod最後執行（jsp的dom樹載入完，css,js等靜態資源載入完畢在執行）

3.jQuery的三種工廠方法

1. jQuery(exp[,context])

exp:選擇器

context：上下文，環境/容器，document

幾種簡單常用的選擇器：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


</head>
<body>
	<p>
		<a id="a1" class="c1" href="#">點我1</a>
	</p>
	<p>
		<a id="a2" class="c2" href="#">點我2</a>
	</p>
	<p>
		<a id="a3" class="c3" href="#">點我3</a>
	</p>
	<div>
		<a id="a4" class="c1" href="#">點我4</a>
	</div>
	<div>
		<p>
			<a id="a5" class="c1" href="#">點我5</a>
		</p>
	</div>
    <span>點我</span>

</body>
</html>

標籤選擇器

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
       $("a").click(function(){
         alert("標籤選擇");
       });
	})
	
</script>

ID選擇器

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
       $("#a1").click(function(){
         alert("ID選擇");
      });
	})
	
</script>

類選擇器

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
        $(".a2").click(function(){
           alert("類選擇");
        });
	})
	
</script>

包含選擇器

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
       //p標籤裡面包含a標籤
        $("p a").click(function(){
             alert("包含選擇");
         });
	})
	
</script>

組合選擇器

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
       $("a,span").click(function(){
          alert("組合選擇");
        });
	})
	
</script>

jQuery(exp[,context])第二個引數的作用

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
     //在div標籤內部尋找a標籤，然後給找到的標籤新增事件
     //第二個引數沒填寫，就是預設document代表在整個jsp頁面尋找
       $("a","div").click(function(){
          alert("div標籤內的a標籤");
        });
	})
	
</script>

2.jQuery(html) html：基於html的一個字串

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
      //在id=selId1的jQuery例項上追加"<option value='1'>---湖南省---</option>"的HTML 
      //jQuery例項
      $(":input[name='name1']").click(function(){
        $("#selId1").append("<option value='1'>---湖南省---</option>");
      });
       //將"<option value='1'>---長沙市---</option>"的HTML jQuery例項追加到id=selId2的
       //select標籤jQuery例項中
      $(":input[name='name2']").click(function(){
        $("<option value='1'>---長沙市---</option>").append("#selId2");
      });
	})
	
</script>
</head>
<body>


	<select id="selId1">
		<option value="-1">---請選擇---</option>
	</select>
	<select id="selId2">
		<option value="-1">---請選擇---</option>
	</select>
	<input name="name1" value="add1" type="button">
	<input name="name2" value="add2" type="button">
	
	<input type="hidden" id="h1" value="h1">
	<input type="hidden" id="h2" value="h2">
	<input type="hidden" id="h3" value="h3">
</body>
</html>

3 jQuery(element) element：js物件，表示一個html元素物件 js物件與jquery物件的相互轉換

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
       //將"<option value='1'>---長沙市---</option>"的HTML jQuery例項追加到id=selId2的
       //select標籤jQuery例項中
      $(":input[name='name2']").click(function(){
        $("<option value='1'>---長沙市---</option>").append("#selId2");
         
         var $h1 = $("#h1");
         //jquery物件轉js物件
         var h1Node = $h1.get(0);
         //var h1Node = $h1[0];

         var h2Node = document.getElementById("h2");
         //js物件轉jquery物件
         var $h2Node = $(h2Node);
      });
	})
	
</script>
</head>
<body>


	<select id="selId1">
		<option value="-1">---請選擇---</option>
	</select>
	<select id="selId2">
		<option value="-1">---請選擇---</option>
	</select>
	<input name="name1" value="add1" type="button">
	<input name="name2" value="add2" type="button">
	
	<input type="hidden" id="h1" value="h1">
	<input type="hidden" id="h2" value="h2">
	<input type="hidden" id="h3" value="h3">
</body>
</html>