Java进阶-3.jquery
JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。核心理念是write less,do more(写得更少,做得更多)
当前流行的 JavaScript 库有：
jQuery 使用非常多了
EXTJS 功能比jQuery更多，但ext2.0收费
Prototype 一般用于做框架
YUI! (Yahoo! User Interface)
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。由美国人John Resig在2006年1月发布。jQuery是免费、开源的。
jQuery分类：
WEB版本：我们主要学习研究 （jQuery-版本.js 、 jQuery-版本-min.js）
UI版本：集成了UI组件
mobile版本：针对移动端开发
qunit版本：用于js测试的
一、jquery
将对原生js常见的方法和对象进行封装，方便使用。
以前通过js获取对象的时候：var obj=document.getElementById("id");
其实可以整合为一个函数，例如：
funtion getId(id){
return document.getElementById("id");
}1.jquery和html的整合
jquery是单独的js文件，通过script标签的src属性导入即可。
例如：
2.获取一个jquery对象
$("选择器")或者jQuery("选择器")
3.dom和jquery的转换
dom对象---->jquery对象
$(dom对象)
//1.获取dom对象
var obj=document.getElementById("username");
//2.转化
var $user=$(obj);jquery对象--->dom对象
方式1：jquery对象[index]，因为jQuery可能是个数组
方式2:：jquery对象.get(index)
//1.获取jquery对象
var $u=$("#username2");
//2.转换
//2.1 方式1
var obj = $u.get(0);
//2.2 方式2
var obj = $u[0];二、页面加载
js：window.οnlοad=function(){}//在一个页面中只能使用一次，最后一个onload的代码内容生效，其他的都不生效。
Jquery：在一个页面中可以使用多次。
方式1：$(function(){...})
方式2：$(document).ready(function(){...})
三、派发事件
$("选择器").click(function(){...});支持链式编程，等价于原生js中：dom对象. onclick =function(){....}
掌握事件：focus、blur、submit、change、click
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function(){
$("#textMsg").append("键盘按下：keydown");
}).keypress(function(event){
$("#textMsg").append("键盘按：keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
});
});四、jquery滑动等效果
隐藏或展示：show(毫秒数)、 hide(毫秒数)
滑入或滑出
slideDown(毫秒数)：向下滑入，slideToggle
slideUp(毫秒数)：向上滑出
淡入或淡出
fadeIn(int)：淡入，toggle()
fadeOut(int)：淡出
例如：$("#b1Div").toggle(1000);
五、选择器
基本选择器：$("#id值")、$(".class值")、$("标签名")、获取全部选择器：$("*")
获取多个选择器，用逗号隔开：$("#id值,.class值")
01-基本选择器.html
基本选择器.
id为one,class为one的div
class为mini
id为two,class为one,title为test的div.
class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
class为"hide"的div
包含input的type为"hidden"的div
正在执行动画的span元素.
层次选择器：
a b: a的所有b后代
a>b: a的所有b孩子
a+b: a的下一个兄弟元素
a~b: a的所有兄弟元素
02-层次选择器.html
层次选择器.
id为one,class为one的div
class为mini
id为two,class为one,title为test的div.
class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
class为"hide"的div
包含input的type为"hidden"的div
正在执行动画的span元素.
基本过滤选择器：
:frist 第一个，例如div:first第一个div
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >索引
:lt(index) <索引内容过滤： :has("选择器") 包含指定选择器的元素
$("div:has('.mini')").css("background-color","#0ff");可见过滤：
:hidden 在页面不展示元素，一般指 input type="hidden" 和 样式中display:none
:visible
属性过滤器：
[属性名]，例如$("div[title]").css("background-color","#ff0");选出有title属性的div。
[属性名="值"]，例如$("div[title='test']").css("background-color","#ff0");选出title属性值为test的div。表单过滤：
:input 所有的表单子标签 input/ select /textarea/ button
$("#form1 input").size()，这是层次选择器，匹配到所有的后代input。
$("#form1 :input").size()，这是匹配到所有表单的子input标签，不会匹配到孙子辈的input。六、属性和css操作
对属性的操作:
1.attr()：设置或者获取元素的属性
方式1：获取
attr("属性名称")
方式2：设置一个属性
attr("属性名称","值");
//给username添加title属性
var $username=$("[name='username']");属性选择器
$username.attr("title","姓名");方式3：设置多个属性
attr({
"属性1":"值1",
"属性2":"值2"
})
$username.attr({
"value":"许多多",
"class":"textClass"
}); 2.removeAttr("属性名称"):移除指定属性
$username.removeAttr("class");将jQuery对象的class的样式删除掉3.addClass("指定的样式值")
相当于 attr("class","指定的样式值");
$username.addClass("textClass");//增加一个名为textclass的class4.removeClass("指定的样式值")
$username.removeClass("textClass");将名称为textclass的样式删除注意：若jquery版本>1.6 统一使用 prop操作元素的属性，attr获取不了checked属性。
全选或者全不选案例：
$(".itemSelect").prop("checked",$(this).prop("checked"));将checked属性设置成this的checked状态七、操作元素的style属性
css()：获取或者设置css样式
方式1：获取
css("属性名")
方式2：设置一个属性
css("属性名","值")
方式3：设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
var $div=$("div");
$div.css("border","1px solid red");获取元素的尺寸:
width()、height()
例如：alert($div.width());
八、遍历jQuery对象
方法1：数组.each(function(){});
方法2：$.each(要遍历数组,function(){});
例子：遍历所有隐藏域的value属性值：
$("#b2").click(function(){
$.each($("input:hidden"), function() {
alert($(this).val());
});
});each的function中可以加两个参数index和dom，index是当前遍历的索引值，dom指代的是当前遍历的dom对象(开发中一般使用this即可)。
$("input:hidden").each(function(index,dom){
//alert(this.value)
//alert($(this).val());
//alert(index)//索引
//alert(dom.value)
});九、设置或者获取value属性
jquery对象.val()：获取
jquery对象.val("....")：设置
十、设置或者获取获取标签体内容
html()，text()
xxxxx()：获取标签体的内容
xxxxx(".....")：设置标签体的内容
设置的区别:
html：会把字符串进行解析
text：只做为普通的字符串
获取的区别:
html：获取的html源码，会将” ”里面的代码解析出来
例如：创建一个元素: $("<标签>标签>")
$div.html($("").html("我"))，我将会是一个链接
text：获取只是页面展示的内容
在jquery中创建元素
$("<标签名>").prop(属性).html(内容)
十一、文档操作
内部插入(a和c为jQuery对象)
a.append(c)：将c插入到a内部(标签体)的后面
a.prepend(c)：将c插入到a的内部的前面
appendTo等价于c.appendTo(a)、prependTo
外部插入
a.after(c)：将c放到a的后面
a.before(c)：将c放到a的前面
a.insertAfter(c)，将a放在c后面
a.insertBefore(c)
删除
empty() 清空对象内部的所有元素
remove() 删除对象
十二、表单对象属性过滤选择器
:enabled 可用的，不设置disabled="disabled"就都是enable
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)
例如：$("input:enabled").val("我们来自黑马");
十三、案例
1.左右选中案例
左右选中.html
2.省市联动
$(function(){
$("[name='pro']").change(function(){
//获取市下拉选
var $city=$("[name='city']");
//初始化
$city.html($("");
});
});
});