JQuary Note

<script language='text/javasript'>
/*
zendstudio

安装插件apatana
val()匹配第一个选中的元素 .each .css

使用jquery去查找某个对象，如果这个对象(id/class)不存在，jQuery不报错

//ready是页面载入，是所有dom对象都创建OK后，再调用
//ready事件中是比较安全的	
$(document).ready(
	function(){
	}
);

选择器 基础
("*")	匹配所有元素
:first 匹配找到的第一个元素 :last


过滤
:odd
$("table:eq(0) tr:even");匹配所有索引值为偶数的元素，从 0 开始计数
大于 gt() ,等于 eq() ,小于 lt() ，:header匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
.not()	去除所有与给定选择器匹配的元素

层次
1，祖先 后代
$("body div");表示把body下的所有div选中

1，prev + next 表示选择 prev的下一个元素（强调：同一级后面的兄弟，只是一个）
2，prev ~ siblings 表示选择 prev的后面的所有元素（强调：同一级后面所有的兄弟）
	

内容
根据内容选择你需要的元素
 匹配包含给定文本的元素*/
	$("div : contains('di')")
	
//匹配所有不包含子元素或者文本的空元素
	$("div : empty")

//匹配含有选择器所匹配的元素的元素 这个元素是他父元素
	$("div : has('.mini')")
	//这个是元素本身
		$("div : .mini")

//匹配含有子元素或者文本的元素
	$('div : parent')
/*
可见度
匹配所有的可见元素*/
	$('div:visible')
	
//匹配所有不可见元素，或者type为hidden的元素
	$('div:hidden').show()	//会style[display:none]<input type="hidden"/>

//选取所有的文本隐藏域，并打印它们的值
	$objs=$('input:hidden');//是一个集合
	$.each($objs,function(i,obj){
	//每循环一次 i自增一次 obj=$objs[i]
		window.alert("jquery:"+$(obj).val());
		window.alert("dom:"+obj.value);
	});
	//或者 2
	$.each($objs,function(){
	//每循环一次 this=$objs[i]
		window.alert("dom:"+$this.value);
		window.alert("jquery:"+$(this).val());
	});
	//3
	$objs.each(function(){
		window.alert("jquery:"+$(this).val());
	});
	//4
	$objs.each(function(i,n){
		window.alert("jquery:"+$(n).val());
	});
//在jQuery中提供了一个each来遍历我们的对象和数组
var arr2=[{"name":"小米","age":"14"},{"name":"米"},{"name":"小"}];
$.each([1,"sp",4],function(i,n){
	alert(i+" "+n); //0,1  1,sp  2,4
	alert(i+" "+n.name+n.age);
})

筛选-查找
//获取.one 后面的子元素
	childern()

//获取.one 前面的所有兄弟 ， 后面的所有兄弟
	next(),nextAll() ---> prev(),prevAll()
	
//获取所有兄弟
	siblings()



属性[]
//匹配包含给定属性的元素
	$("div[title]")

//匹配给定的属性是某个特定值的元素
	$("div[title = \"text\"]")

//匹配所有不含有指定的属性，或者属性不等于特定值的元素。
	$("div[title != 'text']")

//匹配给定的属性是以某些值开始的元素
	$("div[title ^= 'te']")

//匹配给定的属性是以某些值结尾的元素
	$("div[title ^= 'ext']")

//匹配给定的属性是以包含某些值的元素
	$("div[title *= 'es']")

//复合属性选择器，需要同时满足多个条件时使用。
	$("div[id][title *= 'es']")

	
	我们的过滤方式有两种
	1，选出文本中含有abc的div $("div:contains['abc']") //冒号
	
子元素 根据子元素是父元素下出现的位置来选中
//匹配其父元素下的第N个子或奇偶元素
	$("div .one:nth-child(1)")

//匹配第一个子元素
	$("div .one:first-child")

//匹配最后一个子元素
	$("div .one:last-child")

//如果某个元素是父元素中唯一的子元素，那将会被匹配
	$("div .one:only-child")

表单选择器
//匹配所有按钮
var buttons=$(" 表单元素名")[input button file img..],这种方式选择最全
var butons2=$("input[type='button']");这种方式<input type="button"/>

表单对象属性选择器
//匹配所有可用元素 :disabled
	$("input[type='text']:enabled").val("hello");

//匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
	$(":checkbox:checked")
	$("input[type='checked']:checked")

//匹配所有选中的option元素
	$("select option:selected").text();	//匹配所有元素

	
过滤器使用方式总结
	$("div:contains('di')"); //内容
	$("div[type]"); //属性
	$("div .one");	//选中div 中含class 为one的div元素
	$("div,.one");	//选中div 和 class为one的div元素
