初识jQuery
jQuery简介
- jQuery由美国人John Resig于2006年创建
- jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
- 它的设计思想是write less,do more
例：实现隔行变色效果，只需一句关键代码
<!DOCTYPE html>
<html>
<head>
<title>订单表格</title>
</head>
<!-- 导入jQuery库 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
$("tr:even").css("background-color","#ccc");
})
</script>
<body>
<table border="1px solid red" cellspacing=0>
<thead>
<tr>
<th>序号</th>
<th>订单号</th>
<th>商品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1001</td>
<td>商品A</td>
<td>$10.00</td>
</tr>
<tr>
<td>2</td>
<td>1002</td>
<td>商品B</td>
<td>$20.00</td>
</tr>
<tr>
<td>3</td>
<td>1003</td>
<td>商品C</td>
<td>$15.00</td>
</tr>
</tbody>
</table>
</body>
</html>
jQuery能做什么
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 与Ajax技术完美结合
总结：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
jQuery的优势
- 体积小，压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 使用隐式迭代简化编程
- 丰富的插件支持
获取jQuery
进入jQuery官网：jQuery官网
jQuery库文件
- jQuery库分开发版和发布版
| 名称 | 大小 | 说明 |
| jquery-1.版本号.js（开发版） | 约268KB | 完整无压缩版本，主要用于测试、学习和开发 |
| jquery-1.版本号.min.js（发布版） | 约91KB | 经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目 |
- 在页面中引入jQuery
-
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
-
jQuery基本语法
例：第一个jQuery程序（为页面加载事件绑定方法）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<title>第一个jQuery程序</title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello jQuery！");
});
</script>
<body>
</body>
</html>$(document).ready()
- $(document).ready()与window.onload类似，但也有区别
| window.onload | $(document).ready() | |
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 |
| 编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
| 简化写法 | 无 | $(function(){ //执行代码 }) ; |
扩展：
DOM模型
- 浏览器可以把HTML文档显示成可视图形
- 浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
- 把这些节点对象按照一定顺序绘制到浏览器窗口中
- 以对象描述文档的方式就是DOM
- 节点对象就被称为DOM对象
节点类型
- 元素节点：文档中的所有元素
<h2>……</h2> - 文本节点：元素节点内的文本内容
<p>你最喜欢的食品是？ </p> - 属性节点：元素节点的子节点
<p title="提示">……</p> 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对象分别拥有一套独立的方法，不能混用
jQuery初体验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<title>jquery初体验</title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(function(){
// alert(document.getElementById("btn").value);
alert($("#btn").val());
// alert(document.getElementsByTagName("a").length);
alert($("a").size());
alert($(".txt").size());
// alert(document.getElementById("title").innerHTML);
alert($("#title").html());
})
</script>
<body>
<div id="title"><h3>示例2.1</h3></div>
<a href="www.baidu.com">百度</a>
<a href="www.163.com">网易</a>
<input type="text" class="txt" value="1"/>
<input type="text" class="txt" value="2" />
<input type="button" id="btn" value="ok" />
</body>
</html>jQuery语法结构
语法：
$(selector).action() ;- 工厂函数$()：将DOM对象转化为jQuery对象
- 选择器 selector：获取需要操作的DOM 元素
- 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
jQuery代码风格
- “$”等同于“ jQuery ”
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...}) -
操作连缀书写
$("h2").css("background-color","#CCFFFF")
.next().css("display","block");
常用语法举例
| 语法 | 说明 |
| css("属性","属性值") | 为元素设置CSS样式的值 |
| addClass() | 为元素添加类样式 |
| next() | 获得元素其后紧邻的同辈元素 |
例1：使用jQuery变换网页效果
- 实现思路
- 在新建的HTML文档中引入jQuery库
- 使用$(document).ready()创建文档加载事件
- 使用$(选择器)选取所需元素
- 使用css( )方法为所选取的元素添加CSS样式
示例代码：需要自行导入图片和jquery.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<script>
$(function(){
$("h2").click(function(){
$("h2").css("color","red").css("font-size","50px");
$("#p1").css('color',"red");
});
$("#a1").click(function(){
document.getElementById("p1").innerText= "北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝";
$("p1").css("font-size","20px").css("color","#e6005c");
})
})
</script>
<body>
<h2>沁园春·雪</h2>
<p id="p1">北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇...</p>
<a href="javascript:void(0)" id="a1">点击查看全部</a><br />
<img src="img/毛选.jpg" alt="毛泽东选集" width="400px" />
</body>
</html>
例2：使用addClass()为图片添加边框
需求说明：点击页面中的图片后，图片外围加上边框
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<script>
$(function(){
$("img").click(function(){
$("img").css("border","2px solid #CCCCCC");
})
})
</script>
<body>
<img src="img/雪花宝宝.png" alt="雪花宝宝" width="400px"/>
</body>
</html>例3：制作帮助中心问答特效
需求说明：点击标题后，显示回答的内容，同时标题加上背景色
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<style>
p{
display: none;
}
</style>
<script>
$(function(){
$(".h1").click(function(){
$(".h1").css("color","#000080")
$(".c1").css("display","block").css("color","#e63995");
});
$(".h2").click(function(){
$(".h2").css("color","#000080")
$(".c2").css("display","block").css("color","#e63995");
});
$(".h3").click(function(){
$(".h3").css("color","#000080")
$(".c3").css("display","block").css("color","#e63995");
});
})
</script>
</head>
<body>
<h2 class="h1">问：地球的大气层有几层？</h2>
<p class='c1'>答：地球的大气层通常分为五层，分别是对流层、平流层、中间层、热层和外层空间。</p>
<h2 class="h2">问：人类的DNA和黑猩猩的DNA有多少相似？</h2>
<p class="c2">答：人类的DNA大约有98.7%与黑猩猩的DNA相似。</p>
<h2 class="h3">问：太阳系中最大的行星是哪一颗？</h2>
<p class="c3">答：太阳系中最大的行星是木星，它的体积和质量都远远超过其他行星。</p>
</body>
</html>each( )简化表单验证
需求：表单项必须全部填写才能提交
未使用jQuery的表单验证（原生的表单验证）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<script>
function check(){
var txtArray=document.getElementsByTagName("input");
for(var j=0;j<txtArray.length;j++){
if(txtArray[j].type!="submit")
{
if(txtArray[j].value==""){
alert("所有的文本框都必须填写！");
return false;
}
}
}
}
</script>
<body>
<table width="35%" height="160" border="0" align="center">
<tr>
<td height="32" colspan="2" align="center">用户登录</td>
</tr>
<tr>
<td width="29%" height="36">登录名称：</td>
<td width="71%"><input class="text" type="text"/></td>
</tr>
<tr>
<td height="38">登录密码：</td>
<td><input class="text" type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn" value="登录" onclick="check()"/></td>
</tr>
</table>
</body>
</html>使用jQuery的表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<script>
$(function(){
$("#btn").click(function(){
$(".text").each(function(){
if($(this).val()==""){
alert("所有的文本框都必须填写！");
return false;
}
})
})
})
</script>
<body>
<table width="35%" height="160" border="0" align="center">
<tr>
<td height="32" colspan="2" align="center">用户登录</td>
</tr>
<tr>
<td width="29%" height="36">登录名称：</td>
<td width="71%"><input class="text" type="text"/></td>
</tr>
<tr>
<td height="38">登录密码：</td>
<td><input class="text" type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn" value="登录" /></td>
</tr>
</table>
</body>
</html>DOM对象转jQuery 对象
- 使用$()函数进行转化：$(DOM对象)
var txtName =document.getElementById("txtName"); //DOM对象
var $txtName =$(txtName); //jQuery对象
var $txtName=$("#txtName"); //简化形式
jQuery对象命名一般约定以$开头 在事件中经常使用$(this)，this是触发该事件的对象
jQuery对象转DOM对象
- jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName"); //jQuery对象
var txtName =$txtName[0]; //DOM对象
- 通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName"); //jQuery对象
var txtName =$txtName.get(0); //DOM对象
总结
- jQuery的基本语法结构是
$(selector).action() ;
- 常用选择器
- ID选择器
- 标签选择器
- 类选择器
- 设置样式的方法
- css()
- addClass()
- DOM对象和jQuery对象可以相互转化