forked from theluyuan/Web
398 lines
7.5 KiB
Markdown
398 lines
7.5 KiB
Markdown
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 文本主要内容
|
|||
|
|
|
|||
|
|
- 样式和类操作
|
|||
|
|
|
|||
|
|
- jQuery 动画
|
|||
|
|
|
|||
|
|
- 节点操作
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 样式操作和类操作
|
|||
|
|
|
|||
|
|
作用：设置或获取元素的样式属性值。
|
|||
|
|
|
|||
|
|
### 样式操作
|
|||
|
|
|
|||
|
|
**1、设置样式：**
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
|
|||
|
|
//设置单个样式： css(属性，值);
|
|||
|
|
$("div").css("background-color","red");
|
|||
|
|
|
|||
|
|
//设置多个样式： css(json);
|
|||
|
|
$("div").css({"width":100,"height":100,"background-color":"pink"});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
**2、获取样式：**
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
//获取样式：css(属性);
|
|||
|
|
//获取的时候如果有很多个，那么获取jquery对象中的第一个
|
|||
|
|
alert($("div").css("width"));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
举例如下：
|
|||
|
|
|
|||
|
|
20180205_1315.png
|
|||
|
|
|
|||
|
|
### 类操作（className）
|
|||
|
|
|
|||
|
|
**1、添加类样式：**
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
$(selector).addClass("liItem"); //为指定元素添加类className
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
注意：此处类名不带点，所有类操作的方法类名都不带点。
|
|||
|
|
|
|||
|
|
|
|||
|
|
**2、移除类样式：**
|
|||
|
|
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
$(selector).removeClass("liItem"); //为指定元素移除类 className
|
|||
|
|
$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**3、判断有没有类样式：**
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
$(selector).hasClass("liItem"); //判断指定元素是否包含类 className
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
此时，会返回true或false。jquery对象中，只要有一个带有指定类名的就是true，所有都不带才是false。
|
|||
|
|
|
|||
|
|
举例：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head lang="en">
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title></title>
|
|||
|
|
<style>
|
|||
|
|
div {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
background-color: pink;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.current {
|
|||
|
|
background-color: red;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script src="jquery-1.11.1.js"></script>
|
|||
|
|
<script>
|
|||
|
|
$(function () {
|
|||
|
|
$("button").eq(0).click(function () {
|
|||
|
|
//添加类
|
|||
|
|
$("div").addClass("current");
|
|||
|
|
//判断类
|
|||
|
|
alert($("div").hasClass("current"));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$("button").eq(1).click(function () {
|
|||
|
|
//删除类
|
|||
|
|
$("div").removeClass("current");
|
|||
|
|
//判断类
|
|||
|
|
alert($("div").hasClass("current"));
|
|||
|
|
});
|
|||
|
|
//alert($("div").hasClass("current"));//jquery对象中只要有一个带有类名的就是true，所有都不带才是false。
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<button>添加</button>
|
|||
|
|
<button>删除</button>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div class="current"></div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**4、切换类样式：**
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
$(selector).toggleClass(“liItem”); //为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
解释：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
|
|||
|
|
|
|||
|
|
如果采用采用正常的思路实现上面这句话，代码是：
|
|||
|
|
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
if($("div").hasClass("current")){
|
|||
|
|
//如果有类名，那么删除
|
|||
|
|
$("div").removeClass("current")
|
|||
|
|
}else{
|
|||
|
|
//如果没有类名，那么添加
|
|||
|
|
$("div").addClass("current")
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
现在有了toggleClass()方法，一行代码即可实现。
|
|||
|
|
|
|||
|
|
举例：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head lang="en">
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title></title>
|
|||
|
|
<style>
|
|||
|
|
div {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
background-color: green;
|
|||
|
|
}
|
|||
|
|
.current {
|
|||
|
|
background-color: red;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script src="jquery-1.11.1.js"></script>
|
|||
|
|
<script>
|
|||
|
|
$(function () {
|
|||
|
|
$("button").click(function () {
|
|||
|
|
//需求：点击按钮 ，切换背景
|
|||
|
|
//切换类（toggleCLass）
|
|||
|
|
$("div").toggleClass("current");
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<button>切换背景</button>
|
|||
|
|
<div></div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
实现的效果：
|
|||
|
|
|
|||
|
|
20180205_1330.gif
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 样式操作和类操作的比较
|
|||
|
|
|
|||
|
|
- 操作的样式非常少，那么可以通过`.css()`实现。
|
|||
|
|
|
|||
|
|
- 操作的样式很多，建议通过使用类 class 的方式来操作。
|
|||
|
|
|
|||
|
|
- 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。
|
|||
|
|
|
|||
|
|
|
|||
|
|
**举例**：addClass+removeClass
|
|||
|
|
|
|||
|
|
代码实现：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!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.11.1.js"></script>
|
|||
|
|
<script>
|
|||
|
|
jQuery(window).ready(function () {
|
|||
|
|
//需求:鼠标放到那个li上，让该li添加active类，下面的对应的.main的div添加selected
|
|||
|
|
$(".tab>li").mouseenter(function () {
|
|||
|
|
//不用判断，当前的li添加active类，其他的删除active类
|
|||
|
|
$(this).addClass("active").siblings("li").removeClass("active");
|
|||
|
|
//对应索引值的div添加selected类，其他的删除selected类
|
|||
|
|
//【重要】根据tab的索引值获取下方图片div的索引值
|
|||
|
|
$(".products>div").eq($(this).index()).addClass("selected").siblings("div").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="images/guojidapai.jpg" alt=""/></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="main">
|
|||
|
|
<a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="main">
|
|||
|
|
<a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="main">
|
|||
|
|
<a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
上方代码中，我们注意，tab栏和下方图片栏的index值，一一对应，这里用得很巧妙。
|
|||
|
|
|
|||
|
|
效果：
|
|||
|
|
|
|||
|
|
20180205_1345.gif
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|