JQuery更多知识

一、Jquery特效

1.显示隐藏

$("#frist").show(speed,callback) //显示
$("#frist").hide(speed,callback)	//隐藏
$("#frist").toggle(speed,callback)	//如果元素显示，触发效果隐藏，如果隐藏则显示。

speed参数可选，可选slow,fast或则毫秒。

2.淡入淡出

$("#div1").fadeIn(speed,callback)	//淡入已隐藏的元素
$("#div2").fadeOut(speed,callback)	//淡出元素
$("#div3").fadeToggle(speed,callback)	//淡入淡出
$("#div4").fadeTo(speed,opacity,callback)	//通过设置透明度来实现变淡。

3.滑动效果

$("#panel").slideDown(speed,callback)	//向下滑动
$("#panel").slideUp(speed,callback)		//向上滑动
$("#panel").slideToggle(speed,callback)	//上下切换滑动

4.动画

$("p").animate({params},speed,callback)
$("p").animate({
	height:'toggle',	//使用show，hide和toggle值来作为变化
	width:'+=150px',	//使用+=，-=来设置动态
	left:'250px'		
})

params是设置CSS变化的属性。

5.停止动画，滑动

	$(".btn").click()
	$(".panel").stop(stopAll,gotoEnd)	
	//stopAll是否停止滑动动画。如果设为默认false,只是停止当前动画，如果设置ture，则停止当前元素的所有动画。
	//gotoEnd是否立即完成当前动画。

二、JQuery操作DOM

1.获取读取的内容属性。

	$(selector).text()	//返回或设置元素的文本内容。
	$(selector).html()	//返回或设置元素的内容（包含标记在内）
	$(input).val()		//返回或设置元素的字段的值
	$(selector).attr()	//返回或则设置元素的属性值
	$(selector).removeAttr()	//移除元素的属性。

2.JQuery更改页面元素

2.1、添加内容

$("p").append()		//在被选元素后面插入内容，仍然在元素里面
$("p").prepend()	//在被选元素前面插入内容，仍然在元素里面
$("img").after()	//在元素前面插入元素
$("img").before()	//在元素后面插入元素

2.2、删除元素

$("#div").remove();		//remove删除被选元素和被选元素的子元素
$("#div").empty()		//empty删除被选元素的子元素

remove可以添加一个参数，例如$("#div").remove(".itatic"),j即删除class为itatic的所有p元素。

3.JQuey操作css

$("p").addClass()	//向被选元素添加一个或者多个类
$("p").removeClass()	//向被选元素删除一个或多个类
$("p").toggleClass()	//对被选元素添加或删除类的操作
$("p").css({"color":"red","font-size":"12px"})		//设置或返回样式属性。

4.JQuery尺寸

$("p").width()	//元素宽度，不包含元素内边距、边框、外边距
$("p").innerHeight()	//元素高度，包含内边距
$("p").outerHeight()	//元素高度，包含内边距和边框。

5.JQuery遍历

$("span").parent()	//每个span元素的直接父元素
$("span").parents()	//所有span元素的所有祖先。
$("span").parentsUntil("div")//所有介于span和div之间的祖先元素
$("span").children()	//被选元素的所有直接元素
$("span").find(".span1")	//被选元素的类名为span1的子元素
$("span").silblings()		//被选元素的所有同胞。
$("span").next()		//被选元素的下一个同胞元素
$("span").nextAll()		//被选元素的所有跟随的同胞元素
$("span").nextUntil("._uit")	//位于span元素和class为_uit之间的同胞元素。

拓展：
prev(),prevAll()和prevUntil()方法与next,nextAll,nextUntil刚好相反，分别表示为被选元素之前一个同胞元素，之前所有的同胞元素，被选元素和另一元素之间的同胞元素。

三、JQuery的ajax

1.Jquery load()方法

$(selector).load(URL,data,callback);
//URL必须的URL参数规定的需要加载URL
//可选data规定请求一同发送查询的字符串键/值对。
//可选参数回调函数callback,回调函数包含三个参数，一、被加载完整的文本内容，二、状态码字符串（其值类似于success,error,timeout的字符串），三、以及用来加载URL的XMLHttpRequest对象。

2.Jquery $.get()方法

$.get(url,callback)
$("button").click(function(){
	$.get("demo_test.php",function(data,status){
		alert("数据"+data+"\n状态："+status)
	})
})

3.Jquery $post()方法

$.post(URL,data,callback)
$("button").click(function(){
	$.post("/try/ajax/demo_test_post.php"),
	{
    	name:"mine",
    	type:"衣服"
    }，
    function(data,status){
		alert("数据：\n"+data+"\n状态："+status);	
	};
})

post和get两者区别：
get数据不会重新提交，可收藏为书签，能被缓存，参数可保留到浏览器中长度受限（最长长度为2048字符），安全性较差，作为URL的一部分。
数据会被重新提交（浏览器应该告知用户数据会被重新提交）。不可收藏为浏览器，不能缓存，参数不能保留到浏览器中，长对不限制，post比get安全，因为它不会保存在浏览器历史中或服务器日志中。

4.Jquery $.getJSON（）

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
 alert("JSON Data: " + json.users[3].name);	});
 //参数为URL,URL携带参数，成功之后的回调函数
 $.getJSON("URL?jsoncallback=?", function(data) {
});
//需要跨域时使用jsoncallback=回调函数（？）来表示跨域

5.Jquery.ajax()函数

JQuery的所有AJAx工具最后都会调用JQuery.ajax() — 这是整一个类库中最复杂的函数。

$.ajax({
	type:"GET",		//HTTP请求方法，包括POST。+
	url:url,		//获取数据的url，对于GET请求，data选项会添加在URl后面,对于jsonp请求，当cache选项为false时，JQuery可以添加参数到URL中。
	data:null,		//不给url添加任何数据
	dataType:"json"	//获取数据后，立即当做json数据处理，合法值"text","html","script","jsonp",和"xml"。
	success:callback	//完成后调用该函数，回调函数包含下面选项
//context(该选项中设置调用的this指向，不设置会指向选项对象)
//beforeSend（使其有机会在XMLHttpRequest对象上设置自定义HTTP头部，注意跨域的Script和jsonp请求没有使用XMLHttpRequest对象，因此不会触发beforeSend回调，）
//error（AJAX请求不成功时候返回的回调函数）
//complete(指定ajax请求完成时激活的回调函数。不论success或error,都会complete回调)
})