Jquery选择器

守望麦香花开

浏览: 50602 次

最近访客更多访客>>

fkshl

yamper

wxyit163

I一路有你I

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jquery

JQuery:
一：入门
二：选择器
三：DOM操作
四：事件、动画
五：表单、表格的操作
六：JQuery与AJax

------------------------------------------------------------------------------
一：入门
回顾javaScript，JavaScript是有NetScape公司开发的一种脚本语言，JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页包含跟多活跃的元素和更加精彩的内容。但是JavaScript自身也存在弊端，即复杂的文档对象模型，不一致的浏览器实现及缺乏便捷的开发和调试工具。

为了简化JavaScript开发，一些JavaScript库诞生了。JavaScript库封装了很多预定义的对象和函数，能帮助开发者轻松建立有高难度交互的web2.0特性的富客户端页面，并且兼容各大浏览器。

JQuery库：JQuery是一套跨浏览器的JavaScript库，简化了HTML和JavaScript之间的操作。John Resign在2006年1月的BarGamp NYC上发布第一个版本。目前是由Dave Methvin领导的开发团队进行来发。全球前10000个访问量最高的网站中，有59%使用了JQuery，是目前最受欢迎的JavaScript库。
宗旨：write less，do more

JQuery特性：
1：轻量级
JQuery非常轻巧，采用uglifyJS工具压缩，大小不到30KB，如果使用Min版，只有18KB

2：强大的选择器 JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写自己的选择器。

3：出色的DOM操作的封装 JQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。而且轻松的完成了各种原本非常复杂的操作，让JavaScript新手也能写出非常出色的程序。
<input id="a"..>
document.getElementById("id").add..();
$("#a")
4：可靠的事件处理机制
JQuery事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得JQuery在处理事件绑定的时候相当可靠。
onclick
$("#a").click()
.keyup()

5：完善的AJAX JQuery将所有AJAX的操作封装到一个函数$.ajax(),使得开发者在处理AJAX的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性问题和XMLHttpRequest对象的创建和使用的问题。

6：不污染顶级变量 JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下，其别名$也可以随时交出控制权，绝对不会污染其他对象。这一特性使JQuery可以和其他JavaScript库共存，在项目中引用而不需要考虑后期可能的冲突。
$==jquery
j
7：出色的浏览器兼容性
JQuery能够在IE6.0+、FF 2.0+、Safari 2.0+和Opera9.0+下正常运行。同时还修复了一些浏览器之间的差异，使开发者不必再开展项目前建立浏览器兼容库。

8：链式操作方式
对发生在同一jQuery对象的一组操作，可以直接连写而无需重复获取对象
$("#a").click({}).css
.keyup()
9：隐式迭代
当用jQuery找到“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成操作对象集合，而不是当独的对象，
这使得大量循环结构变得不再必要，减少代码量。

10：行为层与结构层分离开发者可以用jQuery选择器选中元素，直接给元素添加事件，这种行为层和结构层分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，避免开发冲突。使后期维护也非常方便。

11：丰富的插件支持
12：完善的文档
13：开源

JQuery环境配置 jQuery不需要安装，把下载好jquery-1.11.1.js放到公共的位置，想要在某个页面使用时，只需要在相关的HTML文档中引入该库文件的位置即可。

明确：在jQuery库中，$<==>jquery，例如$("#foo")<==>jquery("#foo"),
$.ajax<==>jquery.ajax,$是jQuery的一个简写形式

如下引入：
<html>
<head>
<title>firstJquery</title>

<script src="../jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello JQuery!,this is my first JQuery programing");
});
</script>
</head>
<body>
</body>
</html>

代码分析：
//等待DOM元素加载完毕
①$(document).ready(function(){
//...
});
代码①类似传统JavaScript中的window.onload()，但是它们之间存在区别

执行时机：
window.onload()：必须等到网页中所有元素加载完毕才执行
①：网页中所有DOM元素绘制完就执行，可能DOM元素关联的东西并没有加载完
编写个数：
window.onload():不能同时编写多个
window.onload()=function(){alert("test1")};
window.onload()=function(){alert("test2")};
最终，输出test2
①：可以编写多个
简写形式：
window.onload()：无
$()
①：①可简写为$(function(){
//...
});

语法：jQuery的语法是为HTML元素编制的，可以对元素执行某些操作
$(selector).action()
$:表示jquery对象
selector:表示查询和查找HTML元素
action:表示对元素执行的操作
<html>
<head>
<title>Jquery</title>

<script src="../jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button type="button">click_me</button>
</body>
</html>

