今天就让我们一起来了解 jQuery的工具方法 以及 学习如何操作 jQuery 的属性和样式吧！
目录：
一. $ 工具方法
（案例1：演示上面所有的方法）
二. jQuery属性和CSS（重要知识点）
1. 属性
（案例2：演示jQuery属性所有方法）
(案例3：使用jQuery属性方式优化上节课《表格颜色隔行》)
(案例4：实现购物车多选 / 取消多选功能)
2. CSS
1. css（）设置标签css样式
2. 位置
3. 尺寸
一. $ 工具方法:
1. $.each() : 遍历数组，对象，对象数组中的数据
2. $.trim() : 去除字符串两边空格
3. $.type(obj) : 得到数据类型
4. $.isArray(obj) : 判断是否是数组
5. $.isFunction(obj) : 判断是否是函数
6. $.parseJSON(obj) : 解析json字符串转换为js对选对象 / 数组
案例1：演示上面所有的方法 , 详细代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- jquery 是js的升级版 -->
<!--
1.先把js文件拿到当前的项目中
2.将js文件导入到文件中
-->
<script src="js/jquery-3.5.1.js"></script>
<script>
// 选择器
// ID选择器：$("#a1")
// CLASS选择器：$(".a1")
// 标签选择器：$("p")
// 第一个p标签：$("p:first")
// 最后一个p标签：$("p：last")
// 奇数：$("p:odd")
// 偶数：$("p:even")
// 当前的下标小于2的：$("p:lt(2)")
// 当前的下标大于2的：$("p:gt(2)")
var arr=['a','b','c']
var obj={}
// 使用jquery遍历
$.each(arr,function(i,e){
// 第一个参数是下标 第二个参数是内容
// console.log(i,e)
})
console.log("123".length,$.trim(" 123 ").length)
// $.type 相当于js中的 typeof
console.log($.type(1))//number
console.log($.type("a"))//string
console.log($.type(arr))//array
console.log($.type(obj))//object
console.log($.isArray(arr))//true
function fa(){
var fb=fa
console.log($.isFunction(fb))
}
</script>
<style>
.a{
box-shadow:0px 0px 10px red;
}
</style>
<p title="123">我是p标签</p>
<script>
// 读取p标签中定义的title属性
console.log($("p").attr("title"))
// 设置p标签中定义的title属性
$("p").attr("title","456")
// 移除p便签中定义的title属性
$("p").removeAttr("title")
// css操作 (jquery里面函数前面要去掉on 比如 js：onmouseover jquery：mouseover)
// 添加标签
$("p").mouseover(function(){
// $(this) 当前触发的标签
$(this).addClass("a")
})
// 删除标签
$("p").mouseover(fonction(){
// $(this) 当前触发的标签
$(this).removeClass("a")
})
// $("p").html() 相当于 p.innerHTML
// $("p").text() 相当于 p.textContent
// $("input").val() 相当于 input.value
$("p").html("我是pppp标签")
</script>
</body>
</html>
二. jQuery属性和CSS（重要知识点）
1. 属性 (*)
1. attr() : 获取某个标签属性的值，或设置某个标签属性的值
2. removeAttr() ：删除某个标签属性
3. addClass() ：给某个标签添加class属性值
4. removeClass() : 删除某个标签class属性值
5. prop() : 和 attr() 类似，区别在于prop 用于属性值为Boolean 类型的情况，比如多选
6. html() : 获取某一个标签体的内容（注意：该标签体中可以包含子标签）
7. text() ：获取某一个标签体内容（注意：该标签体不能包含子标签）
8. val() : 主要用户获取 / 设置输入框的值
案例2：演示jQuery属性所有方法 ， 具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- jquery 是js的升级版 -->
<!--
1.先把js文件拿到当前的项目中
2.将js文件导入到文件中
-->
<script src="js/jquery-3.5.1.js"></script>
<script>
// 选择器
// ID选择器：$("#a1")
// CLASS选择器：$(".a1")
// 标签选择器：$("p")
// 第一个p标签：$("p:first")
// 最后一个p标签：$("p：last")
// 奇数：$("p:odd")
// 偶数：$("p:even")
// 当前的下标小于2的：$("p:lt(2)")
// 当前的下标大于2的：$("p:gt(2)")
var arr=['a','b','c']
var obj={}
// 使用jquery遍历
$.each(arr,function(i,e){
// 第一个参数是下标 第二个参数是内容
// console.log(i,e)
})
console.log("123".length,$.trim(" 123 ").length)
// $.type 相当于js中的 typeof
console.log($.type(1))//number
console.log($.type("a"))//string
console.log($.type(arr))//array
console.log($.type(obj))//object
console.log($.isArray(arr))//true
function fa(){
var fb=fa
console.log($.isFunction(fb))
}
</script>
<style>
.a{
box-shadow:0px 0px 10px red;
}
</style>
<p title="123">我是p标签</p>
<script>
// 读取p标签中定义的title属性
console.log($("p").attr("title"))
// 设置p标签中定义的title属性
$("p").attr("title","456")
// 移除p便签中定义的title属性
$("p").removeAttr("title")
// css操作 (jquery里面函数前面要去掉on 比如 js：onmouseover jquery：mouseover)
// 添加标签
$("p").mouseover(function(){
// $(this) 当前触发的标签
$(this).addClass("a")
})
// 删除标签
$("p").mouseover(fonction(){
// $(this) 当前触发的标签
$(this).removeClass("a")
})
// $("p").html() 相当于 p.innerHTML
// $("p").text() 相当于 p.textContent
// $("input").val() 相当于 input.value
$("p").html("我是pppp标签")
</script>
</body>
</html>
案例3：使用jQuery属性方式优化上节课《表格颜色隔行》（休眠状态，暂时不细讲）
案例4：实现购物车多选 / 取消多选功能
（如果想要在类似于购物车的全选功能中，实现点击全选 其它多选框自动全部选中，或者想要点击大于0的按钮 全选按钮自动取消的效果，那么可以参考一下代码：）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导包 -->
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div>
<input type="checkbox" id="all">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="text">
</div>
<div id="d1">
<input type="text" id="n1">
</div>
<script>
$("#all").click(function(){
// 设置界面所有的复选框和all的状态一样
// $(this).prop("checked") all的状态
$(":checkbox").prop("checked",all.checked)
})
// 拿到大于0的多选框 所有的事件去掉on
$(":checkbox:gt(0)").click(function(){
// console.log(this)
// this 是js对象
// $(this).prop("checked")
let status=this.checked
if(!status){
// 只要状态为false
return $(":checkbox").eq(0).prop("checked",status)
}
// 选中了
let f=true
$.each($(":checkbox:gt(0)"),(a,b)=>{
f=f&&b.checked
})
$(":checkbox").eq(0).prop("checked",f)
})
$("#d1").html()//读取
$("#d1").html("<b>hello word</b>")//修改
$("#d1").text("<b>hello word</b>")//修改
// var 只能用在输入框里面
$("#n1").val()//读取
$("#n1").val("abc")//
// 如果需要修改多个样式的值， 建议直接使用 addClass
$("#d1").css({
color:"red",
background:"pink"
})
</script>
</body>
</html>
运行结果如下图所示：
（1.当处于初始化情况下，点击全选按钮的效果：）
（2.当处于全选中的情况下，点击大于0的任意一个按钮之后的效果如下：）
2. CSS:
1.css（）设置标签css样式
1. 获取样式值 ：css（“样式名”）
2. 设置单个样式 ：css（“样式名”，“样式值”）
3. 设置多个样式值 ： css（{“样式名”：“样式值”，“样式名”，“样式值”}）
2. 位置
1. offset（）：相对整个大容器的相对位置
2. positon（）：相对父容器的相对位置
3. scrollXX :scrollTop（）：滚动条到顶部距离
3. 尺寸
内容尺寸：
1. width（）：容器宽
2. height（）：容器高
内部尺寸：
3. innerWidth（）：width + padding
4. innerHeight（）：height + padding
外部尺寸：（注意：参数为 true ，再加上 margin）
5. outerWidth （）：width + padding + border
6. outerHeight（）：height + padding + border
感兴趣的可以私信关注我，后面的内容会更精彩哟~~
643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
