技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> Java --> [JavaWeb教程]第二章-jQuery简明开发教程

[JavaWeb教程]第二章-jQuery简明开发教程

浏览:1098次  出处信息

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
jQuery，顾名思义，也就是JavaScript和查询(Query)，即是辅助JavaScript开发的库。

-------------------------------------------------------------------------------------
为了给网页增加动态效果，设计了在浏览器(最近新出的note.js技术，可以使用javascript在服务端运行，这里不讨论这点)上运行的javascript,直接使用javascript不太方便，所以基于javascript语言开发了很多工具包，其中最常用的一个就是jquery，也是本章学习的主题。

jQuery是js(javascript的简称)的一个工具包，所以如果页面要使用jQuery需要先引入。通过链接"http://pan.baidu.com/s/1c1bVLIC" 下载"jquery-1.12.0.min.js"文件，然后在工程中添加该文件，如下图所示：

js测试文档结构

在页面中引入该文件，并打印"Hello World!"。代码如下:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>jQuery测试页面</title>
<scripttype="text/javascript"src="js/jquery-1.12.0.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#alertHelloWorldButton").click(function(){
alert("Hello World!");
});
});
</script>
</head>
<body>
<inputtype="button"value="弹出HelloWorld"id="alertHelloWorldButton"/>
</body>
</html>

页面中只有一个按钮其中多了一个id属性，id在整个页面中应该保证唯一。页面中引入jquery插件“<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>”。js代码必须写在“<script></script>”之间或者在js文件中，通过<script>标签引入。$(document).ready(),表示文档完全展现后，调用这个方法，其中入参为一个函数，这是js的特点。在这个匿名函数中的代码是为id为“ alertHelloWorldButton”注册一个点击事件，鼠标左键点击标签(这里是“ alertHelloWorldButton”按钮)弹出提示框，内容为"Hello World!"。
涉及到的知识点:
1、文档树document，JS把Html文档作为一个html为根节点的文档树，并且每个标签作为一个Js对象。
2、js中函数可以作为入参传递，包括匿名函数。
3、事件，每个标签上定义了一系列的事件，常用事件有(点击:onclick,改变:onchange,失去焦点:onblur,获得焦点:onfocus,选中:onselect,提交:onsubmit)，每个事件上可以注册方法。两种常用的注册方法
a:js中调用 object.click(function);如上面代码所示。
b:在标签上直接添加onclick属性，比如:<input type="button" value="弹出HelloWorld" id="alertHelloWorldButton" onclick="xxxx"/>
这里是以鼠标点击事件为例子，建议使用第一种。
4、弹出框提示，alert(string);提示string的值。
5、$表示函数jQuery()，获取标签对象。

页面的动态效果，主要是交互时动态的修改html文档树，修改标签的属性，显示效果等，获取标签本身是动态操作的基础。jquery便捷的标签获取是它流行的一个很大的原因。
基础选择器：
1、id选择，$("#id")
2、标签选择，$("span")
3、class选择，$(".show")，这里的class是指使用CSS样式类，经常由网页设计师开发，这里不在叙述。
示例代码:
html：

<ahref="www.sunhaojie.com"class="testClassSelector">孙豪杰的博客</a>
<span>测试标签选择器</span>
<inputvalue="测试id选择器"id="testIdSelector"/>
<inputtype="button"value="测试基础选择器"id="testBaseSelectorButton"/>

js:

$("#testBaseSelectorButton").click(function(){
varaHref = $(".testClassSelector").attr("href");
varspanText = $("span").text();
vartestIdSelectorValue = $("#testIdSelector").val();
 
alert(aHref);
alert(spanText);
alert(testIdSelectorValue);
});

为了便于测试，代码中使用了获取3处标签数据的方法，attr("属性名")获取属性值,text()获取标签文本,val()获取value值。

3种基本的方式就可以解决大部分场景，但是也会有一些特殊的场景不能满足，可以使用组合查询实现。这里介绍3种常用方式层级，基本筛选，属性。
示例代码如下:
html:

