t195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作,设置一个属性
//$().css("属性","取值");
$("#btn1").click(function () {
$("li:nth-child(odd)").css("color","blue")
.css("font-weight","bold");
});
});
/*
在jQuery中,设置一个元素的css属性值,有两种方式
一种是设置一个属性,另一种是设置多个属性
语法
$().css("属性","取值");
$().css({"属性1":"取值1","属性2":"取值2",......});
*/
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input type="button" id="btn1" value="设置">
</body>
</html>
t196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作,设置多个属性
//$().css({"属性1":"取值1","属性2":"取值2",......});
$("#btn1").click(function () {
//属性名方式一,使用css属性名,引号中为css属性名书写
$("li:nth-child(even)").css({
"color":"blue",
"background-color":"silver",
"font-weight":"bold"
});
//属性名方式二,使用JavaScript属性名,没有引号,去除连接短横杠,单词首字母大写
$("li:nth-child(odd)").css({
color:"white",
backgroundColor:"gray",
fontWeight:"bold"
});
});
});
/*
在jQuery中,设置一个元素的css属性值,有两种方式
一种是设置一个属性,另一种是设置多个属性
语法
$().css("属性","取值");
$().css({"属性1":"取值1","属性2":"取值2",......});
*/
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input type="button" id="btn1" value="设置">
</body>
</html>
t197 样式操作,添加class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.select{
color: blue;
background-color: #F1F1F1;
font-weight: bold;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作,添加class
//$().addClass("类名");
$("#btn1").click(function () {
$("li:nth-child(odd)").addClass("select");
});
});
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input type="button" id="btn1" value="添加">
</body>
</html>
t198 删除class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.select{
color: blue;
background-color: silver;
font-weight: bold;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作,删除class
//$().removeClass("类名");
$("#btn1").click(function () {
$("li:nth-child(even)").addClass("select");
});
$("#btn2").click(function () {
$("li:nth-child(even)").removeClass("select");
});
});
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input type="button" id="btn1" value="添加">
<input type="button" id="btn2" value="删除">
</body>
</html>
t199 切换class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.select{
color: blue;
background-color: #F1F1F1;
font-weight: bold;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作,切换class
//$().toggleClass("类名");
$("#btn1").click(function () {
$("li:nth-child(odd)").toggleClass("select");
});
});
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input type="button" id="btn1" value="切换">
</body>
</html>
t200 元素的宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1,#box2{
display: inline-block;
width: 100px;
height: 60px;
border: 1px solid gray;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作
//元素的宽度和高度
$("#btn_get").click(function () {
var width1 = $("#box1").width();
alert("width=" + width1);
});
$("#btn_set").click(function () {
$("#box2").width(200); //不需要加单位,error 200px
});
});
/*
在jQuery中,获取和设置一个元素的宽度和高度,可以使用css()方法
实现。但是jQuery提供了更为灵活和强大的方法,方法有3组,
分别是
.width()和.height()
.innerWidth()和.innerHeight()
.outerWidth()和.outerHeight()
.width(),表示width;
.innerWidth(),表示width + padding;
.outerWidth(),表示width + padding + border;
.height(),表示height;
.innerHeight(),表示height + padding;
.outerHeight(),表示height + padding + border;
上述3组方法是根据css盒模型来划分的,但是一般情况下,常用的
只有width()和height()。
*/
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<br>
获取第1个div的宽度:<input type="button" id="btn_get" value="获取">
<br>
设置第2个div的宽度:<input type="button" id="btn_set" value="设置">
</body>
</html>
t201
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
text-align: center;
}
#box1,#box2{
display: inline-block;
height: 100px;
width: 100px;
}
#box1{
background-color: red;
}
#box2{
background-color: orange;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作
//元素的位置,offset()方法
var top = $("#box2").offset().top;
var left = $("#box2").offset().left;
var result = "box2距离顶部:" + top + "px\n"
+ "box2距离左部:" + left + "px";
console.log(result);
});
/*
在jQuery中,获取元素位置有两种方式,
一种是offset(),
另一种是position()。
offset()方法返回的是一个坐标对象,该对象有两个属性,
这两个属性返回的都是一个不带单位的数字。
*/
</script>
</head>
<body>
<div id="box1"></div><br>
<div id="box2"></div><br>
</body>
</html>
t202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#father{
position: relative;
width: 200px;
height: 200px;
background-color: orange;
}
#son{
position: absolute;
top: 20px;
left: 50px;
width: 50px;
height: 50px;
background-color: red;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作
//position()方法
var top = $("#son").position().top;
var left = $("#son").position().left;
var result = "子元素相对父元素顶部的距离是:" + top + "px\n"
+ "子元素相对父元素左部的距离是:" + left + "px";
alert(result);
});
/*
在jQuery中,我们可以使用position()方法获取或设置当前
元素相对于最近被定位的祖先元素的偏移位置。
position()方法返回一个坐标对象,该对象有两个属性,
这两个属性返回不带单位的数字。
top属性,标识获取元素相对于最近被定位的祖先元素顶部的距离。
left属性,标识获取元素相对于最近被定位的祖先元素左部的距离。
*/
</script>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
t203滚动条的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
height: 1800px;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作
//滚动条的距离,scrollTop()
$(window).scroll(function () {
var top = $(this).scrollTop();
var $div = $("<div></div>");
var str = "";
if((top % 10) == 0)
{
str = "滚动距离:" + top + "px <br>";
}
$div.html(str);
$("body").append($div);
});
});
/*
在jQuery中,可以通过scrollTop()方法获取或设置元素
相对于滚动条顶边的距离,也可以使用scrollLeft()方法
来获取或设置相对于滚动条左边的距离。
获取的是一个整数n,不带单位,表示n像素
实际开发中,一般极少用到scrollLeft方法,了解即可。
*/
</script>
</head>
<body>
</body>
</html>
t204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//内容操作
//.html() 获取内容
$("#btn1").click(function () {
var result = $("div").html();
alert(result);
});
});
/*
在jQuery中,对内容操作有以下3种方法
.html()
.text()
.val()
其中,html()和text()这两个方法用于操作一般元素,
而val方法用于操作表单元素。
$().html() ,表示获取html内容
$().html("html内容") ,表示设置html内容
html()方法和innerHTML方法的效果是一样的,
html()是jQuery的实现方式,
innerHTML是JavaScript的实现方式
*/
</script>
</head>
<body>
<div>虾米大王<strong>教程</strong></div>
<input type="button" id="btn1" value="获取">
</body>
</html>
jquery 样式操作
最新推荐文章于 2022-08-30 22:28:42 发布