jQuery選擇器
-
css2.1和css3選擇器
- 參數：必須是字符串格式的選擇器
<div class="box" id="box">
<p>1</p>
<p>2</p>
</div>
<p>hello</p>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
//jQuery選擇器
//css2.1 css3 選擇器
//參數必須是字符串格式的選擇器
//基礎選擇器
$("*")
$("p")
$(".box")
$("#box")
//高級選擇器
$(".box p").html("高級選擇器")
$(".box p").css("width" , 100);
<input type="button" value="btn1" disabled="disabled"><br>
<input type="button" value="btn2">
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
//表單對象屬性
$("input:disabled").css("background-color","red");//選中被禁用的disabled的input標簽
$("input:enabled").css("background-color","skyblue");//選中沒有被禁用的, enabled的
$(":input").css("background-color","pink");//選中所有的input標簽
$(":text").css("background-color","pink");//只會改變input表單里的type=text的文本框的css樣式
-
篩選選擇器
-
也叫過濾選擇器，jQuery中新增的自己的選擇器
使用方法：在基礎選擇器后面增加一些篩選的單詞，篩選出前面選擇器選中內容中的一部分，也可作為高級選擇器的一部分
-
//篩選選擇器
$("p:first").css("background-color","purple");
$("p:last").css("background-color", "purple");
//選擇任意位置
$("p:eq(5)").css("background-color", "purple");
//選擇大於下標為5的項
$("p:gt(5)").css("background-color", "purple");
//選中 下標 為奇數的項,下標為1,3,5,7的項
$("p:odd").css("background-color", "skyblue");
//選中 下標 為奇數的項,下標為1,3,5,7的項
$("p:odd").css("background-color", "skyblue");
//not 除了這些項,p的樣式都是("background-color", "skyblue")的
$("p:not(eq(3))").css("background-color", "skyblue");
$("p:not(.p1)").css("background-color", "skyblue");
常用的有：
$(":first") 第一個
$(":last") 最后一個
$(":eq(index)") 下標為index的項
$(":gt(index)") 大於下標為index的項
$(":lt(index)") 小於下標為index的項
$(":odd") 下標為奇數的項
$(":even") 下標為偶數的項
$(":not(selector)") 去除所有與給定選擇器匹配的元素
篩選方法
過濾方法，jQuery中除了用選擇器選擇元素，jQuery對象內還封裝了一些對應的篩選方法
- 常用：
$("p").first()
$("p").last()
$("p").eq(3)
$("p").first().css("background-color", "red");
$("p").eq(4).css("background-color", "skyblue");
案例 表格隔行變色
原生Js方法:
<head>
<style>
table{
margin: 0 auto;
border-collapse: collapse;
}
td,tr{
width: 70px;
height: 40px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
//原生方法
var trs = document.getElementsByTagName("tr");
for(var i = 0;i <trs.length;i ++){
if(i %2 == 0){
trs[i].style.backgroundColor = "pink";
}else{
trs[i].style.backgroundColor = "skyblue";
}
}
</script>
jQuery方法:
//jquery 方法
$("tr:even").css("background-color","rgb(245, 197, 231)");
$("tr:odd").css("background-color","rgb(197, 216, 245)")
jQuery應用
jQuery操作標簽的內容
-
html()方法,相當於原生Js中的innerHTML屬性,用來獲取或設置標簽內部的內容
-
text()方法,相當於原生Js中的innerText屬性,用來獲取或設置標簽內部文字,僅僅是文字
-
val()方法,相當於Js中的value屬性,用來獲取或設置表單元素內容
-
jQuery操作標簽的屬性
-
attr()方法,用來獲取或設置標簽的屬性值
設置標簽的屬性值:jQuery對象.attr(name,value);
獲取標簽屬性值:jQuery對象.attr(name);
-
removeAttr()方法:移除標簽的屬性
-
prop()方法,針對selected\checked\disabled等表單元素的屬性,這類屬性的屬性值與屬性名相同
獲取:$("input").prop("屬性名");
設置:$("input").prop("屬性名",值);
-
-
jQuery操作樣式方法
-
css()方法,用於調用css屬性值或者更改css屬性值,jQuery對象.css(css樣式屬性名,想要設置或更改的屬性值)
- 注意
• 一個參數：表示調用 css 屬性的值，得到的是某個元素的最終計算后樣式，值為字符串格式。
• 兩個參數：表示設置 css 樣式屬性，第二個參數可以是字符串格式的屬性值，如果帶單位的數字的屬性值，可以寫成帶單位的字符串格式、不帶單位的字符串、純數字、帶 += 等賦值運算的字符串。
- 注意
-
$pic.css("width","400px");
$pic.css("width","400");
$pic.css("width",400);
$pic.css("width","+=100");
//有些屬性值可以直接寫,或者省略px單位,還可以寫+=
• css() 方法的第一個參數，復合屬性的單一屬性寫法可以是駝峰命名法，也可以是橫線寫法。
//復合屬性的單一屬性寫法,可以是橫線-寫法,也可以是駝峰命名法
console.log("background-color")
console.log("backgroundColor")
• 可以給同一個對象同時設置多條 css 屬性，將多條屬性的屬性和屬性值寫成對象格式，傳給 css() 的參數
//設置多條屬性,使用對象形式的參數
$pic.css({
"width":200,
"height":100,
"border":1
})
-
jQuery操作類名方法
- addClass()添加類名
- removeClass()移除類名,不傳參數的話,表示刪除所有的類名
- toggleClass()類名切換:若這個類名存在,則移除這個類名,否則添加這個類名
<style>
.box{
background-color: pink;
width: 100px;
height: 100px;
}
.no{
background-color: white;
}
.blue{
background-color: skyblue;
width: 100px;
height: 100px;
}
</style>
<body>
<input type="button" value="刪除" id="btn1">
<input type="button" value="添加" id="btn2">
<input type="button" value="切換" id="btn3">
<div id="box" class="box"></div>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $del_btn = $("#btn1");
var $add_btn = $("#btn2");
var $change_btn = $("#btn3");
var $box = $("#box");
//刪除類名 removeClass()
$del_btn.click(function(){
//$box.removeClass("box")//刪除指定類名
$box.removeClass()//不傳參數 默認刪除所有類名
})
//在jQuery中類名的控制方法，它只會操作指定的類名，不會影響其他類名
// removeClass("box")，在div的標簽上，class="box"仍然存在，原有的類名不會影響
//添加類名 addClass()
$add_btn.click(function(){
$box.addClass("blue")
})
//切換類名 toggleClass()
$change_btn.click(function(){
//讓元素在一個類名中進行添加和刪除的自動切換
$box.toggleClass("blue");//有就刪除，沒有就添加
})
</script>
</body>
這三個方法只操作參數部分的類名,不影響原有的其他類名
- hasClass()檢測類名是否存在,返回值是布爾值
// hasClass（）
consol.console.log($box.hasClass("blue"));//布爾值,true/false
$change_btn.click(function(){
// hasClass（）
//實現切換效果---toggleClass()
if ($box.hasClass("blue")) {
$box.removeClass("blue");
} else {
$box.addClass("blue");
}
})