一、jQuery实例对象API - CSS模块
1、操作元素style样式
css("color") 根据样式名得到样式值
css("color","red") 设置一个样式
css({"color":"red","background-color":"blue" }) 设置多个样式
注意： 1) 读取的属性是浏览器计算后的属性。
2) 添加的属性是在行内style中添加。
3) 设置属性时，可以加单位也可以不加。
css({"width":"12"}) 可以不加单位
css({"width":"12px"}) 也可以加单位
2、操作元素坐标
offset() 读/写元素当前坐标(原点是页面左上角)
offset() 获取元素相对于页面左上角的坐标。
返回一个json对象, {top: 200, left: 0}
offset({top: 200, left: 0})
设置元素相对于页面左上角的坐标。
原理：会给元素添加一个相对定位，然后计算距离设置top、left。
【注意:最终设置的top、left不等于设置的坐标】
position() 读当前元素坐标(原点是父元素左上角)
获取定位元素设置的top、left的值。
返回一个json对象, {top: 200, left: 0}
scrollTop([val])
scrollLeft([val]) 读/写元素/页面滚动条的坐标
3、操作元素大小
height([val|fn])
width([val|fn]) 读取或设置内容区的大小
innerHeight()
innerWidth() 读取或设置内容区+内边距的大小
outerHeight([soptions])
outerWidth([options])
读取或设置内容区+内边距+边框的大小
注意: 设置元素大小的时候，浏览器会自动计算width、height的值。
通过设置行内样式的width、height来设置
3.1 操作CSS样式
//设置单个样式
$("span:eq(0)").css("color","red");
//设置多个样式
$("span:eq(1)").css({"color":"blue","background-color":"yellow"});
//读取元素样式
$(".b").css('color');
3.2 操作元素位置
1）offset( )
>>>>>> 读取元素相对于页面左上角的坐标
<body>
<div style="margin:20px;width:100px;height:100px;background-color:rgb(148, 120, 120);"></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
var json=$("div").offset()
console.log(json);
console.log(json.top,json.left)
</script>
>>>>>> 设置元素相对于页面左上角的坐标
<body>
<div style="margin:20px;width:100px;height:100px;background-color:rgb(148, 120, 120);"></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$("div").offset({"top":20,"left":20})
</script>
2）position( )
>>>>>> 读取绝对定位元素设置的top、left的值
<style>
.box{
width:500px;
height:500px;
background-color: red;
position: relative;
}
.inner{
width:100px;
height:100px;
background-color: blue;
position: absolute;
top:10px;
}
</style>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
console.log($(".inner").position())
</script>
3）scrollTop( )、scrollLeft( )
>>>>>> 获取滚动条滚动的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.btn1,.btn2{
position: fixed;
margin-top:20px;
}
.btn2{
position: fixed;
margin-top:20px;
left:200px;
}
</style>
<body>
<button class="btn1">获取box滚动条滚动的距离</button>
<button class="btn2">获取body滚动条滚动的距离</button>
<div class="box" style="width:300px;height:300px;background-color:red;overflow-y: auto; margin-bottom: 2000px;">
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//读取box滚动条滚动的距离
$(".btn1").click(function(){
console.log($(".box").scrollTop())
})
//读取body滚动条滚动的距离
$(".btn2").click(function(){
//兼容IE、谷歌
//在IE中滚动条是加在body上的
//在谷歌上滚动条是加载html上的
console.log($("html").scrollTop()+$("body").scrollTop())
})
</script>
</html>
>>>>>> 设置滚动条滚动的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.btn1,.btn2{
position: fixed;
margin-top:20px;
}
.btn2{
position: fixed;
margin-top:20px;
left:200px;
}
</style>
<body>
<button class="btn1">设置box滚动条滚动的距离</button>
<button class="btn2">设置body滚动条滚动的距离</button>
<div class="box" style="width:300px;height:300px;background-color:red;overflow-y: auto; margin-bottom: 2000px;">
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
获取box滚动条滚获取box滚动条滚动的距离动的距离获取box滚动条滚动的距离获取box滚动条滚动的距离
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//设置box滚动条滚动的距离
$(".btn1").click(function(){
$(".box").scrollTop(50)
})
//设置body滚动条滚动的距离
$(".btn2").click(function(){
//兼容IE、谷歌
//在IE中滚动条是加在body上的
//在谷歌上滚动条是加载html上的
$("html,body").scrollTop(100)
})
</script>
</html>
>>>>>> 案例：回到顶部（瞬时回到顶部）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top{
width:80px;
height:80px;
background-color: red;
color:rgba(0,0,0,0.5);
border-radius: 10%;
font-size: 30px;
font-weight: bolder;
text-align: center;
line-height: 40px;
padding:10px;
position: fixed;
top:800px;
left:1900px;
}
</style>
</head>
<body>
----------------
<div style="margin-bottom:2000px;"></div>
---------------
<div class="top">回到顶部</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
var now=0;
$(".top").click(function(){
//顺时滚动到顶部
$("body,html").scrollTop(0);
})
</script>
</html>
>>>>>> 案例：回到顶部（动画回到顶部）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top{
width:80px;
height:80px;
background-color: red;
color:rgba(0,0,0,0.5);
border-radius: 10%;
font-size: 30px;
font-weight: bolder;
text-align: center;
line-height: 40px;
padding:10px;
position: fixed;
top:800px;
left:1900px;
}
</style>
</head>
<body>
----------------
<div style="margin-bottom:2000px;"></div>
---------------
<div class="top">回到顶部</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
var now=0;
$(".top").click(function(){
//顺时滚动到顶部
// $("body,html").scrollTop(0);
//使用定时器来完成动画滚动
var id=setInterval(function(){
now=$("body,html").scrollTop()-100;
$("body,html").scrollTop(now);
if(now<0){
clearInterval(id);
}
},10);
})
</script>
</html>
3.3 操作元素大小
1）读取元素的大小
<style>
div{
width:100px;
height:100px;
background-color: red;
padding:10px;
border:5px solid red;
margin:10px;
}
</style>
<body>
<div></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
//读取内容的大小
console.log( $("div").width() , $("div").height())
//读取内容区+内边距的大小
console.log( $("div").innerWidth() , $("div").innerHeight())
//读取内容去区+内边距+边框的大小
console.log( $("div").outerWidth() , $("div").outerHeight())
</script>
2）设置元素的大小
>>>>>> 设置内容区的大小
<style>
div{
width:100px;
height:100px;
background-color: red;
padding:10px;
border:5px solid red;
margin:10px;
}
</style>
<body>
<div></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
//设置内容的大小
$("div").width(200) ;
$("div").height(200);
</script>
>>>>>> 设置内容区+内边距的大小
<style>
div{
width:100px;
height:100px;
background-color: red;
padding:10px;
border:5px solid red;
margin:10px;
}
</style>
<body>
<div></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
//设置内容区+内边距的大小=300
//jq会自动计算width、height的值。使内容区+内边距的大小=300
$("div").innerWidth(300);
$("div").innerHeight(300);
</script>
>>>>>> 设置内容区+内边距+边框的大小
<style>
div{
width:100px;
height:100px;
background-color: red;
padding:10px;
border:5px solid red;
margin:10px;
}
</style>
<body>
<div></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
//读取内容去区+内边距+边框的大小
$("div").outerWidth(300) ;
$("div").outerHeight(300)
</script>
二、jQuery实例对象API - 元素属性模块
2.1 操作元素属性
1、attr操作属性
attr() 读取或设置元素属性
removeAttr(name) 删除元素的属性
$("div").attr("name") 读取匹配到的第一个元素的属性
$("div").attr("name","tt") 设置元素的属性
$("div").attr({src:"./1.jpg",alt:"123"}) 设置元素的多个属性
$("div").removeAttr("name")
+++ prop操作属性
prop() 读取或设置元素属性
removeProp(name) 删除元素的属性
$(":checkbox").prop("checked")
$(":checkbox").prop("checked",true)
$(":checkbox").removeProp("checked")
+++ 注意: attr与prop的区别
1) attr与prop的使用方式与作用相同。
2) attr设置的属性在标签上显示。prop设置的属性不在标签上显示。
3) attr可用于操作属性值为布尔类型的。
attr读取checked属性的默认值时，会返回checked/unchecked/undefined
而prop只会返回true/false。
1）attr 添加属性
<body>
<div>111</div>
<div>222</div>
<div>333</div>
</body>
<script>
//给第一个div添加一个属性
$("div:first").attr("tt","123");
//给第一个div添加多个属性
$("div:first").attr({"t1":"123","t2":"321"});
//读取第一个div的t1属性
console.log( $("div:first").attr("t1"))
//删除第一个div的t1属性
$("div:first").removeAttr("t1")
</script>
2）prop 添加属性
<body>
<div>111</div>
<div>222</div>
<div>333</div>
</body>
<script>
//给第一个div添加一个属性
$("div:first").prop("tt","123");
//给第一个div添加多个属性
$("div:first").prop({"t1":"123","t2":"321"});
//读取第一个div的t1属性
console.log( $("div:first").prop("t1"))
//删除第一个div的t1属性
$("div:first").removeProp("t1")
</script>
3）prop与attr的区别
1) attr与prop的使用方式与作用相同。
2) attr添加的属性在标签上显示。prop添加的属性不在标签上显示。
3) prop可用于操作属性值为布尔类型的。
attr读取checked属性的默认值时，会返回checked/unchecked/undefined
而prop只会返回true/false。
注意：在使用中如果操作布尔类型的属性，建议使用prop。
>>>>>> attr设置的属性不在标签上显示，prop设置的属性在标签上显示
<body>
<input type="checkbox" > 男
</body>
<script>
$(":checkbox").attr("t1","123")
console.log($(":checkbox").attr("t1"))
$(":checkbox").prop("t2","123")
console.log($(":checkbox").prop("t2"))
</script>
>>>>>> attr可用于操作属性值为布尔类型的
<body>
<input type="checkbox" checked="true" > 男
</body>
<script>
$(":checkbox").attr("checked")
console.log($(":checkbox").attr("checked")) //checked/unchecked/undefined
$(":checkbox").prop("checked")
console.log($(":checkbox").prop("checked")) //true/false
</script>
2.2 操作class属性
addClass(class|fn) 添加class属性
removeClass([class|fn]) 删除class属性或删除指定的class属性
toggleClass(class|fn) 存在就删除，不存在就添加class属性
$("div").addClass("abc")
$("div").addClass("abc cfg") 添加一个或多个class
$("div").removeClass("abc")
$("div").removeClass("abc cfg") 删除一个或多个class
$("div").toggleClass("abc cfg") 有则删除，无则添加
注意：
1) 使用attr设置class属性时，会覆盖。 使用addClass设置class属性，不会覆盖。
2) 处理class属性时,以空格分割，可当作多个class处理。
1）操作class属性
>>>>>> 添加class
/** 1、添加class */
//添加一个class
$("div:first").addClass("ab")
//添加多个class
$("div:first").addClass("ab bc")
//参数为函数
$("div:first").addClass(function(){
return "ab cd"
})
>>>>>> 删除class
/** 2、删除class */
//删除一个class
$("div:first").removeClass("ab")
//删除多个class
$("div:first").removeClass("ab bc")
//参数为函数
$("div:first").removeClass(function(){
return "bc"
})
//删除所有的class
$("div:first").removeClass()
>>>>>> 添加或删除class
/** 3、添加或删除class */
//添加或删除一个class
$("div:first").toggleClass("ab")
//加或删除多个个class
$("div:first").toggleClass("ab bc")
//参数为函数
$("div:first").toggleClass(function(){
return "bc"
})
3）注意事项
>>>>>> 使用attr设置的class属性会覆盖原有class，使用addClass设置的属性不会覆盖原有class
1）使用attr设置的class属性会覆盖原有的class属性
<body>
<div>123</div>
<div>123</div>
<div>123</div>
</body>
<script>
$("div:first").attr("class","ab")
$("div:first").attr("class","abc")
</script>
2）使用addClass设置的class属性不会覆盖原有的class属性
<body>
<div>123</div>
<div>123</div>
<div>123</div>
</body>
<script>
$("div:first").addClass("ab")
$("div:first").addClass("abc");
</script>
>>>>>> 处理class属性时，class以空格分隔，则会按照多个class处理
<body>
<div>123</div>
<div>123</div>
<div>123</div>
</body>
<script>
//新增ab cd 两个class属性
$("div:first").addClass("ab cd ef")
//删除ab cd两个class属性
$("div:first").removeClass("ab cd")
</script>
三、jQuery实例对象API - html代码/文本/值
html([val|fn]) 读取或设置匹配的第一个元素的内部html代码
text([val|fn]) 读取或设置匹配的第一个元素的内部文本代码
val([val|fn|arr]) 读取或设置value的属性值
3.1 html代码/文本/值操作
1）读取或设置内部html代码
<body>
<div>123<span>abc</span></div>
</body>
<script>
//1、读取值
var str=$("div:first").html()
console.log(str)
//2、设置值
$("div:first").html("<span style='color:red'>abccba</span>")
$("div:first").html(function (){
return "<span style='color:red'>abccba</span>"
});
</script>
2）读取或设置内部文本
<body>
<div>123<span>abc</span></div>
</body>
<script>
//1、读取值
var str=$("div:first").text()
console.log(str)
//2、设置值
$("div:first").text("<span style='color:red'>abccba</span>")
$("div:first").text(function (){
return "<span style='color:red'>abccba</span>"
});
</script>
3）读取或设置表单标签的value值
//1、读取值
console.log( $(":input").val() );
//2、设置值
//方式一
$(":input").val("1234")
//方式二
$(":input").val([1,2,3,4])
//方式三
$(":input").val(function(){
return "123"
})
3.2 案例
>>>>>> 隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style>
table{
margin:0 auto;
width:500px;
text-align: center;
}
.line{
background-color: pink;
}
</style>
<script>
$(function(){
//方式一
// $("table>tbody>tr:nth-of-type(2n)").css('background-color','red')
//方式二
4
//方式三
$("table>tbody>tr:odd").addClass("line")
})
</script>
</head>
<body>
<table border="1">
<tr>
<td>标签</td>
<td>标签2</td>
<td>标签3</td>
<td>标签4</td>
<td>标签5</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
<td>1111</td>
</tr>
</table>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
