$工具方法（可查看jQuery官方API文档【工具】----jQuery api 1.8 中文版 ）
2、jQuery中属性和CSS操作
3.案例
全选案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选按钮</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table border="1" cellspacing="" cellpadding="">
<tr>
<td colspan="4"><input type="checkbox" name="" id="all" value="" />全选</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="111" onclick=" checkeds()"/>111</td>
<td><input type="checkbox" name="" id="" value="222" onclick=" checkeds()"/>222</td>
<td><input type="checkbox" name="" id="" value="333" onclick=" checkeds()"/>333</td>
<td><input type="checkbox" name="" id="" value="444" onclick=" checkeds()"/>444</td>
</tr>
</table>
<script type="text/javascript">
$("#all").click(function(){
var flag=$("#all").prop("checked");
var check=$("input:checkbox:gt(0)");
check.each(function(){
// console.log(all.prop("checked"));
$(this).prop("checked",flag);
});
});
function checkeds(){
var flag=true;
var all=$("#all")
var check=$("input:checkbox:gt(0)");
check.each(function(){
if($(this).prop("checked")==false){
flag=false;
}
})
all.prop("checked",flag);
};
</script>
</body>
</html>
案例:表格隔行换颜色
<table border="1" width="100%" height="400">
<tr style="background-color: aqua;">
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
// 表格隔行换颜色
$("table>tbody>tr:gt(0):even").addClass("even")
$("table>tbody>tr:gt(0):odd").addClass("odd")
$("table>tbody>tr:gt(0)").mouseover(function(){
$("table>tbody>tr:gt(0)").removeClass("odd");
$(this).addClass("odd");
});
$("table>tbody>tr:gt(0)").mouseout(function(){
$("table>tbody>tr:gt(0)").removeClass("odd");
});
</script>
其他案例:
// 数组的定义
// var arr=[]
// var arrnew Array();
var arr=['吴大龙','王大嘴','王大锤']
//遍历数组(第一个参数是下标)(第二个是值)
$.each(arr,function(index,value){
console.log(value);
});
//创建对象
var student={
"name":"张三",
"sex":"妖",
"age":234
}
// 遍历对象
$.each(student,function(name,value){
// name 是参数名
// value 是值
console.log(name,value);
});
// 创建对象数组
var students=[
{
"name":"张三",
"sex":"妖",
"age":234
},
{
"name":"李四",
"sex":"男",
"age":42
}
]
// 遍历对象数组
$.each(students,function(index,value){
$.each(value,function(name,value){
console.log(name,value);
});
});
// (2)trim() 去掉两端的空格
var str =" dsfs ";
console.log($.trim(str).length);
// (3) type() 判断值类型
console.log($.type(str));
// (4)isArray 判断是否是一个数组
console.log($.isArray(arr));
// (5)isFunction 判断是否是一个函数
console.log($.isFunction(add));
// (6)parseJSON()解析json 字符串转为js对象/数组
var array='["吴大龙","王大嘴","王大锤"]';
var stu=$.parseJSON(array);
console.log($.type(stu));
1599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
