1 JQuery简介
1、JQuery简介
jQuery团队现在主要包括核心库、UI和插件等。
jQuery凭借着简洁的语法和跨平台的兼容性，极大地简化了javascript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。
2、jQuery的优势
jQuery的宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
- 轻量级
jQuery非常轻巧，采用Dean Edwards编写的Packer（http://dean.edwards.name/packer/）压缩后，大小不到30KB。如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。
- 强大的选择器
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。
- 出色的DOM操作的封装
jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。
- 可靠的事件处理机制
吸收了javascript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候非常可靠。在预留退路、循序渐进以及非入侵式变成思想方面，jQuery做得非常不错。
- 完善的Ajax
使开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
- 不污染顶级变量
jQuery只建立一个名为jQuery对象，其所有的函数方法都在这个对象之下。
- 出色的浏览器兼容性
jQuery修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。
- 链式操作方式
jQuery中最有特色的莫过于它的链式操作方式 —— 即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
-
隐式迭代
-
行为层与结构层的分离
开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱开发冲突或个人单干的开发模式。
- 丰富的插件支持
jQuery的易扩展性，吸引了来自全球的开发者编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持，而且还不断有新插件面世。
- 完善的文档
jQuery的文档非常丰富。
- 开源
2 DOM对象与jQuery对象
DOM对象和jQuery对象
-
jQuery对象
<1>jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。
<2>虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。 -
DOM对象和jQuery对象之间转换
<1>DOM对象转换成jQuery对象
对于一个DOM对象，只需要用 $()把DOM对象包装起来，就可以获得一个jQuery对象。
var usernameElement = document.getElementById(“username”); //DOM对象
var $usernameElement = $(usernameElement); //jQuery对象
<2>jQuery对象转换成DOM对象 -
jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象
var $usernameElements = $("#username"); //jQuery对象 var usernameElement = $usernameElements[0];//DOM对象 * jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
var $usernameElements = $(“#username”); //jQuery对象
var usernameElement = $usernameElements.get(0); //DOM对象
注：通过DOM的document.getElementById(“*”).value得到某个元素的值，并且alert出来，如果这个值不存在，那么将不会alert出任何信息。
但是如果采用jQuery就会alert出undefined。也就是说jQuery比DOM拥有更完善的事件处理机制。
3 jQuery选择器
<1>什么是jQuery选择器
- jQuery中的选择器完全集成了CSS的风格。
- 利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素。
- 学会使用选择器是学习jQuery的基础。
<2>jQuery选择器的优势
- $( ) 函数在很多javascript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。
- 支持CSS1到CSS3的选择器
jQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择器，同时拥有少量独有的选择器。
使用jQuery选择器时无需考虑浏览器是否支持这些选择器。 - 完善的处理机制
<3>jQuery九大选择器
一、基本选择器
graphic
Demo:
//
$(“#b1”).click(function(){
//css()方法里，改变样式的时候，参数一"background"里的值对应css里面的值
$( “#one”).css(“background” ,“#0000FF” );
});
//
$(“#b2”).click(function(){
$( “div”).css(“background” ,“#00FFFF” );
});
//
$(“#b3”).click(function(){
$( “.mini”).css(“background” ,“#FF0033” );
});
//
$(“#b4”).click(function(){
$( “*”).css(“background” ,“#00FF33” );
});
//
$(“#b5”).click(function(){
$( “span,#two”).css(“background” ,“#3399FF” );
});
二、层次选择器
graphic
Demo:
//
$(“#b1”).click(function(){
$( “body div”).css(“background” ,“#0000FF” );
});
//
$(“#b2”).click(function(){
$( “body>div”).css(“background” ,“#FF0033” );
});
//
$(“#b3”).click(function(){
$( “#one+div”).css(“background” ,“#0000FF” );
});
//
$(“#b4”).click(function(){
$( “#two~div”).css(“background” ,“#0000FF” );
});
//
$(“#b5”).click(function(){
$( “#two”).siblings(“div” ).css(“background”, “#0000FF”);
});
三、基础过滤选择器
graphic
Demo:
//
$(“#b1”).click(function(){
$( “div:first”).css(“background” ,“#0000FF” );
});
//
$(“#b2”).click(function(){
$( “div:last”).css(“background” ,“#0000FF” );
});
//
$(“#b3”).click(function(){
$( “div:not(‘.one’)”).css(“background” ,“#0000FF” );
});
//
$(“#b4”).click(function(){
$( “div:even”).css(“background” ,“#0000FF” );
});
//
$(“#b5”).click(function(){
$( “div:odd”).css(“background” ,“#0000FF” );
});
//
$(“#b6”).click(function(){
$( “div:gt(3)”).css(“background” ,“#0000FF” );
});
//
$(“#b7”).click(function(){
$( “div:eq(3)”).css(“background” ,“#0000FF” );
});
//
$(“#b8”).click(function(){
$( “div:lt(3)”).css(“background” ,“#0000FF” );
});
//
$(“#b9”).click(function(){
$( “:header”).css(“background” ,“#0000FF” );
});
//
function ca(){
$( “#mover”).slideToggle(“slow” ,ca);
}
ca();
$(“#b10”).click(function(){
$( “:animated”).css(“background” ,“red” );
});
四、内容过滤选择器
graphic
Demo:
//
$(“#b1”).click(function(){
$( “div:contains(di)”).css(“background” ,“#0000FF” );
});
//
$(“#b2”).click(function(){
$( “div:empty”).css(“background” ,“#0000FF” );
});
//
$(“#b3”).click(function(){
$( “div:has(.mini)”).css(“background” ,“#0000FF” );
});
//
$(“#b4”).click(function(){
$( “div:parent”).css(“background” ,“#0000FF” );
});
//
$(“#b5”).click(function(){
$( “div:not(:contains(di))”).css(“background” ,“#0000FF” );
});
五、可见度过滤选择器
graphic
//
$(“#b1”).click(function(){
$( “div:visible”).css(“background” ,“#0000FF” );
});
//
$(“#b2”).click(function(){
$( “div:hidden”).show().css(“background” ,“#0000FF” );
});
//
$(“#b3”).click(function(){
var $hids =
(
"
i
n
p
u
t
:
h
i
d
d
e
n
"
)
;
/
/
f
o
r
(
v
a
r
i
=
0
;
i
<
( "input:hidden"); // for(var i=0;i<
("input:hidden");//for(vari=0;i<hids.length;i++){
// alert($hids[i].value);
// }
/*
* $hids.each(function(index, domEle){});
* * 以每一个匹配的元素作为上下文来执行一个函数。
* * 回调函数：function(index, domEle){}
* * 参数一：index，索引值
* * 参数二：dom对象
/
KaTeX parse error: Expected '}', got 'EOF' at end of input: … //alert((domEle).val());
//alert(this.value);
alert($( this).val());
});
});
//
$(“#b4”).click(function(){
var $hids = $( “input:hidden”);
/
*
.
e
a
c
h
(
.each(
.each(hids,function(index,domEle){});
* * 通用例遍方法，可用于例遍对象和数组。
* * each()方法
* * 参数一：需要例遍的对象或数组。
* * 参数二：回调函数：function(index, domEle){}
* * 回调函数：function(index, domEle){}
* * 参数一：index，索引值
* * 参数二：dom对象
*/
.
e
a
c
h
(
.each(
.each(hids,function(index,domEle){
alert(domEle.value);
});
});
六、属性过滤选择器
graphic
//
$(“#b1”).click(function(){
$( “div[title]”).css(“background” ,“#0000FF” );
});
//
$(“#b2”).click(function(){
$( “div[title=test]”).css(“background” ,“#0000FF” );
});
//
$(“#b3”).click(function(){
$( “div[title!=test]”).css(“background” ,“#0000FF” );
});
//
$(“#b4”).click(function(){
$( “div[title^=te]”).css(“background” ,“#0000FF” );
});
//
$(“#b5”).click(function(){
(
"
d
i
v
[
t
i
t
l
e
( "div[title
("div[title=est]“).css(“background” ,”#0000FF" );
});
//
$(“#b6”).click(function(){
$( “div[title*=es]”).css(“background” ,“#0000FF” );
});
//
$(“#b7”).click(function(){
$( “div[id][title*=es]”).css(“background” ,“#0000FF” );
});
七、子元素过滤选择器
graphic
//
$(“#b1”).click(function(){
//子元素过滤选择器,使用时中间必须添加空格
$( “div[class=one] :nth-child(2)” ).css(“background”, “#0000FF”);
});
//
$(“#b2”).click(function(){
//子元素过滤选择器,使用时中间必须添加空格
$( “div[class=one] :first-child” ).css(“background”, “#0000FF”);
});
//
$(“#b3”).click(function(){
//子元素过滤选择器,使用时中间必须添加空格
$( “div[class=one] :last-child” ).css(“background”, “#0000FF”);
});
//
$(“#b4”).click(function(){
//子元素过滤选择器,使用时中间必须添加空格
$( “div[class=one] :only-child” ).css(“background”, “#0000FF”);
});
八、表单对象属性过滤选择器
graphic
//
/*
/
$(“#b1”).click(function(){
$( “input[type=text]:enabled”).val(“xxxxxxxxxxx” );
});
//
$(“#b2”).click(function(){
$( “input[type=text]:disabled” ).val(“xxxxxxxxxxx”);
});
//
/
- 美容
IT
金融
管理
*/
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲b3").click(func…( “input[type=checkbox]:checked” ).length);
});
//
$(“#b4”).click(function(){
var $select = $( “select option:selected”);
KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ alert((domEle).text());
});
});
九、表单选择器
graphic
//
$(“#b1”).click(function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: … alert((domEle).val());
});
});
4 jQuery中的DOM操作
<1>查找节点
- 查找元素节点
var $usernameElement = $(“#username”);
alert("jquery "+$usernameElement.val());
- 查找属性节点
jQuery查找到需要的元素节点后，使用attr()方法来获取它的各种属性的值。
$usernameElement.attr(“value”);
- 查找文本节点
jQuery查找到需要的元素节点后，使用text()方法来获取它的文本内容。
$usernameElement.text();
<2>创建节点
- 创建元素节点
使用 jQuery 的工厂函数 $(HTML) 。该工厂函数会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。
当创建单个元素时, 需注意闭合标签。
var $option = $(“”);
- 创建文本节点
创建元素节点后，使用text()方法来设置其节点的文本内容。
$option.text(“北京”);
创建元素节点时，直接将其节点的文本内容插入其中。
var $option = $(“北京”);
- 创建属性节点
创建元素节点后，使用attr()方法来设置其节点的属性。
$option.attr(“value”,“北京”);
创建元素节点时，直接将其节点的属性插入其中。
var $option = $("<option value="北京">北京</option>");
<3>插入节点
- 内部插入节点
append(content) :向每个匹配的元素的内部的结尾处追加内容
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content):向每个匹配的元素的内部的开始处插入内容
prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
//* append(content) :向每个匹配的元素的内部的结尾处追加内容
//append后面的元素插入到append前面的元素的后面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲fk").append(( “#bj”));
//* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
//append前面的元素插入到append后面的元素的后面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xj").appendTo(( “#tj”));
//* prepend(content):向每个匹配的元素的内部的开始处插入内容
//append后面的元素插入到append前面的元素的前面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲city").prepend(( “#fk”));
//* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
//append前面的元素插入到append后面的元素的前面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xj").prependTo(( “#tj”));
- 外部插入节点
after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
//* after(content) :在每个匹配的元素之后插入内容
//把after后面的元素插入到after前面的元素的后面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲p3").after(( “#bj”));
//* before(content):在每个匹配的元素之前插入内容
//把before后面的元素插入到before前面的元素的前面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲p2").before(( “#tj”));
//* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面
//把insertAfter前面的元素插入到insertAfter后面的元素的后面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲p1").insertAfte…( “#bj”));
//* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
//把insertAfter前面的元素插入到insertAfter后面的元素的前面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲p1").insertBefo…( “#bj”));
<4>删除节点
- 北京
海淀区
- 天津
河西区
- 重庆
<5>复制节点
保存段落
//克隆button 追加到p上 ,但事件也克隆
//clone(true): 复制元素的同时也复制元素中的的事件
(
"
b
u
t
t
o
n
"
)
.
c
l
o
n
e
(
t
r
u
e
)
.
a
p
p
e
n
d
T
o
(
("button").clone( true).appendTo(
("button").clone(true).appendTo((“p” ));
<6>替换节点
段落
段落
段落
保存 * replaceWith() $("button" ).replaceWith ("tttttttt
"); * replaceAll() $(" 保存").replaceAll ($ ("p"));<7>包裹节点
- wrap()
jQuery
jQuery
//jQuery代码如下：
$(“strong”).wrap( “”);
//得到的结果如下
jQuery
jQuery
- wrapAll()
jQuery
jQuery
//jQuery代码如下：
$(“strong”).wrapAll( “”);
//得到的结果如下
jQuery
jQuery
- wrapInner()
jQuery
//jQuery代码如下：
$(“strong”). wrapInner( “”);
//得到的结果如下
jQuery
<8>属性操作
- 获取属性和设置属性：attr()
- 删除属性：removeAttr()
<9>样式操作
-
获取class和设置class ：class是元素的一个属性, 所以获取class和设置class都可以使用attr()方法来完成。
-
追加样式：addClass()
-
移除样式：removeClass() — 从匹配的元素中删除全部或指定的class
-
切换样式：toggleClass() — 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它。
-
判断是否含有某个样式：hasClass() — 判断元素中是否含有某个class, 如果有, 则返回true; 否则返回false。
//
$(“#b1”).click(function(){
$( “#mover”).attr(“class” ,“one” );
});
//
$(“#b2”).click(function(){
$( “#mover”).addClass(“mini” );
});
//
$(“#b3”).click(function(){
$( “#mover”).removeClass();
});
//
$(“#b4”).click(function(){
$( “#mover”).toggleClass(“one” );
});
//
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲b5").click(func…( “#mover”).hasClass(“mini” ));
});
<10>遍历节点
-
取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
-
取得匹配元素后面紧邻的同辈元素的集合:next();
-
取得匹配元素前面紧邻的同辈元素的集合:prev()
-
取得匹配元素前后所有的同辈元素: siblings()
-
在jQuery中还有很多遍历节点的方法，具体参看API帮助文档。
其他的还有parents()、parent()、find()、
5 jQuery Dao-Demo1
Demo1
| 选项1 选项2 选项3 选项4 选项5 选项6 选项7 选项8 | 选项9 |
Demo2
添加用户:
姓名: email: 电话:
提交
| 姓名 | 电话 | ||
|---|---|---|---|
| Tom | tom@tom.com | 5000 | Delete |
| Jerry | jerry@sohu.com | 8000 | Delete |
Demo3
全选/全不选
足球 篮球 游泳 唱歌
<input type="button" id="send" value="提 交"/>
</form>
</body>
<script language="JavaScript">
$("#CheckedAll").click(function(){
$("input[name=items]").attr("checked","checked");
});
$("#CheckedNo").click(function(){
$("input[name=items]").attr("checked","");
});
</script>
Demo4
图书分类
5 jQuery Dao-Demo2
<1>需求分析：
-
全选
-
全不选
-
以“客户管理”为例
- 操作“客户管理”
- 选中“客户管理”，所有子元素都被选中
- 不选中“客户管理”，所有子元素都不被选中
- 操作“客户管理”
-
操作任意子元素
- 选中任意一个子元素的时候，“客户管理”也要被选中
- 所有子元素都不被选中时，“客户管理”也不能被选中
<2>分析源代码：
- id属性
- id属性是以“company”开始的，都是客户管理的内容。
- id属性是以“company”开始，并且以“company”结束的，是“客户管理”；id属性是以“company”开始，但是不以“company”结束的，是子元素。
- value属性
- value属性值和id属性值保持一致，知识中间用“，”隔开。
- 字符串的split()方法，将value属性值切割成一个数值，数值的长度为2
- list[0]==list[1]，说明是“客户管理”：list[0]!=list[1]，说明是子元素
quanxian.html
全部选中
全部不选中
保存
关闭
| 操作权限组：人力资源部权限组 |
| 客户管理
客户拜访
联系人列表
联系记录列表
|
2、事件绑定
我们除了可以直接为页面的元素增加事件，也可以利用bind()方法为页面元素来绑定事件。
语法：bind(type, [data], fn)
* 参数type：含有一个或多个事件类型的字符串。
提供可以绑定的事件有：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。
* 参数data：作为event.data属性值传递给事件对象的额外数据对象。
* 参数fn：绑定到每个匹配元素的事件上面的处理函数。
Demo1
什么是jQuery?
Demo2(绑定多个事件，用逗号分隔)
什么是jQuery?
Demo3(传递参数)
退出
Demo4（移除事件）
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
什么是jQuery?
Demo5（移除指定事件）
什么是jQuery?
Demo6（移除指定事件的指定函数）
3、事件切换
- hover()
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
什么是jQuery?
- toggle()（每次点击后一次调用函数）
什么是jQuery?
jQuery对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法是 . a j a x ( ) , 第 二 层 是 l o a d ( ) ， .ajax(), 第二层是load()， .ajax(),第二层是load()，.get()和$.post(), 第三层是 $.getScript() 和 $.getJSON()。
<1>load()
-
load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中。
-
它的结构是: load(url[, data][,callback])
- load()方法提供了回调函数，该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象
load.html
get.jsp
<%@ page language= “java” pageEncoding=“UTF-8” %>
<%
System.out.println(request.getMethod());System.out.println( "connection server success!" ); System.out.println( "username = "+request.getParameter("username")); System.out.println( "password = "+request.getParameter("psw" )); response.setContentType( "text/xml;charset=utf-8"); out.println( "<china>"); out.println( "<province name='吉林省'>" ); out.println( "</province>"); out.println( "</china>"); - load()方法提供了回调函数，该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象
%>
<3>$.getScript()
-
有时候，在页面初次加载时就取得所需的全部的javascript文件是完全没有必要的。虽然我们可以在需要时，动态创建
Method2:
var comments = [
{
“username” : “张三” ,
“content” : “沙发.”
},
{
“username” : “李四” ,
“content” : “板凳.”
},
{
“username” : “王五” ,
“content” : “地板.”
}
];
var html = '';
$.each( comments , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment[ 'username'] + ':</h6><p class="para">' + comment[ 'content'] + '</p></div>' ;
})
<div class="comment" >已有评论：</div>
<div id= "resText" >
</div>
<4>$.getJSON()
通过 HTTP GET 请求载入 JSON 数据。
[
{
“username”: “张三”,
“content”: “沙发.”
},
{
“username”: “李四”,
“content”: “板凳.”
},
{
“username”: “王五”,
“content”: “地板.”
}
]
<div class="comment" >已有评论：</div>
<div id= "resText" >
</div>
</body>
<script language= "JavaScript">
$(function(){
$( '#send').click(function() {
$.getJSON( 'test.json', function(data) {
$( '#resText').empty();
var html = '';
$.each( data , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment[ 'username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>' ;
})
$( '#resText').html(html);
})
})
})
</script>
<5>$.ajax()
graphic
graphic
load.html
<6>实现跨域请求
-
域名：（英语：Domain Name），又称网域、网域名称，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。
-
跨域：两个不同域名之间的通信，称之为跨域。例如：http://www.baidu.com和http://www.sina.com.cn。
-
jQuery如何实现跨域请求？使用JSONP形式实现跨域。
-
什么是JSONP
JSONP（JSON with Padding）是数据交换格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。
由于同源策略，一般来说位于 server.example.com 的网页无法与不是 server.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
<div class="comment" >已有评论：</div>
<div id= "resText" >
</div>
JsonServlet.java
public class JsonServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType( "text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System. out.println("connection server success" );
// 服务器端, 获得回调函数名称
String callback = request.getParameter( "callback");
System. out.println("callback = " +callback);
String json = "{'name':'zhangsan','age':'18'}" ;
out.println(callback+ "("+json+")" );
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType( "text/html;charset=utf-8");
PrintWriter out = response.getWriter();
doGet(request, response);
}
}
带域名形式的JSONP：
<7>序列化元素
在客户端与服务器端进行通信时，常常需要将客户端浏览器中的内容发送至服务器端进行处理。如果需要发送的内容较少时，处理比较方便。但在真实项目中，往往需要处理的数据内容很复杂。jQuery提供了相应的方法帮助开发者解决这个问题。
-
serialize()方法
该方法作用于一个jQuery对象，可以将DOM元素内容序列化为key/value字符串。方便客户端发送请求。
Results:
Single Single2 Multiple Multiple2 Multiple3check1 check2 radio1 radio2 * serializeArray()方法 该方法作用于一个jQuery对象，可以将DOM元素内容序列化为JSON数据格式。
注：此方法返回的是JSON对象而非JSON字符串。
Results:
Single Single2 Multiple Multiple2 Multiple3check1 check2 radio1 radio2
<8>jQuery 加载并解析 XML
-
jQuery 可以通过 $.get() 或 $.post() 方法来加载 xml。
- jQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历。
cities.html
- jQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历。
cities.xml
<?xml version ="1.0" encoding="GB2312" ?> 长春 吉林市 四平 松原 通化 沈阳 大连 鞍山 抚顺 铁岭 济南 青岛 威海 烟台 潍坊1 Validation
1、Validation简介
Validation插件是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证。作为一个标准的验证方法库，Validation拥有如下特点：
-
内置验证规则：拥有必填、数字、EMAIL、URL和信用卡号码等19类内置验证规则。
-
自定义验证规则：可以很方便地自定义验证规则。
-
简单强大的验证信息提示：提供自定义覆盖默认提示信息的功能。
-
实时验证：可以通过keyup或blur事件触发验证，而不仅仅在表单提交时验证。
2、如何使用
- 在页面中引入jQuery文件，再引入Validation插件文件。
注：由于Validation是jQuery的插件，是依赖于jQuery的。所以要先引入jQuery！
3、项目开发中的验证方式：
* 第一层：前端验证——只验证格式
* 第二层：服务器端验证——验证格式和简单数据内容
* 第三层：数据库验证——验证数据的有效性
4、jQuery validation提供了很多的国际化包
注：validation插件程序内部提供了如果校验错误需要显示的messages。
5、使用Validation插件
<1>导入jar包
<2>网页加载完毕之后就调用validation插件的validate方法。
代码解析：
* validate()就是表单验证插件负责验证的方法
* options：格式是json数据格式
* rules：设置页面元素对应的验证规则
* key：对应页面要验证的元素的name属性的值
* value：指定验证规则
* required：验证不能为空
* minlength：验证最小长度
* equalTo：验证当前元素值是否等于指定元素值
* rangelength：验证当前元素的长度有没有超过范围
* messages：设置错误提示信息
* key：对应页面要验证的元素的name属性的值
* value：提示的错误信息
rule:{
key:value
},
messages:{
key:value
}
注：rules中的value实际上就是去调用插件中相关的方法，并且将该元素以及值传递给该函数进行处理。
下面的signupForm是整个表单的id
$().ready(function(){
$(“#signupForm”).validation({
rules:{
firstname:“required”,
lastName:“required”,
username:{
required:true,
minlength:2
},
password:{
required:true,
minlength:5
},
confirm_password:{
required:true,
minlength:5,
equalTo:“#password”
},
email:{
required:true,
email:true
},
topic:{
required:“#newsletter:checked”,
minlength:2
},
agree:“required”
},
messages:{
firstname:“请输入您的姓”,
lastname:“please enter your lastname”,
username:{
required:“please enter a username”,
minlength:“your username must consist of at least 2 characters”
}
}
});
});
...
6、validation插件生成错误提示信息的原理
* validate表单插件验证，默认使用label标签来做错误提示信息
* for：必须是要验证的元素的name属性的值
* class：指定错误提示信息的样式，默认是底层提供
* style=“display：none”：设置成隐藏
errorClass:“error”,
validClass:“valid”,
errorElement:“label”,
//create label
label = $(“<” + this.settings.errorElement + “/”>) //
.attr({“for”:this.idOrName(element),generated:true}) //
.addClass(this.settings.errorClass) //
.html(message||“”); //
validate老版本：运行原理
到对应页面中查找与要验证的元素的name属性值相同的label
* 找到对应label标签，使用对应页面中元素的label标签进行错误提示信息
* 没找到对应标签，通过底层创建一个label标签来进行错误提示信息。
注：在验证select的时候，必须提供一个value为“”的option，因为底层验证的原理就是根据传回的value值是否为空判断用户是否选中了某一个。
7、自己添加一个validate方法
<1>addMethod(name,method,message)方法
参数method是一个函数，接收三个参数（value,element,param）value是元素的值，element是元素本身，param是参数，我们可以用addMethod来添加除built-in Validation methods之外的验证方法，比如有一个字段，只能输一个字母，范围是a-f，写法如下：
<2>自定义验证规则：
$.validator.addMethod(name,method,message);
- name:添加的方法的名字
- method:回调函数，function(value,elemetn,param){}
- value
- element
- param
- message:设置自定义验证规则的错误提示信息
错误提示信息：底层提供—>自定义验证规则提供—>validate提供
<3>
KaTeX parse error: Expected '}', got '&' at position 131: …alue>=params[0]&̲&value<=params[…(“#empForm”).validate({
debug:true,
…
});
通过$.validator.setDaults({
debug:true
});可以把调试设置为默认。
2 uplodify
1、Uploadify可以很容易地实现多文件上传，并提供了两个版本（HTML5和Flash）。
-
下载Uploadify
官方地址：http://www.uploadify.com/ -
下载到一个压缩包(HTML5)：
-
如何实现文件上传
-
下载好压缩包之后，解压里面的文件：
-
jquery-1.9.1.js （jquery主件）
-
jquery.uploadify.js （主要插件）
-
uploadify.swf （flash上传插件）
-
uploadify.css （上传样式表）
-
uploadify-cancel.png （flash上传按钮图标）
-
在需要处理文件上传的页面中，引入上面的所有文件。
- 使用Ajax异步交互来实现文件上传。
index.jsp
<%@ page language =“java” contentType=“text/html; charset=gbk” %>
<!--装载文件-->
<link href ="uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type ="text/javascript" src="./uploadify/jquery-1.4.2.js" ></script>
<script type ="text/javascript" src="./uploadify/jquery.uploadify.js" ></script>
<!--ready事件-->
<script type ="text/javascript" >
$(document).ready( function () {
$("#uploadify" ).uploadify({
'swf': 'uploadify/uploadify.swf' ,
'uploader':'servlet/upload' , //设置文件上传请求路径
//'script':'upload!doUpload.action?name=yangxiang',
//'script': 'servlet/Upload?name=yangxiang',
'cancel' : 'uploadify/uploadify-cancel.png' ,//设置取消按钮图片
'queueID' : 'fileQueue' , //和存放队列的DIV的id一致
//'fileDataName': 'fileupload', //必须，和以下input的name属性一致
'auto' : true , //是否自动开始
'multi': true , //是否支持多文件上传
'buttonText': 'BROWSE' , //按钮上的文字
'simUploadLimit' : 1, //一次同步上传的文件数目
//'sizeLimit': 19871202, //设置单个文件大小限制，单位为byte
'fileSizeLimit' : '6KB' ,
'queueSizeLimit' : 10, //队列中同时存在的文件个数限制
'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.avi' ,//允许的格式
'fileTypeDesc': '支持格式:jpg/gif/jpeg/png/bmp/avi.' , //如果配置了以下的'fileExt'属性，那么这个属性是必须的
'onUploadSuccess': function ( fileObj, response, data) {
alert("文件:" + fileObj.name + "上传成功" );
},
'onUploadError': function (fileObj) {
alert("文件:" + fileObj.name + "上传失败" );
},
'onCancel': function (fileObj){
alert("取消了" + fileObj.name);
}
} );
});
</script >
</head>
<body>
<div id ="fileQueue" style="width:30%" ></div>
<input type ="file" name="uploadify" id= "uploadify" />
<p>
<a href="javascript:jQuery('#uploadify').uploadify('upload','*')" >开始上传</ a>
<a href="javascript:jQuery('#uploadify').uploadify('cancel','*')" >取消所有上传</a >
</p>
</body>
upload.java
public class upload extends HttpServlet {
/**
* Constructor of the object.
*/
public upload() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request
* the request send by the client to the server
* @param response
* the response send by the server to the client
* @throws ServletException
* if an error occurred
* @throws IOException
* if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGetAndPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to
* post.
*
* @param request
* the request send by the client to the server
* @param response
* the response send by the server to the client
* @throws ServletException
* if an error occurred
* @throws IOException
* if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGetAndPost(request, response);
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException
* if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
/**
* get及post提交方式
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void doGetAndPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding( "GBK");
// 文件存放的目录
//C:\\Documents and Settings\\jnzbht\\Workspaces\\MyEclipse 8.5\\upload\\WebRoot\\upload\\
File tempDirPath = new File(request.getSession().getServletContext()
.getRealPath( "/")
+ "\\upload\\");
if (!tempDirPath.exists()) {
tempDirPath.mkdirs();
}
// 创建磁盘文件工厂
DiskFileItemFactory fac = new DiskFileItemFactory();
// 创建servlet文件上传组件
ServletFileUpload upload = new ServletFileUpload(fac);
//使用utf-8的编码格式处理数据
upload.setHeaderEncoding( "utf-8");
// 文件列表
List fileList = null;
// 解析request从而得到前台传过来的文件
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
ex.printStackTrace();
return;
}
// 保存后的文件名
String imageName = null;
// 便利从前台得到的文件列表
Iterator<FileItem> it = fileList.iterator();
while (it.hasNext()) {
FileItem item = it.next();
// 如果不是普通表单域，当做文件域来处理
if (!item.isFormField()) {
//生成四位随机数
Random r = new Random();
int rannum = (int) (r.nextDouble() * (9999 - 1000 + 1)) + 1000;
imageName = DateUtil. getNowStrDate() + rannum
+ item.getName();
BufferedInputStream in = new BufferedInputStream(item
.getInputStream());
BufferedOutputStream out = new BufferedOutputStream(
new FileOutputStream(new File(tempDirPath + "\\"
+ imageName)));
Streams. copy(in, out, true);
}
}
//
PrintWriter out = null;
try {
out = encodehead(request, response);
} catch (IOException e) {
e.printStackTrace();
}
// 这个地方不能少，否则前台得不到上传的结果
out.write( "1");
out.close();
}
/**
* Ajax辅助方法 获取 PrintWriter
*
* @return
* @throws IOException
* @throws IOException
* request.setCharacterEncoding("utf -8");
* response.setContentType("text/html; charset=utf-8");
*/
private PrintWriter encodehead(HttpServletRequest request,
HttpServletResponse response) throws IOException {
request.setCharacterEncoding( "utf-8");
response.setContentType( "text/html; charset=utf-8");
return response.getWriter();
}
}
web.xml
<?xml version ="1.0" encoding="UTF-8" ?>
- jqGrid的是一个支持Ajax的JavaScript控件，为显示和操作的Web表格数据提供解决方案。由于jqGrid是一个通过Ajax回调动态加载数据的客户端解决方案，它可以集成到任何服务器端技术，包括PHP，ASP，Java Servlets和JSP，ColdFusion的，和Perl的。
- 下载jqGrid
官方地址：http://www.trirand.com/blog/
-
下载到一个压缩包：
-
如何使用jqGrid插件
-
页面引入所需文件：
- jqGrid读取数据的四种方式
第一种：XML数据格式
第二种：XMLString数据格式
第三种：JSON数据格式
第四种：JSONString数据格式
data.json
{
“page”:“2” ,
“total”:2,
“records”:“13” ,
“rows”:[
{ “id”:“1” ,“cell” :[“1” ,“2007-10-06” ,“测试 3”,“1000.00”, “0.00”,“1000.00” ,null]},
{ “id”:“2” ,“cell” :[“2” ,“2007-10-06” ,“测试 2”,“700.00”, “140.00”,“840.00” ,null]},
{ “id”:“3” ,“cell” :[“3” ,“2007-10-06” ,“测试 1”,“600.00”, “120.00”,“720.00” ,null]},
{ “id”:“4” ,“cell” :[“4” ,“2007-10-06” ,“测试 2”,“100.00”, “20.00”,“120.00” ,null]},
{ “id”:“5” ,“cell” :[“5” ,“2007-10-06” ,“测试 1”,“200.00”, “40.00”,“240.00” ,null]},
{ “id”:“6” ,“cell” :[“6” ,“2007-10-06” ,“测试 3”,“1000.00”, “0.00”,“1000.00” ,null]},
{ “id”:“7” ,“cell” :[“7” ,“2007-10-06” ,“测试 2”,“700.00”, “140.00”,“840.00” ,null]},
{ “id”:“8” ,“cell” :[“8” ,“2007-10-06” ,“测试 1”,“600.00”, “120.00”,“720.00” ,null]},
{ “id”:“10” ,“cell” :[“10” ,“2007-10-06” ,“测试 2”,“100.00”, “20.00”,“120.00” ,null]},
{ “id”:“9” ,“cell” :[“9” ,“2007-10-06” ,“测试 1”,“200.00”, “40.00”,“240.00” ,null]},
{ “id”:“13” ,“cell” :[“13” ,“2007-10-06” ,“测试 3”,“1000.00”, “0.00”,“1000.00” ,null]},
{ “id”:“12” ,“cell” :[“12” ,“2007-10-06” ,“测试 2”,“700.00”, “140.00”,“840.00” ,null]},
{ “id”:“11” ,“cell” :[“11” ,“2007-10-06” ,“测试 1”,“600.00”, “120.00”,“720.00” ,null]}
]
}
demo.html
官方地址：http://jqueryui.com/
-
下载到一个压缩包：
-
解压缩后，得到的文件夹：
css和js文件夹是所有jQuery UI所需要的样式文件和js文件。
而development-bundle文件夹中，存放的是独立的UI文件。
-
搭建jQuery UI开发环境：
-
集成方式使用
引入js文件夹中的jquery-1.9.1.js和jquery-ui-1.10.2.custom.js
引入css文件夹中的jquery-ui-1.10.2.custom.css文件
- 独立方式使用
development-bundle目录中 每个jQuery UI插件都位于一个单独.js文件中。
例如使用Accordion控件 依赖：
-
ui/jquery.ui.core.js
-
ui/jquery.ui.widget.js
-
ui/jquery.ui.accordion.js
-
themes/base/jquery.ui.theme.css
-
themes/base/jquery.ui.core.css
-
themes/base/jquery.ui.accordion.css
5 创建jQuery插件
<1>编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。
* 插件的种类
* 封装jQuery对象方法的插件
这种类型的插件是把一些常用或者重复使用的功能定义为函数，然后绑定到jQuery对象上，从而成为jQuery对象的一个扩展方法。
目前，大部分jQuery插件都是这种类型的插件，由于这种插件是将对象方法封装起来，在jQuery选择器获取jQuery对象过程中进行操作，从而发挥jQuery强大的选择器的优势。有很多jQuery内部方法，也是在jQuery脚本内部通过这种形式插入到jQuery框架中的，如parent()、appendTo()和addClass()等方法。
* 封装全局函数的插件
可以把自定义的功能函数独立附加到jQuery命名空间下，从而作为jQuery作用域下的一个公共函数使用。例如，jQuery的ajax()方法就是利用这种途径内部定义的全局函数。
由于全局函数没有被绑定到jQuery对象上，故不能够在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或者$.fn()方式进行引用。
* 选择器插件
jQuery提供了强大的选择器，当然在个性化开发中，可能会感觉到这些选择器不够用，或者使用不是很方便。这个时候，我们就可以考虑自定义选择器，以满足特定环境下的选择元素摘要。
* 解析jQuery插件机制
<2>jQuery.extend()方法和jQuery.fn.extend()方法
* jQuery.extend()方法能够创建全局函数或者选择器。
* jQuery.fn.extend()方法能够创建jQuery对象方法。
* jQuery.extend()方法和jQuery.fn.extend()方法都包含一个参数，该参数仅接受key/value对结构的对象（其中明表示函数或方法名；而值表示函数体）。
* jQuery.extend()方法除了可以创建插件外，还可以用来扩展jQuery对象。
-
创建jQuery全局函数
jQuery内置的很多方法都是通过全局函数实现，所谓全局函数，就是jQuery对象的方法，实际上就是位于jQuery命名空间内部的函数。这类函数也称之为实用工具函数。这些函数有一个共同特点，就是不直接操作DOM元素，而是操作javascript的非元素对象，或者执行其他非对象的特定操作。例如 . a j a x ( ) 方 法 。 向 j Q u e r y 命 名 空 间 上 添 加 一 个 函 数 ， 只 需 要 将 这 个 新 函 数 指 定 为 j Q u e r y 对 象 的 一 个 属 性 即 可 。 其 中 j Q u e r y 对 象 名 也 可 以 简 写 为 .ajax()方法。 向jQuery命名空间上添加一个函数，只需要将这个新函数指定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为 .ajax()方法。向jQuery命名空间上添加一个函数，只需要将这个新函数指定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为。但建议编写插件中始终使用jQuery来调用jQuery方法。
test.js
//测试extend()方法
jQuery.extend({
minValue : function(a,b){
return a < b ? a : b;
},
maxValue : function(a,b){
return a < b ? b : a;
}
});
//定义全局函数
jQuery.minValue = function(a,b){
return a < b ? a : b;
};
jQuery.maxValue = function(a,b){
return a < b ? b : a;
};
test.html
- 创建jQuery对象方法
- jQuery.fn对象创建
//js文件
jQuery.fn.test = function(){
alert( “这是jQuery对象方法!” );
}
- jQuery.fn对象创建
由于这里并没有任何地方匹配DOM节点，所以也可以使用全局函数。
//js文件
jQuery.fn.value = function(){
//遍历所有匹配的元素，此处的this表示对象集合，即jQuery对象
this .each(function(){
//现实当前元素的value属性值，此处的this表示元素对象
alert( this .value);
});
}
如果在调用一个方法之后，直接再调用另一个方法的话：就需要第一个方法中返回一个jQuery对象。
jQuery.fn.valueTo = function(obj){
//遍历所有匹配的元素，此处的this表示对象集合，即jQuery对象
return this .each(function(){
obj.html( this .value);
});
}
jQuery.fn.extend()方法
jQuery.fn.extend()方法仅包含一个参数，该参数是一个对象直接量，是以key/value对形式组成的多个属性，名称表示方法名称，值表示函数体。
jQuery.fn.extend({
test : function(){
return this .each(function(){
alert( this .value);
});
}
})
<3>创建自定义选择器
* jQuery提供了强大的选择和过滤功能，它完全演绎了CSS3.0选择器的语法规则，使开发者根据CSS选择器的使用习惯，以一种惯性思维快速找到所要匹配的DOM节点。对于jQuery选择器，我们可以根据个人开发需要创建个性化的选择，以满足特殊选择操作。
* 选择器的工作机制
* jQuery选择器会使用一组正则表达式来分析选择器。
* 针对所解析出来的每一个选择符执行一个函数，这个函数被称为选择器函数。
* 根据这个选择器函数的返回值是否为true，决定是否保留当前元素，这样就可以找到所要匹配的元素节点。
<4>创建jQuery插件应注意的问题
* 命名规则
推荐方式：jquery.plugin.[插件名].js
* 基本思想
所有新方法都附加到jQuery.fn对象上，所有新功能都附加到jQuery对象上。这是实际编码过程中最重要的规则。
* 方法内的this关键字
在插件方法中，this关键字用于引用jQuery对象，这有利于插件编写。它让所有插件在引用this时，知道从jQuery接受到哪个对象。所有jQuery方法都是在一个jQuery对象的环境中调用的，因此函数体中this关键字总是指向该函数的上下文，即this此时是一个包含多个DOM元素的数组。
* 迭代匹配元素
使用this.each()迭代匹配的元素，这是一种可靠而有效地迭代对象的方式。
* 返回值
插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量。
* 避免的事情
避免在插件内使用$作为jQuery对象的别名，而应使用完整的jQuery来表示。
<5>创建jQuery插件实战
(function($){
jQuery.extend(jQuery.fn, {
showIn : function(speed, fn){
return this .animate({
height : “show”,
opacity : “show”
}, speed, fn);
},
hideOut : function(speed, fn){
return this .animate({
height : “hide”,
opacity : “hide”
}, speed, fn);
}
})
})(jQuery);
扫一扫
1112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