<ul>
<li>选项1</li>
<lilang="secondLi">选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
<inputtype="button"value="测试组合选择器"id="testCombinationSelectorButton"/>

js:

$("#testCombinationSelectorButton").click(function(){
varulHtml = $("ul").html();
alert(ulHtml);
 
//层级
varliListText = $("ul li").text();
alert(liListText);
 
//基础选择 first
varfirstLiText = $("ul li:first").text();
alert(firstLiText);
 
//基础选择 last
varlastLiText = $("ul li:last").text();
alert(lastLiText);
 
//属性
varsecondLiText = $("ul li[lang='secondLi']").text();
alert(secondLiText);
});

html()获取标签的子标签的Html文档内容。

我们上面介绍了常用的标签选择方法，并且还学习了获取文本text(),获取值val(),获取html文档html()和获取属性值attr("属性名")4个函数，同时修改这4部分的内容也是动态页面的主要部分。下面我们分别演示一下这四部分内容修改的操作，实例代码如下：

<h2>value变更</h2>
<inputid="changeValueSrc"value="请输入内容"/>
<inputid="changeValueTarget"value="要变更的输入框"/>
<inputtype="button"value="变更value测试"id="testChangeValue"/>
<h2>text变更</h2>
<inputid="changeTextSrc"value="请输入内容"/>
<spanid="changeTextTarget">变更text显示区域</span>
<inputtype="button"value="变更Text测试"id="testChangeText"/>
<h2>属性变更</h2>
<selectid="changeAttrSrc">
<optionvalue="red">红色</option>
<optionvalue="green">绿色</option>
<optionvalue="yellow">黄色</option>
<optionvalue="black">黑色</option>
</select>
<fontcolor="black"id="changeAttrTarget">字体颜色变更</font>
<inputtype="button"value="变更属性测试"id="testChangeAttr"/>
<h2>html变更</h2>
<divid="changeHtmlTarget">
<inputvalue="测试Html变更"/>
</div>
<inputtype="button"value="把输入框变更为span块"id="testChangeHtml"/>
//更新value
$("#testChangeValue").click(function(){
varsrcValue = $("#changeValueSrc").val();
$("#changeValueTarget").val(srcValue)
});
 
//更新text
$("#testChangeText").click(function(){
varsrcValue = $("#changeTextSrc").val();
$("#changeTextTarget").text(srcValue)
});
 
//更新属性
$("#testChangeAttr").click(function(){
varsrcValue = $("#changeAttrSrc").val();
$("#changeAttrTarget").attr("color", srcValue)
});
 
//更新html
$("#testChangeHtml").click(function(){
varspanObject = $("<span></span>").text("替换后的span标签");
$("#changeHtmlTarget").html(spanObject)
});

我们分别演示了更新value,text,属性和html的功能，其中“$("<span></span>")”是创建了一个html标签，但是没有在文档树中，html(标签)方法把标签添加到文档树中。object.html(标签)有一个特点，会替换调用object的原有html文档内容，其实我们很多场景只是变更部分，jquery为解决这种场景提供了更新部分html的函数主要包括，内部插入，外部插入，替换和删除，示例代码如下:

<h2>文档处理</h2>
<divid="documentUpdateDiv">
<ulid="documentUpdateUl">
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ul>
</div>
<inputtype="button"id="innerAppendHtml"value="内部插入"/>
<inputtype="button"id="outsideAppendHtml"value="外部插入"/>
<inputtype="button"id="replaceHtml"value="替换"/>
<inputtype="button"id="deleteHtml"value="删除"/>
//内部插入
$("#innerAppendHtml").click(function(){
varliObject = $("<li></li>");
liObject.text("内部插入");
$("#documentUpdateUl").append(liObject);
});
//外部插入
$("#outsideAppendHtml").click(function(){
varspanObject = $("<span></span>");
spanObject.text("外部插入");
$("#documentUpdateUl").after(spanObject);
});
//替换
$("#replaceHtml").click(function(){
varliObject = $("<li></li>");
liObject.text("替换");
$("#documentUpdateUl li:first").replaceWith(liObject);
});
//删除
$("#deleteHtml").click(function(){
$("#documentUpdateUl li:first").remove();
});

