jQuery介紹
jQuery是一個(gè)輕量級(jí)JS庫，使用十分簡單病游；
jQuery的核心是選擇器唇跨，用于獲取頁面元素；
jQuery提供了大量高效的方法衬衬，開發(fā)速度大幅提升买猖；
jQuery選擇器
- jQuery選擇器用于選中需要操作的頁面元素
- 語法1：jQuery(選擇器表達(dá)式)
- 語法2：$(選擇器表達(dá)式)
基本選擇器
| 語法 | 說明 |
|---|---|
| $("#id") | ID選擇器，指定Id元素的對(duì)象 |
| $("標(biāo)簽") | 元素選擇器滋尉，選擇指定標(biāo)簽名的選擇器 |
| $(".class") | 類選擇器玉控，選中擁有指定css類的元素 |
| $("S1,S2,SN") | 組合選擇器，對(duì)元素進(jìn)行組合 |
層疊選擇器
| 語法 | 說明 |
|---|---|
| $("ancestor descendant") | 后代選擇器 |
| $("ancestor>descendant") | 子選擇器 |
| $("prev~siblings") | 兄弟選擇器 |
屬性選擇器
| 語法 | 說明 |
|---|---|
| $("selector[attribute=value]") | 選中屬性值等于具體值的組件 |
| $("selector[attribute^=value]") | 選中屬性值以某值開頭的組件 |
|
|
選中屬性值以某值結(jié)尾的組件 |
| $("selector[attribute*=value]") | 選中屬性值包含某值的組件 |
位置選擇器(不常用)
| 語法 | 說明 |
|---|---|
| $("selector:first") | 獲取第一個(gè)元素 |
| $("selector:last") | 獲取最后一個(gè)元素 |
| $("selector:even") | 獲取偶數(shù)位置的元素(從0開始) |
| $("selector:odd") | 獲取奇數(shù)位置的元素(從0開始) |
| $("selector:eq(n)") | 獲取指定位置的元素(從0開始) |
表單選擇器(不常用)
| 語法 | 說明 |
|---|---|
| $("selector:input") | 所有輸入元素 |
| $("selector:text") | 獲取文本框 |
| $("selector:password") | 獲取密碼框 |
| $("selector:submit") | 獲取提交按鈕 |
| $("selector:reset") | 獲取重置按鈕 |
| ... |
操作元素屬性
- attr(name|properties|key) - 獲取或設(shè)置元素屬性
$("a[href*='163']").attr("href", "http://www.163.com");將網(wǎng)易郵箱地址改為網(wǎng)易主頁地址 - removeAttr(name) - 移除元素屬性
$("a").removeAttr("href");將所有a標(biāo)簽的href屬性移除
操作元素的CSS樣式
- css() - 獲取或設(shè)置匹配元素的樣式屬性
$("a").css("color", "red");將所有a標(biāo)簽的color樣式設(shè)置為red
$("a").css({"color":"red","font-weight":"bold"});傳入JSON對(duì)象一次設(shè)置多個(gè)屬性值 - addClass() - 為每個(gè)匹配的元素添加指定的類名
$("li").addClass("highlight myclass");為li標(biāo)簽增加兩個(gè)css類 - removeClass() - 從所有匹配的元素中刪除全部或者指定的類
$("p").removeClass("myclass");移除p標(biāo)簽的myclass類
設(shè)置元素內(nèi)容
- val() - 獲取或設(shè)置輸入項(xiàng)的值
$("input[name='username']").val();獲取文本框的值
$("input[name='username']").val("請(qǐng)輸入姓名");設(shè)置文本框的值 - text() - 獲取或設(shè)置元素的純文本
$("span").text("<b>你好笆ㄏА高诺！</b>");將span中的內(nèi)容設(shè)置為<b>你好啊</b>(文本中的html標(biāo)簽進(jìn)行轉(zhuǎn)義) - html() - 獲取或設(shè)置元素內(nèi)部的HTML
$("span").html("<b>你好啊碾篡！</b>");將span中的內(nèi)容設(shè)置為(加粗的)你好笆！(文本中的html標(biāo)簽不進(jìn)行轉(zhuǎn)義)
jQuery事件處理方法
- on("click", function) - 為選中的頁面元素綁定單擊事件
- click(function) - 是綁定事件的簡寫形式
- 處理方法中提供了event參數(shù)包含了事件的相關(guān)信息
jQuery常用事件
| 鼠標(biāo)事件 | 鍵盤事件 | 表單事件 | 文檔/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| mouseover |
實(shí)例
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery練習(xí)</title>
<style type="text/css">
.div1 {
float: left;
width: 50px;
line-height: 30px;
background-color: lightgray;
margin-left: 10px;
text-align: center;
vertical-align: middle;
}
.div2 {
width: 300px;
height: 300px;
border: solid gray 1px;
margin-top: 60px;
color: red;
}
</style>
</head>
<body>
<h2>請(qǐng)選擇背景顏色</h2>
<div>
<div id="blue" class="div1">藍(lán)色</div>
<div id="green" class="div1">綠色</div>
</div>
<div class="div2" id="bg"></div>
<div>
輸入顏色首字母： <input type="text" name="color">
</div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
alert("歡迎來到設(shè)置顏色的頁面");
$("#blue").click(function(){
$("#bg").css("background-color", "blue");
$("#bg").text("藍(lán)色背景");
});
$("#green").click(function(){
$("#bg").css({"background-color":"green","font-weight":"bold"});
$("#bg").text("綠色背景");
});
$("input[type='text']").keypress(function(event){
if(event.keyCode == 66){
$("#bg").css("background-color", "blue");
$("#bg").text("");
}
if(event.keyCode == 71){
$("#bg").css("background-color","green");
$("#bg").text("");
}
});
</script>
</body>
</html>
