第一章 认识jQuery
JavaScript和JavaScript库
JavaScript：Netscape（网景）公司开发的一种脚本语言。
JavaScript自身存在3个弊端：
- 复杂的文档对象模型（DOM）
- 不一致的浏览器实现
- 缺乏便捷的开发、调试工具
Ajax：一种新型的基于JavaScript的Web技术。
（Asynchronous JavaScript And XML，异步的JavaScript和XML）
JavaScript程序库：封装了很多预定义的对象和实用函数，简化JavaScript的开发。
几种流行的JavaScript程序库：
Prototype：最早成型的JavaScript库之一，对JavaScript的内置对象（例如String对象、Array对象等）做了大量的扩展。使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。
不足：从整体上对面向对象的编程思想把握得不是很到位，导致了其结构的松散。
Dojo：提供了很多其他JavaScript库没有提供的功能。（例如离线存储的API，生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等。
不足：学习曲线陡，文档不齐全，最严重的就是API不稳定，每次升级都可能导致已有的程序失效。
YUI：由Yahoo公司开发的一套完备的、扩展性良好的富交互网页程序工具集。
文档完备、代码规范。
Ext JS：简称Ext，原本是对YUI的一个拓展，主要用于创建前端用户界面。
不足：侧重于界面，本身比较臃肿。并非完全免费。
MooTools：一套轻量、简洁、模块化和面向对象的JavaScript框架。
jQuery：轻量级的库，拥有强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性和链式操作等功能。
jQuery已经逐渐从其他JavaScript库中脱颖而出，成为Web开发人员的最佳选择。
加入jQuery
创建者：John Resig
创建时间：2006年1月
项目类型：开源项目
jQuery团队：核心库、UI、插件和jQuery Mobile等开发人员以及推广和网站设计、维护人员。
理念：写得少，做得多（write less, do more）
优势：
- 轻量级：采用UglifyJS压缩后，大小保持在30KB左右。
- 强大的选择器。CSS1到CSS3几乎所有的选择器；jQuery独创的高级而复杂的选择器；插件使其支持XPath选择器；开发者编写属于自己的选择器。
- 出色的DOM操作的封装。
- 可靠的事件处理机制。采用Dean Edwards编写的事件处理函数的精华。在预留退路（graceful degradation）、循序渐进以及非入侵式（Unobtrusive）编程思想不错。
- 完善的Ajax。所有的Ajax操作封装到一个函数$.ajax()里。
- 不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。
- 出色的浏览器兼容性。
- 链式操作方式。最有特色的地方。对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
- 隐式迭代。jQuery里的方法都被设计成自动操作对象的集合，而不是单独的对象。
- 行为层与结构层的分离。直接给元素添加事件。
- 丰富的插件支持
- 完善的文档
- 开源
jQuery代码的编写
下载地址：http:/jquery.com/
库类型：
jquery.js（开发版）： 约229KB ； 完整无压缩版本，主要用于测试、学习和开发。
jquery.min.js（生产版）： 约31KB ； 经过工具压缩或经过服务器开启Gzip压缩，主要应用于产品和项目。
无需安装，只需在页面html文件中引入该库文件的位置即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
$与jQuery等价：
<script>
$(document).ready(function(){ //等待DOM元素加载完毕
alert("Hello World!!"); //弹出一个框
});
</script>
window.onload：
必须等待网页中所有的内容加载完毕后（包括图片）才能执行。
不能同时编写多个。若有多个，取最后那个执行。
无简化写法。
$(document).ready()：
网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。
能同时编写多个，多个都会执行。
$(document).ready(function(){
······
});
可以简写为：
$(function(){
······
});
jQuery代码风格
一个导航栏的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.box {
width: 200px;
margin-top: 20%;
margin-left: 20%;
}
.level1 {
/* width: 200px; */
border: 1px solid #333;
border-bottom: none;
line-height: 50px;
text-indent: 30px;
}
.level1:last-child {
border-bottom: 1px solid #333;
}
.level2 {
display: none;
padding-left: 20px;
}
.current {
color: red;
display: block;
width: 200px;
height: 50px;
background: #333;
}
</style>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none">衬衫</a>
<ul class="level2">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖T恤</a></li>
<li><a href="#none">长袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">卫衣</a>
<ul class="level2">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">裤子</a>
<ul class="level2">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
<script src="../jquery-3.3.1.js" type="text/javascript"></script>
</body>
</html>
需求：单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。
jQuery代码：
<script>
$(".level1 > a").click(function(){
$(this).addClass("current") //给当前元素添加“current”样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除“current”样式
.next().hide(); //它们的下一个元素隐藏
return false;
});
</script>
jQuery规范格式：
- 对于同一个对象不超过3个操作的，可以直接写一行。
- 对于同一个对象的较多操作，建议每行写一个操作。
- 对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。
由于jQuery有时候很复杂的问题用一行选择器就可以轻松解决。所以最后写上必要的注释。
jQuery对象和DOM对象
DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一棵树。
（JavaScript已经学过，不赘诉。）
可以通过getElementsByTagName或者getElementById来获取元素节点。
jQuery对象：通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。
在jQuery对象中无法使用DOM对象的任何方法。DOM对象也不能使用jQuery里的方法。
jQuery对象和DOM对象的相互转换
如果获取的是jQuery对象，那么在变量前面加上$。
var $variable = jQuery对象
如果获取的是DOM对象，不加$
var variable = DOM对象
jQuery对象转成DOM对象
jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。
（1）jQuery对象是一个类似数组的对象——[index]
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了
（2）jQuery本身提供的，提供get(index)方法得到相应的DOM对象。
var $cr = $("#cr"); //jQuery对象
var cr = $cr.get(0); //DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了
DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。
方式为$(DOM对象)。
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
一个实例
采用DOM方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册页面</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.box {
border: 1px solid #333;
position: relative;
width: 500px;
height: 600px;
margin: 50px auto;
}
thead {
display: inline-block;
height: 30px;
text-indent: 20px;
line-height: 30px;
color: #333;
margin-bottom: 20px;
}
tfoot {
width: 500px;
position: absolute;
right: -250px;
bottom: 10px;
}
tbody {
width: 500px;
margin-top: 30px;
display: block;
}
tbody > tr {
width: 500px;
margin-bottom: 10px;
display: inline-block;
}
tbody > tr > td:first-child {
width: 180px;
text-align: right;
padding-right: 10px;
}
</style>
</head>
<body>
<div class="box">
<table>
<thead>
<tr>
<th>
用户注册（基本信息）
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">
<input type="checkbox" name="book" id="cr"/>
<label for="cr">同意并接收注册协议</label>
<input type="submit">
<input type="reset">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>用户名</td>
<td><input type="text"></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text"><a href="#none"> 点击获取验证码</a></td>
</tr>
<tr>
<td>性别</td>
<td>
<label><input type="radio" name="sex" value="man">?男孩♂</label>
<label><input type="radio" name="sex" value="feman">?女孩♀</label>
</td>
</tr>
<tr>
<td>论坛密码</td>
<td><input type="text"></td>
</tr>
<tr>
<td>请再输入一遍密码</td>
<td><input type="text"></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text"></td>
</tr>
<tr>
<td>请回答注册问题:</td>
<td>1+1=？</td>
</tr>
<tr>
<td>你的回答是:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>为避免机器注册请提交</td>
<td>
<select name="area" id="area">
<option value="none">请选择你所在时区</option>
<option value="east8">东八区</option>
<option value="east9">东八区</option>
<option value="east10">东八区</option>
<option value="east11">东八区</option>
<option value="east12">东八区</option>
<option value="east13">东八区</option>
</select>
</td>
</tr>
<tr>
<td>您的时区和时间</td>
<td>
<select name="time" id="time">
<option value="none">您所在地的时间是几点</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
</tr>
<tr>
<td>高级选项</td>
<td><input type="checkbox" value="yes"/>显示高级用户设置选项</td>
</tr>
</tbody>
</table>
</div>
<script src="../jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){ //等待dom元素加载完毕
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象，或者$cr.get(0)
$cr.click(function(){
if(cr.checked){ //DOM方式判断
alert("感谢您的支持！您可以继续操作！")
}
});
});
</script>
</body>
</html>
jQuery方式：
<script>
$(document).ready(function(){ //等待dom元素加载完毕
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象，或者$cr.get(0)
$cr.click(function(){
if($cr.is(":checked")){ //jQuery方式判断
alert("感谢您的支持！您可以继续操作！")
}
});
});
</script>
解决jQuery和其他库的冲突
在jQuery库中，几乎所有插件都被限制在它的命名空间里。通常，全局对象都被很好地存储在jQuery命名空间里，因此当把jQuery和其他JavaScript库一起使用时，不会引起冲突。
- jQuery库在其他库之后导入：
在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.onConflict()函数来将变量$的控制权移交给其他JavaScript库。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决1</title>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype.js隐藏元素
</script>
</body>
</html>
自定义一个快捷方式
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype.js隐藏元素
使用$而不管其他库的$()方法，同时又不想与其他库冲突，可以使用以下两种解决方法。
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
- jQuery库在其他库之前导入
可以用jQuery，但$()作为其他库的快捷方式，无需调用jQuery.noConflict()函数。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决5</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
jQuery开发工具和插件
- Dreamweaver：建立Web站点和应用程序的专业工具。
- Aptana：一个功能强大、开源和专注于JavaScript的Ajax开发IDE。（占内存多）
- jQueryWTP和Spket插件：Eclipse支持jQuery自动提示代码功能。
- Visual Studio 2008
- 其他工具：EditPlus、EmEditor和VIM等等。
扫一扫
3866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
