2016-09-20

jQuery

<script type="text/javascript" src="jquery-3.1.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			alert("hello world!");
		});
		$(document).ready(function(){
			alert("哇!");
		});
		$(function(){
			alert("哇哦!");
		});
	</script>

##jQuery代码风格

链式操作风格

对于同一个对象不超过3个操作，可以直接写成一行

1	$("li").show().unbind("click");

对于同一个对象的较多操作，建议每行写一个操作

$(this).removeClass("mouseout")
 .addClass("mouseover")
 .stop()
 .fadeTo("fast".0.6)
 .fadeTo("fast".1)

对于多个对象的少量操作，每个对象写一行，如果涉及子元素，可以考虑适当缩进

$(this).addClass("highlight")
	.children("li").show().end()
.siblings().removeClass("highlight")
	.children("li").hide();

为代码添加注释
##jQuery对象和DOM对象
DOM对象
通过js中的getElementsByTagName或者，getElementById来获取元素节点，像这样的到的就是DOM对象
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么就可以使用jQuery里面的方法
1
2
3
$("#foo").html();
等价于
document.getElementById("foo").innerHTML

`注意：

在jQuery对象中无法使用DOM对象的任何方法如：$(#id).innerHTML(错误)
DOM对象也不能使用jQuery里面的方法
如：document.getElementById(“id”).html()(错误)
###jQuery对象和DOM对象的相互转换

定义变量的风格

jQuery对象
var $variable=jQuery对象（在变量前面加上$）
DOM对象
var variable=DOM对象

jQuery对象转化成DOM对象
（1）jQuery对象那个是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
1
2
3
4
var $cr=$("#cr");//jQuery对象
var cr=$cr[0];//DOM对象
alert(cr.checked);
//检测这个checkbox是否被选中了

（2）还可以通过jQuery本身提供的，通过get(index)方法得到相应的DOM对象

var $cr=$("#cr");//jQuery对象
var cr=$cr.get(0);//DOM对象
alert(cr.checked);
//检测这个checkbox是否被选中了

DOM对象转成jQuery对象
对于一个DOM对象，只要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为：$(DOM对象)
1
2
3
var cr=document.getElementById("cr");
//DOM对象
var $cr=$(cr);

注意：

转换后可以任意使用jQuery中方法

平时用到的jQuery对象都是通过$ ()函数制造出来的，$ ()函数就是一个jQuery对象的制造厂

$(document).ready(function(){
			var $cr=$("#cr");
			var cr=$cr[0];
			$cr.click(function(){
				if(cr.checked){
					alert("感谢你的支持！你可以继续操作了！");
				}
			})
		})
//换成jQuery对象完成
		$(document).ready(function(){
			var $cr=$("#cr");
			$cr.click(function(){
				if($cr.is(":checked")){
					alert("感谢你的支持！你可以继续操作了1！");
				}
			})
		})

##解决jQuery与其他库的冲突
注意：默认情况下，jQuery用$作为自身的快捷方式

jQuery库在其他库之后导入
在其他库和jQuery库被加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权转移给其他js库。
如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作，同时，可以使用$()方法作为其他库的快捷方式。这里无需jQuery.noConflict()函数。
##jQuery选择器
css选择器

jQuery选择器

<script type="text/javascript">
		$(".demo").click(function(){
			alert("jQuery选择器");
		})
	</script>
<p class="demo">jQuery Demo</p>

jQuery选择器的优势

$()函数在很多js类库中都被作为一个选择器来使用。$(“#ID”)用来代替document.getElementById()函数。
支持css1到css3选择器
完善的处理机制

if(document.getElementById("tt")){
			document.getElementById("tt").style.color="red";
		}
------------------
		$('#tt').css("color","red");
//这里无需判断$('#tt')是否存在

注意：$(“#tt”)获取的永远是对象，即使网页没有此元素。因此当要用jQuery检查某个元素在网页上是否存在。

if($("#tt")){
//错误
}
应该用获取到元素的长度来判断。
if($("#tt").length>0){
}
或者转化成DOM对象来判断
if($("#tt")[0]){
}

jQuery基本选择器
它通过元素id,class和标签名等来查找DOM元素

Alt text

层次选择器
通过DOM元素之间的层次关系来获取特定元素。如：后代元素，子元素，相邻元素和同辈元素。
可以使用next()方法来替代$(‘prev+next’)选择器
$(‘.one+div’)等价于$(“.one”).next(“div”)
$(“#prev~siblings”)等价于$(“#prev”).nextAll(“div”)
1
2
3
4
5
//选取#prev之后的所有同辈div元素
$("#prev~div").css("background","#eee");
//同上
$("#prev").nextAll("div").css("background","eee");
//选取#prev所有的同辈div,无论前后位置
过滤选择器
基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器
:has(selector)选取含有选择器所匹配的元素的元素。$(“div:has(p)”)选取含有
元素的
元素

基本过滤
内容过滤
可见性过滤
属性过滤
子元素过滤
表单对象属性过滤选择器
选择器中含有特殊的符号的注意事项

选择器中含有”.” ,”#” ,”(“ ,”]”等特殊的字符
直接使用会出错，应该使用转义符转义

<div id="id#b">bbb</div>
<div id="id[1]">ccc</div>
普通方式获取：
$("#id#b");
$("#id[1]")
以上错误
$("#id\\#b");
$("#id\\[1\\]");
以上正确

属性选择器的@符号问题
jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留下来的@符号，如果使用1.3.1以上版本，则不需要在属性签添加@符号
如：
$(“div[@title=’test’]”);
正确写法是去除@符号
$(“div[title=’test’]”);
选择器中含有空格的注意事项
多一个空格或者少一个空格也许会得到截然不同的结果。

filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。
与find()的区别：find()会在匀速内寻找匹配的元素，而filter()则是筛选元素。一个是对它的子集操作，一个是对自身集合元素进行筛选。

##jQuery其他选择器

jQuery提供的选择器扩展

MoreSelectors for jQuery
Basic XPath

其他使用css选择器的方法

document.getElementBySelector()
cssQuery()
querySelectorAll()
##jQuery中的DOM操作

DOM是一种与浏览器，平台，语言无关的接口，使用该接口可以轻松的访问页面中所有的而标准组件。

###DOM操作分类

DOM Core(核心)
它并不专属于js
HTML-DOM
CSS-DOM
jQuery中的DOM操作
一. 查找节点

查找元素节点

var $li=$("ul li:eq(1)");
//获取<ul>里面的第2个<li>节点
var li_txt=$li.text();
//获取元素节点的文本内容
console.log(li_txt);

查找属性节点
attr()方法：当参数是一个时，则是要查找的属性的名字。
1
2
3
var $para=$("p");
var p_txt=$para.attr("title");
console.log(p_txt);

二. 创建节点

创建元素节点

var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
$("ul").append($li_1);
$("ul").append($li_2);

注意：

动态的创建的的新元素节点不会被自动添加到文档中，而是要用方法插入到文档中
可以用 $(“< /p>”)或者 $(“< p> < /p>”)不能使用$(“
“)或者$(“< /P>”)

创建文本节点

var $li_1=$("<li>文本节点</li>");
var $li_2=$("<li>文本节点</li>");
$("ul").append($li_1);
$("ul").append($li_2);

创建属性节点

var $li_1=$("<li title="标题1">文本节点</li>");
var $li_2=$("<li title="标题2">文本节点</li>");
$("ul").append($li_1);
$("ul").append($li_2);
``` 
三.插入节点
各种方法
* append()/appendTo()
* prepend()/prependTo()
* after()/insertAfter()
* before()/insertBefore()
四. 删除节点
1. remove()方法
作用：是从DOM中删除所有匹配的元素，传入的参数是用于根据jQuery表达式来筛选元素

