本文详细介绍了jQuery中属性设置与获取、CSS操作方法，包括添加/移除class、内容处理、表单值获取、prop与attr的区别，以及全选案例和表格隔行颜色动态切换。同时涵盖CSS样式设置、数组遍历和jQuery工具使用技巧。
jQuery中属性和CSS操作
图片详解：
<!-- html代码块 -->
<html>
<head>
<meta charset="utf-8">
<title></title>
//设置css样式
<style>
.demo1 {
border: 1px solid red;
}
.demo2 {
background-color: yellow;
}
.even {
background-color: #FF0000;
}
.odd {
background-color: #FFFF00;
}
</style>
</head>
<body>
<h3>jQuery中属性和CSS操作</h3>
<ul id="oUl1">
<li id="one">1.attr:设置或者获取标签的属性</li>
<li class="demo1">2.removeAttr:移除属性（属性和值都会移除）</li>
<li>3.addClass:添加样式 会叠加</li>
<li>4.removeClass移除指定的样式</li>
<li>5.html():获取或者设置标签的内容 包含子标签</li>
<li>6.text(): <span id="sid">获取或者设置标签的内容 不包含子标签</span></li>
<li>7.val() 获取或者设置表单元素中的value值</li>
<li>8.prop() 与attr类似，但是prop专门针对表格中的有boolean类型的标签</li>
<input id="inputs" type="text" value="helloworld" />
<input type="checkbox" value="123" checked="checked" />
</ul>
</body>
</html><!-- jQuery代码 -->
<script type="text/javascript">
$(function() {
// 1.attr:设置或者获取标签的属性
// 获取第一个li的id属性值
console.log($("#oUl1>li:first").attr("id"));
console.log($("#oUl1>li").first().attr("id")); //这个方法也可以
$("#oUl1>li:first").attr("id", "sb"); // 设置属性
// 2.removeAttr:移除属性（属性和值都会移除）
$('#oUl1>li:first').removeAttr('id');
// 3.addClass:添加样式 会叠加
$('#oUl1>li:eq(1)').addClass('demo2'); //eq()获取指定元素
// 4.removeClass移除指定的样式
// 移除demo1的样式
$("#oUl1>li:eq(1)").removeClass("demo1")
// 5. html(): 获取或者设置标签的内容 包含子标签
console.log($("#sid").parent().html());
// 6. text(): 获取或者设置标签的内容 不包含子标签
console.log($("#sid").parent().text());
// 7. val() 获取或者设置表单元素中的value值
console.log($("#sid").parent().val());
//8.prop() 与attr类似，但是prop专门针对表格中的有boolean类型的标签
//获取checked选中状态;
console.log($("input:last").prop("checked"));
});
</script>css()：设置标签的css样式
获取样式值：css("样式名")
设置单个样式：css("样式名","样式值")
设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})
数组之遍历、$工具方法
图片详解：
<!-- jQuery代码 -->
<script type="text/javascript">
$(function() {
// $("标签") 作用:创建标签
console.log($("<a href = '#'>百度以下</a>"))
// html 替代了js中的innerHTML属性 可设置可获取
$("#oDiv").html($("<a href = '#'>百度以下</a>"))
// $(js对象) 作用:转换作用
// 注意：通过选择器获取的jQuery对象都是以伪数组的形式存储的
var $oDiv = $('oDiv');
// 可以通过get方法+下标获取
console.log($oDiv.get(0).innerHTML);
数组的定义并进行遍历。
var arr = []
var arr = new Array();
// 案例： 定义一个数组存储5个姓名
var names = ["张三", "里斯", "王五", "蛮子", "小六子"];
$.each(names, function(index, name) {
//获取每一个元素
console.log(index, name);
//下标获取每一个元素
console.log(names[index]);
});
遍历对象 {}
var student = {
"name": "张三",
"sex": "男",
"age": 18
}
//each()方法遍历
$.each(student, function(index, stu) {
console.log(index, stu);
});
//$.() 构造方法
// (1)each() 循环遍历，类似for循环。
$.each(names, function(index, name) {
//获取每一个元素
console.log(index, name);
});
// （2）trim() 去掉字符串两端的空格
var str = ' ab c';
console.log($.trim(str).length);
// （3）type() 判断值类型
console.log($.type('最帅man之东哥'));
// （4）isArray() 判断是否是一个数组
var names = ["张三", "里斯", "王五", "蛮子", "小六子"];
console.log($.isArray(names));
// （5）isFunction() 判断是否是一个函数
// console.log($.isFunction(add))
// （6）parseJSON() 将满足json定义的字符串转换成一个对象或者对象数组
// 重点:通过parseJSON转换
var stu = "[\"aa\",\"bb\",\"cc\"]";
var stuArr = $.parseJSON(stu);
console.log($.type(stuArr));
//定义一个字符串===>数组类型
var stus = '[{"name":"zkingzz"},{"name":"zkingcc"}]';
console.log($.type(stus)); //String字符串类型
//转成Array数组类型
console.log($.type($.parseJSON(stus)));
});
</script>案例一·：全选案例
<html>
<head>
<!-- 导入jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
</head>
<body>
<!-- 案例：实现购物车多选/取消多选操作 -->
<button>全选</button>
<button>取消全选</button>
<input type="checkbox" value="aaa">aaa
<input type="checkbox" value="bbb">bbb
<input type="checkbox" value="ccc">ccc
<input type="checkbox" value="ddd">ddd
<input type="checkbox" value="eee">eee
<!-- jQuery代码 -->
<script type="text/javascript">
//实现全选
$("button:first").click(function() {
//获取所有的复选框
$("input:checkbox").each(function() {
$(this).prop("checked", true);
});
});
// 取消全选
$('button:last').click(function() {
// 获取所有复选框
$('input:checkbox').each(function() {
$(this).prop('checked', false);
});
});
</script>
</body>
</html>案例二：表格颜色隔行
<!-- html代码块 -->
<head>
<meta charset="utf-8">
<title>表格颜色隔行</title>
<style>
.demo1 {
border: 1px solid red;
}
.demo2 {
background-color: yellow;
}
.even {
background-color: #FF0000;
}
.odd {
background-color: #FFFF00;
}
</style>
<!-- 导入jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
</head>
<body>
<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>
</body><!-- jQuery代码 -->
<script type="text/javascript">
// 表格隔行换颜色
$('table>tbdoby>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'); //removeClass设置css样式
$(this).addClass('odd');
});
//鼠标离开事件
$('table>tdody>tr:gt(0)').mouseout(function() {
$('table>tbody>tr:gt(0)').removeClass('odd');
});
</script>CSS位置设置方法
offset()：相对整个大容器的相对位置。
position()：相对父容器的相对位置。
scrollTop()：滚动条到顶部距离。
scrollXX 案例：滚动条位置
<!-- html代码块 -->
<div id="demo3" style="border: 1px solid red; width: 100px; height: 100px;position: absolute;left: 100px;top:100px;background-color: blue;">
<div style="width: 30px;height: 30px;background-color: red;position: relative;left: 20px;top: 30px;"></div>
</div><!-- jQuery代码 -->
目录
1436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
