JQuery

JQuery
一.Hello JQuery
JQuery是一个javascript的框架，是对jvascript的一种封装。通过JQuery可以非常方便的操作html的元素
1.jquery.min.js

要使用Jquery需要导入一个第三方的javascript库 jquery.min.js
2.理解();和function(){ }两部分构成，合起来就是 (document).ready(function(){ });也由两部分组成("#id")获取 例 document.write( (#id)获取到的是一个JQuery对象
4.增加监听器
("#b1").click();和function(){alert("点击了按钮");}
b1按钮的点击事件 弹出对话框的函数
5.隐藏与显示
("#d").show();
通过$("#d")拿到div对象后，直接调用hide()和show()方法，即可实现隐藏和显示。

二.常见方法
1.取值 通过JQuery对象的val()方法取值
("#d1").html() 通过html()获取元素内容，如果有子元素，保留标签
3.获取元素内容，如果有子元素，不包含元素标签
$("#d1").text() 通过text()获取元素内容，如果有子元素，不包含标签

三.CSS
1.增加class
通过addClass()增加一个样式中的class
("#d").removeClass("pink");
3.切换class
通过toggleClass() 切换一个样式中的class 切换指存在就删除，不存在就添加
("#d1").css("background-color","pink"); 设置单一样式
$("#d2").css({"background-color":"pink","color":"green"}); 设置多种样式
参数是{}包含的属性值对，属性值对之间用逗号(,)分割。属性值之间用冒号(:)分割，属性和值都需要用引号“”

四.选择器
1.元素
("div").addClass("pink");
2.id
("#d1").addClass("pink");
3.类
(".d").addClass("pink");
4.层级
("div#d3 span").addClass("pink");
5.最先最后
(selector:last) 满足选择器条件的最后一个元素
("div:last").addClass("pink");
6.奇偶
(selector:even) 满足选择器条件的偶数元素
(因为是基零的，所以第一排的下标其实是0(是偶数))
("div:even").toggleClass("green");
7.可见性
(selector:visible)满足选择器条件的可见的元素
注意：div:visible和div:visible(有空格)是不同的意思
div:visible表示选中个可见的div div :visible(有空格) 表示选中div下可见的元素
("div:hidden").show();
8.属性
(selector[attribute=value]) 满足选择器条件的属性等于value的元素
(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素

("div[id='pink']").toggleClass("border"); 给id=pink的div切换边框
("div[id^='p']").toggleClass("border"); 给有id以p开头的div切换边框
='k']").toggleClass("border"); 给有id以k结尾的div切换边框
$("div[id*='ee']").toggleClass("border"); 给有id包含ee的div切换边框

9.表单对象
表单对象选择器指的是选中form下出现的输入元素
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea，select，button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text 会选择文本框，但不会选择文本域
:submit 会选择提交按钮
:image 会选择图片型提交按钮
:reset会选择重置按钮
(".b").click(function(){
var value = ("td[rowspan!=13] "+value).toggle(500); }); });
注意：$("td[rowspan!=13] 后面有一个空格，表示层级选择器，
意思是获取 满足rowspan属性的属性值不为13的td元素下的所有元素
如果没有出错，toggle(500)表示在显示与隐藏之间来回切换，生效时间是500毫秒
submit会把元素选中，因为在一些浏览器中，元素的type默认值是submit，
所以会选中它

10.表单对象元素
：enabled 会选择可用的输入元素 注:输入元素的默认状态都是可用
：disabled会选择不可用的输入元素
：checked会选择被选中的单选框和复选框 注：checked在部分浏览器上(火狐，chrome)也可以选中selected的option
：selected会选择被选中的option元素

11.当前元素
在监听函数中使用(function() { (this).hide(); }); });

五.筛选器
1.第一个 最后一个 第几个
首先通过 ("div").first().toggleClass("pink"); 切换第1个div背景色
("div").eq(4).toggleClass("pink"); 切换第5个div背景色
2.父 祖先
parent() 选取最近的一个父元素
parents() 选取所有的祖先元素
("#currentDiv").parents().toggleClass("b"); 改变parents()的边框
3.儿子 后代
children():筛选出儿子元素(紧挨着的子元素)
find(selector):筛选出后代元素 注：find()必须使用参数selector
("#currentDiv").find("div").toggleClass("b");
4.同级
sibings():同级(同胞)元素
$("#currentDiv").siblings().toggleClass("b");

六.属性
1.获取
通过attr()获取一个元素的属性

居中标题

("#h").attr("game") 获取自定义属性 game
2.修改
通过attr(attr,value)修改属性
("#h").removeAttr("align"); 删除align属性
4.prop与attr的区别
("#c").prop("game") 获取属性值结果为undefined
("#c").prop("checked") 当选中属性时，获取值true，当未选中属性时，获取值false

与prop一样attr也可以用来获取与设置元素的属性。区别在于，对于自定属性和选中属性的处理。
选中属性指的是checked，selected这两种属性。1.对于自定义 属性attr能够获取，prop不能获取
2.对于选中属性：attr只能获取初始值，无论是否变化，prop能够访问变化后的值，并且以true|false的
布尔型返回，所以在访问表单对象属性的时候，应该采用prop而非attr.

