持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
jQuery 1.jQuery能做什么
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 与Ajax技术完美结合
提示：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
2.jQuery的优势
- 体积小，压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 使用隐式迭代简化编程
- 丰富的插件支持
3.获取jQuery（下载地址）
（1）jQuery各版本下载：www.jq22.com/jquery-info…
（2）进入jQuery官网：jquery.com
3.使用jQuery弹出提示框
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入门</title>
</head>
<body>
</body>
<!-- 引入jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 内部样式js -->
<script>
$(document).ready(function() {
alert('hello jQuery!!');
}) </script>
</html>
4.$(document).ready()与window.onload类似，但也有区别
| window.onload | $(document).ready() | |
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 |
| 编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
| 简化写法 | 无 | $(function(){ //执行代码}) ; |
5.jQuery语法结构
语法：$(selector).action() ;
- 工厂函数$()：将DOM对象转化为jQuery对象 选择器 selector：
- 获取需要操作的DOM 元素 方法action()：
- jQuery中提供的方法，其中包括绑定事件处理的方法
6.jQuery操作页面元素
（1）使用addClass( )方法为元素添加样式
(a.)addClass( )方法
- 语法：jQuery 对象.addClass([样式名]);
- 示例：$("#current").addClass("current");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加类样式</title>
</head>
<Style>
.current {
background-color: aqua;
color: #fff;
}
</Style>
<body>
<h6 id="current">jQuery简介</h6>
<h6>jQuery语法</h6>
<h6>jQuery选择器</h6>
</body> <script src="js/jquery.min.js"></script>
<script>
$(document).ready(function() { // $("#current").addClass(function() { // var cur = $("#current"); // cur.css("color", "#fff");
// cur.css("background-color", "aqua");
// });
$("#current").addClass("current");
}) </script>
</html>
（2）使用css( )方法设置元素样式
语法：
css("属性","属性值") ; //设置一个CSS属性 css({"属性1":"属性值1","属性2":"属性值2"...}) ; //同时设置对个CSS属性
示例：
$(this).css({"background":"#c81623"});
例题：你是人间的四月天
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>你是人间的四月天</title> <link rel="stylesheet" href="css/april.css">
</head>
<body>
<div id="book">
<img src="image/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>
<script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/april.js"></script> </body> </html>
$(document).ready(function() {
//标题单击事件
$("#book h1").click(function() {
//设置标题字体大小为24px,颜色蓝色
$('#book h1')
.css({
"font-size": "24px",
"color": "#00f"
});
//设置p标签里字体颜色
$("#book>p")
.css("color", "green")
})
//查看全部超链接
$(".whole")
.click(function() {
$(".intro").show();
$(".intro p")
.css("color", "#000")
}) })
运行结果：
（3）使用show( )、hide( ) 方法设置元素的显示和隐藏
语法：
$(selector).show( );
$(selector).hide( );
示例：
$(".nav-top").show( ); $("p").hide( );
6.jQuery代码风格
(1)“$”等同于“ jQuery ”
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})
(2)链式操作
对一个对象进行多重操作，并将操作结果返回给该对象
示例：
$("h2").css("background-color","#ccffff").next().css("display","block");
(3)隐式迭代
1、JQuery对象“ 如： $(‘div’).text(div展示的信息) 可以看成”是一个包含一个dom数组 和 包含所有Jquery方法的容器
2、每当我们调用选择器方法查找dom树里的元素时，其实就是把找到的dom元素存入一个JQ对象里的dom数组中，然后再把这个JQ对象返回。当我们调用Jquery方法时（如 html()），jq方法会遍历内部 dom数组，并调用每个dom元素的对应的dom属性或方法（如innerHTML），完成操作。
3、其中Jq方法遍历内部dom数组的过程就叫做【隐式迭代】。
示例：
$(document).ready(function() {
$("li").css({"font-weight":"bold","color":"red"}); });
7.添加注释
| 阶段 | 说明 |
| 开发阶段 | 为代码添加注释，可以增加代码的可读性，能够让别人很容易的读懂你的代码，便于后期维护 |
| 维护阶段 | 建议把关键的模块形成开发文档，便于后期维护，即便后期删除代码注释，也不影响后期维护 |
| 产品正式发布 | 建议删除注释，减少文件大小，加快下载速度，提高用户体验 |
8.DOM对象和jQuery对象
（1）DOM对象：直接使用JavaScript获取的节点对象
var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;
（2） jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
$("#title").html( ); 等同于 document.getElementById("title").innerHTML;
提示： DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
9.DOM对象转jQuery对象
使用(DOM对象)
var txtName =document.getElementById("txtName");
//DOM对象 var $txtName =$(txtName); //jQuery对象
注意：
jQuery对象命名一般约定以$开头 在事件中经常使用$(this)，
this是触发该事件的对象
10.jQuery对象转DOM对象
(1) jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName"); //jQuery对象
var txtName =$txtName[0]; //DOM对象
(2)通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName");//jQuery对象
var txtName =$txtName.get(0); //DOM对象
11.使用jQuery变换网页效果
实现思路
- （1）新建HTML文件，文件名为april.html
- （2）在新建的HTML文档中引入jQuery库
- （3）使用$(document).ready( )创建文档加载事件
- （4）使用$( )选取所需元素
- （5）使用css( )、addClass( )方法为所选取的元素添加CSS样式
- （6）使用show( )设置简介内容显示
12.制作广告图片轮播切换效果
<!DOCTYPE html> <html>
<head lang="en">
<meta charset="UTF-8">
<title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="arrowLeft"><
</div>
<div class="arrowRight">>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/adver.js"></script>
</html>
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
.adver {
margin: 0 auto;
width: 700px;
overflow: hidden;
height: 454px;
position: relative;
background: url("../image/adver01.jpg");
}
ul {
position: absolute;
bottom: 10px;
z-index: 100;
width: 100%;
text-align: center; }
ul li {
display: inline-block;
font-size: 10px;
line-height: 20px;
font-family: "微软雅黑";
margin: 0 1px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #333333;
text-align: center;
color: #ffffff; }
.arrowLeft, .arrowRight {
position: absolute;
width: 30px;
background: rgba(0, 0, 0, 0.2);
height: 50px;
line-height: 50px;
text-align: center;
top: 200px;
z-index: 150;
font-family: "微软雅黑";
font-size: 28px;
font-weight: bold;
cursor: pointer;
display: none; }
.arrowLeft {
left: 10px;
}
.arrowRight {
right: 10px;
}
li:nth-of-type(1) {
background: orange;
}
$(document).ready(function() {
//图片名称数组 var imgs = new Array("adver01.jpg", "adver02.jpg", "adver03.jpg", "adver04.jpg", "adver05.jpg", "adver06.jpg");
//设置一个表示用来控制数组下标
var index = 0;
$(".adver").mouseover(function() {
$(".arrowLeft").show();
$(".arrowRight").show();
})
//鼠标移出
$(".adver").mouseout(function() {
$(".arrowLeft").hide();
$(".arrowRight").hide();
})
//左箭头单击事件
$(".arrowLeft").click(function() {
//判断是否是第一张图片
if (index <= 1) {
alert("当前已经是第一张图片了");
index = 0;
} else {
index--;
$(".adver").css("background", "url(image/" + imgs[index - 1] + ")");
$(".adver>ul>li:nth-of-type(" + index + ")")
.css("background-color", "orange");
// siblings() 是取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合，用于筛选同辈元素的表达式<除了选择器选择的元素的同级元素>
$(".adver>ul>li:nth-of-type(" + index + ")").siblings().css("background", "#333");
} });
//右箭头单击事件
$(".arrowRight").click(function() {
//判断是否是最后一张图片
if (index >= imgs.length - 1) {
alert("已经是最后一张图片了");
index = imgs.length;
} else {
index++;
$(".adver").css("background", "url(image/" + imgs[index] + ")");
$(".adver>ul>li:nth-of-type(" + (index + 1) + ")").css("background-color", "orange");
// siblings() 是取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合，用于筛选同辈元素的表达式<除了选择器选择的元素的同级元素>
$(".adver>ul>li:nth-of-type(" + (index + 1) + ")").siblings().css("background", "black");
}
})
})
13.当当网我的订单页
<!DOCTYPE html> <html> <head lang="en">
<meta charset="UTF-8">
<title>当当网我的订单页</title> <link type="text/css" rel="stylesheet" href="css/dangdang.css"> </head> <body>
<div id="menu" class="pos">
<a href="#">我的当当</a>
<ul id="menu-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>
</div> </body> <script src="js/jquery.min.js"></script> <script> $(document).ready(function() {
//浏览器最初加载页面时让ul列表隐藏
$("#menu-ul").hide();
//鼠标经过时显示ul列表
$("#menu").mouseover(function() {
$("#menu-ul").show();
//鼠标经过改变menu的边框属性为1px实线,颜色为ee7304 $("#menu").css("border", "1px solid #ee7304");
});
//鼠标移出时隐藏ul列表
$("#menu").mouseout(function() {
$("#menu-ul").hide();
// 鼠标移出改变menu的边框属性为无 $("#menu").css("border", "none");
})
})
</script> </html>
* {
margin: 0px;
padding: 0px;
font-size: 12px; }
a {
color: #999;
text-decoration: none;
} body {
background: #fff url(../image/bg.jpg) no-repeat;
}
ul {
list-style: none; }
.pos {
position: absolute;
} #menu {
left: 590px;
top: 5px; } #menu li {
display: block;
height: 20px;
line-height: 20px;
background-color: #fff;
padding: 4px; }
运行结果：
14.siblings() 方法
// siblings() 是取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合，用于筛选同辈元素的表达式<除了选择器选择的元素以外的同级元素>
$(".adver>ul>li:nth-of-type(" + index + ")").siblings().css("background", "#333");
15.弹窗小广告
<!DOCTYPE html> <html> <head lang="en">
<meta charset="UTF-8"> <title>带关闭按钮的滚动广告</title> <style type="text/css">
#main{ text-align:center;}
#float{
position:absolute;
left:30px;
top:60px;
z-index:1;
}
#close{
position:absolute;
top:60px;
left:134px;
z-index:2;
cursor:hand;
} </style>
</head>
<body>
<div id="close" onClick="adv_close()"><img src="image/close.jpg"></div> <div id="float"><img src="image/advpic.jpg"></div> <div id="main"><img src="image/contentpic.jpg"></div> <script src="js/adverClose.js"></script> </body> </html>
/**
* Created by zongjuan.wang on 2016/7/14.
*/ function adv_close() { document.getElementById("close").style.display = "none"; document.getElementById("float").style.display = "none";
}
var closeTop;
var closeLeft;
var floatTop;
var floatLeft;
var closeObject;
var floatObject;
function place() {
closeObject = document.getElementById("close");
floatObject = document.getElementById("float");
if (closeObject.currentStyle) { //IE浏览器
closeTop = parseInt(closeObject.currentStyle.top);
closeLeft = parseInt(closeObject.currentStyle.left);
floatTop = parseInt(floatObject.currentStyle.top);
floatLeft = parseInt(floatObject.currentStyle.left);
} else { //fireFox浏览器
closeTop = parseInt(document.defaultView.getComputedStyle(closeObject, null).top);
closeLeft = parseInt(document.defaultView.getComputedStyle(closeObject, null).left);
floatTop = parseInt(document.defaultView.getComputedStyle(floatObject, null).top);
floatLeft = parseInt(document.defaultView.getComputedStyle(floatObject, null).left);
} }
function roll() {
var closeScrollTop = parseInt(document.documentElement.scrollTop || document.body.scrollTop);
var closeScrolllLeft = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
var floatScrollTop = parseInt(document.documentElement.scrollTop || document.body.scrollTop);
var floatScrolllLeft = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
closeObject.style.top = closeTop + closeScrollTop + "px";
closeObject.style.left = closeLeft + closeScrolllLeft + "px";
floatObject.style.top = floatTop + floatScrollTop + "px";
floatObject.style.left = floatLeft + floatScrolllLeft + "px"; }
window.onload = place; window.onscroll = roll;
16.总结