关于文档处理的部分，已经介绍完了，jquery还提供了几个比较好用的工具类，数组遍历和ajax。
数组遍历示例代码如下:

<ulid="arrayForeach">
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ul>
<inputtype="button"id="arrayForeachButton"value="数组遍历"/>
$("#arrayForeachButton").click(function(){
$.each($("#arrayForeach li"), function(i, obj){
$(obj).text("第"+i+"项");
});
});

其中$(obj)是把javascript的对象转换成jquery对象。

Ajax通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。jquery对页面与服务器端的ajax访问提供了比较好的封装，示例代码如下:

<divid="ajaxTarget">
</div>
<inputtype="button"id="ajaxCallButton"value="ajax调用"/>

新增ajax.html页面

<div>test ajax</div>
$("#ajaxCallButton").click(function(){
$.ajax({
type: "POST",
url: "ajax.html",
success: function(html){
$("#ajaxTarget").html(html);
}
});
});

“{key:value}”这种方式被称为Json格式，和java的是一种比较常用的数据传输格式。type:提交方式，form的method的值；url:提交地址；success调用成功后的回调函数。

到这里我们基本把jquery常用的方法都介绍了一遍，包括各种选择器，数据获取，文档处理以及数组遍历,Ajax提交工具等，一篇不到1万字的文章肯定不能完全介绍jquery，开发中需要不断的查参考手册才能使用更快速的方法解决问题。

一下是测试代码：

<!-- jstest.html -->
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>jQuery测试页面</title>
<scripttype="text/javascript"src="js/jquery-1.12.0.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#alertHelloWorldButton").click(function(){
alert("Hello World!");
});
 
$("#testBaseSelectorButton").click(function(){
var aHref = $(".testClassSelector").attr("href");
var spanText = $("span").text();
var testIdSelectorValue = $("#testIdSelector").val();
 
alert(aHref);
alert(spanText);
alert(testIdSelectorValue);
});
 
$("#testCombinationSelectorButton").click(function(){
var ulHtml = $("ul").html();
alert(ulHtml);
 
//层级
var liListText = $("ul li").text();
alert(liListText);
 
//基础选择 first
var firstLiText = $("ul li:first").text();
alert(firstLiText);
 
//基础选择 last
var lastLiText = $("ul li:last").text();
alert(lastLiText);
 
//属性
var secondLiText = $("ul li[lang='secondLi']").text();
alert(secondLiText);
});
 
//更新value
$("#testChangeValue").click(function(){
var srcValue = $("#changeValueSrc").val();
$("#changeValueTarget").val(srcValue)
});
 
//更新text
$("#testChangeText").click(function(){
var srcValue = $("#changeTextSrc").val();
$("#changeTextTarget").text(srcValue)
});
 
//更新属性
$("#testChangeAttr").click(function(){
var srcValue = $("#changeAttrSrc").val();
$("#changeAttrTarget").attr("color", srcValue)
});
 
//更新html
$("#testChangeHtml").click(function(){
var spanObject = $("<span></span>").text("替换后的span标签");
$("#changeHtmlTarget").html(spanObject)
});
 
//内部插入
$("#innerAppendHtml").click(function(){
var liObject = $("<li></li>");
liObject.text("内部插入");
$("#documentUpdateUl").append(liObject);
});
//外部插入
$("#outsideAppendHtml").click(function(){
var spanObject = $("<span></span>");
spanObject.text("外部插入");
$("#documentUpdateUl").after(spanObject);
});
//替换
$("#replaceHtml").click(function(){
var liObject = $("<li></li>");
liObject.text("替换");
$("#documentUpdateUl li:first").replaceWith(liObject);
});
//删除
$("#deleteHtml").click(function(){
$("#documentUpdateUl li:first").remove();
});
 
