JQuery入門學習之簡介及基本選擇器的使用
阿新 • • 發佈：2019-02-14
一、概述
1.JQuery是一套簡潔、快速、靈活的JavaScript指令碼庫，它能讓使用者在網頁上簡單的操作文件、處理事件、執行動畫效果以及新增非同步互動。注意，它是指令碼庫，並不是框架。
2.特點
a.程式碼精緻小巧；
b.強大的功能函式；
c.跨瀏覽器；
d.鏈式語法風格。
二、下載與配置
1.下載：可以去官網下載http://jquery.com，不過好像有點慢，可以自己去百度資源。
2.配置：將下載後的jQuery拷到專案中，然後指定其路徑，如：
<script language="javascript" src="JS/jquery-1.6.1.min.js">
或
<script type="text/javascript" src="JS/jquery-1.6.1.min.js">三、jQuery外掛的使用
（1）把下載好的外掛包含到<head>標記內，並確保它位於主jQuery原始檔之後；
（2）包含一個自定義的JavaScript檔案，並在其中使用外掛建立（或外掛擴充套件）的方法
四、選擇器
jQuery基本選擇器包括 ID選擇器、元素選擇器、類名選擇器、複合選擇器、萬用字元選擇器。
1.ID選擇器
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JQuery基本選擇器的使用</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> //以下函式在DOM載入完畢之後執行。 //$(document).ready(function(){ $(function(){//$(function() {}) 是 $(document).ready(function()的簡寫。 $("input[type='button']").click(function(){//為按鈕繫結單擊事件 var inputValue = $("#testInput").val();//獲取文字框的值 alert(inputValue); }); }); </script> </head> <body> <input type="text" id="testInput" name="test"/> <input type="button" value="輸入的值為" /> </body> </html>
2.元素選擇器
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JQuery基本選擇器的使用</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <!-- 元素選擇器的使用 --> <script type="text/javascript"> $(function(){ //當頁面元素載入就緒時就會自動執行程式，自動為按鈕繫結單擊事件 $("input[type='button']").click(function(){ //獲取第一個div元素(使用的HTML方法是JQuery的方法,因為eq方法返回的是一個jQuery包裝集，故也只能呼叫jQuery的方法) $("div").eq(0).html("<img src='images/03.jpg'/>變成了頭像3"); //獲取第二個div元素(使用的innerHTML方法是DOM物件的方法，因為get方法返回的是DOM物件，故也只能呼叫DOM物件的方法) $("div").get(1).innerHTML="<img src='images/04.jpg'/>變成了頭像4"; }); }); </script> </head> <body> <div><img src="images/01.jpg">這是頭像1</div><br> <div><img src="images/02.jpg">這是頭像2</div> <input type="button" value="一陣過後" /> </body> </html>
3.類名選擇器（.class）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery基本選擇器的使用</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- 類名選擇器的使用 -->
<script type="text/javascript">
$(function(){
//選取DOM元素
var myClass = $(".myClass");
//為選取的DOM元素設定背景顏色
myClass.css("background-color","#C50210");
//為選取的DOM元素設定文字顏色
myClass.css("color","#FFF")
});
</script>
</head>
<body>
<div class="myClass">注意觀察我的樣式</div><br>
<div>我是預設的樣式</div>
</body>
</html>4.複合選擇器（以下程式碼我用谷歌瀏覽器測試沒有效果，，）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery基本選擇器的使用</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- 元素選擇器的使用 -->
<script type="text/javascript">
$(function(){
$("input[type='button']").click(function(){
//新增所使用的CSS類
$("div,#span").addClass("change");
});
});
</script>
</head>
<body>
<p class="default">p元素</p>
<div class="default">div元素</div>
<span class="default" id="span">id為span的元素</span>
<input type="button" value="為div元素和id為span的元素換膚" />
</body>
</html>5.萬用字元選擇器（*） （略）。
===========================================
<%@ 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>jQueryTest</title>
<script type="text/javascript" src="${request.getContextPath()}static/js/jquery-1.12.4.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
//id選擇器
//$("#button_id").click(function(){
// alert($("#input1_id").val());
//});
//class選擇器
//$(".button_class").click(function(){
// alert($(".input2_class").val());
//});
//元素選擇器
$("#button_id").click(function(){
alert($("form input:first").val());
});
});
</script>
<body>
<form action="#" id="form_id" class="form_class" method="post">
姓名：<input id="input1_id" class="input1_class" type="text"/><br>
年齡：<input id="input2_id" class="input2_class" type="text"/><br>
<input id="button_id" class="button_class" type="button" value="按鈕"/><br>
</form>
</body>
</html>