JQuery
一.什么是jQuery
jQuery是一个轻量级的跨浏览器的JavaScript库, 该库的重点在于JavaScript和HTML之间的互动. 它是2006年一月, 在BarCamp NYC由John Resig发布的. 目前10,000个最大网站的百分之二十都在使用它, jQuery是当今世界最为流行的JavaScript库.
jQuery是免费的, 开源的软件. jQuery的语法的设计目的就是为了使得浏览文档, 选择DOM元素, 创建动画, 处理时间, 和开发Ajax应用程序能够更加简单. jQuery还为开发者提供了在JavaScript库上创建插件的能力. 提供了这个选项, 研发者能够为底层的互动和动画创建抽象, 能够创建高级效果, 能够创建高层级的, 可有主题的部件. 这为创建强大的和动态的网页作出了贡献.
特性
==========
jQuery包含下列的特性:
- 通过跨浏览器的开源选择者引擎Sizzle来选择DOM 元素
- DOM 遍历和修改
- 事件
- CSS 操纵
- 效果和动画
- Ajax
- 通过plugin实现的Extensibility
二.jQuery的作用
1：兼容了css，js，dom，提供了简洁的，一致的API，使用户更方便的处理HTML，events，实现动画效果，并且方便的为网站提供ajax交互；
2：使用户的HTML页面保持代码和HTML 内容的分离
一句话极大地简化了js的编程
三. 如何使用jQuery
1：引入jQuery的js文件
2：使用选择器定位要操作的节点
3：调用jQuery的方法进行操作
四. 什么是jQuery对象
jQuery为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述，jQuery提供的方法都是针对jQuery对象特有的。
通过jQuery选择器选中的对象为jQuery对象，如$("div"),$("#d1")
注：jQuery对象由DOM数组和相关API组成，jQuery对象只能调用jQuery方法，DOM对象只能调用DOM方法，本质是jQuery对象 就是DOM数组
五.jQuery对象与DOM对象的关系
jQuery对象本质上是一个DOM对象数组，它在该数组上一些扩展了操作数组中元素的方法
obj.length(); obj.get(index)：获取数组中某一个DOM对象（==obj[index]）
DOM对象可以直接转换为jQuery对象：$(dom对象)
jQuery对象转换为DOM对象：obj[i]
六. 选择器
jQuery选择器共有四大类，分别为基本选择器，层次选择器，过滤选择器和表单选择器。下边就来分别总结一下。
1， 基本选择器？
基本选择器就是jQuery中最常用的选择器，也是最简单的选择器，它通过元素标签名，元素Id，Class来查找DOM元素。基本选择器共有五种，总结如下：
|
选择器 |
返回 |
示例 |
|
元素标签选择器 |
集合元素 |
$(“p”)选取所有的<p>元素。 |
|
Id选择器 |
单个元素 |
$(“#test”)选取Id为test的元素。 |
|
Class选择器 |
集合元素 |
$(“.test”)选取所有class为test的元素 |
|
通配符选择器 |
集合元素 |
$(“*”)选取所有的元素。 |
|
群组选择器 |
集合元素 |
$(“div,span,p.myclass”)选取所有<div>，<span>，和拥有class为myclass的<p>标签的一组元素。 |
适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相 邻元素和兄弟元素。
|
选择器 |
返回 |
示例 |
|
后代元素选择器 |
集合元素 |
$(“div span”)选取<div>里的所有的<span>元素。 |
|
子元素选择器 |
集合元素 |
$(“div>span”)选取<div>元素下元素名是<span>的子元素。 |
|
相邻元素选择器 |
集合元素 |
$(“.one+div”)选取class为one的下一个<div>兄弟元素。 |
|
兄弟元素选择器 |
集合元素 |
$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素。 |
注意：$(“prev~siblings”)选择器与siblings()方法的区别。
$(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关，只要是同辈节点就都能匹配。
3， 过滤选择器？
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS 中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单 对象属性过滤选择器共六种选择器。
这边只总结基本过滤器，其它过滤器在实际的开发过程中需要的时候再查看就可以了。
|
选择器 |
返回 |
示例 |
|
:first |
单个元素 |
$(“div:first”)选取所有<div>元素中第1个<div>元素。 |
|
:last |
单个元素 |
$(“div:last”)选取所有<div>元素中最后1个<div>元素。 |
|
not(selector) |
集合元素 |
$(“input:not(.myClass)”)选取class不是myClass的<input>元素。 |
|
:even |
集合元素 |
$(“input:even”)选取索引是偶数的<input>元素。 |
|
:odd |
集合元素 |
$(“input:odd”)选取索引是奇数的<input>元素。 |
|
:eq(index) |
单个元素 |
$(“input:eq(1)”)选取索引等于1的<input>元素。 |
|
:gt(index) |
集合元素 |
$(“input:gt(1)”)选取索引大于1的<input>元素。 |
|
:lt(index) |
集合元素 |
$(“input:lt(1)”)选取索引小于1的<input>元素。(不包括1) |
|
:header |
集合元素 |
$(“:header”)选取网页中所有的<h1>,<h2>,<h3>... |
|
:animated |
集合元素 |
$(“div: animated”)选取正在执行动画的<div>元素。 |
4， 表单选择器？
利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。
|
选择器 |
返回 |
示例 |
|
:input |
集合元素 |
$(“:input”)选取所有<input>,<textarea>,<select>和<button>元素。 |
|
:text |
集合元素 |
$(“:text”)选取所有的单行文本框。 |
|
:password |
集合元素 |
$(“: password”)选取所有的密码框。 |
|
:radio |
集合元素 |
$(“: radio”)选取所有的单选框。 |
|
:checkbox |
集合元素 |
$(“:checkbox”)选取所有的复选框。 |
|
:submit |
集合元素 |
$(“: submit”)选取所有的提交按钮。 |
|
:image |
集合元素 |
$(“: image”)选取所有的图像按钮。 |
|
:reset |
集合元素 |
$(“: reset”)选取所有的重置按钮。 |
|
:button |
集合元素 |
$(“: button”)选取所有的按钮。 |
|
:file |
集合元素 |
$(“: file”)选取所有的上传域。 |
|
:hidden |
集合元素 |
$(“: hidden”)选取所有不可见元素。 |
5.表单属性选择器
| 选择器 | 描述 | 返回 | 示例 |
| :enabled | 选取所有可用的表单元素 | 集合元素 | $("#form1 :enabled")选取id为“form1”的表单内的所有可用元素 |
| :disabled | 选取所有不可用的表单元素 | 集合元素 | $("#form2 :disabled")选取id为“form2”的表单内的所有不可用元素 |
| :checked | 选取所有被选中的元素（单选框-radio、复选框-checkbox） | 集合元素 | $("input:checked")选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素（下拉列表） | 集合元素 | $("select :selected")选取所有被选中的选项元素（option） |
6.筛选器
查找子标签： $("div").children(".test") $("div").find(".test")
向下查找兄弟标签： $(".test").next() $(".test").nextAll()
$(".test").nextUntil()
向上查找兄弟标签： $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents()
$(".test").parentUntil()
元素属性和Dom属性
对于下面这样一个标签元素:
<img id='img' src="1.jpg" alt='1' class="imgs"></img>
我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性.
元素属性和Dom属性只是在我们对其进行不同解析时的不同称呼.
值得注意的是:
1.元素被解析成Dom时,元素属性和Dom属性并不一定是原来的名称.
例如,img的class属性,在表现为元素属性时是class;在表现为Dom属性时,属性名为className
2.在JavaScript中,我们可以直接获取或设置Dom属性
使用jQuery操作元素属性
在jQuery中,提供了attr函数来操作元素属性,具体如下:
函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr("value")attr(property) 将一个"名/值"形式的对象设置为所有匹配元素的属性 $("input").attr({ value: "txt", title: "text" });attr(key,value) 为所有匹配的元素设置一个属性值 $("input").attr("value","txt");attr(key,fn) 为所有匹配的元素设置一个计算的属性值 $("input").attr("title", function () { return this.value });removeAttr(name) 从所有匹配的元素中删除一个属性 $("input").removeAttr("value");
注意:
1.如果要设置对象的class属性时,必须使用className作为属性名.
2.我们可以使用removeAttr删除元素属性,但其对应的Dom属性是不会被删除掉的,只是被改变其值而已
根据上面的几个函数,我们可以这样使用来获取dom的value值和innerHTML值:
$("#txt1").attr("value")
$("#txt1").attr("value", "1234");
$("#dv1").attr("innerHTML", 'this is a div');
$("#dv1").attr("innerHTML");
实际上,jQuery提供了更简单的方法来访问value,innerHTML,具体函数如下:
函数名 说明 例子 val() 获取第一个匹配元素的value值 $("#txt1").val()val(val) 为匹配的元素设置value值 $("#txt1").val("txt1")html() 获取第一个匹配元素的html内容 $("#dv1").html()html(val) 设置每一个匹配的元素的html内容 $("#dv1").html("this is a div")text() 取得所有匹配文本节点的内容,并将其连接起来 $("div").text()text(val) 将所有匹配元素的置为val $("div").text("divs")
使用jQuery操作CSS
1.修改CSS类
函数名 说明 例子 addClass(classes) 为每个匹配的元素添加指定的类名 $("input").addClass("colorRed borderBlack");hasClass(class) 判断匹配元素集合中是否至少有一个包含了指定的css类,如果有一个含有指定css类,则返回true alert($("input").hasClass("borderBlack"));removeClass([classes]) 从匹配元素中移除所有或指定的css类 $("input").removeClass("colorRed borderBlack");toggleClass(classes) 如果存在(不存在)就删除(添加)指定类 $("input").toggleClass("colorRed borderBlack");toggleClass(classes,switch) 当switch是true时,添加类,switch为false时,删除类 $("input").toggleClass("colorRed borderBlack", true);注意:
1.addClass、removeClass、toggleClass均可添加多个类,多个类之间用空格隔开
2.removeClass方法的参数可选,如果有参数,则删除指定class,如果无参数,则删除匹配元素的所有class
3.在调用toggleClass(classes,switch)时,我们可以有更多的用法,例如:
//每当按钮被点击三次时,添加样式 var i = 0; $("#btn").click(function () { $("input").toggleClass("colorRed borderBlack", true); });
2.修改CSS样式
函数名 说明 例子 css(name) 访问第一个匹配元素的样式属性 $("input").css("color")css(properties) 把一个"名/值"对设置给所有匹配元素的样式属性 $("input").css({border:"solid 3px silver",color:"red"})css(name,value) 为匹配的元素设置同一个样式属性
如果是数字,将自动转换为像素值$("input").css("border-width","5");
注意:
对于样式值为数字的代码示例及结果:
示例 生成的源码 $("input").css("border-width","5");<input style="BORDER-RIGHT-WIDTH: 5px; BORDER-TOP-WIDTH: 5px; BORDER-BOTTOM-WIDTH: 5px; BORDER-LEFT-WIDTH: 5px" id="txt1" />
注意:
对于一些常用的属性,例如width,height之类,使用attr("width")和css("width")是无法正常获取其值的,现在,我们来介绍一些常用的属性.
获取常用的属性
1.宽、高相关
函数名 说明 例子 width() 获取第一个匹配元素的宽度,默认为px $("#txt1").width()width(val) 为匹配的元素设置宽度值,默认为px $("#txt1").width(200)height() 获取第一个匹配元素的高度,默认为px $("#txt1").height()height(val) 为匹配的元素设置宽度值,默认为px $("#txt1").height(20)innerWidth() 获取第一个匹配元素内部区域宽度(包括padding,不包括border) $("#txt1").innerWidth()innerHeight() 获取第一个匹配元素内部区域高度(包括padding,不包括border) $("#txt1").innerHeight()outerWidth([margin]) 获取第一个匹配元素外部区域宽度(包括padding,border)
margin为true则包括margin,否则不包括$("#txt1").outerWidth()outerHeight([margin]) 获取第一个匹配元素外部区域高度(包括padding,border)
margin为true则包括margin,否则不包括$("#txt1").outerHeight(true)注意:
返回的高度、宽度均为数字,不带px
参照一张图,会更容易理解些.
2.位置相关
在设计一些弹出对象的脚本中,经常需要动态获取弹出坐标并且设置元素的位置.jQuery为我们提供了位置相关的各个函数.
函数名 说明 例子 offset() 获取匹配元素在当前窗口的相对偏移
只对可见元素有效$("#btn").offset().top $("#btn").offset().leftposition() 获取匹配元素相对父元素的偏移
只对可见元素有效$("#btn").position().top $("#btn").position().leftscrollTop() 获取匹配元素相对滚动条顶部的偏移
对可见元素和隐藏元素均有效$("div").scrollTop()scrollTop(val) 设置垂直滚动条顶部偏移为该值
对可见元素和隐藏元素均有效$("div").scrollTop(200)scrollLeft() 获取匹配元素相对滚动条左部的偏移
对可见元素和隐藏元素均有效$("div").scrollLeft()scrollLeft(val) 设置水平滚动条左侧的偏移
对可见元素和隐藏元素均有效$("div").scrollLeft(200)
注意:
offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移
jquery事件、挂事件、移除事件
<div id="a1">11</div>
<div class="aa" bs="1">aaa</div>
<div class="aa" bs="2">bbb</div>
<div class="aa" bs="3">ccc</div>
<input type="text" id="p1" />
<input type="button" id="b1" value="挂事件" />
<input type="button" id="b2" value="移除事件" />
//jquery加事件
$(document).ready(function(e) {//页面加载完成之后执行事件
//给a1加点击
/*$("#a1").click(function(){
alert('aa');
})
//给class为aa的所有元素加事件
$(".aa").click(function(){
//alert('bb');
//alert($(this).text());//取文本值。this点击哪一个就选取哪一个
//alert($(this).attr("bs"));//取属性值
$(".aa").css("background-color","#0F0");//先让所有的颜色变为原来的颜色
$(this).css("background-color","red");//点击哪一个背景颜色换成红色
})*/
//第二种方式挂事件
$("#b1").click(function(){//匿名函数
$("#a1").bind("click",function(){//bind表示挂事件
alert("我是挂上的事件");
})
$("#b2").click(function(){
$("#a1").unbind("click");//unbind移除事件
})
})
});
jquery事件切换hover/toggle
1.hover([over,]out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是 否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个 常见错误）。
参数：
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
实例：
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
2.toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
参数：
speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
实例：
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
JQuery事件委派
一、定义
事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
二、版本
从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。
因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。
三、传统方法添加事件的缺点
示例：
<ul id="list">
<li>1111<li>
<li>2222<li>
<li>3333<li>
<li>4444<li>
</ul>
这是一个ul，里面包含4个li，如果想要给li加上点击事件，弹出一些内容，我们一般这样写：
$('#list li').click(function(){
alert('hello world!');
})
这样当我们点击list里面的任何一个li都可以弹出‘hello world!’，但这样做有两个弊端：
1.很耗费资源，因为这种方式是给每个li都加上了事件，li的个数少的话还没事，如果li多的话会很耗费资源。
2.如果后期动态添加li，不会拥有这个弹出事件。
针对以上问题，可以用事件委派来解决。
四、使用
on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
替换bind()
当第二个参数'selector'为null时，on()和bind()其实在用法上基本上没有任何区别了，所以我们可以认为on()只是比bind()多了一个可选的'selector'参数，所以on()可以非常方便的换掉bind()
替换live()
在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面，当然在1.4之后delegate()也可以 做类似的事情了。live()的原理很简单，它是通过document进行事件委派的，因此我们也可以使用on()通过将事件绑定到document来达 到live()一样的效果。
live()写法
示例：
<ul id="list">
<li>1111<li>
<li>2222<li>
<li>3333<li>
<li>4444<li>
</ul>
$('#list li').live('click', '#list li', function() {
alert('hello world!');
});
on()写法
$(document).on('click', '#list li', function() {
alert('hello world!')
});
这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。
替换delegate()
delegate()是1.4引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和live()优点相似。只不过live()是通 过document元素委派，而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。
delegate()的写法
$('#list').delegate('li', 'click', function() {
alert('hello world!');
});
on()写法
$('#list').on('click', 'li', function() {
alert('hello world!');
});
总结
jQuery推出on() 的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用one()吧，这个没有变化。
jquery each循环
jquery each循环,要实现break和continue的功能：
break----用return false;
continue --用return ture;
each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。jQuery和jQuery对象都实 现了该方法，对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说：jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用。
$.each(array, [callback])遍历,很常用
var arr = ['javascript', 'php', 'java', 'c++', 'c#', 'perl', 'vb', 'html', 'css', 'objective-c'];
$.each(arr, function(key, val) {
// firebug console
console.log('index in arr:' + key + ", corresponding value:" + val);
// 如果想退出循环
// return false;
});
jquery支持两种循环方式：
方式一
格式：$.each(obj,fn)
li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
console.log(i,x)
});
方式二
格式：$("").each(fn)
$("tr").each(function(){
console.log($(this).html())
})
其中,$(this)代指当前循环标签。
文档节点处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
动画 fadeIn() faesOut() slideDown() sideUp() 样式操作： $('xxx').css('display',none); addClass()------添加样式 removeClass----移除样式 hasClass---------判断有没有样式 文本操作 $('xxx').text() input系列框里面的值 $('xxx').val() 属性操作 $('xxx').attr('','');赋值 $('xxx').attr('target'); $('xxx').removeAttr('target') 在操作关于input【radio checkbox】我们选中或者取消，不能采用attr来进行设值-----1.9版本 3版本已经修复了这个bug prop()专门是用来对input【radio checkbox】 $('xxx').prop() 文档操作 append()------往选中的元素内部的后面添加元素 appendTo()--- prepend()-----往选中的元素内部的前面添加元素 prependTo()-- after----往选中元素外部的后面进行添加 before--往选中元素外部的前面进行添加 empty()------将元素内部的内容删除 remove()-----将元素的标签删除
