目录
tip：
- 我们在使用jQuery的时候千万不要把JavaScript忽略大小写的习惯带入到jQuery中来，jQuery不同于Js，要严格区分大小写。
- js适用的方法与jquery并不通用,如果非要使用，可以相互转换.
一，工具方法
-
主要方法
| $.each() | 遍历数组、对象、对象数组中的数组、 |
| $.trim() | 去除字符串两边的空格 |
| $.type(obj) | 得到数据的类型 |
| $.isArray(obj) | 判断是否是数组 |
| $.isFunction(obj) | 判断是否为函数 |
| $.parseJSON(obj) | 将JSON字符串转换为js对象 |
-
代码演示
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//编辑数组
var arr = ['a', 'b', 'c'];
//编辑对象
var obj = {
name: "小猿",
sex: "男",
age: 23
};
//jQuery遍历数组($.each)
$.each(arr, function(i, e) {
// 参数i是下标,参数e是对象
console.log(i, e); //控制台输出0 'a' 1 'b' 2 'c'
})
//$.trim的使用
console.log(" hello world ".length); //控制台输出13
console.log($.trim(" hello world ").length); //控制台输出11
//$.type的使用(相当于js中的typeof)
console.log($.type(1)) //输出number
console.log($.type("a")) //输出string
console.log($.type(arr)) //输出array
console.log($.type(obj)) //输出object
//$.isArray()的使用
console.log($.isArray(arr)) //输出true
//isFunction的使用
function a() {};
let f = a;
console.log($.isFunction(f));//输出true
</script>二，属性
-
主要属性
| attr() | 获取或设置某个标签的值 |
| removeAttr() | 删除标签的属性 |
| addClass() | 给某个标签增加class属性 |
| removeClass() | 删除某个标签的class属性 |
| val() | 获取或设置输入框的值 |
| html() | 获取或设置标签体内容（包括子标签） |
| text() | 获取或设置标签体内容（不包括子标签） |
-
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.a {
box-shadow: 0px 0px 10px blue;
}
</style>
</head>
<body>
<p title="123">hello world</p>
<input type="checkbox" name="" id="" value="" />
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//读取p标签中定义的title属性
console.log($("p").attr("title")); //输出123
//设置p标签中定义的title属性
$("p").attr("title", "456");
//移除p标签中定义的title属性
$("p").removeAttr("title");
//与attr类似的prop，prop用于Boolean类型的情况下
console.log($("input").prop("checked")); //输出复选框点击的状态
$("input").prop("checked", "true"); //将复选框设置为被点击状态(checkbox只有两种状态true,false)
//当鼠标移入的时候就给p标签增加类a
$("p").mouseover(function() {
// $(this)是指当前触发的标签
$(this).addClass("a");
})
//当鼠标移除的时候就删除p标签的类a
$("p").mouseout(function() {
// $(this) 当前触发的标签
$(this).removeClass("a");
})
// 区分jquery中的html(),text(),val()
$("p").html(); //相当于js中的innerHTML
$("p").text(); //相当于js中的textContent
$("input").val(); //相当于js中输入框的value
//三者共同点：如果括号中无值，就是获取内容，若有值就是设置值
//设置p标签的值
$("p").html("程序猿yyds");
//除了设置内容外,html还能够更换标签
console.log($("p").html("<b>good<b/>")); //得到是一个jQuery对象
</script>
</body>
</html>
使用jQuery实现全选\反选功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现表格多选</title>
</head>
<body>
<table border=".5" cellspacing="" cellpadding="">
<tr>
<th><input type="checkbox" name="" id="all" value=""
onclick="$(':checkbox').prop('checked',this.checked)" /></th>
<th>商品</th>
<th>价格</th>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<th>🍎</th>
<th>23元</th>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<th>🍊</th>
<th>15元</th>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<th>🍍</th>
<th>19元</th>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<th>🍓</th>
<th>18元</th>
</tr>
</table>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//拿到下标大于0的复选框设置点击事件
$(":checkbox:gt(0)").click(function() {
//tip：this值得是js对象,需要使用$符号进行强转
let status = this.checked; //复选框的状态
if (!status) { //若status为false
return $(":checkbox:eq(0)").prop("checked", status); //将复选框的状态全部设置为全选框的状态，并终止代码
}
//选中了
let good = true; //状态
//当复选框全部状态一致时将全选框的状态也试着一样的
$.each($(":checkbox:gt(0)"), (a, b) => {
good = good && b.checked; //追加Boolean值
})
$(":checkbox:eq(0)").prop("checked", good); //设置全选状态
})
</script>
</body>
</html>
效果图如下：
三，CSS
1.css的样式设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="">
<p>Hello</p>
</div>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//设置p标签的单个样式
$("p").css("color");
//设置p标签的国歌样式
$("p").css({
"color": "#ff0011",
"background": "blue"
});
//设置p标签随着div标签的增大而增大
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
</script>
</body>
</html>
2.位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Hello</p>
<p>2nd Paragraph</p>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//offset()的使用
var p = $("p:last");
//获取p标签的所在位置
var offset = p.offset();
p.html("left: " + offset.left + ", top: " + offset.top); //输出结果为left: 7.997159004211426, top: 53.80681610107422
//设置p标签的位置
$("p:last").offset({
top: 10,
left: 30
});
//position()的使用
var p = $("p:first");
var position = p.position();
$("p:last").html("left: " + position.left + ", top: " + position
.top); //结果会显示 left: 7.997159004211426, top: -0.0056819915771484375
//scrollTop()和scrollLeft()的使用
// 垂直滚动条
var p = $("p:first");
//获取滚动条位置
$("p:last").text("scrollTop:" + p.scrollTop()); //结果显示为scrollTop:0
//设置滚动条位置
$(selector).scrollTop(300);
//水平滚动条
var p = $("p:first");
//获取滚动条位置
$("p:last").text("scrollLeft:" + p.scrollLeft()); //结果显示为scrollLeft:0
//设置滚动条位置
$(selector).scrollLeft(300);
</script>
</body>
</html>
3.尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>hello world</p>
<button type="button"></button>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//1.height()的使用
//获取p标签的高度
$("p").height();
//设置p标签的高度
$("p").height(20);
//每点击一次按钮增加p10像素的高度
$("button").click(function() {
$("p").height(function(n, c) {
return c + 10;
});
});
//2.width()的使用
//获取p标签的宽度
$("p").width();
//设置p标签的宽度
$("p").width(20);
//每点击一次按钮增加p10像素的宽度
$("button").click(function() {
$("p").width(function(n, c) {
return c + 10;
});
});
//3.innerHeight()的使用
var p = $("p");
$("p").text("innerHeight:" + p.innerHeight()); //输出的结果为innerHeight:20
//4.innerWidth()的使用
var p = $("p");
$("p:last").text("innerWidth:" + p.innerWidth()); //输出的结果为innerWidth:20
//5.outerHeight()的使用
var p = $("p");
$("p").text("outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(
true)); //输出的结果为outerHeight:20 OuterHeight(true):52
//6.outerWidth()的使用
var p = $("p:first");
$("p:last").text("outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(
true)); //输出的结果为outerWidth:20 OuterWidth(true):52
</script>
</body>
</html>
今天主要讲解了jquery的属性和jquery&css，下期给大家带来更多精彩哈！
62
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
