JQuery

JQuery
一.Hello JQuery
JQuery是一个javascript的框架，是对jvascript的一种封装。通过JQuery可以非常方便的操作html的元素
1.jquery.min.js
<script src="http://how2j.cn/study/jquery.min.js"></script>
要使用Jquery需要导入一个第三方的javascript库 jquery.min.js
2.理解 $(function(){ }) //文档完全加载完后运行的jQuery代码表示文档加载，由$ ();和function(){ }两部分构成，合起来就是 $(function(){ }); 这是为了防止文档在完全加载(就绪)之前运行jQuery代码。也就是说，写在这里的JQuery代码都是文档加载好之后的，就不会有获取一个还没有加载好的图片这种问题了，另一种写法：$ (document).ready(function(){ });也由两部分组成 $(document).ready();和function(){} 3.通过id获取元素 JQuery通过$ ("#id")获取例 document.write( $("#d") ); 注意：通过 document.getElementById获取到的是DOM的元素节点，而通过$ (#id)获取到的是一个JQuery对象
4.增加监听器
$("#b1").click(function(){alert("点击了按钮");}); //JQuery增加click事件的监听两部分组成$ ("#b1").click();和function(){alert("点击了按钮");}
b1按钮的点击事件弹出对话框的函数
5.隐藏与显示
$("#d").hide();$ ("#d").show();
通过$("#d")拿到div对象后，直接调用hide()和show()方法，即可实现隐藏和显示。

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

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

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