DOM对象和JQuery对象
DOM对象：DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一颗树。我们可以通过JavaScript中的document.getElementById或者document.getElementsByTagName来获取元素节点。像这样获取到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法。
例：var obj = document.getElementById("id");
var objHTML = obj.innerHTML;
JQuery对象：通过jQuery包装DOM对象后产生的对象就是JQuery对象。jQuery对象是jQuery独有的，如果一个对象时jQuery对象，那么就可使用jQuery中的方法。
例：$("#foo").html();//获取id为foo的元素内的html代码，html()是jQuery的方法
在jQuery对象中无法使用DOM对象的任何方法，同样在DOM对象中也无法使用jQuery中的任何方法。

jQuery对象转换成DOM对象：
jQuery对象不能使用DOM中的方法，但如果对jQuery锁提供的方法不熟悉，火车jQuery没有封装想要的方法，不得不使用DOM中的方法，有两种处理方法。[index]或get(index)
1：jquery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象
jQuery代码：
var $cr = $("#cr");//jquery 对象
var cr = $cr[0];//DOM 对象
alert(cr.checked);
2:jquery本身提供的，通过get(index)方法得到相应的DOM对象
var $cr = $("#cr");//jquery 对象
var cr = $cr.get(0);//DOM 对象
alert(cr.checked);

DOM对象转换成JQuery对象
1：$()将DOM对象包装起来，就可以获得一个jQuery对象，即$(DOM对象)
var cr = document.getElementById("cr");
var $cr = $(cr);

二：选择器
首先，回顾CSS中选择器，CSS是一项出色的技术，它将网页结构和表现形式完全分离，利用CSS选择器能轻松的对某个元素添加样式而不改变HTML的样式，只需要添加不同的CSS规则，就可以得到各种不同样式的网页。要使某个样式应运与特定的html元素，首先要找到该元素。在CSS中执行这一任务的表现规则称为CSS选择器。

CSS选择器分类：
标签选择器：E{ 以文档元素作为选择符 td{ width:120px;
CSS规则 font-size:14px;
} }
ID选择器： #ID{ 以文档的唯一标示符ID #note{width:120px;
css规则作为选择器 font-size:14px;
} }
类选择器： E.className{ 以文档元素的class作 div.note{width:120px;
css规则为选择符 font-size:14px;
} }
群组选择器：E1,E2,E3{ 多个选择符应运同样的 td,p,div.a{
css规则样式规则 font-size:14px;
} }
后代选择器：E F{ 元素E的任意后代元素 #links a{width
css规则 color:red;
} }
通配符选择器:*{ 以文档所有元素作 *{
css规则为选择符 font-size:14px;
} }

<p style="color:red;font-size:14px">CSS demo</p>
.demo{
color:red;
font-size:14px;
}
<p class="demo">CSS demo</p>

JQuery选择器：
jQuery中的选择器完全继承了CSS的风格。利用jQuery选择器，可以非常便捷和快速的找到特定的DOM元素，给它们添加相应的行为，而无需担心浏览器是否支持这一选择器。学会使用选择器是学习jQuery的基础，jQuery的行为必须在获取到元素后才能生效。

<script type="text/javascript">
function demo(){
alert("javascript demo");
}
</script>
<p onclick="demo()">click_me</p>

<script type="text/javascript">
$(document).ready(function(){
$(".demo").click(function(){
alert("javascript demo");
});
});
</script>
<p class="demo">click_me</p>
CSS选择器找到元素后添加样式
jQuery选择器找到元素后添加行为

jQuery选择器分类：
1:基本选择器：最常用的、最简单的、通过id，class和标签名等来查找DOM元素
用法及描述：
#id 根据给定的id匹配一个元素单个 $("#test")
.class 根据给定的类名匹配集合 $(".test")
element 根据给定元素名匹配集合 $("p")
* 匹配所有元素集合 $("*")
selector1,selector2,... 将每一个选择器匹配到的元素合并后一起返回
集合 $("div,span,p.myClass")

例：example/2/jquery_selector_1.html
2:层次选择器:如果想通过DOM之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素、同辈元素等，那么我们就选择层次选择器。
用法及描述：
$("ancestor descendant"):
选取ancestor元素里的所有descendant元素，返回集合元素，
$("div span")-->选取div里所有<span>元素

$("parent>child"):
选取parent下的child元素，返回集合元素，
$("div>span")-->选取<div>元素下元素名是<span>的元素

$("prev+next"):
选取紧接在prev元素后的next元素，返回集合元素
$(".one+div")-->选取class为one的下一个div元素

