JavaScript之jQuery框架簡單使用
阿新 • • 發佈：2019-02-20
jQuery
一、什麼是jQuery
- jQuery是一個JS框架，極大的簡化了JS程式設計，封裝了JS、CSS、DOM，提供了一致的，簡潔的API
- 使使用者更方便地處理HTML、Events、實現動畫效果，並且方便地為網站提供AJAX互動
- 使使用者的HTML頁面保持程式碼和HTML內容分離
二、jQuery使用
- 1.使用前需要引入jquery.js檔案
- 如：jquery-1.11.1.js
- 2.使用jQuery的選擇器選中節點
- 3.呼叫它的API操作節點
簡單例項（點選按鈕增加字型字號）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="../js/jquery-1.11.1.js"></script> <script> function bigger(){ //獲取段落的原始字號 var size = $("p").css("font-size"); console.log(size); //去掉單位，便於增加字號 size = size.replace("px",""); //將字號加1，在設定給字號 $("p").css("font-size",++size+"px"); } </script> </head> <body> <input type="button" value="+" onclick="bigger();"/> <p>1.引入jquery.js</p> <p>2.使用選擇器選中節點</p> <p>3.呼叫它的API操作節點</p> </body> </html>
示例2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="../js/jquery-1.11.1.js"></script> <script> function print1(){ //使用選擇器獲取的是jquery物件 var $ps = $("p"); console.log($ps); for(var i=0;i<$ps.length;i++){ //從jquery物件中獲取的值是dom var p = $ps[i]; console.log(p.innerHTML); } } //呼叫時傳入了this，它指代點選的那個圖片，這是一個dom物件 function chg(img){ console.log($(img).width()); console.log($(img).height()); if($(img).width() == 218){ $(img).width(250).height(250); }else{ $(img).width(218).height(218); } } </script> </head> <body> <input type="button" value="列印" onclick="print1();"/> <p>1.jquery物件才能呼叫jquery方法</p> <p>2.dom物件才能呼叫dom方法</p> <p>3.jquery物件本質上是dom陣列</p> <div> <img src="../images/01.jpg" onclick="chg(this);"/> </div> </body> </html>
選擇器示例（過濾選擇器*）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="../js/jquery-1.11.1.js"></script> <script> //等價於 //window.onload=function(){} $(function(){ //1.基本選擇器 //和css選擇器一樣 //2.層次選擇器 //1)選擇子孫/兒子 //和派生選擇器一樣 //2)選擇弟弟 console.log($("#gz+li"));//廣州的弟弟，弟弟都一樣的話，li可省略，~是所有弟弟 //3.過濾選擇器(*) //1)基本過濾(*) console.log($("li:first"));//第一個，最後一個last console.log($("li:even"));//下標偶數 console.log($("li:lt(2)"));//下標小於2的 console.log($("li:not(#gz)"));//排除 //2)內容過濾 console.log($("li:contains('州')")); //3)可見性過濾 console.log($("li:hidden")); //4)屬性過濾 console.log($("li[id]")); //5)狀態過濾 console.log($("input:enabled")); console.log($("input:checked")); //4.表單選擇器 console.log($(":radio")); }); </script> </head> <body> <ul> <li>北京</li> <li>上海</li> <li id="gz">廣州</li> <li id="sz">深圳</li> <li>杭州</li> <li>天津</li> <li style="display:none;">重慶</li> </ul> <!-- readonly:只讀,資料依然可以提交給伺服器. disabled:禁用,資料無法提交給伺服器. --> <p> 賬號:<input type="text" disabled/> </p> <p> 密碼:<input type="password"/> </p> <p> 性別: <input type="radio" name="sex" checked/>男 <input type="radio" name="sex"/>女 </p> </body> </html>
讀寫節點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//1.讀寫節點的內容(雙標籤有內容)
//1) html() == innerHTML
console.log($("p:first").html());
$("p:first").html("1.jQuery支援<u>讀寫</u>節點");
//2) text() == innerText
//用法同上
//2.讀寫節點的值(表單控制元件有值)
//val() == value
console.log($(":button:first").val());
$(":button:first").val("BBB");
//3.讀寫節點的屬性
//attr() == setAttribute()+getAttribute()
console.log($("img:first").attr("src"));
$("img:first").attr("src","../images/02.jpg");
//根據層次查詢節點
//遍歷節點：查詢某節點的親戚。
//有些時候我們呼叫別人的方法得到一個節點，對其進行
//一些操作，然後又要對此節點的親戚進行操作，此時
//無法寫選擇器，只能呼叫這樣的方法
var $gz = $("#gz");//假設得到了gz
console.log($gz.parent());//父節點
console.log($gz.prev());//上一個哥哥,弟弟next()
console.log($gz.siblings());//所有兄弟，加引數表示第幾個兄弟
var $ul = $("ul");
console.log($ul.find("li[id]"));//查詢滿足選擇器的所有後代
});
function f1() {
var $li = $("<li>天津</li>");
console.log($li);
$("ul").append($li);
}
function f2() {
var $li = $("<li>澳門</li>");
$("#gz").after($li);
}
function f3() {
$("#gz").remove();
}
</script>
</head>
<body>
<p>1.jQuery支援<b>讀寫</b>節點</p>
<p>2.jQuery支援<b>增刪</b>節點</p>
<p>3.jQuery支援<b>查詢</b>節點</p>
<p>
<input type="button" value="AAA"/>
</p>
<p>
<img src="../images/01.jpg"/>
</p>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">廣州</li>
<li>深圳</li>
<li>杭州</li>
</ul>
<p>
<input type="button" value="追加"
onclick="f1();"/>
<input type="button" value="插入"
onclick="f2();"/>
<input type="button" value="刪除"
onclick="f3();"/>
</p>
</body>
</html>
樣式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.big {
font-size: 30px;
}
.important {
color: red;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
$("p").addClass("big").addClass("important");//追加樣式
$("p").removeClass("big").removeClass("important");//移除樣式
console.log($("p").hasClass("big"));//判斷是否包含某樣式
});
function f1() {
$("p").toggleClass("big");//切換樣式
}
</script>
</head>
<body>
<p>jQuery專門物件樣式操作提供了支援</p>
<input type="button" value="切換"
onclick="f1();"/>
</body>
</html>
繫結事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.big {
width: 250px;
height: 250px;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
//window.onload只能寫一次,
//若寫了多次則後者覆蓋前者.
//$(function(){})可以寫多次,
//若寫了多次則它們的邏輯會疊加.
$(function(){
//給按鈕1繫結單擊事件
$(":button:first").click(function(e){
console.log(1);
//此事件物件被jquery做了封裝，因為事件物件是瀏覽器建立的。
//不同瀏覽器建立的事件物件有區別，開發時要兼顧這個區別，很麻煩
//jquery解釋想解決這個麻煩，將他們的區別統一起來，統一的方法：
//取消冒泡：e.stopPropagation()
//獲取事件源: e.target
console.log(e);
});
//給圖片繫結懸停事件
$("img").hover(
function(){
$(this).addClass("big");
//width()
//css()
//addClass("big")
//toggleClass("big")
},//懸停時
function(){
$(this).removeClass("big");
} //離開時
);
//給按鈕2繫結單擊事件
$(":button:eq(1)").click(function(){
//讓圖片在顯示與隱藏之間切換
$("img").toggle();
});
});
</script>
</head>
<body>
<input type="button" value="按鈕1"/>
<p>
<img src="../images/01.jpg" />
</p>
<input type="button" value="按鈕2"/>
</body>
</html>
繫結事件案例（模擬網頁廣告向上自動收起）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#gg {
border: 1px solid red;
height: 600px;
}
#gg input {
float: right;
margin: 5px;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//給按鈕繫結單擊事件
$("#gg input").click(function(){
//讓廣告區域向上收起
$("#gg").slideUp(600);
});
//3秒之後
setTimeout(function(){
//自動點選一下按鈕x
$("#gg input").trigger("click");
},3000);
});
</script>
</head>
<body>
<div id="gg">
<input type="button" value="x"/>
</div>
</body>
</html>
示例（模擬打分器）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//給按鈕後繫結單擊事件
$(":button").click(function(){
//啟動定時器
var n = 0;
var id = setInterval(function(){
//獲取下一個要處理的框
var $text = $(":text").eq(n);
//模擬游標切入事件
$text.trigger("focus");
//生成隨機的分數，寫入框內
var s = parseInt(Math.random()*100);
$text.val(s);
//都處理完就停止定時器
if(n == $(":text").length-1){
clearInterval(id);
}
n++;
},2000);
});
});
</script>
</head>
<body>
<p>
<input type="button" value="打分"/>
</p>
<p>
張三:<input type="text"/>
</p>
<p>
李四:<input type="text"/>
</p>
<p>
王五:<input type="text"/>
</p>
<p>
趙六:<input type="text"/>
</p>
</body>
</html>
動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*設定相對/絕對/固定定位，才能做出動畫效果，
動畫就是連續改變元素的偏移量*/
img {
position: relative;
}
div {
background-color: red;
width:200px;
height: 100px;
border: 2px solid red;
position: fixed;
top: 50px;
right: -180px;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
//顯示隱藏動畫的實現原理：
//通過定時器連續改變元素的樣式（大小和透明度）
function f1() {
//$("img").show();
//$("img").show(3000);
$("img").slideDown(3000);
//$("img").fadeIn(3000);//淡入
}
function f2() {
//$("img").hide(3000);
//引數2是一個函式，jquery會在執行玩動畫後自動呼叫
//這樣的函式稱之為回撥函式
$("img").slideUp(3000,function(){
console.log("完成");
});
//$("img").fadeOut(3000);//淡出
//f2相當於主執行緒，動畫相當於支執行緒，二者併發執行
//不互相等待，所以這句話會立刻執行
console.log("over");
}
function f3(){
$("#msg").fadeIn(500).fadeOut(2500);
}
function f4(){
$("img").animate({"left":"300px"},3000)
.animate({"top":"300px"},3000)
.animate({"left":"0"},3000)
.animate({"top":"0"},3000);
}
$(function(){
$("#gg").hover(
function(){
$(this).animate({"right":"0"},500);
},
function(){
$(this).animate({"right":"-180px"},500);
}
);
});
</script>
</head>
<body>
<p>
<input type="button" value="顯示" onclick="f1();"/>
<input type="button" value="隱藏" onclick="f2();"/>
<input type="button" value="刪除" onclick="f3();"/>
<input type="button" value="走你" onclick="f4();"/>
</p>
<p>
<img src="../images/01.jpg"/>
</p>
<p id="msg" style="display:none;">操作成功</p>
<div id="gg"></div>
</body>
</html>
案例（模擬購物車）
<!DOCTYPE html>
<html>
<head>
<title>購物車</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
th {
background-color:#eee;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
function add_shoppingcart(btn) {
//獲取商品名
//$objs.eq(i) == $($(objs[i]))
var name =
$(btn).parent().siblings().eq(0).html();
//獲取單價
var price =
$(btn).parent().siblings().eq(1).html();
//建立一個新的行
var $tr = $(
'<tr>'+
'<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="decrease(this);"/> '+
'<input type="text" size="3" readonly value="1"/> '+
'<input type="button" value="+" onclick="increase(this);"/>'+
'</td>'+
'<td id="p">'+price+'</td>'+
'<td align="center"><input type="button" value="x" onclick="cancel(this);"/></td>'+
'</tr>');
//追加到tbody下
$("#goods").append($tr);
}
//加法
function increase(btn) {
//獲取數量
var amount = $(btn).prev().val();
//數量+1再寫入文字框
$(btn).prev().val(++amount);
//獲取單價
var price =
$(btn).parent().prev().html();
//計算並寫入金額
$(btn).parent().next().html(amount*price);
}
//減法
function decrease(btn) {
//獲取數量
var amount = $(btn).next().val();
if(amount > 0){
//數量-1再寫入文字框
$(btn).next().val(--amount);
//獲取單價
var price =
$(btn).parent().prev().html();
//計算並寫入金額
$(btn).parent().next().html(amount*price);
}
}
//刪除
function cancel(btn){
$(btn).parent().parent().remove();
}
</script>
</head>
<body>
<h1>真划算</h1>
<table>
<tr>
<th>商品</th>
<th>單價(元)</th>
<th>顏色</th>
<th>庫存</th>
<th>好評率</th>
<th>操作</th>
</tr>
<tr>
<td>羅技M185滑鼠</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>微軟X470鍵盤</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手機殼</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>藍芽耳機</td>
<td>100</td>
<td>藍色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士頓U盤</td>
<td>70</td>
<td>紅色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>
<h1>購物車</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>單價(元)</th>
<th>數量</th>
<th>金額(元)</th>
<th>刪除</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">總計</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