/*
1，使用什么样的选择器，根据需求定
2，如果针对文档内容，则使用内容选择器
3，如果是选择父子关系（祖先，后代）元素，则使用层次选择器
4，如果是根据id/class/tagname 使用基本选择器
5，如果选择表单中的元素，则使用表单(对象属性)选择器
6，根据可见性选择元素，则使用可见性选择器
7,如果是某个元素中包含某个属性（属性值），则使用属性选择器
8，！！！如果考虑对选中的元素，要进行过滤，则使用过滤选择器
*/	

-------------------------------------------------------------------

jquery操作DOM对象		样式的改变都在内存中发生,文件并没有发生变化
1,xml dom 2,html dom 3,css dom

//查找节点，然后通过attr函数去修改或者设置属性的值
	$("#first").attr("class","one");
	
//追加样式
	$("#first").addClass("one");
	
//移除样式
	$("#first").removeClass("one");
	
//切换样式
	$("#first").toggleClass("one");
	
//判断是否含有某个样式
	alert($("#first").hasClass("one"));
	
文档处理	
	
//使用内部插入 表示在$('#city')内部后面添加一个 $myli对象 1，一步到位
	$myli=$('<li id='cp' name='chongqing'>重庆</li>');
	$('#city').append($myli);
	//传统方法
	function test1(){
		var myli=document.createElement("li");
		myli.setAttribute("id","cq");
		myli.setAttribute("name","chongqing");
		myli.innerHTML=重庆;
		documet.getElementById("city").appendChild(myli);
	}
	
	//2,逐步添加我们的对象
	$myli=$("<li></li>"); //<==>$myli=$("<li/>");
	$myli.text("重庆");		//<li>重庆</li>
	$myli.attr("id","cq");	//<li id='cq'>重庆</li>
	$myli.attr("name","chongqing");
	$('#city').append($myli);
	
	//3,表示吧$muli添加到$("#city")的内部后面
	//$a.append($b); <==> $b.appendTo($a);
	$muli.appendTo($("#city"));
	
//在对象内部的最前面加入
	$('#city').prepend($myli);	//<==>$myli.prependTo($('#city'));
	
	
//使用外部插入 1，一步到位
	$obj=$("<li id="cd" name="chengdu">成都</li>");
	$("#bj").after($obj);	//<==> $obj.insertAfter($("#bj"));

//删除节点
	$("p").remove();
	
//清空节点
	$("p").empty();

//复制节点 表示复制一份$("p")，但是没有复制事件-要加(true)
	$("p").clone(true).insertAfter($('button'));

//替换节点
	$obj=$("<input type='button' value='按钮'/><br/>");
	$("p").replaceWith($obj);	//<==> $obj.replaceAall($("p"));
	
//可以取值，也可以设置值
1,val(),val(val)
2,html(),html(val)
3,text(),text(val)
4,attr(name) ,attr(name,val)
5,css("css名字"),css("css名字",val)

		属性操作
		
//得到焦点
	focus()
	
//设置默认值
	this.defaultValue;

//失去焦点
	blur()
		removeAttr():删除指定元素的指定属性
		
jquery and ajax

$(document).ready(function(){
	$('#b1').click(function(){
		//返回值:jQueryload(url, [data], [callback]) -- [get]data:null , [post]data:"{'user':'zhang'}"
		//3,callback data表示从服务器回送的数据 (string)
		 var send_data={"username":$("#user").val()}
		$('#one').load("loadController.php?data"+Math.random(),null,function(data,textStatus,xmlHttpRequest){
			$(this).text(data);
			
			//返回json
			var objs=eval("("+data+")");
			//如果不转objs是dom对象的集合
			var $objs=$(objs);
			
			//遍历
			$objs.each(function(){
				alert(this.res+this.info);
			})
			
			//直接取出
			window.alert(objs.res+objs.info);
			
			//返回xml
			var result=xmlHttpRequest.responseXml;
			//取出返回的res
			var res=result.gerElementByTagName('res');
			window.alert(res[0].childNodes[0].nodeValue);
		});
		//使用$.post方法
		var xmlHttpRequest=$.post("loadController.php",send_data,function (data){
			
			//如果服务器返回的是text
			alert(data);
			
			//xml -> dom
			var xmlobjs=xmlHttpRequest.responseXML;
			
		})
	})
	
});


</script>
loadController.php
<?php
	header("content-type:text/html; charset=utf-8");
	//xml
	header("content-type:text/xml; charset=utf-8");
	
	//text
	echo "ok";
	
	//json
	echo "{'res':'ok'}"
	
	//xml
	echo "<result><res>ok</res><info>kk</info></result>"
]
?>