//数组遍历
$("#arrayForeachButton").click(function(){
$.each($("#arrayForeach li"), function(i, obj){
$(obj).text("第"+i+"项");
});
});
 
//ajax调用测试
$("#ajaxCallButton").click(function(){
$.ajax({
type: "POST",
url: "ajax.html",
success: function(html){
$("#ajaxTarget").html(html);
}
});
});
});
 
</script>
</head>
<body>
<h2>hello world</h2>
<inputtype="button"value="弹出HelloWorld"id="alertHelloWorldButton"/>
<h2>基本选择器</h2>
<ahref="www.sunhaojie.com"class="testClassSelector">孙豪杰的博客</a>
<span>测试标签选择器</span>
<inputvalue="测试id选择器"id="testIdSelector"/>
<inputtype="button"value="测试基础选择器"id="testBaseSelectorButton"/>
<h2>组合选择器</h2>
<ul>
<li>选项1</li>
<lilang="secondLi">选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
<inputtype="button"value="测试组合选择器"id="testCombinationSelectorButton"/>
<h2>value变更</h2>
<inputid="changeValueSrc"value="请输入内容"/>
<inputid="changeValueTarget"value="要变更的输入框"/>
<inputtype="button"value="变更value测试"id="testChangeValue"/>
<h2>text变更</h2>
<inputid="changeTextSrc"value="请输入内容"/>
<spanid="changeTextTarget">变更text显示区域</span>
<inputtype="button"value="变更Text测试"id="testChangeText"/>
<h2>属性变更</h2>
<selectid="changeAttrSrc">
<optionvalue="red">红色</option>
<optionvalue="green">绿色</option>
<optionvalue="yellow">黄色</option>
<optionvalue="black">黑色</option>
</select>
<fontcolor="black"id="changeAttrTarget">字体颜色变更</font>
<inputtype="button"value="变更属性测试"id="testChangeAttr"/>
<h2>html变更</h2>
<divid="changeHtmlTarget">
<inputvalue="测试Html变更"/>
</div>
<inputtype="button"value="把输入框变更为span块"id="testChangeHtml"/>
<h2>文档处理</h2>
<divid="documentUpdateDiv">
<ulid="documentUpdateUl">
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ul>
</div>
<inputtype="button"id="innerAppendHtml"value="内部插入"/>
<inputtype="button"id="outsideAppendHtml"value="外部插入"/>
<inputtype="button"id="replaceHtml"value="替换"/>
<inputtype="button"id="deleteHtml"value="删除"/>
 
<h2>数组遍历</h2>
<ulid="arrayForeach">
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ul>
<inputtype="button"id="arrayForeachButton"value="数组遍历"/>
 
<h2>ajax调用</h2>
<divid="ajaxTarget">
</div>
<inputtype="button"id="ajaxCallButton"value="ajax调用"/>
</body>
</html>
<!-- ajax.html -->
<div>test ajax</div>

建议继续学习：

  1. JQuery实现Excel表格呈现    (阅读：46467)
  2. 分享一个JQUERY颜色选择插件    (阅读：12389)
  3. jQuery插件---轻量级的弹出窗口wBox.    (阅读：9604)
  4. 10个强大的Ajax jQuery文件上传程序    (阅读：7678)
  5. jQuery的data()方法    (阅读：7441)
  6. jQuery性能优化指南    (阅读：7148)
  7. jQuery Color Animations颜色动画插件    (阅读：6929)
  8. 精于图片处理的10款jQuery插件    (阅读：6056)
  9. jQuery中getJSON跨域原理详解    (阅读：5547)
  10. 配合jquery实现异步加载页面元素    (阅读：5289)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：[JavaWeb教程]第一章-HTML简明开发教程
后一篇：[Java基础教程]第六章-Java数学运算符 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1