$(“ul li:eq(1)”).remove();

1	`注意:`当某个节点用remove()删除后，该节点所包含的所有后代节点将同时被删除，这个方法的``返回值是一个指向已被删除节点的引用`

var $li=$(“ul li:eq(1)”).remove();
//将第2个

从网页中删除
$li.appendTo(“ul”);
//把刚才删除的节点又重新添加到

1	可以使用appendTo()的特性来简化以上代码

$(“ul li:eq(1)”).appendTo(“ul”);

1	remove()方法可以通过传递参数来选择性的删除元素

$(“ul li”).remove(“li[title!=菠萝]”);
//删除title不为菠萝的li

1
2

2. detach()方法
与remove()的区别：detach()不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同，所有绑定的事件，附加的数据等都会保留下来

var $li=$(“ul li:eq(1)”).detach();
//将第2个

从网页中删除
$li.appendTo(“ul”);
//重新追加此元素，发现它之前的绑定的事件还在，如果使用remove（），那么它之前的绑定事件将失效

1 2	3. empty()方法严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

$(“ul li:eq(1)”).empty();
//清空第2个li里的内容

1
2
3

五.复制节点
clone()方法
在其中传入true，它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能

$(“ul li”).click(function(){
$(this).clone().appendTo(“ul”)

});

$(this).clone(true).appendTo(“body”);

1
2
3

六.替换节点
1. replaceWith()
作用：是将所有匹配的元素替换成指定的HTML或者DOM元素。

哈哈

$(“p”).replaceWith(“嗯嗯“);

1 2	2. replaceAll() 作用与replaceWith()一样，只是颠倒了操作

$(“嗯嗯“).replaceAll(“p”);

1
2
3

`注意：`如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件
七. 包裹节点
1. wrap()方法：对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。

$(“strong”).wrap(““);
得到如下：

1 2	2. wrapAll()方法该方法是将所有匹配的元素用一个元素来包裹起来。

wrap():
$(“strong”).wrap(““);
得到如下：
1111
2222
wrapAll():
$(“strong”).wrapAll(““);
得到如下：

1111
2222

1
2
3

`注意：`如果被包裹的多个元素间有其他元素，其他元素会被放在包裹元素之后
3. wrapInner()方法
该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

$(“strong”).wrapInner(““);
结果如下：
你喜欢的水果是？

1 2	### 属性操作 1. 获取属性和设置属性

获取属性：
var $para=$(“p”);
var p_txt=$para.attr(“title”);
设置属性：(注意传递两个参数)
$(“p”).attr({“title”:”your title”,”name”:”test”});

1
2

`注意：`jQuery中有很多的方法都是一个函数同时实现获取和设置的功能（只是传入的参数不同而已）如：html(),text(),height(),width(),val()和css()方法。
2. 删除属性

$(“p”).removeAttr(“title”);

1
2
3

(jQuery1.6中新增prop()和removeProp()方法)
### 样式操作
1. 获取样式和设置样式

$(“p”).attr(“class”,”high”);
变为：

追加class用addCalss()方法

1 2	2. 追加样式 addClass()方法

$(“p”).addClass(“another”);

3. 移除样式

删除class=”high”
$(“p”).removeClass(“high”);
删除多个class
$(“p”).removeClass(“high another”);
删除全部class
$(“p”).removeClass();

1
2
3

4. 切换样式
* toggle()方法主要是控制行为上的重复切换
* toggleClass()方法控制样式上的重复切换，如果类名存在则删除它，不在，就添加它

$(“p”).toggleClass(“another”)
原样式与另一样式之间进行切换

5. 判断是否含有某个样式
hasClass()可以用来判断元素中是否含有某个class
，如果有则返回true，否则返回false
`注意：`hasClass()是为了增强代码可读性而产生的，在jQuery内部实际上调用is()方法完成的。
###设置和获取HTML，文本和值
1. html()方法
类似JavaScript中的innerHTML方法，可以用来读取或者设置某个元素中的HTML内容
2. text()方法
类似与JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。
3. val()方法
类似JavaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框。它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。
this指向当前的“文本框”，this.defaultValue就是当前“文本框”的默认值
还有一种用法：
它能使select，checkbox，radio相应的选项被选中。

$(“single”).val(“选择2号”);
$(“#multiple”).val([“选择2号”,”选择3号”);
$(“:checkbox”).val([“check2”,”check3”]);
$(“:radio”).val([“radio”]);

###遍历节点
1. children()方法，只考虑子元素而不考虑其他后代元素
2. next()方法
用于取得匹配元素后面紧邻的同辈元素
3. prev()方法
用于取得匹配元素前面紧邻的同辈元素
4. siblings()方法
该方法用于取得匹配元素前后所有的同辈元素
5. closest()
该方法用于取得最近的匹配的元素，首先检查当前元素是否匹配，如果匹配则返回元素本身。如果不匹配则向上查找父级，逐级向上直到找到匹配的选择器的元素，若什么都没找到，则返回一个jQuery空对象。
6. parent(),parents(),closest()的区别
## CSS-DOM操作
css()方法设置和获取样式
`注意：`
* 如果值是数字，将会被自动转化为像素值
* 在css()方法中，如果属相中带有"-"符号，
例如：font-size和background-color属性
如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：
$("p").css({fontSize:"30px",backgroundColor:"#888"})
1. height()方法
2. width()方法

$(“p”).width();
//获取

元素的宽度值
$(“p”).width(“400px”);
//设置

元素的宽度值为400px

1 2	3. offset()方法获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

var offset=$(“p”).offset();
var left=offset.left;
vat top=offset.top;

2. position()方法
它的作用是获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移。与offset()一样，它返回的对象（top和left）
3. scrollTop()方法和scrollLeft()方法
可以为这两个方法指定一个参数，控制元素的滚动到指定的位置。

var $p=$(“p”);
var scrollTop=$p.scrollTop();
var scrollLeft=$p.scrollLeft();

##jQuery中的事件和动画
###jQuery中的事件
1. 加载DOM
$(document).ready()方法来代替window.onload方法，使用该方法可以在DOM载入就绪时就对其进行操作并执行它所绑定的函数。
![Alt text](http://obfnbicau.bkt.clouddn.com/$%28document%29.ready%28%29%E4%B8%8Ewindow.onload%E6%96%B9%E6%B3%95.PNG)
2. 事件绑定
bind()方法来对匹配元素进行特定事件的绑定。
bind(type [. data] . fn);
第一参数：blur,focus,load,resize……等，也可以自定义名称。
第二参数：为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第三参数：用来绑定的处理函数。
3. 合成事件
jQuery有两个合成事件----hover()方法和toggle()方法
* hover()方法
hover(enter,leave)方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的`第一个函数(enter)`;当鼠标移出这个元素时，会触发指定的`第二个函数(leave)`。
* toggle()方法
toggle(fn1,fn2,fn3,fn4……,fnN)
用于模拟鼠标连续单击事件。
toggle()方法在jQuery中还有另一个作用：切换元素的可见状态。如果元素是可见的，单击切换后则为隐藏。如果元素是隐藏的，单击切换后则为可见的。

$(function(){
$(“#panel h5.head”).toggle(function(){
$(this).addClass(“highlight”);
$(this).next().show();

},function(){
$(this).removeClass(“highlight”);
$(this).next().hide();
});
})

###事件冒泡
1. 什么是事件冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click是事件，同时<body>元素上也绑定了click事件。
2. 事件对象
事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，事件处理函数执行后，事件对象就被销毁。
3. 停止事件冒泡
停止事件冒泡可以阻止事件中其他的事件函数被执行。jQuery中提供了stopPropagation()方法来停止事件冒泡。

$(‘span’).bind(“click”,function(event){
var txt=$(‘#msg’).html()+”

内层span元素被单击

“;
$(“#msg”).html(txt);
event.stopPropagation();
//停止事件冒泡
});

1
2

4. 阻止默认行为
网页中的元素有自己的默认行为。如：单击超链接后会跳转，单击提交按钮后表单会提交，有时需要阻止这些默认行为。用preventDefault()方法来阻止元素的默认行为。

event.preventDefault();
//阻止默认行为 event.stopPropagation();
//停止事件的冒泡
// return false;(对上述阻止行为的简写)
//同时阻止默认行为,停止事件的冒泡

5. 事件捕获
与事件冒泡相反，jQuery不支持事件捕获
6. 事件对象的属性
* event.type

$("a").click(function(event){
        alert(event.type);
        return false;
    });

* event.preventDefault()方法
* event.stopPropagation()方法
* event.target
作用：是获取到触发事件的元素

$(“a[href=’http://google.com']).click(function(event){
var tg=event.target;
alert(tg.href);
//http://google.com
return false;
});

*  event.relatedTarget
*  event.pageX和event.pageY
作用：获取到光标相对于页面的x坐标，y坐标。
* event.which
该方法的作用是在鼠标单击事件中获取到鼠标左，中，右键；在键盘事件中获取键盘的按键。

$(“a”).mousedown(function(e){
console.log(e.which);
return false;
});

* event.metaKey
jQuery规定event.metaKey为键盘事件中获取<ctrl>按键
###移除事件
1. 移除按钮元素上以前注册的事件
`unbind([type],[data]);方法`
第一个参数事件类型，第二个参数是将要移除的函数。
（1）如果没有参数，则删除所有的绑定事件
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件
（3）如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

$(“#delAll”).click(function(){
$(“#btn”).unbind(“click”);
});

1 2	2. 移除<button>元素的其中一个事件（首先需要为这些匿名函数指定一个变量）

$(‘#btn’).bind(“click”,myFun1=function(){
$(‘#test’).append(“

我的绑定函数1

“);
}).bind(“click”,myFun2=function(){
$(‘#test’).append(“

我的绑定函数2

“); }).bind(“click”,myFun3=function(){
$(‘#test’).append(“

我的绑定函数3

“);
});

`one()方法`
one()对于只需要触发一次，随后就要立即解除绑定情况。one()方法可以为元素绑定处理函数。当处理函数触发一次后，立即 被删除，即每个对象上，事件处理函数只会被执行一次。
one(type,[data],fn)
###模拟操作
如：当用户进入页面后，就会触发click事件，而非不需要用户去主动单击；
1. 常用模拟
* $('#btn').trigger("click");
* $('#btn').click();
2. 触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称事件。

$(function(){ $(‘#btn’).bind(“myClick”,function(){
$(‘#test’).append(“

我的自定义事件

“);
});
$(‘#btn’).trigger(“myClick”);
});

1
2

3. 传递数据
trigger(type,[data])方法有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组的形式传递，通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。。

$(function(){ $(‘#btn’).bind(“myClick”,function(event,message1,message2){
$(‘#test’).append(“

“+message1+message2+”

“);
});
$(‘#btn’).trigger(“myClick”,[“我的”,”梦想”]);
});

1 2	4. 执行默认操作 trigger()方法触发事件后，会执行浏览器默认操作。

$(“input”).trigger(“focus”);
//以上代码不仅会触发元素绑定的focus事件，也会使元素本身得到焦点（这是浏览器的默认操作）

如果只想触发绑定的focus是事件，而不想执行浏览器默认操作，可以使用jQuery的triggerHandler("focus");
* 使用triggerHandler()只是触发元素上绑定的事件，不会得到焦点。
###其他用法
1. 绑定多个事件类型
bind()方法绑定多个事件。

$(function(){

$(“.bg”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
});
});
相当与下面代码：
$(function(){
$(“.bg”).bind(“mouseover”,function(){
$(this).toggleClass(“over”);
}).bind(“mouseout”,function(){
$(this).toggleClass(“over”);
});
});

1	2. 添加事件命名空间，便于管理

$(function(){
$(“div”).bind(“click.plugin”,function(){
$(“body”).append(“

click事件

“);
});
$(“div”).bind(“mouseover.plugin”,function(){
$(“body”).append(“

mouseover事件

“);
});
$(“div”).bind(“dbclick.plugin”,function(){
$(“body”).append(“

dbclick事件

“);
});
$(“button”).click(function(){
$(“div”).unbind(“.plugin”);
});

1	3. 相同事件名称，不同命名空间执行方法

$(function(){
$(“div”).bind(“click”,function(){
$(“body”).append(“

click事件

“);
});
$(“div”).bind(“click.plugin”,function(){
$(“body”).append(“

click.plugin事件

“);
});
$(“button”).click(function(){
$(“div”).trigger(“click!”);
})
});

`注意：`trigger("click")后面的！感叹号的作用是匹配所有不包含在命名空间中的click方法
## jQuery中的动画
###show()方法和hide()方法
1. show()方法和hide()方法
在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为"none"

$(“element”).hide();
等价于：
$(“element”).css(“display”,”none”);

`注意：`用jQuery做动画效果要求在`标准模式`下，否则可能会引起动画抖动。
2. show()方法和hide()方法让元素动起来
上述两个方法在不带任何参数的情况下，相当于
css("display","none/block/inline"),不会有任何动画。
>可以为指定一个速度参数（"slow"表示速度为600毫秒，"normal"表示400毫秒，"fast"表示200毫秒），$ ("element").show("fast")>也可以显示速度为一个数字，单位为毫秒，$ ("element").show(1000);
>hide()方法会同时减少“内容”的高，宽，和不透明度，直至这3个属性的值都为0
###fadeIn()方法和fadeOut()方法
只改变元素的不透明度
###slideUp方法和slideDown()方法
只改变元素的高度，如果一个元素的display属性值为"none"，当调用slideDown()方法时，这个元素将由上至下延伸。
###自定义动画方法
animate(params,speed,callback);
* params:一个包含样式属性及值的映射，如：
{property1:"value1",property2:"value2"..........}
* speed:速度参数，可选
* callback:在动画完成时执行的函数，可选
1. 自定义简单动画

$(function(){
$(“#panel”).mouseover(function(){
$(this).animate({left:”500px”},3000);
});
});

1 2	2. 累加，累减动画在value值前面加上"+="或"-="符号表示在当前位置累加或者累减。

$(this).animate({left:”+=500px”},3000);

1 2	3. 多重动画 * 同时执行多个动画

$(“div”).click(function(){
$(this).animate({left:”500px”,height:”200px”},3000);
});

1	* 按顺序执行多个动画(动画队列)

$(this).animate({left:”500px”},3000);
$(this).animate({height:”500px”},3000);

1 2	4. 动画回调函数 `注意：`callback回调函数适合用于jQuery的所有动画效果

$(“#panel”).css(“opacity”,”0.5”);
$(“#panel”).click(function(){
$(this).animate({left:”400px”,height:”200px”,opacity:”1”},3000)
.animate({top:”200px”,width:”200px”},3000,function(){
$(this).css(“border”,”5px solid green”);
})
// .fadeOut(“slow”);
//让元素最后隐藏消失
// .css(“border”,”5px solid green”);
//一开始动画就执行了，需要用回调函数，将css()放在动画队列里面

});

###停止动画和判断是否处于动画状态
1. 停止元素的动画
stop()方法，stop([clearQueue],[gotoEnd]);
clearQueue和gotoEnd都是可选的参数，为Boolean值（true或false）
2. 判断元素是否处于动画状态

if(!$(element).is(“:animated”)){
//判断元素是否处于动画状态
//如果当前没有进行动画，则添加新动画
}

3. 延迟动画
delay()方法
4.其他动画方法
* toggle(speed,[callback])
* slideToggle(speed,[easing],[callback])
* fadeTo(speed,opacity,[callback])
* fadeToggle(speed,[easing],[callback])
![Alt text](http://obfnbicau.bkt.clouddn.com/%E5%8A%A8%E7%94%BB%E6%96%B9%E6%B3%95.PNG)
5. 动画队列
（1）一组元素上的动画效果
* 当在一个animate()方法中应用多个属性时，动画是同时发生的
* 当以链式的写法应用动画方法时，动画是按照顺序发生的
（2）多组元素上的动画效果
* 默认情况下，动画都是同时发生的
* 当以回调的形式应用动画时，动画是按照回调顺序的发生的
`注意：`在动画方法中，要注意其他非动画方法会插队，如：css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数。
##jQuery对表单，表格的操作及其更多的应用
###表单的应用
（1）表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法
（2）表单域：包含文本框，密码框，隐藏域，复选框，单选框，下拉选择框和文件上传框等
（3）表单按钮：包括提交按钮，复位按钮和一般按钮，用于数据传送到服务器上或者取消传送，还可以用来控制其他处理脚本的处理工作
1. 单行文本框的应用
* 获取和失去焦点改变样式

/*input:focus,textarea:focus{
border: 2px solid #f00;
background: #fcc;

}*/

/*解决IE6不支持:focus伪类情况*/
.focus{
    border: 2px solid #f00;
    background: #fcc;
}

$(function(){
$(“:input”).focus(function(){
$(this).addClass(“focus”);
}).blur(function(){
$(this).removeClass(“focus”);
});
});

1	2. 多行文本框的应用

// $(function(){
// var $comment=$(“#comment”);
// $(“.bigger”).click(function(){
// if($comment.height()<500){ $comment.height($comment.height()+50);="" }="" });="" $(".smaller").click(function(){="" if($comment.height()="">50){
// $comment.height($comment.height()-50);
// }
// });

// });
//使用animate()有一种缓冲效果比起height()

$(function(){
    var $comment=$("#comment");
    $(".bigger").click(function(){
        if(!$comment.is(":animated")){
            if($comment.height()<500){
                $comment.animate({height:"+=50"},400);
            }
        }
    });
    $(".smaller").click(function(){
        if(!$comment.is(":animated")){
            if($comment.height()>50){
                $comment.animate({height:"-=50"},400);
            }
        }
    });
});

3. 复选框的应用

$(function(){
$(“#checkAll”).click(function(){
$(‘[name=items]:checkbox’).attr(‘checked’,true);
});
$(“#checkNo”).click(function(){
$(‘[name=items]:checkbox’).attr(‘checked’,false);
});
$(“#checkRev”).click(function(){
$(‘[name=items]:checkbox’).each(function(){
// $(this).attr(“checked”,!$(this).attr(“checked”));
this.checked=!this.checked;
});
});
$(“#send”).click(function(){
var str=”你选中的是：\r\n”;
$(‘[name=items]:checkbox:checked’).each(function(){
str+=$(this).val()+”\r\n”;
});
alert(str);
});
});

1	把全选和不全选改为复选框：

$(function(){
// $(‘[name=items]:checkbox’).click(function(){
// var flag=true;
// $(‘[name=items]:checkbox’).each(function(){
// if(!this.checked){
// flag=false;
// }
// });
// $(‘#checkedAll’).attr(‘checked’,flag);
// });
//另一种方法：判断复选框的总数是否与选中的复选框数量相等

$(‘[name=items]:checkbox’).click(function(){
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率
var $tmp=$(‘[name=items]:checkbox’);
//用filter()方法选出选中的复选框，直接给checkedAll赋值
$(‘#checkedAll’).attr(‘checked’,$tmp.length==$tmp.filter(‘:checked’).length);
});

});

`注意：`哪些属性该用attr()访问，哪些应该用prop()访问？
第一个原则：只添加属性名称该属性就会生效应该使用prop()
第二个原则：只存在true/false的属性应该使用prop()
按照官方的说明：如果是设置disabled和checked这些属性，应该使用prop()方法，而不是使用attr()方法。
4. 下拉框的应用

$(function(){
//从左到右
$(‘#add’).click(function(){
var $options=$(‘#select1 option:selected’);
// var $remove=$options.remove();
// $remove.appendTo(‘#select2’);
//删除和追加可以直接用appendTo()方法完成
$options.appendTo(‘#select2’);
});
$(‘#add_all’).click(function(){
var $options=$(‘#select1 option’);
$options.appendTo(‘#select2’);
});
$(‘#select1’).dblclick(function(){
var $options=$(“option:selected”,this);
$options.appendTo(‘#select2’);
});
//右到左
$(‘#remove’).click(function(){
var $options=$(‘#select2 option:selected’);
// var $remove=$options.remove();
// $remove.appendTo(‘#select2’);
//删除和追加可以直接用appendTo()方法完成
$options.appendTo(‘#select1’);
});
$(‘#remove_all’).click(function(){
var $options=$(‘#select2 option’);
$options.appendTo(‘#select1’);
});
$(‘#select2’).dblclick(function(){
var $options=$(“option:selected”,this);
$options.appendTo(‘#select1’);
});

});

1
2
3

5. 表单验证
###表格的应用
（1）普通的隔行变色

1 2	`注意：`$("tr:odd")和$("tr:even")选择器中索引是从0开始，因此第一行是偶数。 >单选按钮控制表格变色：

$(function(){
// $(“tr:odd”).addClass(“odd”);
// $(“tr:even”).addClass(“even”);
// 除去表头的隔行变色
$(“tbody>tr:odd”).addClass(“odd”);
$(“tbody>tr:even”).addClass(“even”);
//某一行高亮显示
// $(“tr:contains(‘张珊5’)”).addClass(‘selected’);
//单击单选按钮，进行高亮显示
$(‘tbody>tr’).click(function(){
$(this)
.addClass(‘selected’)
.siblings().removeClass(‘selected’)
.end()
//使用end()后.find(‘:radio’)就是$(this).find(‘:radio’)
.find(‘:radio’).attr(‘checked’,true);
});
$(‘table :radio:checked’).parent().parent().addClass(‘selected’);
//注意$(‘table :radio:checked’)中table与:radio间一定要有空格

//用parents()方法简化
$('table :radio:checked').parents("tr")addClass('selected');
//has()方法进一步简化代码
$('tbody>tr:has(:checked)').addClass("selected");
});

#jQuery与Ajax的应用
1. Ajax的优势
* 不需要插件支持
* 优秀的用户体验
* 提高Web程序的性能
* 减轻服务器和宽带的负担
2. Ajax的不足
* 浏览器对XMLHttpRequest对象的支持度不足
* 破坏浏览器前进，“后退”按钮的正常功能
* 对搜索引擎的支持不足
* 开发和调试工具缺乏
3. Ajax的XMLHttpRequest对象
XMLHttpRequest对象是AJAX的核心——发送异步请求，接受响应及执行回调都是通过 它来完成的
4. 安装Web环境——AppServ
>下载地址http://www.appservnetwork.com
5. load()方法
(1)载入HTML文档
load(url [,data] [,callback])
![Alt text](./load方法.PNG)

$(function(){
$(“#send”).click(function(){
$(“#resText”).load(“test.html”);
});
});

已有评论

1	（2）筛选载入的HTML文档

//只加载test.html页面中的class为para的内容
$(“#resText”).load(“test.html .para”);

1 2	（3）传递方式 load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式传递，反之，则会自动转换为post方式

//无参数传递，则是get方式
$(“$resText”).load(“test.php”,function(){
});
//有参数传递，则是；post方式
$(“#resText”).load(“test.php”,{name:”rain”,age:”22” },function(){
});

1
2

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

$(“#resText”).load(“test.php”,function(responseText,textStatus,XMLHttpRequest){
//responseText请求返回的内容
//textStatus请求返回的状态
//XMLHttpRequest：XMLHttpRequest对象
});

6.  $.get()方法和 $ . post()方法
（1）$.get()方法
使用get方式来进行异步请求
$.get(url [,data] [,callback][,type])
![Alt text](http://obfnbicau.bkt.clouddn.com/$get%28%29%E6%96%B9%E6%B3%95.PNG)
（2）$.post()方法
>GET与POST方式的区别
* get请求会将参数跟在URL后进行传递，而post请求则是作为http消息的实体内容发送Web服务器，当然在ajax请求中，这种区别是对用户不可见的
* get方式对传输的数据有大小限制（一般不大于2kb）而使用post方式传递的数据量比get大（一般不受限制）
* get方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据（账号，密码等），而post方式不会
* get方式和post方式传递的数据在服务器端的获取也不相同。在PHP中get的数据可以用 $_ GET[]获取，而post方式可以用$_post[]获取,两种可以用$_REQUEST[]来获取
7. $.getScript()方法和$.getJson()方法
>JSONP(JavaScript with Padding )是一个
8. $.ajax(options)该方法只有一个参数
###序列化元素
1. serialize()方法
2. serializeArray()方法
该方法不是返回字符串，而是将，DOM元素序列化之后，返回json格式的数据
3. $.param()方法
它是serialize()方法的hexin，用来对一个数组或者一个对象按照key/value进行序列化。
```var obj={a:1,b:2,c:3};
	var k=$.param(obj);
   console.log(k);
   //a=1&b=2&c=3

###禁用缓存
问题：数据已经更新了，但传递的还是以前的数据
解决：应该禁用缓存
如果是$.post方法获取的数据，那么默认就是禁用缓存的，如果是$.get()方法，可以设置时间戳来避免缓存，可以在URL的后面加上+(+new Date)
(+new Date)的等价于new Date().getTime()
不用随机数的原因：因为随机数对于一台电脑来说，在大量使用之后出现重复的概率会很大，而时间戳不会。
如果是使用了$.ajax()方法来获取数据，只需要设置cache:false即可，注意：false是布尔值，而不是字符串。

本文标题:jQuery

文章作者:陈玉

发布时间:2016-09-20, 09:30:12

最后更新:2016-11-06, 00:35:56

原始链接:http://yoursite.com/2016/09/20/jQuery/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

jQuery

选择器中含有特殊的符号的注意事项

jQuery中的DOM操作