$("prev~siblings"):
选取prev元素之后的所有siblings元素，返回集合元素
$("#two~div")-->选取id为two的元素后面的所有div同辈元素
注意：后代元素与子元素的区别

在层次选择器中第一种和第二种比较常用，第三、第四种有更加简单的方式来代替，
next()方法代替$("prev+next"),nextAll()代替$("prev~siblings")

例：example/jquery_selector_2.html

3:过滤选择器:主要通过特定的过滤规则选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器以冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤及表单对象属性过滤选择器。

用法及描述：
基本过滤
:first 选取第一个元素
返回单个元素
$("div:first")选取所有div元素中的第一个div元素
:last 选取最后一个元素
返回单个元素
$("div:last")选取所有div元素中的最后一个div元素
:not(selector) 去处所有与指定选择器匹配的元素
集合
$("input:not(.myClass)")去class不是myClass的<input>元素
:even 选取索引是偶数的所有元素
集合
$("input:even")选取索引为偶数的<input>元素
:odd 选取索引是奇数的所有元素
集合
$("input:even")选取索引为奇数的<input>元素
:eq(index) 选取索引等于index的元素(index从0开始)
单个
$("input.eq(1)")选取索引等于1的<input>元素
:gt(index) 选取索引大于index的元素(index从0开始)
集合
$("input.gt(1)")选取索引大于1的<input>元素
:lt(index) 选取索引小于index的元素(index从0开始)
集合
$("input.lt(1)")选取索引小于1的<input>元素
:header 选取所有标题元素，例如h1、h2、h3
集合
$(":header")选取网页中所有标题元素
:animate 选取当前正在执行动画的所有元素
集合
$("div:animate")选取正在执行动画的div元素
:focus 选取当前获取焦点的元素
集合
$(":focus")选取当前获取焦点的元素

内容过滤:
:contains(text) 选取文本内容为test的元素
集合
$("div:contains('我')")
:empty 选取不包含子元素或者文本的空元素
集合
$("div:empty")
:has(selector) 选取含有选择器匹配的元素的元素
集合
$("div:has(p)")
:parent 选取含有子元素或者文本的元素
集合
$("div:parent")

可见性过滤：根据元素的可见和不可见状态来选择相应元素
:hidden 选取所有不可见元素
集合
$(":hidden")包含<input type="hidden"/>,<div style="display:none">,
<div style="visibility:hidden">.
如果只想去<input>元素，$("input:hidden")
:visible 选取所有可见元素
集合
$("div:visible")

属性过滤选择器：通过元素的属性来获取元素

[attribute] 选取拥有此属性的元素集合 $("div[id]")
[attribute=value] 选取属性值为value的元素集合 $("div[title=test]")
[attribut!=value] 选取属性值不为value的元素集合
$("div[title!=test]")注：没有属性title的div也会选中
[attribut^=value] 选取属性值以value开始的元素集合 $("div[title^=test]")
[attribut$=value] 选取属性值以value结束的元素集合 $("div[title$=test]")
[attribut*=value] 选取属性值含有value的元素集合 $("div[title*=test]")
[attribut|=value] 选取属性等于给定value或以value为前缀结束的元素
集合 $('div[title|="en"]')
[attribut~=value] 选取属性用空格分割的值中包含value的元素
集合 $('div[title~="uk"]')
[attribut1][attribut2][attributN]
title="uk test"
用属性选择器合并成一个符合属性选择器，
满足多个条件集合
$("div[id][title$='test']")

子元素过滤选择器：
:nth-child(even|odd|index) 选取每个父元素下第index或偶数或奇数元素，
   index从1开始集合
eq(index)只返回一个，:nth-child将为每一个父元素匹配
$("nth-child(1)")
$("nth-child(3n)")
$("nth-child(3n+1)")
$("nth-child(even)")
$("nth-child(odd)")
:first-child 获取每个父元素的第一个子元素集合
:first只返回单个，:first-child将为每一个父元素匹配
$("ul li:first-child")
:last-child
:only-child   如果某个元素是它父元素的唯一子元素，那么匹配
集合
$("ul li:only-child")

例：example/jquery_selector_3.html

表单对象属性过滤器：主要针对所选择的表单元素进行过滤
:enabled 选取所有可用元素 $("#form1 :enabled")
:disabled 选取所有不可用元素 $("#form2 :disabled")
:checked 选取所有被选中元素（单选框、复选框）$("input :checked")
:selected   选取所有被选中元素（下拉列表）$("select option:selected")

例：example/jquery_selector_3_form.html

