本文為大家帶來一篇jquery之基本選擇器practice(實例講解)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
一、在輸入框中輸入數字，點選按鈕，實現對應事件的功能。
html程式碼：
<input id="txt1" type="text" value="2" />
<input id="Button5" type="button" value="改变大于N的行背景为绿色" />
登入後複製
jQuery程式碼：
//改变大于N的行背景为绿色
$("#Button5").click(function () {
//获取到ID为txt1的输入框的文本值
var num = $("#txt1").val();
//tr的行的下标从0开始，故现实中的数字应该减一
num = num - 1;
$("tr:gt("+num+")").css("background-color", "green");
});登入後複製
二、點擊每一個藍色線框中的p時，改變它後面緊鄰的元素的背景為green
html程式碼：
<p class="mainbox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</p>
登入後複製
jQuery程式碼：
$("p").click(function () {
$(this).next("p").css("background-color","green");
});登入後複製
頁面載入完畢後，讓所有數字為奇數的p的字型顏色改為blue
//2.页面加载完毕后，让所有数字为奇数的p的字体颜色该为blue
//$("p.mainbox>p:even").css("color", "blue");
for (var i = 0; i < $(".mainbox>p").length; i++) {
//获取到每p的集合
var valu = $(".mainbox>p");
//获取到每一个p中的文本内容
var txt = $(valu[i]).text();
//将string转换为int
value = parseInt(txt);
//取模进行奇偶判断
if (value%2!=0) {
$(valu[i]).css("color", "blue");
}
}登入後複製
三、寫javascript程式碼，完成以下功能需求：
##實作全選、反選、全不選功能
HTML程式碼：
<tr>
<td>
<label>
<input type="radio" name="selectMode" id="selectAll" />全选
</label>
<label>
<input type="radio" name="selectMode" id="selectNotAll" />全不选
</label>
<label>
<input type="radio" name="selectMode" id="selectRevorse" />反选
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" id="Checkbox3" />刘德华
</label>
<label>
<input type="checkbox" id="Checkbox4" />张学友
</label>
<label>
<input type="checkbox" id="Checkbox5" />孙燕姿
</label>
<label>
<input type="checkbox" id="Checkbox6" />刘欢
</label>
</td>
</tr>
登入後複製
jQuery代碼：
$(function () {
//全选
//方法1：
$("#selectAll").click(function () {
$("#Checkbox3,#Checkbox4,#Checkbox5,#Checkbox6").prop("checked",true);
});
//方法2：
$("#selectAll").click(function () {
//:checkbox--选取所有类型为checkbox的input标签
$(":checkbox").prop("checked", true);
});
//全不选
$("#selectNotAll").click(function () {
$(":checkbox").prop("checked", false);
});
//反选方法1：
$("#selectRevorse").click(function () {
$(":checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
});
//反选方法二2：
$("#selectRevorse").click(function () {
$("input[type=checked]").each(function (i, n) {
n.checked = !n.checked;
});
});
//反选方法3：
$("#selectRevorse").click(function () {
var $bob = $("input[type=checked]");
for (var i = 0; i < $bob.length; i++) {
if ($bob[i].checked == true) {
$bob[i].checked == false;
}
else {
$bob[i].checked == true;
}
}
});
});登入後複製
四、 將所有p標記下的兒子p前景色改為red
將所有p標記的孫子span前景色改為green
將i的爺爺的前景色改為Orange
HTML程式碼：
<p>
<span>七大洲有哪些：大米粥、小米粥、绿豆粥、八宝粥... ...</span>
<p>
<span>中国四大发明时什么：油盐酱醋</span>
</p>
<p>
我拿什么拯救你，<span>我的<i>瞌睡虫</i></span>
</p>
</p>
登入後複製
jQuery程式碼：
$(function () {
//将所有p标记下的儿子p前景色改为red
$("#Button1").click(function () {
$("p>p").css("color","red");
});
//将所有p标记的孙子span前景色改为green
$("#Button2").click(function () {
$("p").children().children().css("color","green");
});
//将i的的爷爷的前景色改为Orange
$("#Button3").click(function () {
$("i").parent().parent().css("color","orange");
});
});登入後複製
五、請寫javascript程式碼，完成如下功能需求：
每隔1秒，讓所有的數字逆時針旋轉
效果如下：
HTML程式碼：
<p class="box">
<table id="table1" class="mytable">
<tr>
<td>
<label id="Label1">
1
</label>
</td>
<td>
<label id="Label2">
2
</label>
</td>
登入後複製
jQuery程式碼：
$(function () {
window.setInterval(fun, 1000);
});
//方法一：
function fun() {
$("#table1 label").each(function (i, n) {
//获取到当前label的文本值
var $item = $(n).text();
//将其转换为int型
$item = parseInt($item);
if ($item == 8) {
//给当前label赋值
$(n).text("1");
}
else {
//给当前label赋值
$(n).text($item+1);
}
});
};
//方法二：
function fun2() {
$("#table1 label").each(function () {
var n = $(this).text();
n++;
if (n > 8) {
n = 1;
}
this.textContent = n;
//$(this).text() = n;
});
}登入後複製
相關推薦：
詳解CSS 屬性選擇器
CSS中hover選擇器的使用詳解
jQuery選擇器符號分析
以上是詳解jquery選擇器practice的詳細內容。更多資訊請關注PHP中文網其他相關文章！
