jQuery代码墙

最新推荐文章于 2023-02-23 09:16:05 发布

卡卡西CC

最新推荐文章于 2023-02-23 09:16:05 发布

阅读量535

点赞数

自己整理的，复习时用。

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