4:表单选择器
:input 选取所有<input><textarea><select><button>元素
:text 选取所有单行文本框
:password 选取所有密码框
:radio 选取所有单选框
:checkbox 选取所有多选框
:submit 选取所有提交按钮
:image 选取所有图片按钮
:reset 选取所有重置按钮
:button 选取所有按钮
:file 选取所有上传域
:hidden 选取所有不可见元素

例：example/2/jquery_selector_form.html

注意：
1：选择器当中含有特殊字符“#”，“.”，“]”，“)”
根据w3c规定，属性值中不能有特殊字符，但实际项目中偶尔会遇到，处理方式：转义
例：<div id="id#a"></div>
<div id="id[1]"></div>
获取元素方式：
$("#id\\#a")、$("#id\\[1\\]")

三：JQuery中的DOM操作
DOM（Document Object Model，文档对象模型），是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松的访问到页面中标准组件。

DOM分类：
1：DOM core 任何支持DOM的程序设计语言都可以使用它，它也并不仅仅使用在网页处理，也可以处理任何一种使用标记语言编写出来的文档，例如，XML。
例：
使用DOM Core获取表单对象方法：document.getElementsByTagName("form")
使用DOM Core获取元素src属性：element.getAttribute("src")
2：HTML-DOM
提供一些更加简明的记号来描述各种HTML元素的属性,只能处理web文档
例：
使用HTML-DOM获取表单对象方法：document.forms
使用HTML-DOM获取元素src属性：element.src

3：CSS_DOM
针对CSS的操作，主要作用获取和设置style对象的各种属性。
例：
element.style.color="red";

详细介绍各种DOM操作：
1：查找节点（通过上一章内容）
a)查找元素节点【text();获取文本内容】
var $li = $("ul li.eq(1)");//获取ul中第二个li节点
var li_txt = $li.text();//获取第二个li元素节点的文本内容
alert(li_txt);
b)查找属性节点【element.attr(attrValue);获取元素属性】
var $para = $("p");//获取p节点
var p_txt = $para.attr("title");//获取p元素节点属性title
alert(p_txt);
2:创建节点
a)创建元素节点
$():jquery的工厂函数，使用：$(html)方法会根据传入的html标记字符串，创建一个DOM对象，并将这个对象包装成一个jQuery对象。
append();追加
例：创建两个li元素，并添加到DOM文档节点上
var $li_1 = $("<li>西瓜</li>");
var $li_2 = $("<li>葡萄</li>");
$("ul").append($li_1);
$("ul").append($li_2);
b)创建文本点
c)创建属性节点
与创建文本节点类似
var $li_1 = $("<li title='watermelons'>西瓜</li>");
var $li_2 = $("<li title='grapes'>葡萄</li>");
$("ul").append($li_1);
$("ul").append($li_2);
3:插入节点
append(); 向每个匹配元素内部追加内容
<==>
appendTo(); 将所有匹配元素追加到指定元素
prepend(); 向每个匹配元素内部前置内容
<==>
prependTo();将所有匹配元素前置到指定元素
after(); 向每个匹配元素后插入内容
<==>
insertAfter();将所有匹配元素插入到指定元素后
before(); 向每个匹配元素之前插入内容
<==>
insertBefore();将所有匹配元素插入到指定元素之前
4：删除节点
remove(); 从DOM元素中删除所有匹配元素，当某个节点被删除后，该节点所包含的后代节点将同时被删除。此方法返回的是一个指向被删除节点的引用，因此可以在以后再使用这些元素。
例：var $li = $("ul li:eq(2)").remove();
$li.appendTo("ul");
同时，remove()方法可以通过传递参数来选择性的删除元素。
例：$("ul li").remove("li[title!=pineapple]");
detach();
跟remove()一样，也是从DOM中删除所有匹配元素，但是detach()不会把匹配元素从jQuery中删除，因而可以在将来再使用这些元素。但是与remove不同的是，所有绑定的事件、附加的数据等都会保存下来。
例：
$("ul li").click(function(){
alert($(this).html());
});
var $li = $("ul li:eq(2)").detach();
$li.appendTo("ul");
empty();
清空节点，同时清空元素中所有后代节点，之后也不可以使用
例：
var $li = $("ul li:eq(2)").empty();
5:复制节点
clone(); 复制节点后，被复制的新元素不具备复制功能，如果需要新元素也具有复制功能，在clone()方法中传递一个参数true。
例：$("ul li").click(function(){
//this.clone().appendTo("ul");
this.clone(true).appendTo("ul");
});
6:替换节点
replaceWith();将所有匹配元素都替换成指定的HTML或DOM元素
replaceAll();与replaceWith()作用一样，只是颠倒了replaceWith()操作
注意：如果替换之前元素绑定的事件，替换后原先绑定的事件与被替换的元素一起消失，需要在新元素上绑定事件。

