jQuery——jQuery的CSS，class，属性操作及案例应用
文章目录
[*]CSS操作
[*]class操作
[*]
[*]css与class操作综合案例：tab栏
[*]属性操作
[*]
[*]prop方法
[*]
[*]prop表格全选案例
[*]案例：美女画廊
CSS操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>张欣欣</li>
<li>周二珂</li>
<li>冯招招</li>
<li>郑啦啦</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//css(name, value)
//修改单个样式
//name:样式名 value:样式值
$("li")
.css("backgroundColor", "pink")
.css("color", "red")
.css("fontSize", "32px");
//css(obj)
//修改多个样式
$("li").css({
backgroundColor:"pink",
color: "red",
fontSize:"32px",
border: "1px solid black"
});
//获取样式
//css(name)
//name:想要获取的样式
$("li").eq(0).css("fontSize", "20px");
$("li").eq(1).css("fontSize", "21px");
$("li").eq(2).css("fontSize", "22px");
$("li").eq(3).css("fontSize", "23px");
//A:20b:21c:22 d:23e:16f:
//隐式迭代：
// 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
// 获取的时候：只会返回第一个元素对应的值。
console.log($("li").css("fontSize"));//显示20px
});
</script>
</body>
</html>
class操作 添加，移除类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li.basic {
background-color: pink;
font-size: 32px;
color: red;
}
.bigger {
font-size: 40px;
}
</style>
</head>
<body>
<input type="button" value="添加basic类" >
<input type="button" value="添加bigger类">
<input type="button" value="移除bigger类">
<input type="button" value="判断bigger类">
<input type="button" value="切换类">
<ul>
<li class="aa bb cc dd">1</li>
<li class="aa bb cc dd">2</li>
<li class="aa bb cc dd">3</li>
<li class="aa bb cc dd">4</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
// 添加一个类
$("li").addClass("basic");
});
$("input").eq(1).click(function () {
$("li").addClass("bigger");
});
$("input").eq(2).click(function () {
//移除一个类
$("li").removeClass("bigger");
});
//判断类
$("input").eq(3).click(function () {
//移除一个类
console.log($("li").hasClass("bigger"));;
});
$("input").eq(4).click(function () {
//判断li有没有basic类，如果有，就移除他，如果没有，添加他
//toggle
$("li").toggleClass("basic");
});
});
</script>
</body>
</html>
css与class操作综合案例：tab栏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$(".tab-item").mouseenter(function () {
//两件事件
$(this).addClass("active").siblings().removeClass("active");
// 当前索引
var idx = $(this).index();
$(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/>第一张图片</a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/>第二张图片</a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/>第三张图片</a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/>第四张图片</a>
</div>
</div>
</div>
</body>
</html>
属性操作 知识点用法都在注释里
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--样式：在style里面写的，用css来操作。-->
<!--属性：在里面里面写的，用attr方法操作。-->
<img src="04.gif" alt="突破了" title="对对对">
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//用法和css一样
//设置单个属性
attr(name, value)
$("img").attr("alt", "图破了");
$("img").attr("title", "错错错错");
//设置多个属性
$("img").attr({
alt:"图破了",
title:"错错错",
aa:"bb"
})
console.log($("img").attr("alt"));
});
</script>
</body>
</html>
prop方法
对于布尔类型的属性，不要attr方法，应该用prop方法
prop用法跟attr方法一样。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="选中">
<input type="button" value="不选中">
<input type="checkbox" id="ck">
<script src="jquery-1.12.4.js"></script>
<script>
//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
$(function () {
$("input").eq(0).click(function () {
$("#ck").prop("checked", true);
});
$("input").eq(1).click(function () {
$("#ck").prop("checked", false);
});
});
</script>
</body>
</html>
prop表格全选案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>杨菜鸡</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>杨菜鸡</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧狮子头</td>
<td>杨菜鸡</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>美式肥牛</td>
<td>杨菜鸡</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#j_cbAll").click(function () {
//修改下面的哪些checkbox
$("#j_tb input").prop("checked", $(this).prop("checked"));
});
$("#j_tb input").click(function () {
if($("#j_tb input:checked").length==$("#j_tb input").length){
$("#j_cbAll").prop("checked", true)
}else {
$("#j_cbAll").prop("checked", false)
}
});
});
</script>
</body>
</html>
案例：美女画廊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美女画廊</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//1. 给所有的a注册点击事件
$("#imagegallery a").click(function () {
var href = $(this).attr("href");
$("#image").attr("src", href);
var title = $(this).attr("title");
$("#des").text(title);
return false;
});
});
</script>
</head>
<body>
<h2>
美女画廊
</h2>
<ul id="imagegallery">
<li><a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100" alt="美女1"/>
</a></li>
<li><a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100" alt="美女2"/>
</a></li>
<li><a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100" alt="美女3"/>
</a></li>
<li><a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100" alt="美女4"/>
</a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px"/>
<p id="des">选择一个图片</p>
</body>
</html>
页:
[1]