七.效果
1.显示 隐藏 切换
显示 隐藏 切换 分别通过show(),hide(),toggle()实现，也可以加上毫秒数，表示延时操作，比如show(2000).
("#d").show(); 立即显示
("#d").show(1000); 延时显示
("#d").toggle(1000); 延时切换
2.向上滑动 向下滑动 滑动切换
向上滑动 向下滑动 滑动切换 分别通过slideUp(),slideDown(),slideToggle()实现，也可以加上毫秒数，表示延时操作，比如slideUp(2000).
("#d").slideDown(); 向下滑动
("#d").slideUp(2000); 延时向上滑动
("#d").slideToggle(2000); 延时滑动切换
3.淡入 淡出 淡入淡出切换 指定淡入程度
淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(),fadeOut(),fadeToggle() fadeTo(实现)
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数.0表示不淡入，1表示全部淡入
("#d").fadeOut(); 淡入
("#d").fadeIn(2000); 延时淡出
("#d").fadeToggle(2000); 延时滑淡入淡出切换
$("#d").fadeTo("slow",0.2); fadeTo
4.自定义动画效果
通过animate可以实现动画效果，animate()第一个参数为css样式，animate()第二个参数为延时毫秒
注：默认情况下，html中的元素都是固定的，并且无法改变位置的，为了使用animate()自定义动画动画效果，需要通过css把元素的position设置为relative，absolute或者fixed
div.animate({left:'100px'},2000); 向右移动100px
div.animate({left:'0px',top:'50px',height:'50px'},2000); 向左下移动50px，同时高度变小
5.回调函数
效果方法都提供对回调函数callback()的支持,只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会调用该function
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
alert("动画演示结束"); });

八.事件
1.加载
页面加载有两种方式表示
第一种：(); 图片加载用load()函数
(function(){ ("#b").click(function(){}); 单击事件
(function(){
("#"+selector+"Action").css("background-color","green");
("#"+selector+"Key").html(e.which);
(this).val());
clearTimer= setTimeout(clear,4000);
});
4.鼠标
mousedown 表示鼠标按下
mouseup 表示鼠标弹起
mousemove 表示鼠标进入 mouseenter 表示鼠标进入 mouseover表示鼠标进入
mouseleave表示鼠标离开 mouseout表示鼠标离开
进入事件有3个 mousemove mouseenter mouseover
mousemove：当鼠标进入元素，每动一下就会被调用
mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用 ，鼠标经过其子元素不会被调用
mouseover：当鼠标进入元素，调用一下，在其中移动，不调用 ， 鼠标经过其子元素会被调用
mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout：当鼠标经过其子元素会被调用
("input").focus(function(){}); 获取了焦点
("#input1").change(function(){ });
7.提交
submit() 提交form表单时触发的函数
("selector").on("event",function);
("#b").click(function(){});
9.触发事件
("#b").on("dblclick",function(){("#b").trigger("dblclick"); });

九.AJAX
1.提交AJAX请求
("#name").keyup(function(){
(this).val()},
success: function(result){
.ajax采用参数集的方式{param1，param2，param3}不同的参数之间用，隔开
第一个参数 url：表示访问的page页面 //只有第一个参数是必须的，其他参数都是可选
第二个参数data：表示提交的参数
第三个参数success：function(){} 表示服务器成功返回后对应的响应函数
2.使用get方式提交ajax
.ajax的简化版，专门用于发送GET请求
("#name").keyup(function(){
(this).val()}, //提交的数据
function(result){ //响应参数
.get----> ("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表
("#name").keyup(function(){
var page = "http://how2j.cn/study/checkName.jsp?name="+("#checkResult").load(page);
});
});
5.格式化form下的输入数据
serialize()： 格式化form下的输入数据，把输入数据格式化成字符串
var data = $("#form").serialize(); //name=sad&age=sd&mobile=ds
name属性值=输入值&age属性值=输入值&mobile属性值=输入值

十.数组操作
1.遍历
.each( a, function(i, n){
document.write( "元素[" + i + "] : " + n + "
" );
})
document.close();
2.去掉重复
.unique(a);
3.是否存在.inArray 返回元素在数组中的位置 ，如果不存在返回-1
$.inArray(9,a) //返回元素9在数组a中的位置

十一.字符串操作
1.去除首尾空白 $.trim() 去除首尾空白

十二.JSON
1.将JSON格式的字符串，转换为JSON对象
var s1= "{"name":"盖伦","hp":616}"
var gareen = $.parseJSON(s1);

十三.对象转换
已使用大量的JQuery对象的方法，比如show()、toggle()，而原生DOM对象不具备这些方法
同样的DOM对象也具备JQuery对象所没有的属性和方法，比如checkd属性
在某些场景下，需要对JQuery对象和DOM节点对象进行互相转换
1.JQuery转DOM
通过get(0)或者[0] 把JQuery对象转为DOM对象
var div= ("#d"); div为JQuery对象
var d = div.get(0); d为DOM对象
2.DOM转JQuery
通过(div); d为JQuery对象