例：$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");
$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");
7:包裹节点
wrap();将匹配元素一一包裹
例：$("p").wrap("<b></b>");
<b><li></b>
<b><li></b>
<b><li></b>
wrapAll();将匹配元素一起包裹
例：$("p").wrapAll("<b></b>");
<b>
<li>
<li>
<li>
</b>
wrapInner();将匹配元素的子内容（包括文本节点）用其他结构化的标记包裹
例：$("p").wrapInner("<b></b>");
8：属性操作
a)获取属性和设置属性
例：var $para = $("p");
var p_txt = $para.attr("title");
设置
$("p").attr("title","myTitle");
$("p").attr("title":"myTitle","name":"test");
b)删除属性
removeAttr();
$("p").removeAttr("title");
9:样式操作
a)获取样式和设置样式
例：html代码
<p class="myClass"title="选择最喜欢水果">你最不喜欢的水果是？</p>
使用attr()获取
var p_class = $("p").attr("class");
设置
$("p").attr("class","high");
b)追加样式
addClass();
例：html代码
<style>
.high{
font-weight:bold;
color:red;
}
.another{
font-style:italic;
color:blue;
}
</style>
c)移除样式
removeClass();
例：$("p").removeClass("high");
同时删除两个class
$("p").removeClass("high").removeClass("another");
或
$("p").removeClass("high another");
或
$("p").removeClass();
d)切换样式
toggleClass();
例：$("p").toggleClass("another");
e)判断是否含有某个样式
hasClass();如果有，返回true，否则返回false
if($("ul li").hasClass("txt_li")){
//删除
}else{
//添加
}
10：设置和获取html、文本和值
a)html()方法
类似JavaScript中的innerHTML属性，可以读取或设置某个元素的html内容
例：alert($("p").html());
$("p").html("<b>你最喜欢的水果是？</b>");
b)text()方法
类似JavaScript中的innerText属性，可以读取或设置某个元素的文本内容
例：alert($("p").text());
$("p").text("你最喜欢的水果是？");
c)val()方法
类似JavaScript中的value属性，可以读取或设置元素值
例：example/dom_login.html
同时，val()还有另一用处，它能使select、checkbox和radio相应的选项被选中
11:遍历节点
a)children();获取匹配元素的子元素的集合
例：var $ul = $("ul").children();
for(int i=0;i<$ul.length;i++){
alert($ul.get(i).innerHTML);
}
b)next();获取匹配元素后面紧邻的同辈元素
例：var $p1 = $("p").next();
c)prev();获取匹配元素前面紧邻的同辈元素
d)siblings();获取元素前后所有同辈元素
e)closest();获取最近的匹配元素。首先从检查当前元素是否匹配，如果匹配就直接返回，如果不匹配则向上查找父元素，逐级向上直到找到匹配元素，如果没有找到，返回空对象
例：$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
});
f)parent(),parents(),closest()区别
parent();获取集合中每个匹配元素的父级元素
例：$(".item-1").parent().css("backgroud-color","red");
parent方法直接从指定类型的父节点开始查找，返回一个元素节点
parents();获取集合中每个匹配元素的祖先元素
例：$(".item-1").parents("ul").css("backgroud-color","red");
parents通parent类似，不同的是，当它找见第一个匹配元素时，不会停止，而是继续查找，返回多个父节点
12：CSS-DOM操作
不足：就是无法提取通过外部CSS设置的样式信息
css()
关于元素定位：
offset();获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，只对可见元素有效。
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;
position();获取元素相对于最近的一个position样式属性设置为relative或者
absolute的祖父节点的相对偏移，与offset一样，返回对象包好top和left
var position = $("p").position();
var left = position.left;
var top = position.top;
scrollTop()和scrollLeft();分别是获取元素的滚动条距顶端和左侧的距离
var $p = $("p");
var scrollTop = $p.scrollTop();
var scrollLeft = $p.scrollLeft();
四：事件、动画
javascript和HTML之间的交互是通过用户和浏览器操作页面是引发的事件来处理。
$(document).ready()是用来加载DOM元素，并给加载好的DOM元素注册相应事件的。
使用$(document).ready()时，注意由于在$(document).ready()方法内注册事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。解决这个问题，jQuery提供了另外一个关于页面加载的方法--load()方法。load()方法会在元素的onload事件中绑定一个处理函数。

$(document).ready(function(){})：简写$(function(){})