$("div[id]").toggleClass("border"); 给有id属性的div切换边框$ ("div[id='pink']").toggleClass("border"); 给id=pink的div切换边框
$("div[id!='pink']").toggleClass("border"); 给有id!=pink属性的div切换边框$ ("div[id^='p']").toggleClass("border"); 给有id以p开头的div切换边框
$("div[id$ ='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会选择重置按钮
$(function(){$ (".b").click(function(){
var value = $(this).val();$ ("td[rowspan!=13] "+value).toggle(500); }); });
注意：$("td[rowspan!=13] 后面有一个空格，表示层级选择器，
意思是获取满足rowspan属性的属性值不为13的td元素下的所有元素
如果没有出错，toggle(500)表示在显示与隐藏之间来回切换，生效时间是500毫秒
submit会把<button>元素选中，因为在一些浏览器中，<button>元素的type默认值是submit，
所以会选中它

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

11.当前元素
在监听函数中使用 $(this)，即表示触发该事件的组件$ (function() { $("#b1").click(function(){$ (this).hide(); }); });

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

六.属性
1.获取
通过attr()获取一个元素的属性
<h1 id="h" align="center" game="LOL">居中标题</h1>
$("#h").attr("align") 获取align属性$ ("#h").attr("game") 获取自定义属性 game
2.修改
通过attr(attr,value)修改属性
$("#h").attr("align","right") ; 修改align属性为right 3.删除通过removeAttr(attr)删除属性$ ("#h").removeAttr("align"); 删除align属性
4.prop与attr的区别
$("#c").attr("game") 获取属性值结果为LOL$ ("#c").prop("game") 获取属性值结果为undefined
$("#c").attr("checked") 当选中属性时，获取值checked，当未选中属性时，获取值checked$ ("#c").prop("checked") 当选中属性时，获取值true，当未选中属性时，获取值false
<input type="checkbox" id="c" game="LOL" checked="checked">
与prop一样attr也可以用来获取与设置元素的属性。区别在于，对于自定属性和选中属性的处理。
选中属性指的是checked，selected这两种属性。1.对于自定义属性attr能够获取，prop不能获取
2.对于选中属性：attr只能获取初始值，无论是否变化，prop能够访问变化后的值，并且以true|false的
布尔型返回，所以在访问表单对象属性的时候，应该采用prop而非attr.

七.效果
1.显示隐藏切换
显示隐藏切换分别通过show(),hide(),toggle()实现，也可以加上毫秒数，表示延时操作，比如show(2000).
$("#d").hide(); 立即隐藏$ ("#d").show(); 立即显示
$("#d").toggle(); 立即切换$ ("#d").show(1000); 延时显示
$("#d").hide(1000); 延时隐藏$ ("#d").toggle(1000); 延时切换
2.向上滑动向下滑动滑动切换
向上滑动向下滑动滑动切换分别通过slideUp(),slideDown(),slideToggle()实现，也可以加上毫秒数，表示延时操作，比如slideUp(2000).
$("#d").slideUp(); 向上滑动$ ("#d").slideDown(); 向下滑动
$("#d").slideToggle(); 滑动切换$ ("#d").slideUp(2000); 延时向上滑动
$("#d").slideDown(2000); 延时向下滑动$ ("#d").slideToggle(2000); 延时滑动切换
3.淡入淡出淡入淡出切换指定淡入程度
淡入淡出淡入淡出切换指定淡入程度分别通过fadeIn(),fadeOut(),fadeToggle() fadeTo(实现)
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数.0表示不淡入，1表示全部淡入
$("#d").fadeIn()；淡出$ ("#d").fadeOut(); 淡入
$("#d").fadeToggle(); 淡入淡出切换$ ("#d").fadeIn(2000); 延时淡出
$("#d").fadeOut(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.加载
页面加载有两种方式表示
第一种： $(document).ready(); 第二种：$ (); 图片加载用load()函数
$(document).ready（）；$ (function(){ $("#img").load(function(){ }); }); 2.点击 click()表示单击 dblclick()表示双击注意：空白键和回车键也可以造成click事件，但是只要双击鼠标才能造成dbclick事件$ ("#b").click(function(){}); 单击事件
$("#b").dblclick(function(){ }); 双击事件 3.键盘 keydown 表示按下键盘 keypress表示按下键盘 keyup表示键盘弹起这三者的区别分别表现在发生的先后顺序，获取到的键盘按钮值，已经对输入框的文本取值这三方面。先后顺序：按照 keydown keypress keyup 顺序发生键盘按钮值：通过event对象的which属性获取键盘的值, keydown和keyup能获取所有按键，不能识别大小写 keypress不能获取功能键，如F1 SHIFT等，能够识别大小写文本取值：keydown和keypress: 不能获取最后一个字符 keyup:获取所有字符例如：敲入ab，发生的先后顺序是keydown,keypress，keyup，，，keydown和keyup取到大写B的ascii码表 66，keypress取到小写b的ascii码表98，keydown和keypress只能取到文本值a，keyup可以取到ab$ (function(){
$("#i").keydown(function(e){ keypress keyup var selector = "keydown"; clearTimeout(clearTimer);$ ("#"+selector+"Action").css("background-color","green");
$("#"+selector+"Action").html("顺序: " + (++order ) );$ ("#"+selector+"Key").html(e.which);
$("#"+selector+"Value").html($ (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：当鼠标经过其子元素会被调用
$("#move").mousemove(function(){}); 5.焦点 focus() 获取焦点 blur() 失去焦点$ ("input").focus(function(){}); 获取了焦点
$("input").blur(function(){}); 失去了焦点 6.改变 change() 内容改变注：对于文本框，只有当该文本失去焦点的时候，才会触发change事件。$ ("#input1").change(function(){ });
7.提交
submit() 提交form表单时触发的函数
$("#form").submit(function(){}); 8.绑定事件以上所有的事件处理，都可以通过on() 绑定事件来处理$ ("selector").on("event",function);
$("#b").on("click",function(){ }); 可对比$ ("#b").click(function(){});
9.触发事件
$("selector").trigger("event"); 触发事件，文件加载后之后，就触发dbclick双击事件，而不是通过手动双击$ ("#b").on("dblclick",function(){ $("#message").html("双击按钮"); });$ ("#b").trigger("dblclick"); });

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

十.数组操作
1.遍历
$.each 遍历一个数组第一个参数是数组，第二个参数是回调函数i是下标，n是内容 var a = new Array(1,2,3);$ .each( a, function(i, n){
document.write( "元素[" + i + "] : " + n + "
" );
})
document.close();
2.去掉重复
$.unique() 去掉重复的元素注意：在执行unique之前，要先调用sort对数组的内容进行排序 var a = new Array(5,2,4,2,3,3,1,4,2,5); a.sort();$ .unique(a);
3.是否存在 $.inArray$ .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[0]; d为DOM对象或 var div=$ ("#d"); div为JQuery对象
var d = div.get(0); d为DOM对象
2.DOM转JQuery
通过 $() 把DOM对象转为JQuery对象 var div= document.getElementById("d"); div为DOM对象 var d =$ (div); d为JQuery对象

JQuery

推荐阅读更多精彩内容