样式操作和类操作
作用:设置或获取元素的样式属性值。
样式操作
1、设置样式:
//设置单个样式: css(属性,值);
$("div").css("background-color","red");
//设置多个样式: css(json);
$("div").css({"width":100,"height":100,"background-color":"pink"});
2、获取样式:
//获取样式:css(属性);
//获取的时候如果有很多个,那么获取jquery对象中的第一个
alert($("div").css("width"));
举例如下:
类操作(className)
1、添加类样式:
$(selector).addClass("liItem"); //为指定元素添加类className
注意:此处类名不带点,所有类操作的方法类名都不带点。
2、移除类样式:
$(selector).removeClass("liItem"); //为指定元素移除类 className
$(selector).removeClass(); //不指定参数,表示移除被选中元素的所有类
3、判断有没有类样式:
$(selector).hasClass("liItem"); //判断指定元素是否包含类 className
此时,会返回true或false。jquery对象中,只要有一个带有指定类名的就是true,所有都不带才是false。
举例:
<!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、切换类样式:
$(selector).toggleClass(“liItem”); //为指定元素切换类 className,该元素有类则移除,没有指定类则添加。
解释:为指定元素切换类 className,该元素有类则移除,没有指定类则添加。
如果采用采用正常的思路实现上面这句话,代码是:
if($("div").hasClass("current")){
//如果有类名,那么删除
$("div").removeClass("current")
}else{
//如果没有类名,那么添加
$("div").addClass("current")
}
现在有了toggleClass()方法,一行代码即可实现。
举例:
<!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>
实现的效果:
样式操作和类操作的比较
- 操作的样式非常少,那么可以通过.css()实现。
- 操作的样式很多,建议通过使用类 class 的方式来操作。
- 如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。
举例:addClass+removeClass
代码实现:
<!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值,一一对应,这里用得很巧妙。
效果:
jQuery 的节点操作
动态创建元素
原生 js 有三种动态创建元素的方式。这里我们学一下 jQuery 动态创建元素。注意,创建的是 jQuery 对象。
方式一:
var $spanNode1 = $("<span>我是一个span元素</span>"); // 返回的是 jQuery对象
此方法类似于 原生 js 中的document.createElement(“标签名”);
方式二:(推荐)
var node = $("#box").html("<li>我是li</li>");
此方法类似于 原生 js 中的innerHTML。
举例:
//方式一: $("标签") :类比于js中的document.createElement("li");
console.log($("<li class='aaa'>我是li标签</li>"));
//方式二: $("ul").html(""); :类比innerHTML属性。因为此属性,识别标签。
$("ul").html("<li>我是html方法穿件出来的li标签</li>")
添加元素
jQuery 添加元素的方法非常多,最重要的方法是append()。格式如下:
// 方式一:在$(selector)中追加$node
$(selector).append($node); //参数是 jQuery对象
// 方式二:在$(selector)中追加div元素,
$(selector).append('<div></div>'); //参数是 htmlString
作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以)。
通俗的解释:在盒子里的最末尾添加元素。
- 如果是页面中存在的元素,那调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了。
- 如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去。
举例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function () {
$("button").click(function () {
//创建一个新的jquery对象li
var jqNewLi = $("<li>我是jquery创建出来的li。用的是append方法添加</li>");
//append(); 在盒子里的最末尾添加与严肃
$("ul").append(jqNewLi); //把新创建的 li 塞进已知的 ul 中
//jqNewLi.appendTo($("ul")); //方式二:把新创建的li塞进ul中。作用同上
})
});
</script>
</head>
<body>
<button>添加li</button>
<ul>
<li>我是土著li</li>
</ul>
</body>
</html>
效果:
其他的添加元素的方法:
方法2:
$(selector).appendTo(node);
作用:同append(),只不过是反着写的。
方法3:
$(selector).prepend(node);
作用:在元素的第一个子元素前面追加内容或节点。
方法4:
$(selector).after(node);
作用:在被选元素之后,作为兄弟元素插入内容或节点。
方法5:
$(selector).before(node);
作用:在被选元素之前,作为兄弟元素插入内容或节点。
清空元素
方式一:没有参数
$(selector).empty();
$(selector).html("");
解释:清空指定元素的所有子元素(光杆司令)。
方式二:
//
$(selector).remove();
解释:“自杀” 。把自己以及所有的内部元素从文档中删除掉。
复制元素
格式:
复制的新元素 = $(selector).clone();
解释:复制$(selector)这个元素。是深层复制。