0618第43天-jQuery1.11.3-day02
jQuery: 它是一个开源的Ajax框架，也是学javaEE必须要掌握的框架。
因为它是目前企业中用到得最多的一个框架.
-- jQuery历史：
2006年8月：第一个版本.
2015年4月28日：V1.11.3.
-- 它的官方网站： http://www.jquery.com
V1.xxx.xx : 支持所有浏览器.
V2.xxx.xx : 不支持msie6,7,8. msie9+: html5.
V1.xxx.xx:
1.9.0之前版本：下载一个js文件.
1.9.0之后版本: 下载两个js文件.
下载哪些文件：
jquery-1.11.3.js (源码)
jquery-1.11.3.min.js (源码压缩后的)
jquery-migrate-1.2.1.js (源码) 迁移插件.
jquery-migrate-1.2.1.min.js (源码压缩后的).
学习时用：
jquery-1.11.3.js
jquery-migrate-1.2.1.js
实际项目开发：
jquery-1.11.3.min.js
jquery-migrate-1.2.1.min.js
-- 这个项目的开发宗旨：
write less, do more: 写更少，做更多.
-- 学习Ajax框架的好处：
1. 它可以帮我们解决js跨浏览器兼容问题.
2. 简化dom编程.
3. 简化异步请求.
4. 它提供了一批好用工具的方法.
-- 市面上用到得Ajax框架：
1. 重量级(界面组件)：extjs、dojo.
2. 轻量级(没有界面组件): jquery、prototype.
jquery-easyui
一、jQuery入门：
第一步：在html页面上引入jquery两个js文件.
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
第二步：监听文档是不是加载完 window.onload.
$(window).ready(function(){
alert("第一种方式");
});
$(this).ready(function(){
alert("第二种方式");
});
$(document).ready(function(){
alert("第三种方式");
});
$(function(){
alert("第四种方式");
});
第三步：查询dom元素.
$ === jQuery
window.jQuery = window.$ = jQuery;
第四步：对dom元素操作.
二、核心部分：
1. jQuery(selector, [context]) : 核心函数.
核心函数调用返回得是jQuery对象,这个jQuery对象就封装了查询到得dom元素.
对jQuery对象做操作，实际上就是对它查询到得dom元素做操作.
-- selector : 选择器(是jQuery规定的查询字符串).
-- context: 上下文(也是就是查询范围)。默认为document.(当前html文档).
2. $("selector").length: 获取jQuery对象中查询到得dom元素的个数.
3. $("selector").size(): 获取jQuery对象中查询到得dom元素的个数.
4. $("selector").each() : 迭代jQuery对象中查询到得dom元素。
$("selector").each(function(i, item){
// i: 索引号
// this === item : dom元素
});
5. $("selector").selector: 获取你调用jQuery核心函数传进去的第一个参数.
6. $("selector").context: 获取你调用jQuery核心函数传进去的第二个参数.
7. $("selector").get(i): 从jQuery对象中根据索引号取指定dom元素.
$("selector").get(): 从jQuery对象中取指定dom元素,返回一个dom元素数组(Array).
8. 从jQuery对象中取dom元素：
a. 第一种方式：
$("selector").get(i).
b. 第二种方式：
$("selector").get()[i].
c. 第三种方式：
$("selector")[i].
d. 第四种方式：
$("selector").toArray()[i].
9. 把dom元素转换成jQuery对象.
var obj = $(dom元素);
三、选择器(查询字符串)
1. $("#html元素的id属性值"): $("#div1").
2. $("html元素的标签名"): $("div") $("input").
3. $(".html元素的class属性值"): $(".myClass1").
4. 选择器组合：
$("#html元素的id属性值,html元素的标签名,.html元素的class属性值");
5. $("selector1 selector2") : 查询父元素中所有的子元素(不是父子关系的查询).
6. $("selector1 > selector2") : 查询父元素中的直接子元素(父子关系的查询).
7. $("selector1 + selector2") : 查询相邻的后面的一个元素.
8. $("selector1 ~ selector2") : 查询相邻的后面的所有的指定元素.
9. $("selector:first") : 查询后取第一个.
10. $("selector:last") : 查询后取最后一个.
11. $("selector:eq(i)") : 查询后根据索引号取指定的.
12. $("selector:not(selector)"): 查询后不包含指定的索引号对应的dom元素.
13. 属性选择器:
a. $("html元素的标签名[属性名]"). $("div[id]")
b. $("html元素的标签名[属性名=属性值]"). $("div[id='div1']")
c. $("html元素的标签名[属性名^=属性值]"). $("div[id^='di']")
d. $("html元素的标签名[属性名$=属性值]"). $("div[id$='v1']")
e. $("html元素的标签名[属性名*=属性值]"). $("div[id*='i']")
f. $("html元素的标签名[属性名!=属性值]"). $("div[id!='div1']")
属性选择器组合：
$(html元素的标签名[属性名][属性名=属性值][属性名^=属性值]...")
14. $("selector:checked"): 把选中的checkbox、radio查询出来.
$("input[type='checkbox']:checked");
$("input[type='radio']:checked");
15. $("selector:selected"): 把选中的option查询出来.
$("select > option:selected");
四、操作属性：
1. 添加属性值：
$("selector").attr("属性名", "属性值")
.attr("属性名", "属性值");
$("selector").attr({"属性名":"属性值","属性名": "属性值"});
$("selector").prop("属性名", "属性值")
.prop("属性名", "属性值");
$("selector").prop({"属性名":"属性值","属性名": "属性值"});
2. 获取属性值：
$("selector").attr("属性名");
$("selector").prop("属性名");
3. 删除属性:
$("selector").removeAttr("属性名");
五、操作class：
1. 添加class:
$("selector").addClass("class名称1 class名称2");
2. 删除class:
$("selector").removeClass("class名称1 class名称2"); // 删除指定class
$("selector").removeClass(); // 删除全部class
3. 获取class:
$("selector").attr("class");
4. class开关:
$("selector").toggleClass("class名称1 class名称2");//对指定class做开关操作.
六、操作文本：
1. 添加文本
$("selector").html("html格式文本|普通文本");
$("selector").text("普通文本");
2. 获取文本
$("selector").html();
$("selector").text();
3. 删除文本
$("selector").html("");
$("selector").text("");
七、操作value：
1. 设置value
$("selector").val("值");
$("selector").attr("value","值");
$("selector").prop("value","值");
$("selector").get(0).value = "值";
$("selector").get()[0].value = "值";
$("selector")[0].value = "值";
$("selector").toArray()[0].value = "值";
2. 获取value
$("selector").val();
$("selector").attr("value");
$("selector").prop("value");
$("selector").get(0).value;
$("selector").get()[0].value;
$("selector")[0].value;
$("selector").toArray()[0].value;
3. 删除value
$("selector").val("");
$("selector").attr("value","");
$("selector").prop("value","");
$("selector").get(0).value = "";
$("selector").get()[0].value = "";
$("selector")[0].value = "";
$("selector").toArray()[0].value = "";
八、操作css(style属性):
1. 设置css
$("selector").css("样式名", "样式值");
$("selector").css({"样式名": "样式值", "样式名": "样式值"});
2. 获取css值
$("selector").css("样式名");
3. 删除css
$("selector").css("样式名", ""); // 删除指定的
$("selector").removeAttr("style"); // 删除全部
4. 设置宽度、获取宽度.
$("selector").width("值");
$("selector").width();
5. 设置高度、获取高度.
$("selector").height("值");
$("selector").height();
九、文档处理：
/** ############### 往目标元素里面添加子元素 ################# **/
1. $("selector").append("html格式的字符串"); // 往目标元素里面最后面添加子元素.
2. $("html格式的字符串").appendTo("selector"); // 把子元素追加到目标元素里面最后面.
3. $("selector").prepend("html格式的字符串"); // 往目标元素里面最前面添加子元素.
4. $("html格式的字符串").prependTo("selector"); // 把子元素追加到目标元素里面最前面.
/** ############### 往目标元素外面添加相邻的元素 ################# **/
5. $("selector").after("html格式的字符串"); // 往目标元素外面最后面添加相邻元素.
6. $("html格式的字符串").insertAfter("selector"); // 把元素追加到目标元素外面最后面.
7. $("selector").before("html格式的字符串"); // 往目标元素外面最前面添加相邻元素.
8. $("html格式的字符串").insertBefore("selector"); // 把元素追加到目标元素外面最前面.
9. $("selector").empty(); // 清空所有的子元素.
10. $("selector").remove(); // 删除所有的元素.
十、筛选(查询后再一次过滤):
-- 实际是把选择器改成了方法.
1. $("selector").eq(i) : 查询后再根据索引取.
2. $("selector").first() : 取第一个
3. $("selector").last() : 取最后一个
4. $("selector").filter("seletor"): 查询后把需要的过滤出来.
5. $("selector").map() : 把查询到的jQuery对象转化成另外一个jQuery对象.
该jQuery对象中封装的元素不再是dom元素，而是map方法
中回调函数的返回值.
var obj1 = obj.map(function(i, item){ // obj1封装得是map方法回调函数的返回值
//alert(i + "==" + item);
return item.name + "=" + item.value;
});
alert(obj1.get().join("&"));
6. $("selector").not("selecotr") : 查询后不包含哪一个.
7. $("selector").children() : 查询所有直接的子元素.
8. $("selector").find("selector"): 查询指定的子元素.
$("ul").find("div").css("color", "red");
十一、动画效果:
1. 显示与隐藏:
a. $("selector").show(1000, function(){}); // 显示
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：动画完成后需要回调的函数.
b. $("selector").hide(1000, function(){}); // 隐藏
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：动画完成后需要回调的函数.
c. $("selector").toggle(1000, function(){}); // 显示隐藏开关
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：动画完成后需要回调的函数.
2. 滑上与滑下：
a. $("selector").slideDown(1000, function(){}); // 显示(滑下)
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：动画完成后需要回调的函数.
b. $("selector").slideUp(1000, function(){}); // 隐藏(滑上)
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：动画完成后需要回调的函数.
c. $("selector").slideToggle(1000, function(){}); // 显示隐藏(滑下滑上)开关
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：动画完成后需要回调的函数.
3. 淡入与淡出：
a. $("selector").fadeOut(1000, function(){}); // 显示(淡入)
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：动画完成后需要回调的函数.
b. $("selector").fadeIn(1000, function(){}); // 隐藏(淡出)
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：动画完成后需要回调的函数.
c. $("selector").fadeToggle(1000, function(){}); // 显示隐藏(淡入淡出)开关
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：动画完成后需要回调的函数.
4. 淡入到指定的透明度：
$("selector").fadeTo(1000, [0-1], function(){});
-- 第一个参数：执行动画毫秒数.
-- 第二个参数：透明度(0-1).
-- 第三个参数：动画完成后需要回调的函数.
十二、事件绑定：
1. 用on()方法绑定事件.
$("selector").on("click mouseover", {name:'admin'}, function(event){
// event.type : 获取事件类型.
// event.data : 获取事件数据.
});
-- 第一个参数：事件名(事件名把前面的on去掉).
-- 第二个参数：数据.
-- 第三个参数：事件处理函数.
$("selector").on({
"click" : function(){
},
"mouseover" : function(){
}
});
2. 用bind()方法绑定事件.
$("selector").bind("click mouseover", {name:'admin'}, function(event){
// event.type : 获取事件类型.
// event.data : 获取事件数据.
});
-- 第一个参数：事件名(事件名把前面的on去掉).
-- 第二个参数：数据.
-- 第三个参数：事件处理函数.
$("selector").bind({
"click" : function(){
},
"mouseover" : function(){
}
});
3. 主动触发事件.
a. $("selector").trigger("click");
b. $("selector").triggerHandler("click");
4. hover集成了onmouseover与onmouseout.
$("selector").hover(
function(){}, // onmouseover
function(){} // onmouseout
);
5. 按点击次数绑定事件：
$("selector").toggle(
function(){ // 点击第一次
},
function(){ // 点击第二次
},
function(){ // 点击第三次
}
);
6. 特殊方法绑定相应的事件：
onclick --> click();
onblur --> blur();
onchange --> change();
onxxx --> xxx();
十三、事件对象：
-- event.type : 获取事件类型.
-- event.data : 获取事件数据.
十四、工具方法：
1. $.each() : 数组迭代方法
$.each([], function(i, item){
// i : 索引号
// this === item : 数组元素
});
2. $.extend({},{}) : 两个json对象进行合并,把后面的json对象合并到前面的json对象中.
3. $.grep() : 数组过滤返回一个新数组.
var newArr = $.grep([], function(item, i){
// i : 索引号
// item : 数组元素
return true: 保留 false: 不保留
});
4. $.map(): 把一个数组转化成一个新的数组.
var newArr = $.map([], function(item, i){
// i : 索引号
// item : 数组元素
return "值"; // 返回值存入新的数组
});
5. $.merge([],[]): 两个数组合并，返回一个新数组.
6. $.parseJSON(): 把json字符串解析成json对象.
var str = '{"name" : "李刚", "age" : 50}';
-- key : 必须用双引号
-- value: 如果是字符串也必须用双引号.
7. $.trim() : 去掉字符串前后的空格.
8. $.param() : 把json对象转化成get请求的字符串key=value&key=value
g
十五、异步请求(ajax)：
1. $.ajax(url, settings) : 核心方法.
-- 第一个参数：请求URL.
-- 第二个参数：settings发送异步请求需要设置的参数.{}json对象.
$.ajax({
url : "请求URL",
type : "get|post|put|delete", // 请求方式
data : "key=value&key=value|{key:value,key:value}|[{key:value,key:value},..]", // 请求参数
dataType : "text|html|xml|json|script|jsonp", // 指定服务器响应回来的数据类型.
async : true|false, // 异步｜同步
success : function(data){ // 请求成功
// data : 响应数据
},
error : function(){ // 请求失败
}
});
2. $.get() : 只发送get请求
$.get(url, data, function(data, status){
// status(状态码): success 、error
// data : 响应数据
}, dataType);
-- 第一个参数：请求URL
-- 第二个参数：请求参数
-- 第三个参数：回调函数
-- 第四个参数：服务器端响应回来的数据类型
3. $.post() : 只发送post请求
$.post(url, data, function(data, status){
// status(状态码): success 、error
// data : 响应数据
}, dataType);
-- 第一个参数：请求URL
-- 第二个参数：请求参数
-- 第三个参数：回调函数
-- 第四个参数：服务器端响应回来的数据类型
4. $.getJSON(): 发送get请求响应数据为json.
$.getJSON(url, data, function(data, status){
// status(状态码): success 、error
// data : 响应数据
});
-- 第一个参数：请求URL
-- 第二个参数：请求参数
-- 第三个参数：回调函数
5. $.getScript() : 发送get请求响应数据为script.
$.getScript(url, function(data, status){
// status(状态码): success 、error
// data : 响应数据
});
-- 第一个参数：请求URL
-- 第二个参数：回调函数
6. $("selector").load()发送get请求响应数据为html.(加载公共的页面)
$("selector").load(url, function(data, status){
// status(状态码): success 、error
// data : 响应数据
});
-- 第一个参数：请求URL
-- 第二个参数：回调函数
// 发送异步请 求开始
$("#loading").ajaxStart(function(){
$(this).show();
});
// 发送异步请 求结束
$("#loading").ajaxStop(function(){
$(this).hide();
});
异步请求示例：
1. 省份城市联级下拉列表(异步请求,响应数据为xml) $.ajax()
2. 省份城市联级下拉列表(异步请求,响应数据为json) $.ajax()
3. $.get()发送请求
4. $.post()发送请求
5. $.getScript()
6. $.getJSON()
7. $("selector").load()
