jQuery学习总结

jQuery的一个简单例子：
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();把所有p元素隐藏
});
});

jQuery选择器使用：
$(“#test”).hide();把id为test的元素隐藏
$(“.test”).hide();隐藏所有class=”test”的元素
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
$(“[href]”)选取所有带有href属性的元素。
$(“[href=’#’]”)选取所有带有href值等于“#”的元素
$(“[href!=’#’]”)选取所有带有href值不等于“#”的元素
$(“[href$=’.jpg’]”)选取所有href值以.jpg结尾的元素

CSS选择器：
$(“p”).css(“background-color” , “red”);

$(selector).hide(speed , callback);隐藏元素
$(selector).show(speed , callback);显示元素
Speed规定显示的速度，可选值有fast、slow、或毫秒
Callback是显示完成后所执行的函数
也可以用$(selector).toggle(speed , callback);效果和hide、show二个方法合起来用一样

jQuery效果函数：
fadeIn(speed , callback);逐渐改变被选元素的不透明度，从隐藏到可见
fadeout(speed , callback);逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo(speed , 0.4);把被选元素逐渐改变至给定的不透明度
slideDown();通过调整高度来滑动显示被选元素
slideUp();通过调整高度来滑动隐藏被选元素
slideToggle();对被选元素进行滑动隐藏和滑动显示的切换

jQuery文档操作方法：
addClass();添加样式
$(“p”).css({“background-color”:”yellow” , “font-size”:”200%”});设置多个 CSS 属性
after();在匹配的元素之后插入内容
Before()在每个匹配元素之前插入内容
$(“p”).append(“<b>Hello world!</b>”);
$(“<b>Hello World!</b>”).appendTo(“p”);
$(“img”).attr(“width” , “180”);
$(“body”).append($(“p”).clone());复制每个p元素，然后追加到body元素
$(“p”).detach();从DOM中移除匹配元素
$(“p”).empty();移除元素的内容
hasClass();检查匹配元素是否拥有指定的样式或类
html();设置或返回匹配元素中的HTML内容
$(“h1”).insertAfter(“p”); 把匹配的元素插入到另一个指定的元素集合的后面
insertBefore();把匹配的元素插入到另一个指定的元素集合的前面
$(“p”).prepend(“<b>Hello world!</b>”); 向匹配元素集合中的每个元素开头插入由参数指定的内容
prependTo();向目标开头插入匹配元素集合中的每个元素
remove();移除所有匹配的元素,包括自己与子元素
empty();方法只删除其子元素
removeAttr();从所有匹配元素中移除指定的属性
removeClass();从所有匹配元素中删除全部类或样式
$(“p”).replaceAll(“<b>Hello world!</b>”);
replaceWith();用新内容替换匹配的元素
text();设置或返回匹配元素的内容
toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作
$(“p”).unwrap();删除每个p元素的父元素
Val();设置或返回匹配元素的值
Wrap();把匹配的元素用指定的内容或元素包裹起来
wrapAll();把所有匹配的元素用指定的内容或元素包裹起来
wrapinner();将每一个匹配的元素的子内容用指定的内容或元素包裹起来

jQuery Ajax操作函数：
$(document).ready(function(){
htmlObj = $.ajax({
url:”/jquery/test1.txt”,
async:false
});
$(“#myDiv”).html(htmlObj.responseText);
});
参数：
beforeSend(XHR);类型function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。如果返回 false 可以取消本次 ajax 请求
cache 类型 boolean设置为 false 将不缓存此页面
complete(XHR , TS); 类型 function请求完成后回调函数 (请求成功或失败之后均调用)
contentType 类型 String
context 类型 Object这个对象用于设置 Ajax 相关回调函数的上下文
data 类型 String 发送到服务器的数据。必须为Key/Value 格式
dataType 类型 String 预期服务器返回的数据类型
可用值有：”xml”,”html”,script”,”json”,jsonp”,”text”
Error 类型 function
Password 类型 String 用于响应 HTTP 访问认证请求的密码
Success 类型 function 请求成功后的回调函数
Timeout 类型 Number 设置请求超时时间（毫秒）
Type 类型 String 默认值“GET”，也可以是“POST”
url 类型 String 发送请求的地址

jQuery动画操作：
必需的 params 参数定义形成动画的 CSS 属性
$(selector).animate({params},speed,callback);
$(“div”).animate({left:’250px’});把div元素移动到右边
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
$(“div”).animate({//用animate()操作多个属性
Left : ‘250px’,
Opacity : ‘0.5’,
Height : ‘150px’,
Width : ‘150px’
});
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
多个animate()运行时候会依次运行
Stop(stopAll , goToEnd);停止动画
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
Callback回调函数
$(“p”)hide(100 , function(){
Alert(“The paragraph is now hidden”);
});
如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数

jQuery方法链接：
$(“#p1”).css(“color” , “red”).slideUp(2000).slideDown(2000); "p1" 元素首先会变为红色，然后向上滑动，然后向下滑动

jQuery DOM操作：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$(“#w3c”).attr({//attr()方法允许同时设置多个属性
“href” : “www.baidu.com”,
“title” : “W3School jQuery”
});
$(“#div”).width(500).height(500);设置宽度与调试

jQuery加载：
$(selector).load(URL , data , callback(responseTxt , statusTXT , xhr));
必需的URL参数规定您希望加载的URL
可选的data参数规定与请求一同发送的查询字符串键值对集合
$(“#div1”).load(‘/example/jquery/demo_test.txt’);

jQuery的get、post方法：
$.get(“demo_test.action” , function(data , status){});
$.post(“demo_test_post.action”,
{name:’Donald Duck” , city:’Duckburg”},
Function(data , status){});