一 样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.divItem{
background: #000;
color: #ffffff;
}
.divItem1{
background: red;
color: black;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
/**
* 给所有的li元素添加样式
* 给选定的元素添加类样式，注意：样式名字没有 点.
* */
$("li").addClass("divItem");
/**
* 给指定的元素删除某种样式
* 有参数移除指定样式，没有参数移除所有样式
* */
$("li").eq(2).removeClass("divItem");
/**
*切换
* */
$("button:first").click(function () {
$("li").eq(1).toggleClass("divItem1");
});
/**
* 判断有没有样式
* */
$("button:last").click(function () {
var st=$("li").eq(0).hasClass("divItem");
//获取返回值类型，并输出
// alert(st);
if (st == true){
$("li").eq(0).removeClass("divItem");
}else {
$("li").eq(0).addClass("divItem1")
}
});
});
</script>
</head>
<body>
<button>切换</button>
<button>判断</button>
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
<li>666666</li>
<li>777777</li>
<li>888888</li>
</ul>
</body>
</html>
总结
添加样式
$("li").addClass("divItem");
移除样式
$("li").eq(2).removeClass("divItem");
判断有无样式
$("li").eq(0).hasClass("divItem"); 返回值为布尔类型
二 tab切换栏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
border: 0px;
list-style: none;
}
.wrapper{
width: 1000px;
height: 475px;
margin: 100px auto ;
}
.tab{
border: 1px solid #dddddd;
height: 36px;
width: 320px;
border-bottom: 0px;
}
.wrapper li{
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top:4px solid #ffffff;
position: relative;
}
.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 type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$(".tab li").mouseenter(function () {
//给当前元素添加active这个样式
//给当前这个元素的所有兄弟元素移除active这个样式 siblings
$(this).addClass("active").siblings().removeClass("active");
//让下面的div内容，根据上面tab栏菜单展示相应的内容
//index（）获取当前元素序号
var index=$(this).index();
$(".products div").eq(index).addClass("selected").siblings().removeClass("selected");
}) ;
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li>国际大牌</li>
<li>国妆名牌</li>
<li>清洁用品</li>
<li>男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="#"></a>
</div>
<div class="main">
<a href="#"></a>
</div>
<div class="main">
<a href="#"></a>
</div>
<div class="main">
<a href="#"></a>
</div>
</div>
</div>
</body>
</html>
总结
1 样式书写
- div布局
- 导航栏，内容书写
- 清空样式
- div大小定位
- 导航栏边框设置，大小，颜色，边框宽度，去掉下边框
- 导航栏样式设置，左浮动，大小，文字行高，文字位置，光标样式，上边距以及颜色，定位
- 设置内容div的大小，边框宽度以及颜色
- 设置子内容div属性为左浮动，且块级不显示
- 设置主内容页属性为块级显示（元素前后会带有换行符）
2 jQuery实现效果
$(function () {
$(".tab li").mouseenter(function () {
//给当前元素添加active这个样式
//给当前这个元素的所有兄弟元素移除active这个样式 siblings
$(this).addClass("active").siblings().removeClass("active");
//让下面的div内容，根据上面tab栏菜单展示相应的内容
//index（）获取当前元素序号
var index=$(this).index();
$(".products div").eq(index).addClass("selected").siblings().removeClass("selected");
}) ;
});
三 常用DOM操作（属性和值的内容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
background: gray;
color: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
//设置属性
$("input[type='button']").eq(0).click(function () {
$(this).attr("title","动态设置属性");
});
//获取属性
$("input[type='button']").eq(1).click(function () {
var st=$("input[type='button']").eq(0).attr("title");
alert(st);
});
//删除属性
$("input[type='button']").eq(2).click(function () {
$("input[type='button']").eq(0).removeAttr("title");
});
//设置值
$("input[type='button']").eq(3).click(function () {
$("#txt").val("动态设置的值");
});
//获取值
$("input[type='button']").eq(4).click(function () {
var txt1=$("#txt").val();
alert(txt1);
});
//设置html
$("input[type='button']").eq(5).click(function () {
//$("div").html("我是html内容");
$("div").html("<p>我是p元素</p>");
});
//获取html
$("input[type='button']").eq(6).click(function () {
alert($("div").html());
});
//设置文本内容
$("input[type='button']").eq(7).click(function () {
$("div").text("动态创建的文本内容");
});
//获取文本内容
$("input[type='button']").eq(8).click(function () {
alert($("div").text());
});
});
</script>
</head>
<body>
<input type="button" value="设置属性">
<input type="button" value="获取属性">
<input type="button" value="删除属性">
<input type="button" value="设置值">
<input type="button" value="获取值">
<input type="button" value="设置html">
<input type="button" value="获取html">
<input type="button" value="设置文本内容">
<input type="button" value="获取文本内容">
<div>
<input type="text" id="txt">
</div>
</body>
</html>
总结
设置属性： $(this).attr("title","动态设置属性");
获取属性：var st=$("input[type='button']").eq(0).attr("title");
删除属性： $("input[type='button']").eq(0).removeAttr("title");
设置值：$("#txt").val("动态设置的值");
获取值：var txt1=$("#txt").val();
设置html： $("div").html("<p>我是p元素</p>");
获取html：alert($("div").html());
设置文本内容：$("div").text("动态创建的文本内容");
获取文本内容：alert($("div").text());
四 节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("button").eq(0).click(function () {
//追加节点
$("div").append("<p>我是动态创建的p元素</p>");
});
//把前面这个元素追加给$("div")元素
$("button").eq(1).click(function () {
$("<p>我是动态创建的p元素</p>").appendTo($("div"));
});
$("button").eq(2).click(function () {
//把前面这个元素在所有子元素的前面添加一个子元素
$("div").prepend("<p>我是动态prepend创建的p元素</p>");
});
$("button").eq(3).click(function () {
//把前面这个元素添加给后面这个$("div")元素的所有子元素的前面
$("<p>我是动态prepend创建的p元素</p>").prependTo($("div"));
});
$("button").eq(4).click(function () {
//往div的后面添加元素，他们是兄弟关系
$("div").after("<p>我是div后面的p元素</p>");
});
$("button").eq(5).click(function () {
//往div前面添加元素，他们是兄弟关系
$("div").before("<p>我是div前面的p元素</p>");
});
$("button").eq(6).click(function () {
//把前面的元素放到后面div元素的前面，他们是兄弟节点关系
$("<p>我在哪？</p>").insertBefore($("div"));
});
$("button").eq(7).click(function () {
//把前面的元素放到后面div元素的后面，他们是兄弟节点关系
$("<p>我在哪？</p>").insertAfter($("div"));
});
$("button").eq(8).click(function () {
//删除节点
//$("div").remove();
$(this).remove();//自杀
});
$("button").eq(9).click(function () {
//清空节点元素
// $("div").html("");清空子元素 推荐使用方法
$("div").empty();
});
$("button").eq(10).click(function () {
//复制
//参数如果为true的话，那么之前的时间也会复制一份
$("div").append($("p").clone());
});
$("button").eq(11).click(function () {
//包裹元素
$("span").wrap($("div"));
});
$("button").eq(12).click(function () {
//包裹所有节点
$("span").wrapAll($("div"));
});
$("button").eq(13).click(function () {
//替换节点
$("span").replaceWith("#d");
});
});
</script>
</head>
<body>
<button>append 追加</button>
<button>appendTo 追加</button>
<button>prepend 往前面添加节点</button>
<button>prependTo 往前面添加节点</button>
<button>after 往后面添加节点</button>
<button>before 往前面添加节点</button>
<button>insertBefore</button>
<button>insertAfter</button>
<br>
<br>
<button>remove 删除选中元素</button>
<button>empty 清空子元素</button>
<button>clone 复制节点</button>
<button>warp 单个包裹</button>
<button>warpAll 所有包裹在一个node中</button>
<button>replaceWidth 替换</button>
<div>
<h1>标题标题</h1>
<h1>标题1标题</h1>
</div>
<p>我是外面的p元素，不是冬天添加的</p>
<span>小小小span
<h2>小小span</h2>
</span>
<div id="d">
<h1>replaceWidth替换</h1>
</div>
</body>
</html>
append追加节点：
$("div").append("<p>我是动态创建的p元素</p>");
appendTo把前面这个元素追加给$("div")元素：
$("<p>我是动态创建的p元素</p>").appendTo($("div"));
prepend把前面这个元素在所有子元素的前面添加一个子元素:
$("div").prepend("<p>我是动态prepend创建的p元素</p>");
prependTo把前面这个元素添加给后面这个$("div")元素的所有子元素的前面
$("<p>我是动态prepend创建的p元素</p>").prependTo($("div"));
after往div的后面添加元素，他们是兄弟关系
$("div").after("<p>我是div后面的p元素</p>");
before往div前面添加元素，他们是兄弟关系
$("div").before("<p>我是div前面的p元素</p>");
insertBefore把前面的元素放到后面div元素的前面，他们是兄弟节点关系
$("<p>我在哪？</p>").insertBefore($("div"));
insertBefore把前面的元素放到后面div元素的后面，他们是兄弟节点关系
$("<p>我在哪？</p>").insertAfter($("div"));
remove删除节点
//$("div").remove();
$(this).remove();//自杀
empty清空节点元素
// $("div").html("");清空子元素 推荐使用方法
$("div").empty();
clone复制
//参数如果为true的话，那么之前的时间也会复制一份
$("div").append($("p").clone());
wrap包裹元素
$("span").wrap($("div"));
wrapAll包裹所有节点
$("span").wrapAll($("div"));
replaceWith替换节点
$("span").replaceWith("#d");