1：事件绑定
bind();为元素绑定事件来完成某些操作。
格式：bind(type [,data],fn);
参数1：事件类型，类型包括：blur,focus,load,resize,scroll,unload,click,
dblclick,mousedown,mouseup,mousemove,mouseover,moudeout,mouseenter,
mouseleave,change,select,submit,keydown,keypress,keyup,error等
参数2：可选，作为event.data属性值传递给事件对象的额外数据对象
参数3：绑定的处理函数
例：bind.html
is();在代码中判断元素是否显示
show();显示元素
hide();隐藏元素
简写：jQuery将常用的方法包装，提供了一套简写的方法
2：合成事件
hover();模拟光标悬停事件
语法：hover(enter,leave);
当光标移动到元素时，会触发一个指定的第一个函数，移除时，会触发第二个函数
修改例：bind.html
注意：hover()方法准确的来说是替代jQuery中的bind("mouseenter")和bind("mouseleave")

toggle();模拟鼠标连续单击事件，同时可以切换元素的可见状态
语法：toggle(fn1,fn2,...,fnN);
修改例：bind.html
3:事件冒泡
当页面中多个元素绑定了相同的事件时，当触发其中一个事件时，事件会按照DOM的层次结构像水泡一样不断向上
例：bubble.html

冒泡事件引发的问题：

a)事件对象：
在程序中使用事件对象只需要为函数传递一个参数。
$("element").bind("click",function(event){
//
});
event：事件对象，当单击element元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问。

b)停止事件冒泡：
stopPropagation();停止冒泡事件
修改例：bubble.html

c)阻止默认行为
preventDefault();阻止默认行为，在网页中元素有自己的默认行为，例如单击超链接跳转、单击提交会表单提交
例：preventDefault.html
4：事件对象的属性
jQuery对事件对象的常用属性进行封装。
a）event.type：获取事件对象的类型
b）event.preventDefault()：阻止默认行为
c）event.stopPropagation()：停止冒泡
d）event.target：获取触发事件的元素
e）event.relatedTarget：获取触发事件的元素
f）event.pageY和event.PageX：获取光标相对于页面的x坐标和y坐标
g）event.which：在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键
$("a").mousedown(function(e){
alert(e.which);//1：左；2：中；3：右
})
$("input").keyup(function(e){
alert(e.which);
})
h）event.metaKey键盘事件中获取<crtl>键
5：移除事件
a）移按钮元素除以前注册的事件
unbind([type],[data])
参数1：事件类型
参数2：移除的函数
b）移除按钮元素其中一个事件
绑定时，必须给函数指定一个变量名，用unbind()解绑
$(function(){
$("button").bind("click",fn1=function(){
//...
}).bind("click",fn2=function(){
//...
});
$("button").unbind("click",fn1);s
})
one();绑定的事件只触发一次，之后立刻解绑，用法与bind()相同
6：模拟操作
用户不用自己操作，模拟用户操作触发事件
trigger();
$("#btn").trigger("click");//页面装载完毕后，触发所有#btn绑定的click事件，并显示事件效果
触发自定义事件
$("#btn").bind("myClick",function(){
//... ...
})

$("#btn").trigger("myClick");
传递参数
trigger(type,[,data]);
参数1：触发事件的类型，
参数2：传递给事件处理函数的附加数据,以数组的形式传递
$("#btn").bind("myClick", function(event, message1, message2){
$("#test").append( "<p>"+message1 + message2 +"</p>");
});
//传递给事件处理函数的附加数据，以数组形式传递
$('#btn').trigger("myClick",["我的自定义","事件"]);
执行默认操作
trigger()触发事件后，会执行浏览器默认的操作
如果只想执行绑定的事件，而不想执行浏览器默认的操作，使用triggerHandler()方法
7:动画
a）show()和hide()
参数：speed，middle,slow,
b）fadeIn()和fadeOut()只改变元素的不透明度
例 bind.html
c）slideUp()和slideDown()只改变元素的高度
例 bind.html
d）animate(params,speed,callback);
参数1：一个包含样式属性及值的映射
参数2：速度
参数3：动画完成时执行的函数
e）动画回调函数
8:停止动画、判断是否处于动画状态
a）停止动画：
stop([clearQueue],[gotoEnd]);
clearQueue:是否清空未执行完的动画队列，
gotoEnd:是否直接将正在执行的动画跳到末状态
直接使用stop()方法，结束当前正在执行的动画，并立即执行队列中的下一个动画
b）判断元素是否处于动画状态
if(!$(element).is(":animate")){
//添加新动画
}
c）延迟动画
delay();
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).delay(1000)
.animate({top:"200px",width:"200px"},3000).delay(2000)
.fadeOut("slow");
9:其他动画方法
toggle(speed,[callback])
slideToggle(speed,[callback]):通过高度变化来切换匹配元素的可见性
fadeTo(speed,opacity,[callback])：把元素的不透明度以渐进的方式调整到指定值。
五：对表单、表格的操作

