jQuery的应用
目录
初识jQuery
一、jQuery能做什么
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
二、jQuery的优势
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
三、获取jQuery
进入jQuery官网：http://jquery.com
四、jQuery库文件
jQuery库分开发版和发布版
在页面中引入jQuery
五、jQuery基本语法
$(document).ready(function(){
// 开始写 jQuery 代码...
});简洁写法：
$(function(){
// 开始写 jQuery 代码...
});$(document).ready()
$(document).ready()与window.onload类似，但也有区别
|
| window.onload | $(document).ready() |
| 执行时机 |
必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行
| 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 |
| 编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
| 简化写法 | 无 | $(function(){ //执行代码 }) ; |
jQuery语法结构
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
七、addClass( )方法
语法：
jQuery 对象.addClass([样式名]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>addClass( )方法</title>
<style type="text/css">
li {
list-style: none;
line-height: 22px;
cursor: pointer;
}
.current {
background: #6cf;
font-weight: bold;
color: #fff;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
/*$(document).ready(function () {
$("li").click(function () {
$("#current").addClass("current");
});
});*/
$(function () {
$("li").click(function () {
$("#current").addClass("current");
});
});
</script>
</head>
<body>
<ul>
<li id="current">jQuery简介</li>
<li>jQuery语法</li>
<li>jQuery选择器</li>
<li>jQuery事件与动画</li>
<li>jQuery方法</li>
</ul>
</body>
</html>
八、jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
语法：
css("属性") ;
css("属性","属性值") ;
css({"属性1":"属性值1","属性2":"属性值2"...}) ;
1、返回 CSS 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<script src="../js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
alert("背景颜色 = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回第一个 p 元素的 background-color</button>
</body>
</html>
2、设置 CSS 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<script src="../js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>设置 p 元素的 background-color </button>
</body>
</html>
3、设置多个 CSS 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<script src="../js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>设置 p 元素的 background-color </button>
</body>
</html>
九、设置元素的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#hide").click(function () {
$("p").hide();
});
$("#show").click(function () {
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
案例：仿京东左侧菜单
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>仿京东左侧菜单</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
.nav-box {
width: 210px;
margin: 5px 0 0 5px;
}
.nav-top a {
display: block;
height: 45px;
font-size: 16px;
line-height: 45px;
padding: 0 10px;
background: #B1191A;
color: #fff;
}
ul {
background: #c81623;
list-style: none;
padding-bottom: 1px;
}
ul li {
height: 30px;
line-height: 30px;
font-size: 14px;
color: #fff;
position: relative;
padding-left: 5px;
}
ul li a {
color: #fff;
}
ul li div {
display: none;
position: absolute;
left: 211px;
top: 0px;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("li").mouseover(function () {
$(this).css({"background": "orange"});//当前li 背景颜色为橙色
$(this).children("div").show();//让相应二级内容显示
}).mouseout(function () {
$(this).css({"background": "#c81623"});
$(this).children("div").hide();
});
});
</script>
</head>
<body>
<div class="nav-box">
<div class="nav-top"><a href="">全部商品分类</a></div>
<ul>
<li>
<a href="">家用电器</a>
<div><img src="images/erji.jpg"/></div>
</li>
<li>
<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a>
<div><img src="images/erji1.jpg"/></div>
</li>
<li>
<a href="">电脑</a>、<a href="">办公</a>
<div><img src="images/erji2.jpg"/></div>
</li>
<li>
<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a>
<div><img src="images/erji3.jpg"/></div>
</li>
<li>
<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a>
<div><img src="images/erji4.jpg"/></div>
</li>
</ul>
</div>
</body>
</html>
案例二、制作当当顶部导航
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>当当网我的订单页</title>
<link type="text/css" rel="stylesheet" href="css/dangdang.css">
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("#menu").mouseover(function () {
$(this).css("border", "1px solid red");
$("#menu-ul").show();
}).mouseout(function () {
$(this).css("border", "1px solid #fff");
$("#menu-ul").hide();
});
});
</script>
</head>
<body>
<div id="menu" class="pos">
<a href="#">我的当当</a>
<ul id="menu-ul" style="display:none;">
<li><a href="#">我的订单</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的礼品卡</a></li>
<li><a href="#">我的积分</a></li>
<li><a href="#">我的余额</a></li>
</ul>
</div>
</body>
</html>
十、jQuery代码风格
“$”等同于“ jQuery ”
链式操作
对一个对象进行多重操作，并将操作结果返回给该对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>问答特效</title>
<style type="text/css">
h2{padding: 5px;}
p{display: none;}
</style>
</head>
<body>
<h2>什么是受益人?</h2>
<p>
<strong>解答：</strong>
受益人是指人身保险中由被保险人或者投保人指定的
享有保险金请求权的人，投保人、被保险人可以为受益人。
</p>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h2").click(function(){
$("h2").css("background-color","#CCFFFF").next().css("display","block");
});
});
</script>
</body>
</html>
隐式迭代
对于原生 JS 来说，一般我们设置某类元素的样式，都得使用循环设置，而 jQuery 在使用的时候则无需考虑这点，比较简单
// 设置 li 元素的文字颜色为 red
// 原生 JS
var li= document.getElementsByClassName('li');
for(var i = 0, len = li.length; i < len; i++) {
li[i].style.color = 'red';
}
// jQuery
$(function() {
$("li").css({"font-weight":"bold","color":"red"});
});
这是因为 jQuery 的方法内部存在隐式迭代，它会对匹配到的所有元素进行循环遍历，执行相应的方法；无需我们再手动地进行循，方便我们使用。
除了隐式迭代外，jQuery 还提供了 each 方法，方便有需要的时候调用。比喻要对每个元素做不同的处理：
$("li").each(function(i){
$(this).addClass('item-'+i);
});案例：使用jQuery变换网页效果
需求说明
- 制作《你是人间四月天》内容简介页面
- 单击“你是人间的四月天”标题后，标题字体大小、颜色变为蓝色，正文的字体颜色变为绿色
- 单击“查看全部”显示内容简介
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>你是人间的四月天</title>
<!-- <link rel="stylesheet" href="css/april.css">-->
<style type="text/css">
body, h1, h2, p, div {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
line-height: 28px;
font-family: "微软雅黑";
}
#book {
margin: 0 auto;
width: 800px;
overflow: hidden;
padding-top: 10px;
}
img {
float: left;
margin-right: 10px;
}
h1 {
font-size: 32px;
line-height: 45px;
}
.intro {
clear: both;
display: none;
}
h2 {
line-height: 45px;
background: #999999;
padding-left: 15px;
color: #ffffff;
}
.intro p {
text-indent: 2em;
}
.title {
font-size: 24px;
color: #0000ff;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("h1").click(function () {
$(this).addClass("title");
$(this).next().css("color", "green");
});
$(".whole").click(function () {
$(".intro").show();
})
});
</script>
</head>
<body>
<div id="book">
<img src="images/book.gif"/>
<h1>你是人间的四月天</h1>
<p>
笑响亮了四面风<br/>
轻灵在春的光艳中交舞看变<br/>
你是一月早天的云烟<br/>
黄昏吹着风的软<br/>
....<br/>
<a href="#" class="whole">查看全部</a><br/>
</p>
<div class="intro">
<h2>内容简介</h2>
<p>
你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出，引起读者尖叫连连。一经上市，便引发各大报纸、媒体的一致报道。
</p>
<p>有人崇拜她，把她当做女神、偶像；也有人放出话来，“喜欢她的女人，品行有问题；喜欢她的男人，脑子有问题。”
</p>
<p>她是缺乏幽娴品德的女人，她喜好与人辩论，她用诗句表达她的哀愁，她精通文理，学贯中西。她对文学和艺术，具有本能的、直接的感悟。生长富贵，命运坎坷，修养让她把热情藏在里面，热情却是她生活的支柱。
她，就是那个万千宠爱于一身的一代才女——林徽因。
</p>
<p>
《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集，几乎收录了林徽因所有的经典文学作品。其散文成就颇大，虽然数量不多，但风格独特，知识性强。诗歌尤多，其诗作融人中国古典诗歌和西方唯美派的一些表现手法，每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅，如行云流水，又如拂面的春风。可以说。她的文字拥有超越时间的魅力。笔下流露出令人惊讶的对民间百态的深谙。</p>
</div>
</div>
</body>
</html>十一、DOM模型
浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
十二、DOM对象和jQuery对象
DOM对象：直接使用JavaScript获取的节点对象
var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
$("#title").html( );
等同于
document.getElementById("title").innerHTML;
DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
DOM对象转jQuery对象
使用$()函数进行转化：$(DOM对象)
注意：
jQuery对象命名一般约定以$开头
在事件中经常使用$(this)，this是触发该事件的对象
jQuery对象转DOM对象
jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
通过get(index)方法得到相应的DOM对象
jQuery选择器
一、jQuery选择器分类
jQuery选择器功能强大，种类也很多，分类如下
通过CSS选择器选取元素
- 基本选择器
- 层次选择器
- 属性选择器
通过过滤选择器选择元素
- 基本过滤选择器
- 可见性过滤选择器
二、基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
| 名称 | 语法构成 | 描述 | 示例 |
| 标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
| 类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
| 并集选择器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
| 全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
<script src="js/jquery-1.12.4.js"></script>
<!-- <script src="js/book.js"></script>-->
<script type="text/javascript">
$(function () {
$("dt").click(function () { //获取<dt>标签并为其添加click事件函数
$("dd").css("display", "block"); //获取<dd>标签设置显示
});
$("h1").css("color", "blue"); //获取并设置<h1>字体颜色为蓝色
/* 获取并设置所有class为price的元素背景颜色和内边距 */
$(".price").css({"background": "#efefef", "padding": "5px"});
/* 获取并设置id为author的元素字体颜色 */
$("#author").css("color", "#083499");
/* 获取并设置所有<dt>、<dd>、class为intro的元素字体颜色 */
$(".intro,dt,dd").css("color", "#ff0000");
$("*").css("font-weight", "bold");//设置所有元素的字体加粗显示
})
</script>
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
</body>
</html>
三、层次选择器
层次选择器通过DOM 元素之间的层次关系来获取元素
| 名称 | 语法构成 | 描述 | 示例 |
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $("#menu span" )选取#menu下的<span>元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子）元素 | $(" #menu>span" )选取#menu的子元素<span> |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
| 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
<script src="js/jquery-1.12.4.js"></script>
<!-- <script src="js/book.js"></script>-->
<script type="text/javascript">
$(function () {
$(".textRight p").css("color","red"); //后代选择器
// $(".textRight>p").css("color","red"); //子选择器
// $("h1+p").css("color","red"); //相邻元素选择器
// $("h1~p").css("color","red").css("font-size","20px"); //同辈元素选择器
})
</script>
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
</body>
</html>案例：制作图书简介页面
需求说明：
使用基本选择器和层级选择器获取并设置页面元素
- 自营图书几十万……”一行字体颜色为红色
- 京东价“￥24.10”字体为24px、红色加粗显示
- “[定价：￥35.00]”字体颜色为#cccccc，价格中有中划线
- <dl>标签中的字体颜色均为红色
- 单击“以下促销….”显示隐藏的内容，此部分字体颜色均为红色
- “加购价”、“满减”、“105-5”、“200-16”字体颜色为白色，背景颜色为红色，上下内边距为1px，左右内边距为5px，外右边距为5px
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$(".intro").css("color", "red");
/*价格设置字体加大加粗红色*/
$("#jdPrice>span").css({"font-size": "24px", "font-weight": "bold", "color": "red"});
$("#jdPrice p").css({"color": "#cccccc"});//字体灰色
$("#jdPrice p span").css({"text-decoration": "line-through"});
$("dl").css("color", "#ff0000"); //dl中字体颜色为红色
$("dl span,#ticket span").css({
"background": "#ff0000",
"color": "#ffffff",
"padding": "1px 5px",
"margin-right": "5px"
});
$("dt").click(function () { //获取<dt>标签并为其添加click事件函数
$("dd").css("display", "block"); //获取<dd>标签设置显示
});
});
</script>
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
</body>
</html>四、属性选择器
属性选择器通过HTML元素的属性来选择元素
| 语法构成 | 描述 | 示例 |
| [attribute] | 选取包含给定属性的元素 | $(" [href]" )选取含有href属性的元素 |
| [attribute=value] | 选取等于给定属性是某个特定值的元素 | $(" [href ='#']" )选取href属性值为“#”的元素 |
| [attribute !=value] | 选取不等于给定属性是某个特定值的元素 | $(" [href !='#']" )选取href属性值不为“#”的元素 |
| [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值以en开头的元素 |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 |
| [attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* ='txt']" )选取href属性值中含有txt的元素 |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东快报</title>
<link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
<header>京东快报<a href="#" class="more">更多 > </a></header>
<ul>
<li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a></li>
<li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a></li>
<li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元抢平板！品牌配件199-100</a></li>
<li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a></li>
<li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a></li>
</ul>
</section>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// $("#news a[class]").css("background","#c9cbcb"); //带有class的属性
//$("#news a[class='hot']").css("background","#c9cbcb"); //带有class的属性且值为hot
//$("#news a[class!='hot']").css("background","#c9cbcb"); //class的属性且值不是hot
$("#news a[href^='www']").css("background", "#c9cbcb"); //href值以www开头
//$("#news a[href$='html']").css("background","#c9cbcb"); //href值以html结尾
// $("#news a[href*='k2']").css("background","#c9cbcb"); //href值包含k2
})
</script>
</body>
</html>案例：制作非缘勿扰页面特效
需求说明：
- 单击标题“非缘勿扰”，<dd>元素中有id属性的<span>的文本（主演、导演、标签、剧情）颜色值为#FF0099，字体加粗显示
- 单击文本“导演”，文字“赖水清”为加粗
- 单击文本“标签”，它之后的“苏有朋”和“2013”的背景颜色为#E0F8EA，字体颜色为#10 A14B，并且文字与背景颜色上下边缘间距为2px，左右边缘边距为8px
- 单击图片“收藏”，弹出对话框，显示信息为“您已收藏成功！”
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>制作非缘勿扰页面特效 </title>
<link rel="stylesheet" href="css/style.css" />
<style type="text/css">
.current{ color:#10A14B; background-color:#E0F8EA; padding:2px 8px; }
</style>
</head>
<body>
<div class='main' >
<div class='left'>
<img src="images/pic.gif" />
<br/><br/>
<img src="images/col.gif" alt="收藏本片"/>
</div>
<div class='right'>
<dl>
<dt>非缘勿扰</dt>
<dd><span id="star">主演：</span>苏有朋/秦岚/傅艺伟等</dd>
<dd><span id='director'>导演：</span><span title="导演">赖水清</span></dd>
<dd><span id='label'>标签：</span><span>苏有朋</span> 国产电视剧 <span>2013</span> 连续剧 </dd>
<dd><span id="drama">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></dd>
</dl>
<img src="images/btn.gif"/>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script type="text/javascript">
$(function(){
$(".right dt").click(function(){
$("span[id]").css("color","#FF0099").css("font-weight","bold");
});
$("span[id='director']").click(function(){
$(this).next().css("font-weight","bold");
});
$("span[id='label']").click(function(){
$(this).siblings("span").addClass("current");
});
$("img[alt='收藏本片']").click(function(){
alert("您已收藏成功！");
});
});
</script>
</body>
</html>
五、过滤选择器
通过特定的过滤规则来筛选出所需的元素
主要分类：
- 基本过滤选择器
- 可见性过滤选择器
- 表单对象过滤选择器
- 内容过滤选择器、子元素过滤选择器……
1、基本过滤选择器
| 语法 | 描述 | 示例 |
| :first | 选取第一个元素 | $(" li:first" )选取所有<li>元素中的第一个<li>元素 |
| :last | 选取最后一个元素 | $(" li:last" )选取所有<li>元素中的最后一个<li>元素 |
| :not(selector) | 选取去除所有与给定选择器匹配的元素 | $(" li:not(.three)" )选取class不是three的元素 |
| :even | 选取索引是偶数的所有元素（index从0开始） | $(" li:even" )选取索引是偶数的所有<li>元素 |
| :odd | 选取索引是奇数的所有元素（index从0开始） | $(" li:odd" )选取索引是奇数的所有<li>元素 |
| :eq(index) | 选取索引等于index的元素（index从0开始） | $("li:eq(1)" )选取索引等于1的<li>元素 |
| :gt(index) | 选取索引大于index的元素（index从0开始） | $(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1） |
| :lt(index) | 选取索引小于index的元素（index从0开始） | $(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1） |
| :header | 选取所有标题元素，如h1~h6 | $(":header" )选取网页中所有标题元素 |
| :focus | 选取当前获取焦点的元素 | $(":focus" )选取当前获取焦点的元素 |
| :animated | 选择所有动画 | $(":animated" )选取当前所有动画元素 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background": "#2a65ba", "color": "#ffffff"});
//li 最后一个 没有边框
$(".contain li:last").css("border", "none");
//改变第一个li的字体大小和颜色
// $(".contain li:first").css({"font-size":"16px","color":"#e90202"});
//设置偶数行背景颜色
// $(".contain li:even").css("background","#f0f0f0");
//设置奇数行背景颜色
//$(".contain li:odd").css("background","#cccccc");
//设置前两个li的字体颜色（从0开始,小于2）
$(".contain li:lt(2)").css({"color": "#708b02"});
//设置后两个li的字体颜色（从0开始，大于3）
$(".contain li:gt(3)").css({"color": "#b66302"});
//改变第3个li的背景颜色（从0开始
//$(".contain li:eq(2)").css({"background":"#02acaa"});
});
</script>
</head>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul>
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！</li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
</ul>
</div>
</body>
</html>
案例：制作隔行变色的商品列表
需求说明：
使用基本过滤选择器，实现隔行变色的表格（不包括表头），偶数行背景色为#eff7d1，奇数行背景色为#f7e195
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>隔行变色的商品列表</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div class="contain">
<table border="0" width="100%" cellspacing="0">
<tr class="t-head">
<th width="50%">商品</th>
<th width="10%">单价</th>
<th width="10%">数量</th>
<th>操作</th>
</tr>
<tr>
<td>
<img src="images/f1.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤波点印花毛衣</a>
</td>
<td>180.0</td>
<td>3</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f2.jpg" width="50" height="50"/>
<a href="">预售太平洋女装连衣裙</a>
</td>
<td>765.0</td>
<td>4</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f3.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤红色小外套</a>
</td>
<td>456.0</td>
<td>2</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f4.jpg" width="50" height="50"/>
<a href="">漫巴森秋装新款套头衫</a>
</td>
<td>140.0</td>
<td>1</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
</table>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$(".contain tr:not(.t-head):even").css("background","#eff7d1");
$(".contain tr:not(.t-head):odd").css("background","#f7e195");
});
</script>
</html>
2、可见性过滤选择器
通过元素显示状态来选取元素
| 语法 | 描述 | 示例 |
| :visible | 选取所有可见的元素 | $(":visible" )选取所有可见的元素 |
| :hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
$("p:hidden").show();
$("p:visible").hide();
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
<style type="text/css">
#txt_show {display:none; color:#00C;}
#txt_hide {display:block; color:#F30;}
</style>
</head>
<body>
<p id="txt_hide">点击按钮，我会被隐藏哦~</p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p>
<input name="show" type="button" value="显示隐藏的P元素" id="show"/>
<input name="hide" type="button" value="隐藏显示的P元素" id="hide" />
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("p:hidden").show();
})
$("#hide").click(function(){
$("p:visible").hide();
})
})
</script>
</body>
</html>
3、jQuery选择器注意事项
案例：制作全网热播视频页面
需求说明：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全网热播视频</title>
<link rel="stylesheet" href="css/play.css">
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("#play ul>li:not(li:last)").css("margin-right", "10px");
$("#play ul>li:last").css("background", "#f0f0f0");
$("#play ul>li>span").css("background", "#f0a30f");
$("#play ol>li>span:first").css("background", "#f0a30f");
$("#play ol>li>span:not(:first)").css("background", "#a4a3a3");
$("#play ol>li:lt(5)").css("background", "url(images/orange.jpg) right -4px no-repeat");
$("#play ol>li:eq(1)").css("background", "url(images/green.jpg) right -4px no-repeat");
$("#play ol>li:gt(4)").css("background", "url(images/green.jpg) right -4px no-repeat");
$("#play ol>li").mousemove(function () {
$(this).find(":hidden").show();
});
$("#play ol>li").mouseout(function () {
$("#play ol>li p:visible").hide();
});
});
</script>
</head>
<body>
<section id="play">
<h1>全网热播视频</h1>
<ul>
<li><img src="images/flv01.jpg">
<p>昊花梦</p><span>1</span></li>
<li><img src="images/flv02.jpg">
<p>好先生</p><span>2</span></li>
<li>
<ol>
<li><span>3</span>三八线<p>加入看单</p></li>
<li><span>4</span>吉详天宝<p>加入看单</p></li>
<li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
<li><span>6</span>仙剑云之凡<p>加入看单</p></li>
<li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
<li><span>8</span>琅琊榜<p>加入看单</p></li>
<li><span>9</span>那年青春我们正好<p>加入看单</p></li>
<li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
</ol>
</li>
</ul>
</section>
</body>
</html>jQuery中的事件与动画
一、jQuery中的事件
1、鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件
| 方法 | 描述 | 执行时机 |
| click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
| mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
| mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
| mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
| mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
鼠标事件方法的区别
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
| 方法 | 相同点 | 不同点 |
| mouseover( ) | 鼠标进入被选元素时会触发 | 鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter |
| mouseenter( ) | ||
| mouseout( ) | 鼠标离开被选元素时会触发 | 鼠标在其被选元素的子元素上来回离开时： 触发mouseout 不触发mouseleave |
| mouseleave( ) |
案例：制作当当导航页面
以mouseover( ) 与mouseout( )方法为例，实现导航菜单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>当当图书导航</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
/**主菜单鼠标移上时背景颜色加深**/
$(".nav-ul a").mouseover(function () {
$(this).css("background-color", "#f01e28");
});
$(".nav-ul a").mouseout(function () {
$(this).css("background-color", "#ff2832");
});
/**主菜单鼠标移上时背景颜色加深**/
/*$(".nav-ul a").mouseenter(function () {
$(this).css("background-color", "#f01e28");
});
$(".nav-ul a").mouseleave(function () {
$(this).css("background-color", "#ff2832");
});*/
});
</script>
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的订单</a></li>
<li class="line"></li>
<li><a href="">当当自出版</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
<li class="line"></li>
<li>
<a href="" class="menu-btn">我的当当</a>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">企业采购</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">客户服务</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.jpg"/></a>
</div>
<div class="nav-box">
<div class="wrap">
<ul class="nav-ul">
<li class="all"><a href="">全部商品详细分类</a></li>
<li><a href="">尾品会</a></li>
<li><a href="">图书</a></li>
<li><a href="">电子书</a></li>
<li><a href="">服装</a></li>
<li><a href="">运动户外</a></li>
<li><a href="">婴孕童</a></li>
<li><a href="">家具</a></li>
<li><a href="">当当优品</a></li>
<li><a href="">电器城</a></li>
<li><a href="">当当超市</a></li>
<li><a href="">海外购</a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
</body>
</html>
案例：制作京东首页右侧固定层
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东首页右侧固定层</title>
<link href="css/nav.css" rel="stylesheet">
</head>
<body>
<nav id="nav">
<li><span></span><p>就东会员</p></li>
<li><span></span><p>购物车</p></li>
<li><span></span><p>我的关注</p></li>
<li><span></span><p>我的足迹</p></li>
<li><span></span><p>我的消息</p></li>
<li><span></span><p>咨询JIMI</p></li>
</nav>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
$("li span").mouseover(function(){
//var index= $("li").index(this);//$(this).index();
//$("li").eq(index).children("p").show();
var index=$("#nav li span").index(this);
$("#nav li:eq("+index+") span~p").show();
$(this)
.css("background-color","#c81623");
//$(this).children("span")
//.css("background-color","#c81623");
}).mouseout(function(){
var index=$("#nav li span").index(this);
$("#nav li:eq("+index+") span~p").hide();
//var index= $("li").index(this);
//$("li").eq(index).children("p").hide();
$(this)
.css("background-color","#7a6e6e");
//$(this).children("span")
//.css("background-color","#7a6e6e");
});
});
</script>
</body>
</html>2、键盘事件
用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件
| 方法 | 描述 | 执行时机 |
| keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
| keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
| keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
以键盘事件为例，实现按键时特效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style type="text/css">
*{margin: 0; padding: 0; font-family:"微软雅黑";}
fieldset {
width: 300px;
margin: 10px auto;
}
dl{clear: both;}
dt,dd{
display:inline-block;
height: 35px;
line-height: 35px;;
}
dt{ width: 80px; text-align: right;}
input[type="submit"]{width: 60px; text-align: center; line-height: 25px;}
</style>
</head>
<body>
<fieldset>
<legend>会员登录</legend>
<dl>
<dt>用户名：</dt>
<dd><input id="userName" type="text" /></dd>
</dl>
<dl>
<dt>密码：</dt>
<dd><input id="password" type="password" /></dd>
</dl>
<dl>
<dt></dt>
<dd><input type="submit" value="登 录" /> </dd>
</dl>
<span id="events"></span>
</fieldset>
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function () {
$("[type=password]").keyup(function () {
$("#events").append("keyup");
}).keydown(function (e) {
$("#events").append(" keydown");
}).keypress(function () {
$("#events").append(" keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") {//按回车键
alert("确认要提交么？");
}
});
});
</script>
</body>
</html>
三、绑定事件与移除事件
jQuery 3.0中已弃用bind()和unbind()方法，请用 on()和off()代替。
1、绑定事件
2、移除事件
案例：使用绑定实现鼠标移至“我的当当”显示二级菜单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>当当图书导航</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的订单</a></li>
<li class="line"></li>
<li><a href="">当当自出版</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
<li class="line"></li>
<li class="on">
<a href="" class="menu-btn">我的当当</a>
<ul class="topDown">
<li><a href="">我的积分</a></li>
<li><a href="">我的收藏</a></li>
<li><a href="">我的余额</a></li>
<li><a href="">我的评论</a></li>
<li><a href="">电子书架</a></li>
</ul>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">企业采购</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">客户服务</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.jpg"/></a>
</div>
<div class="nav-box">
<div class="wrap">
<ul class="nav-ul">
<li class="all"><a href="">全部商品详细分类</a></li>
<li><a href="">尾品会</a></li>
<li><a href="">图书</a></li>
<li><a href="">电子书</a></li>
<li><a href="">服装</a></li>
<li><a href="">运动户外</a></li>
<li><a href="">婴孕童</a></li>
<li><a href="">家具</a></li>
<li><a href="">当当优品</a></li>
<li><a href="">电器城</a></li>
<li><a href="">当当超市</a></li>
<li><a href="">海外购</a></li>
<button id="unbind">解除绑定</button>
<div class="clearfix"></div>
</ul>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/**导航头部我的当当 显示二级菜单 绑定悬浮 bind一个事件*
$(".on").bind("mouseover",function(){
$(".topDown").show();
});*/
/**bind 两个事件**/
/*$(".top-m .on").bind({
mouseover: function () {
$(".topDown").show();
},
mouseout: function () {
$(".topDown").hide();
}
});*/
$(".top-m .on").on({
mouseover: function () {
$(".topDown").show();
},
mouseout: function () {
$(".topDown").hide();
}
});
/**主菜单鼠标移上时背景颜色加深**/
$(".nav-ul a").mouseover(function () {
$(this).css("background-color", "#f01e28");
});
$(".nav-ul a").mouseout(function () {
$(this).css("background-color", "#ff2832");
});
function unbind() {
$(".top-m .on").unbind("mouseout");
}
function off() {
$(".top-m .on").off("mouseout");
}
$('#unbind').click(function () {
// unbind();
off();
});
});
</script>
</body>
</html>
四、复合事件
1、hover()方法
hover()方法相当于mouseover与mouseout事件的组合
案例：当当图书导航-hover实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>当当图书导航</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的订单</a></li>
<li class="line"></li>
<li><a href="">当当自出版</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
<li class="line"></li>
<li class="on">
<a href="" class="menu-btn">我的当当</a>
<ul class="topDown">
<li><a href="">我的积分</a></li>
<li><a href="">我的收藏</a></li>
<li><a href="">我的余额</a></li>
<li><a href="">我的评论</a></li>
<li><a href="">电子书架</a></li>
</ul>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">企业采购</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">客户服务</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.jpg"/></a>
</div>
<div class="nav-box">
<div class="wrap">
<ul class="nav-ul">
<li class="all"><a href="">全部商品详细分类</a></li>
<li><a href="">尾品会</a></li>
<li><a href="">图书</a></li>
<li><a href="">电子书</a></li>
<li><a href="">服装</a></li>
<li><a href="">运动户外</a></li>
<li><a href="">婴孕童</a></li>
<li><a href="">家具</a></li>
<li><a href="">当当优品</a></li>
<li><a href="">电器城</a></li>
<li><a href="">当当超市</a></li>
<li><a href="">海外购</a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$(".top-m .on").hover(function () {
$(".topDown").show();
},
function () {
$(".topDown").hide();
}
);
/**主菜单鼠标移上时背景颜色加深**/
$(".nav-ul a").mouseover(function () {
$(this).css("background-color", "#f01e28");
});
$(".nav-ul a").mouseout(function () {
$(this).css("background-color", "#ff2832");
});
});
</script>
</body>
</html>
2、toggle()方法
toggle()方法用于模拟鼠标连续click事件
1.9版本 .toggle(function, function, … ) 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
toggle()方法不带参数，与show( )和hide( )方法作用一样
toggleClass( )可以对样式进行切换
小结：
案例：仿京东左侧菜单
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>仿京东左侧菜单</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="nav-box">
<div class="nav-top"><a href="">全部商品分类</a></div>
<ul>
<li>
<a href="">家用电器</a>
<div><img src="images/erji.jpg"/></div>
</li>
<li>
<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a>
<div><img src="images/erji1.jpg"/></div>
</li>
<li>
<a href="">电脑</a>、<a href="">办公</a>
<div><img src="images/erji2.jpg"/></div>
</li>
<li>
<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a>
<div><img src="images/erji3.jpg"/></div>
</li>
<li>
<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a>
<div><img src="images/erji4.jpg"/></div>
</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("li").hover(
function () {
$(this).children("div").show();//让相应二级内容显示
$(this).toggleClass("orange");
},
function () {
$(this).children("div").hide();//让相应二级内容隐藏
$(this).toggleClass("orange");
}
);
});
</script>
</body>
</html>
jQuery动画效果
jQuery提供了很多动画效果
- 控制元素显示与隐藏
- 改变元素的透明度
- 改变元素高度
- 自定义动画
一、控制元素的显示及隐藏
show() 控制元素的显示，hide( )控制元素的隐藏
案例：当当图书导航-显示和隐藏的速度
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>当当图书导航</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的订单</a></li>
<li class="line"></li>
<li><a href="">当当自出版</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
<li class="line"></li>
<li class="on">
<a href="" class="menu-btn">我的当当</a>
<ul class="topDown">
<li><a href="">我的积分</a></li>
<li><a href="">我的收藏</a></li>
<li><a href="">我的余额</a></li>
<li><a href="">我的评论</a></li>
<li><a href="">电子书架</a></li>
</ul>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">企业采购</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">客户服务</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.jpg"/></a>
</div>
<div class="nav-box">
<div class="wrap">
<ul class="nav-ul">
<li class="all"><a href="">全部商品详细分类</a></li>
<li><a href="">尾品会</a></li>
<li><a href="">图书</a></li>
<li><a href="">电子书</a></li>
<li><a href="">服装</a></li>
<li><a href="">运动户外</a></li>
<li><a href="">婴孕童</a></li>
<li><a href="">家具</a></li>
<li><a href="">当当优品</a></li>
<li><a href="">电器城</a></li>
<li><a href="">当当超市</a></li>
<li><a href="">海外购</a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$(".top-m .on").hover(function () {
$(".topDown").show("slow");
},
function () {
$(".topDown").hide("fast");
}
);
/**主菜单鼠标移上时背景颜色加深**/
$(".nav-ul a").mouseover(function () {
$(this).css("background-color", "#f01e28");
});
$(".nav-ul a").mouseout(function () {
$(this).css("background-color", "#ff2832");
});
});
</script>
</body>
</html>
二、改变元素的透明度
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
案例：淡入淡出效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>淡入淡出效果</title>
<style>
body{text-align: center;}
</style>
</head>
<body>
<img src="images/ad.jpg" /><br/>
<input name="fadein_btn" type="button" value="淡入" />
<input name="fadeout_btn" type="button" value="淡出" />
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function() {
$("input[name=fadein_btn]").click(function(){
$("img").fadeIn("slow");
});
$("input[name=fadeout_btn]").click(function(){
$("img").fadeOut(1000);
});
});
</script>
</body>
</html>
三、改变元素的高度
slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏
案例：改变元素高度
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>改变元素高度</title>
<style type="text/css" >
body{
margin: 0px;
padding: 0px;
}
h2{
background-color: blue;
color: white;
margin: 0px;
}
</style>
</head>
<body>
<div id="box">
<h2>窗边的小豆豆</h2>
<div class="txt">
<p>本书讲述了作者上小学的一段真实的故事。</p>
<p>作者因淘气被学校退学后，来到巴学园。在小林校长的爱护和引导下，一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。</p>
<p>这本书不仅给世界千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>
</div>
</div>
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function() {
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
});
</script>
</body>
</html>
案例：制作京东常见问题分类页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>京东常见问题分类页面</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".menu-btn").hover(
function(){
$(this).siblings(".topDown").stop().show(500);
},
function(){
$(this).siblings(".topDown").hide(500);
}
);
$("dt").click(function(){
$("dd").slideUp(500);
$(this).siblings("dd").slideDown(500);
});
});
</script>
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临京东，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的交易单</a></li>
<li class="line"></li>
<li><a href="">会员中心</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>我的关注</a></li>
<li class="line"></li>
<li class="on">
<a href="" class="menu-btn">联系客服</a>
<ul class="topDown">
<li><a href="">帮助中心</a></li>
<li><a href="">我要吐槽</a></li>
<li><a href="">在线客服</a></li>
<li><a href="">咨询JIMI</a></li>
<li><a href="">客服邮箱</a></li>
</ul>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">手机金融</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">网站导航</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.png" alt="logo"/></a>
</div>
<div class="wrap">
<nav class="nav">
<header>常见问题分类</header>
<ul>
<li><dl>
<dt>京东金融</dt>
<dd><a href="#">京东金融简介</a></dd>
<dd><a href="#">京东金融会员</a></dd>
<dd><a href="#">京东金融安全中心</a></dd>
</dl></li>
<li><dl>
<dt>理财</dt>
<dd><a href="#">京东小金库</a></dd>
<dd><a href="#">京东基金理财</a></dd>
<dd><a href="#">京东保险理财</a></dd>
<dd><a href="#">小白理财</a></dd>
<dd><a href="#">智投理财</a></dd>
<dd><a href="#">乐猜</a></dd>
</dl></li>
<li><dl>
<dt>白条</dt>
<dd><a href="#">京东白条</a></dd>
<dd><a href="#">京东金条</a></dd>
<dd><a href="#">校园白条</a></dd>
<dd><a href="#">教育白条</a></dd>
<dd><a href="#">乡村白条</a></dd>
<dd><a href="#">京东金采</a></dd>
<dd><a href="#">京农贷</a></dd>
</dl></li>
<li><dl>
<dt>众筹</dt>
<dd><a href="#">产品众筹</a></dd>
<dd><a href="#">轻众筹</a></dd>
<dd><a href="#">产品众筹发起者常见问题</a></dd>
<dd><a href="#">产品众筹支持者常见问题</a></dd>
<dd><a href="#">产品众筹永久众筹常见问题</a></dd>
<dd><a href="#">京东众创常见问题</a></dd>
</dl></li>
<li><dl>
<dt>京东钱包</dt>
<dd><a href="#">京东钱包简介</a></dd>
<dd><a href="#">自动服务及常见问题</a></dd>
<dd><a href="#">购房盈</a></dd>
</dl></li>
</ul>
</nav>
<section class="content">
<p>京东金融 > 京东金融会员</p>
<ul>
<li>•<a href="#">什么是京东金融会员</a> </li>
<li>•<a href="#">会员签到规则</a> </li>
<li>•<a href="#">会员金币</a> </li>
<li>•<a href="#">小白信用</a> </li>
<li>•<a href="#">外部虚拟券</a> </li>
</ul>
</section>
</div>
</body>
</html>
使用jQuery操作 DOM
一、DOM操作分类
DOM操作分为三类：
- DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
- HTML-DOM：用于处理HTML文档，如document.forms
- CSS-DOM：用于操作CSS，如element.style.color="green"
JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持
二、jQuery中的DOM操作
1、设置和获取样式值
使用css()为指定的元素设置样式值或获取样式值
2、追加和移除样式
2.1、追加样式
$(selector).addClass(class);
或 $(selector).addClass(class1 class2 … classN);
2.2、移除样式
$(selector).removeClass("class") ;
或 $(selector).removeClass("class1 class2 … classN ") ;
2.3、切换样式
toggleClass()
模拟了addClass()与removeClass()实现样式切换的过程
语法：
$(selector).toggleClass(class) ;
2.4、判断是否含指定的样式
hasClass( )方法来判断是否包含指定的样式
语法：
$(selector). hasClass(class);
案例：
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>追加和移除样式</title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:14px;
font-family:"微软雅黑";
line-height: 28px;;
}
.title {font-size:14px; color:#03F; text-align: center; }
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
</style>
</head>
<body>
<h2 class="title" >jQuery操作CSS</h2>
<p class="text">
css()设置或返回样式属性<br>
addClass()增加一个或多个类<br>
removeClass()移除一个或多个类
</p>
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(function(){
$("h2").mouseover(function() {
if(!$("p").hasClass("content")){
$("p").addClass("content");
}
});
$("h2").mouseout(function() {
if($("p").hasClass("content")) {
$("p").removeClass("content");
}
});
});
</script>
</body>
</html>
三、内容操作
1、HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常见问题</title>
<link rel="stylesheet" href="css/problem.css">
</head>
<body>
<section>
<span>×</span>
<h1>常见问题</h1>
<div class="proList"></div>
<div class="img"><img src="images/boy.png"></div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("h1").click(function(){
var str="<ul><li>买了商品后，查不到物流信息怎么办？</li><li>申请退款后，交易退款成功，钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的时间和条件是什么？</li><li>如何申请淘宝客服介入？</li></ul>";
$(".proList").html(str);
});
$("span").click(function(){
$(".proList").html("");
})
});
</script>
</body>
</html>
2、标签内容操作
text()可以获取或设置元素的文本内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常见问题</title>
<link rel="stylesheet" href="css/problem.css">
</head>
<body>
<section>
<span>×</span>
<h1>常见问题</h1>
<div class="proList"></div>
<div class="img"><img src="images/boy.png"></div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*$(function(){
$("h1").click(function(){
var str="<ul><li>买了商品后，查不到物流信息怎么办？</li><li>申请退款后，交易退款成功，钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的时间和条件是什么？</li><li>如何申请淘宝客服介入？</li></ul>";
$(".proList").html(str);
});
$("span").click(function(){
$(".proList").html("");
})
});*/
$(function () {
$("h1").click(function () {
var str = "<ul><li>买了商品后，查不到物流信息怎么办？</li><li>申请退款后，交易退款成功，钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的时间和条件是什么？</li><li>如何申请淘宝客服介入？</li></ul>";
$(".proList").text(str);
});
$("span").click(function () {
$(".proList").text("");
})
});
</script>
</body>
</html>
html( ) 和text( )方法的区别
| 语法格式 | 参数说明 | 功能描述 |
| html( ) | 无参数 | 用于获取第一个匹配元素的HTML内容或文本内容 |
| html(content) | content为元素的HTML内容 | 用于设置所有匹配元素的HTML内容或文本内容 |
| text( ) | 无参数 | 用于获取所有匹配元素的文本内容 |
| text (content) | content为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
3、属性值操作
val()可以获取或设置元素的value属性值
案例、制作QQ简易聊天框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>QQ简易聊天框</title>
<link rel="stylesheet" href="css/chat.css">
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
var imgArr = new Array("head01.jpg","head02.jpg","head03.jpg");
var nameArr = new Array("A","B","C");
$("#send").click(function(){
var val = $(".chatText").val();
if(val.length>0){
var oldStr = $(".chatBody").html();
var index= Math.ceil( Math.random()*3)-1;
var currentStr = "<section>";
currentStr += "<div><img src=\"images/"+imgArr[index]+"\"></div>";
currentStr += "<p>"+nameArr[index]+"</p>";
currentStr += "<div class=\"chatContent\">"+val+"<div>";
currentStr += "</section>";
var newStr = oldStr+currentStr;
$(".chatBody").html(newStr);
$(".chatText").val("");
}
});
});
</script>
</head>
<body>
<section id="chat">
<div class="chatBody">
</div>
<div><img src="images/icon.jpg"></div>
<textarea class="chatText"></textarea>
<div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
</body>
</html>四、节点操作
1、创建节点元素
工厂函数$()用于获取或创建节点
- $(selector)：通过选择器获取节点
- $(element)：把DOM节点转化成jQuery节点
- $(html)：使用HTML字符串创建jQuery节点
2、插入节点
元素内部插入子节点
| 语法 | 功能 |
| append(content) | $(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1); |
| appendTo(content) | $(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul"); |
| prepend(content) | $(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1); |
| prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul"); |
元素外部插入同辈节点
| 语法 | 功能 |
| after(content) | $(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1); |
| insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul"); |
| before(content) | $(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1); |
| insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul"); |
3、删除节点
jQuery提供了三种删除节点的方法
remove()：删除整个节点
$(selector).remove([expr]);
empty()：清空节点内容
$(selector).empty();
detach()：删除整个节点，保留元素的绑定事件、附加的数据
案例：祝福冬奥
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
</head>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul class="gameList">
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！</li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background": "#2a65ba", "color": "#ffffff"});
var $newNode1 = $("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2 = $("<li title='last'>北京申办冬奥会是再合适不过了！</li>");
$("ul").append($newNode1);
$("ul").prepend($newNode2);
var $newNode3 = $("<li>北京冬残会筹备工作在京举行</li>");
var $newNode4 = $("<li>北京奥匹克塔奥运五环标志落成！</li>");
$("ul").after($newNode3);
$("ul").before($newNode4);
// $(".gameList li:eq(1)").remove();
$(".gameList li:eq(1)").empty();
//li 最后一个 没有边框
$(".gameList li:last").css("border", "none");
});
</script>
</body>
</html>
4、替换节点
replaceWith()和replaceAll()用于替换某个节点
案例：祝福冬奥替换节点
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
</head>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul class="gameList">
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！</li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background": "#2a65ba", "color": "#ffffff"});
var $newNode1 = $("<li>你喜欢哪些冬季运动项目？</li>");
//$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");
//li 最后一个 没有边框
$(".gameList li:last").css("border", "none");
});
</script>
</body>
</html>
5、复制节点
clone()用于复制某个节点
$(selector).clone([includeEvents]) ;
参数ture或flase, true复制事件处理，flase时反之
案例：祝福冬奥复制节点
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
</head>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul class="gameList">
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！</li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background": "#2a65ba", "color": "#ffffff"});
$(".gameList li:eq(1)").click(function () {
$(this).clone(true).appendTo(".gameList");
})
$(".gameList li:eq(2)").click(function () {
$(this).clone(false).appendTo(".gameList");
})
//li 最后一个 没有边框
//$(".gameList li:last").css("border","none");
});
</script>
</body>
</html>
五、属性操作
1、获取与设置元素属性
attr()用来获取与设置元素属性
2、删除元素属性
removeAttr()用来删除元素的属性
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
</head>
<body>
<div class="contain">
<div><img src="images/winter.jpg" alt="奥运五环标志" width="320" height="198"></div>
<h2>祝福冬奥</h2>
<ul class="gameList">
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！</li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background": "#2a65ba", "color": "#ffffff"});
$(".contain img").click(function () {
alert($(this).attr("alt"));
});
$(".contain img").attr({width: "200", height: "80"});
$(".contain img").removeAttr("alt");
//li 最后一个 没有边框
$(".gameList li:last").css("border", "none");
});
</script>
</body>
</html>
案例：制作论坛帖子页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>课工场论坛列表</title>
<link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
<header><span>我要发帖</span></header>
<section>
<ul>
</ul>
</section>
<div class="post">
<input class="title" placeholder="请输入标题（1-50个字符）">
所属版块：<select>
<option>请选择版块</option>
<option>电子书籍</option>
<option>新课来了</option>
<option>新手报到</option>
<option>职业规划</option>
</select>
<textarea class="content"></textarea>
<input class="btn" value="发布">
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$(".bbs header span").click(function () {
$(".bbs .post").show();
});
var tou = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");
$(".post .btn").click(function () {
var $newLi = $("<li></li>"); //创建一个新的li节点元素
var iNum = Math.floor(Math.random() * 4); //随机获取头像
var $touImg = $("<div><img src=images/" + tou[iNum] + "></div>"); //创建头像节点
var $title = $("<h1>" + $(".title").val() + "</h1>"); //设置标题节点
var newP = $("<p></p>"); //创建一个新的p节点元素
var myDate = new Date();
var currentDate = myDate.getFullYear() + "-" + parseInt(myDate.getMonth() + 1) + "-" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes();
$(newP).append("<span>版块：" + $(".post select").val() + "</span>"); //在p节点中插入版块；
$(newP).append("<span>发表时间：" + currentDate + "</span>"); //在p节点中插入发布时间；
$($newLi).append($touImg); //插入头像
$($newLi).append($title); //插入标题
$($newLi).append(newP); //插入版块、时间内容
$(".bbs section ul").prepend($newLi);
$(".post .content").val("");
$(".post .title").val("");
$(".post").hide();
});
})
</script>
</body>
</html>六、节点遍历
1、遍历子元素
children()方法可以用来获取元素的所有子元素
2、遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
| 语法 | 功能 |
| next([expr]) | 用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange"); |
| prev([expr]) | 用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange"); |
| slibings([expr]) | 用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("orange"); |
3、遍历前辈元素
jQuery中可以遍历前辈元素
- parent()：获取元素的父级元素
- parents()：元素元素的祖先元素
案例：节点遍历
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点遍历</title>
<style type="text/css">
.hot {
color: #F00;
}
a {
color: #000;
text-decoration: none;
}
.orange {
background: #c3910b;
}
.orange a {
color: #ffffff;
}
</style>
</head>
<body>
<section>
<img src="images/ad.jpg" alt="美梦成真系列抽奖"/>
<ul>
<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
<li><a href="#">苹果iPad mini</a></li>
<li><a href="#">三星GALAXY Ⅲ</a></li>
<li><a href="#">苹果iPhone 5</a></li>
</ul>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//遍历子节点
/* var $section =$("section").children();
alert($section.length);*/
//获取同辈节点
$("li:eq(1)").next().addClass("orange");
//$("li:eq(1)").prev().addClass("orange");
// $("li:eq(1)").siblings().addClass("orange");
//获取前辈节点
//$("li:eq(1)").parent().addClass("orange");
//$("li:eq(1)").parents().addClass("orange");
});
</script>
</body>
</html>
4、其他遍历方法-1
each( ) ：规定为每个匹配元素规定运行的函数
案例：节点遍历each()
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点遍历</title>
<style type="text/css">
.hot {
color: #F00;
}
a {
color: #000;
text-decoration: none;
}
.orange {
background: #c3910b;
}
.orange a {
color: #ffffff;
}
</style>
</head>
<body>
<section>
<img src="images/ad.jpg" alt="美梦成真系列抽奖"/>
<ul>
<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
<li><a href="#">苹果iPad mini</a></li>
<li><a href="#">三星GALAXY Ⅲ</a></li>
<li><a href="#">苹果iPhone 5</a></li>
</ul>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("img").click(function () {
$("li").each(function () {
var str = $(this).text() + "<br>";
$("section").append(str);
})
});
});
</script>
</body>
</html>
5、其他遍历方法-2
end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
</head>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul class="gameList">
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！</li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background": "#2a65ba", "color": "#ffffff"});
$(".gameList li").first().css("background", "#b8e7f9").end().last().css("background", "#d3f4b5");
//li 最后一个 没有边框
$(".gameList li:last").css("border", "none");
});
</script>
</body>
</html>
七、CSS-DOM操作
除css()外，还有获取和设置元素高度、宽度等的样式操作方法
| 语法 | 功能 |
| css() | 设置或返回匹配元素的样式属性 |
| height([value]) | 设置或返回匹配元素的高度 |
| width([value]) | 设置或返回匹配元素的宽度 |
| offset([value]) | 返回以像素为单位的top和left坐标。仅对可见元素有效 |
| offsetParent( ) | 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素 |
| position( ) | 返回第一个匹配元素相对于父元素的位置 |
| scrollLeft([position]) | 参数可选。设置或返回匹配元素相对滚动条左侧的偏移 |
| scrollTop([position]) | 参数可选。设置或返回匹配元素相对滚动条顶 |
案例：购物车
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>隔行变色的商品列表</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div class="contain">
<table border="0" width="100%" cellspacing="0">
<tr class="t-head">
<th width="50%">商品</th>
<th width="10%">单价</th>
<th width="10%">数量</th>
<th width="10%">总价 </th>
<th>操作</th>
</tr>
<tr>
<td>
<img src="images/f1.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤波点印花毛衣</a>
</td>
<td>￥<span>180.0</span></td>
<td>
<a href="javascript:void();">-</a>
<input type="text" value="1" size="1"/>
<a href="javascript:void();">+</a>
</td>
<td>3</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f2.jpg" width="50" height="50"/>
<a href="">预售太平洋女装连衣裙</a>
</td>
<td>￥<span>765.0</span></td>
<td><a href="javascript:void();">-</a>
<input type="text" value="1" size="1"/>
<a href="javascript:void();">+</a></td>
<td>4</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f3.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤红色小外套</a>
</td>
<td>￥<span>456.0</span></td>
<td><a href="javascript:void();">-</a>
<input type="text" value="1" size="1"/>
<a href="javascript:void();">+</a></td>
<td>2</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f4.jpg" width="50" height="50"/>
<a href="">漫巴森秋装新款套头衫</a>
</td>
<td>￥<span>140.0</span></td>
<td><a href="javascript:void();">-</a>
<input type="text" value="1" size="1"/>
<a href="javascript:void();">+</a></td>
<td>1</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
</table>
</div>
<div style="float:right" class="money">总共价钱:</div>
<div style="clear:both">
<input type="button" value="添加" class="add"/>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
bg();
calc();
$(document).on("click","a[id!=del]",function(){
var op = $(this).html();
var val = $(this).siblings("input").val();
if(op=="+"){
val = parseInt(val)+1;
}else{
if(val>1){
val = parseInt(val)-1;
}else{
alert("已经是最后一件了") ;
}
}
$(this).siblings("input").val(val);
calc();
});
/*$("a[id='del']").click(function(){
$(this).parent().parent().remove();
calc();
});*/
$(document).on("click","a[id='del']",function(){
$(this).parent().parent().remove();
calc();
bg();
})
$(".add").click(function(){
addTr();
bg();
calc();
});
});
function calc(){
var sumMoney=0;
$("tr[class!='t-head']")
.each(function(index, element) {
var price = $(this).children("td:eq(1)")
.children("span").html();
var num = $(this).children("td:eq(2)")
.children("input").val();
var oneSumMoney = parseInt(price)*parseInt(num);
$(this).children("td:eq(3)").html("￥"+oneSumMoney);
sumMoney+=oneSumMoney;
});
$(".money").html("总共价钱:￥"+sumMoney);
}
function addTr(){
var $newTr=$(
"<tr>"+
" <td>"+
" <img src='images/f4.jpg' width='50' height='50'/>"+
" <a href=''>漫巴森秋装新款套头衫</a>"+
" </td>"+
" <td>￥<span>140.0</span></td>"+
" <td><a href='javascript:void();'>-</a>"+
" <input type='text' value='1' size='1'/>"+
" <a href='javascript:void();'>+</a></td>"+
" <td>1</td>"+
" <td><a href='javascript:void(0);'id='del'>删除</a></td>"+
"</tr>"
);
$("table").append($newTr);
}
function bg(){
$(".contain tr:not(.t-head):even").css("background","#eff7d1");
$(".contain tr:not(.t-head):odd").css("background","#f7e195");
}
</script>
</html>
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
