jquery之基本选择器practice(实例讲解)
前端之家 收集整理的这篇文章主要介绍了
jquery之基本选择器practice(实例讲解) ,
前端之家 小编觉得挺不错的,现在分享给大家,也给大家做个参考。
一、在输入框中输入数字,点击按钮,实现对应事件的功能 。
HTML代码 :
jQuery代码 :
获取到ID为txt1的输入框的文本值
var num = $("#txt1").val();
//tr的行的下标从0开始,故现实中的数字应该减一
num = num - 1;
$("tr:gt("+num+")").css("background-color","green");
});
二、点击每一个蓝色线框中的div时,改变它后面紧邻的元素的背景为green
HTML代码 :
div:even").css("color","blue");
for (var i = 0; i < $(".mainbox>div").length; i++) {
//
获取 到每div的集合
var valu = $(".main
Box >div");
//
获取 到每一个div中的文本
内容
var txt = $(valu[i]).text();
//将string转换为int
value = parseInt(txt);
//取模进行奇偶判断
if (value%2!=0) {
$(valu[i]).css("color","blue");
}
}
方法1:
$("#selectAll").click(function () {
$("#Check
Box 3,#Check
Box 4,#Check
Box 5,#Check
Box 6").prop("checked",true);
});
//
方法 2:
$("#selectAll").click(function () {
//:check
Box --选取所有类型为check
Box 的input
标签
$(":check
Box ").prop("checked",true);
});
//全不选
$("#selectNotAll").click(function () {
$(":check
Box ").prop("checked",false);
});
//反选
方法 1:
$("#selectRevorse").click(function () {
$(":check
Box ").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;
}
}
});
});