表单和表格都是html的重要组成部分，分别用于采集、提交用户输入的信息和显示列表。
表单应用：
表单组成：
表单标签：包含处理表单数据所用的服务器端程序URL及表单提交到服务器的方法
表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框及文件上传框。
表单按钮：包含提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。

单行文本框应用：
例：example/5/form_test1.html
多行文本框：
高度变化、滚动条高度变化：
例：example/5/form_test2.html

复选框应用：主要是针对复选框的全选、反选和全部选等操作

jquery的1.6之后的版本中attr()用prop()代替
例：example/5/form_test3.html
下拉列表的应用：后台添加新闻管理员登陆时选择所负责的模块
例：example/5/form_test4.html
表单验证：
例：example/5/form_test5.html

表格应用：
普通隔行变色、单选框控制表格行高亮、复选框控制表格高亮、表格内容筛选
例：example/5/table_test1.html
表格展开关闭
例：example/5/table_test2.html
其他应用：
六：JQuery与AJax应用
Ajax：（Asynchronous javaScript and XML），它不是一个单一的技术，而是有机的利用了一系列交互式网络应运相关技术所形成的集合体，它的出现开创了无刷新更新页面的新时代，并替代了传统的web发送和通过隐藏的框架来进行异步提交的趋势，是web开发应运的里程碑。

优势：
不需要插件支持：
优秀的用户体验：
提高web程序的性能：
减轻服务器和带宽的压力：
不足：
浏览器对XMLHttpRequest对象的支持度不足：
破坏浏览器前进和后退的正常功能：
对搜索引擎的支持不足：
开发和调试工具不足：

jQuery中的ajax
jQuery对ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第二层是load(),$.get(),$.post()方法，第三层是$.getScript(),$.getJSON()方法。

load()方法：load方法是jQuery中最为简单的常用的ajax方法，能够载入远程html代码并插入DOM中，通常用来从服务器上获取静态的数据文件
1：载入html文档
语法格式：load(url [,data] [,callback])

url(String):请求html页面的URL地址
data(object):可选参数，发送至服务器的key/value数据
callback(function):可选参数，请求完成时的回调函数，无论请求成功还是失败

2：筛选载入的html文档

load方法的URL参数的语法结构:"url selector"

例：load("test.html .para")
3:传递方式
load方法的传递方式是根据参数data自动指定的，如果没有参数传递，则采用get的方式传递，反之，则会自动转换为post方式。

4：回调参数
对于必须在加载完成后才能继续的操作，load方法提供了回调函数，该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象。

$("#show").load(url,function(responseText,textStatus,XMLHttpRequest){
//responseText请求返回的内容
//textStatus请求状态
//XMLHttpRequest:XMLHttpRequest对象
});
$.get()方法
get提交方式
语法格式：$.get(url [,data] [,callback] [,type])
url:请求html页面的URL地址
data(object):可选参数，发送至服务器的key/value数据会作为QueryString附加到请求的URL中
callback:载入成功时回调函数自动将请求结果和状态传递给该方法
type：服务器返回内容的格式，XML、html、script、json、text

数据格式
HTML：
XML:返回数据格式为XML文档的过程实现起来比html片段要稍微复杂，但是XML文档的可移植性是其他数据格式无法比拟的，因此这种格式提供的数据的重用性将极大提高。
JSON:之所以有JSON这样的数据格式文件，很大程度上是因为XML文档体积大而且难以解析。JSON文件和XML文件一样，也可以方便的被重用，而且JSON文件非常简洁，易懂。
$.post()方法
与$.get()方法的结构和使用方式都相同，但是他们之间也有区别
另外，当load方法带有参数传递时，会使用post方式发送请求，因此也可以使用load方法来完成同样的功能。
GET与POST区别：

$.getScript()
有时候，在页面初次加载的时就取得所需要的廍Javascript文件时完全没有必要的。虽然也可以在需要某个js文件时动态的创建<script>标签,
$(document.createElement("script")).attr("src","test.js").appendTo("head");
或

$("<script type='text/javascript' src='test.js'").appendTo("head");

