本文就为大家带来一篇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 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的详细内容。