自己整理的，复习时用。
0> 代码风格
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
})这段代码的作用是，当鼠标单击到class中含有has_children的元素上时，给其添加一个名为hightlight的class，
然后将其内部<a>子元素都显示出来，并且被单击的class中含有has_children元素的同辈元素都去掉一个名为hightlight的class,
同时同辈元素内部的<a>子元素全部隐藏
.end()
//重新定位到上次操作的元素
方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前(上一级)的状态。
1> each
对每一个复选框轮循, 然后反选
$(":checkbox[name=items]").each(function(){
this.checked = !this.checked;
})2> 判断选项是否选中
var $cr = $("#cr");
if($cr.is(:checked)){……}3> 选择器
id选择器/标签选择器/类选择器/复合(层次 or 群组)选择器
$("div span") 选取<div> 里所有的<span>元素 (子孙后代)
$("div > span") 选取<div>元素下元素名是<span>的子元素 (只是子元素)
$('prev ~ siblings') 选取prev元素后的所有siblings 元素
$('#prev').siblings("div").css("background","#bbffaa") //选取#prev所有同辈div元素，无论前后位置
内容过滤
:has(selector) 选取含有选择器所匹配的元素的元素 $("div:has(p)") 选取含有<p>元素的<div>元素
都以一个冒号(:) 开头 例 :first 选取第一个元素
内容过滤器 :contains(text) :has(selector)
$("tbody>tr:has(:checked)").addClass("selected"); //选中单选框的<tr>行被高亮显示
属性过滤器 [attribute=value] 例 $("div[title=test]")
表单选择器 :input :radio :text :checkbox
选择器
:parent 选取含有子元素或者文本的元素
:empty 选取不包含子元素或者文本的空元素
:has(selector)
:not(selector)
4> DOM操作
传统JS getElementById getElementsByName getAttribute() setAttribute()
var $pObj = $("p");
$pObj.attr("title")
删除节点：
$("ul li:eq(1)").remove();
$("ul li").remove("li[title=菠萝]");
返回属性
$("#id").attr("title")
设置属性
$("p").attr("title", "your title");
删除属性
removeAttr()
$("p").removeAttr("title") //删除<p>元素属性title
创建节点
var $li_1 = $("<li>apple</li>");
$("ul").append("$li_1");
插入节点
父加子: $("div").append("<input button>");
$("div").append( $("#myid") );
子加父
$("input").appendTo( $("div") );
删除节点
remove()
empty() 清空节点 能清空元素中的所有后代节点
复制节点
clone()
如：
$(ul li).click(function(){
$(this).clone().appendTo("ul"); //复制当前节点并追加到ul中
})替换节点
replaceWith()
$("p").replaceWith("<strong>abcd</strong>")
closet()
取得最近的匹配元素
例:给点击目标元素最近的li元素添加颜色
$(document).bind("click",function(e){
$(e.target).closet("li").css("color","red");
})css dom操作
$("p").css("color") //取得p元素的样式颜色
$("p").css("color","red");
offset() 方法
它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性 top 和 left
5> 事件
事件冒泡是自底向上
事件捕捉是自顶向下: jQuery 不支持事件捕获，如果需要事件捕获，请直接使用原生JS
var e = window.event || event;
e.srcElement
e.target
var src = e.target || e.srcElement;
alert(src.value);
alert(src.innerHTML);
srcElement是IE下的属性
target是Firefox下的属性
Chrome浏览器同时有这两个属性
bind(type [, data], fn);
hove()
toggle()
e.stopPropagation(); //停止事件冒泡
e.preventDefault(); //阻止默认行为 比如 阻止表单提交
unbind([type][,data]); 移除事件
模拟事件 trigger(type)
$("btn").trigger("click");
6> 表单应用
$(":checkbox[name=items]").attr("checked", true); //全选
表单验证
trigger("blur") 不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。
triggerHandler("blur") 只会触发为元素绑定的blur事件，而不触发浏览器默认的blur事件。
表单复选框
$(this)[hasSelected ? "removeClass" : "addClass"]("selected")
7> Ajax
XMLHtppRequest IE5.0以后才支持
if(window.ActiveXObject){
//IE5、IE6
xmlHttpReq = new Active XObject("Microsoft.XMLHTTP");
}else{
//除了IE5、IE6以外的浏览器
xmlHttpReq = new XMLHttpRequest();
}
xmlHttpReq.open("GET", "test.jsp", true);
xmlHttpReq.onreadystatechange = requestCallBack; //设置回调函数
xmlHttpReq.send(null); //因为使用get方法提交，所以可以使用null作为参数调用
那么问题来了，如果是post的情况应该怎么处理？
function requestCallBack(){
if(xmlHttpReq.readyState == 4){
if(xmlHttpReq.status == 200){
document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
}
}
}load() 方法 通常用来从Web服务器上获取静态的数据文件
load(url[, data][, callback])
例：
$("#resText").load("test.php", {name: "rain", age: "22"},function(responseText, textStatus, XMLHtppRequest){……});
responseText 请求返回的内容
textStatus 请求状态 success error notmodified timeoff 四种
XMLHtppRequest XMLHtppRequest对象
$.get() 和 $.post()方法 可以传递一些参数给服务器中的页面
$.get(url [, data] [, callback] [, type])
例：
$.get("get1.php", {
username: $("#username").val(),
content: $("#content").val
}, function(data, textStatus){
$("#resText").html(data); //将返回数据添加到页面上
})
*注：
data 返回的内容 可以是XML文档、json文件、html片段
textStatus 请求状态 success error notmodified timeoff 四种
$.post()方法
get方式请求的数据会被浏览器缓存，不安全！
$.post("post1.php", {
username: $("#username").val(),
content: $("#content").val
}, function(data, textStatus){
$("#resText").append(data); //将返回数据添加到页面上
})ajax()方法
$.ajax()是jquery最底层的Ajax实现
$.ajax(options)
例 1：
$(function(){
$("#send").click(function(){
$.ajax({
type: "GET",
url: "test.js",
dataType: "script",
success: function(data){ ... }
});
});
})例 2：
$.ajax({
type: "GET",
url: "test.json",
dataType: "json",
success: function(data){
$("#resText").empty();
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>'
+ comment['username'] + ':</h6><p class="para">'
+ comment['content'] + ':</p></div>';
});
$("#resText").html(html);
}
})*注：
data：必须是key/value格式，例如{name: "justin", age: 22}
.each()函数不同于jQuery对象的each()方法，它是一个全局函数，不操作jQuery对象，
而是以一个数组或者对象作为第一个参数，以回调函数作为第二个参数，回调函数拥有两个参数：
第一个为对象的成员或数组的索引，第二个为对应变量或内容
dataType: 预期服务器返回的数据类型，如果不指定，jQuery将自动根据http包MIME信息返回responseXML或responseText，
并作为回调函数参数传递。类型 xml/html/json/jsonp/text
8> 插件
http://plugins.jquery.com
9> $("div1").dialog("open")
$("#showPayPasswordDialog").dialog("open")
<div id="showPayPasswordDialog" class="id_card_pop_up2">
……
</div>
//表单验证
$("#showPayPasswordDialog").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true
});
jQuery UI 插件
jQuery UI插件的下载地址为：
http://ui.jquery.com/download
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