但是比较麻烦，可以使用$.getScript()方便的获取js文件
$(function(){
$("#send").click(function(){
$.getScript("test.js");
})
})
$.getJSON()
用来加载json文件，用法与$.getScript()一样
$(function(){
$("#send").click(function(){
$.getJSON("test.json");
})
})
当在页面点击加载后，页面没有任何效果，因为没有处理返回的数据，所以jQuery提供了回调函数，处理返回的数据,可以在函数中通过data变量遍历数据，也可以使用迭代的方式为每一项构建html代码（$.each()），
$(function(){
$("#send").click(function(){
$.getJSON("test.json",function(data){
$("#show").empty;
var html = "";
$.each(data,function(commentIndex,comment){
html += "<div class='comment'><h6>"+
username+":</h6><p class='para'>"+
content+"</p></div>";
})
$("#show").html(html);
});
})
})
$.each()是一个全局函数，不操作jQuery对象，而是以一个数组或者对象作为第一个参数，以一个回调函数作为第二个参数，回调函数有拥有两个参数，第一个参数为对象的成员或数组的索引，第二个参数为对应变量或内容。

$.ajax()方法
结构：$.ajax(options)
options：这个参数包含了$.ajax()方法所需要的请求设置及回调函数等信息，参数以key/value形式存在，所有参数都是可选的。

URL:(string)：（默认为当前页面地址）发送请求的地址
type:(String)：请求方式（POST或GET），默认为GET
timeout:(number)：设置请求超时时间。此设置将覆盖$.ajaxSetup()方法的全局设置
data:(object/string)：发送到服务器的数据。如果已经不是字符串，将自动转化为字符串格式。GET请求中将附加到URL后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式。例如{foo1:"bar1",foo2:"bar2"}转换为
&foo1=bar1&foo2=bar2。如果是数组，jQuery将自动为不同值对应相同名称。例如：{foo:["bar1","bar2"]}转化为&foo=bar1&foo=bar2
dataType:(string)：预期服务器返回的数据类型。如果不指定服务器将自动根据HTTP包MIME信息返回responseXML或者responseText，并作为回调函数的参数传递。可用类型：
XML：返回XML文档，可用jQuery处理
html：返回纯文本的html信息。
script：返回纯文本的javascript代码。
json：返回json数据。
text：返回纯文本

beforeSend:(function)：发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义的HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。一个参数
function(XMLHttpRequest){
this;//调用本次ajax请求传递的options参数
}
complete:(function)：请求完成后调用的回调函数，两个参数
function(XMLHttpRequest,textStatus){
this;//调用本次ajax请求传递的options参数
}
success:(function)：请求成功好调用的回调函数，两个参数
function(data,textStatus){
this;//调用本次ajax请求传递的options参数
}
error:(function)：请求失败后执行的回调函数，三个参数，XMLHttpRequest对象、错误信息、捕获的错误对象
function(XMLHttpRequest,textStatus，errorThrow){
this;//调用本次ajax请求传递的options参数
}
global:（boolean）：默认为true，表示是否触发求全局ajax事件。false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件

前面说到的方法都是基于$.ajax构建的，因此可以用$.ajax替代

$(function(){
$("#send").click(function(){
$.ajax({
type:"GET",
url:"test.js",
data:script
})
})
})

$(function(){
$("#send").click(function(){
$.ajax({
type:"GET",
url:"ArgsTestServlet?msg="+$("#msg"),
data:json,
success:function(data){
//... ...
}
})
})
})

序列化元素：
serialize():作用于jQuery对象，可将DOM元素内容序列化为字符串，用于ajax请求。
$(function(){
$("#send").click(function(){
$.get("ArgsTestServlet",{
username:$("#username").val(),
content:$("#content").val()
},function(data,textStatus){
$("#show").html(data);
})
})
})
改为：
$(function(){
$("#send").click(function(){
$.get("ArgsTestServlet",$("#myform").serialize()
,function(data,textStatus){
$("#show").html(data);
})
})
})
serializeArray()方法：
该方法将DOM元素序列化后返回json格式的数据。既然是对象，可以使用$.each()对数据进行迭代输出。

$(function(){
var fields = $(":checkbox,:radio").serializeArray();
$.each(fields,function(i,field){
$("#result").append(field.value+",");
})
})
$.param()方法：可以对一个数组或对象按照key/value进行序列化
var obj = {a:1,b:2,c:3}
var k = $.param(obj);
alert(k);//结果为a=1&b=2&c=3

jquery中ajax全局事件
ajaxComplete(callback):
ajaxError(callback)
ajaxSend(callback)
ajaxSuccess(callback)

分享到：

bootstrap日期插件daterangepicker的使用 | Vue.js 60 分钟快速入门

2016-08-19 10:08
浏览 676
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论