JQuery1——基础（$对象，选择器，对象转换）

//alert($);




/*window.onload = function(){
	var msgDiv = document.getElementById("msg");
	alert(msgDiv);
};*/
//类似上面 *****必须掌握******
//把document对象转换为jqueryObject对象,并且文档(页面)加载完毕后,调用callback
$(document).ready(function(){
	//console.debug("执行该句,表达文档(页面)加载完毕");
});

//如果参数是一个函数,类似上面 *****必须掌握******
$(function(){
	//console.debug("执行该句,表达文档(页面)加载完毕");
});



/*****************************jquery基础知识******************************/
$(function(){
	/* 
	 * "jQuery对象就是通过jQuery包装DOM对象后产生的对象。"
	 * jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法
	 * 
	 * 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，
	 * 同理DOM对象也不能使用jQuery里的方法.乱使用会报错
	 */
	console.debug(document.getElementById("msg").innerHTML);
	
	//获取ID为test的元素内的html代码,类似于上面
	console.debug($("#msg").html());
	
	//现在已经有一个DOM对象,如何转换为jquery对象
	var msgDiv = document.getElementById("msg");//DOM对象
	var jqueyObject = $(msgDiv);//DOM转JqueryObject
	
	//jQuery对象转成DOM对象
	console.debug(jqueyObject[0]);//第一种,jQuery2DOM
	console.debug(jqueyObject.get(0));//第一种,jQuery2DOM
	
});
/*****************************jquery选择器(非常非常重要)******************************/
//基本选择器
$(function(){
	 $("#id");//等价于    document.getElementById("id");
	 $("tagName");//等价于   document.getElementsByTagName("tagName");
	 
	 console.debug("------------------基本选择器--------------------");
	 
	 //#id 根据给定的ID匹配一个元素.getElementById()
	 console.debug("#msg",$("#msg"));
	 //element 根据给定的元素名匹配所有元素 getElementsByTagName()
	 console.debug("div",$("div"));
	 //.class 根据给定的类匹配元素。根据元素的class属性来进行查找
	 console.debug(".my",$(".my"));
	 //*匹配所有元素
	 console.debug("*",$("*"));
	 //selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。
	 console.debug(".my,#msg",$(".my,#msg,p,#p1"));
	 //获取页面中class=my的div元素
	 console.debug("class=my的div元素",$("div.my"));
	 
	 console.debug("------------------基本选择器--------------------");
});

//层次选择器
$(function(){
	console.debug("------------------层次选择器--------------------");
	
	//ancestor descendant 在给定的祖先元素下匹配所有的后代元素(子 孙子)
	console.debug("form input",$("form input"));
	
	//parent > child 在给定的父元素下匹配所有的子元素(只包含儿子)
	console.debug("form > input",$("form > input"));
	
	//prev + next 匹配所有紧接在 prev 元素后的 next 元素
	console.debug("label + input",$("label + input"));
	
	//prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素
	console.debug("label ~ input",$("label ~ input"));
	
	console.debug("------------------层次选择器--------------------");
});

//过滤选择器,该选择器都以 “:” 开头
$(function(){
	
	console.debug("------------------基础过滤选择器--------------------");
	//:first获取第一个元素
	console.debug("ul li:first",$("ul li:first"));//注意只取第一个
	//:last获取最后一个元素
	console.debug("ul li:last",$("ul li:last"));//注意只取第一个
	//:not 去除所有与给定选择器匹配的元素
	console.debug("div:not(.my)",$("div:not(.my)"));
	
	//:even 匹配所有索引值为偶数的元素，从 0 开始计数
	console.debug("table tr:even",$("table tr:even"));
	//:odd 匹配所有索引值为奇数的元素，从 0 开始计数
	console.debug("table tr:odd",$("table tr:odd"));
	
	//:eq 匹配一个给定索引值的元素
	console.debug("table tr:eq(3)",$("table tr:eq(3)"));
	
	//:gt 匹配所有大于给定索引值的元素
	console.debug("table tr:gt(1)",$("table tr:gt(1)"));
	
	//:lt 匹配所有小于给定索引值的元素
	console.debug("table tr:lt(1)",$("table tr:lt(1)"));
	
	//:header 匹配如 h1, h2, h3...h6之类的标题元素
	console.debug(":header",$("div > :header"));
	
	console.debug("------------------基础过滤选择器--------------------");
	
});


//过滤选择器,该选择器都以 “:” 开头
$(function(){
	console.debug("------------------内容过滤选择器--------------------");
	
	//:contains 匹配包含给定文本的元素
	console.debug("div:contains(我是IT)",$("div:contains(我是IT美)"));
	//:empty 匹配所有不包含子元素或者文本的空元素
	console.debug("p:empty",$("p:empty"));
	//:has 匹配含有选择器所匹配的元素的元素
	console.debug("div:has(.myb)",$("div:has(.myb)"));
	
	//:parent 匹配含有子元素或者文本的元素
	console.debug("div:parent",$("div:parent"));
	
	console.debug("------------------内容过滤选择器--------------------");
});

//过滤选择器,该选择器都以 “:” 开头
$(function(){
	//console.debug("------------------可见度过滤选择器--------------------");
	
	//:hidden 匹配所有不可见元素，或者type为hidden的元素
	console.debug("input:hidden",$("input:hidden"));
	
	//:visible 匹配所有的可见元素
	console.debug("input:visible",$("input:visible"));
	
	//console.debug("------------------可见度过滤选择器--------------------");
});

//过滤选择器,该选择器都以 “:” 开头
$(function(){
	//console.debug("------------------属性过滤选择器--------------------");
	
	//[attribute]匹配包含给定属性的元素
	console.debug("div[id]",$("div[id]"));
	//[attribute=value] 匹配给定的属性是某个特定值的元素
	console.debug("div[id=msg]",$("div[id=msg]"));
	//[selector1][selector2][selectorN]
	console.debug("div[id=msg][name]",$("div[id=msg][name$=g]"));
	//console.debug("------------------属性度过滤选择器--------------------");
});

//过滤选择器,该选择器都以 “:” 开头
$(function(){
	
	//console.debug("------------------子元素过滤选择器--------------------");
	
	//:nth-child 匹配其父元素下的第N个子或奇偶元素  index从1开始
	console.debug("table tr:nth-child(3n)",$("table tr:nth-child(3n)")); //table tr:first
	
	//:only-child  如果某个元素是父元素中唯一的子元素，那将会被匹配
	console.debug("tr td:only-child",$("tr td:only-child")); //table tr:first
	
	//console.debug("------------------子元素过滤选择器--------------------");
	
});


//过滤选择器,该选择器都以 “:” 开头
$(function(){
	
	//console.debug("------------------表单对象属性过滤选择器--------------------");
	
	//:input 匹配所有 input, textarea, select 和 button 元素
	console.debug(":input",$(":input"));
	
	//:text 匹配所有的单行文本框
	console.debug(":text",$(":text"));
	
	//:enabled 匹配所有可用元素
	console.debug(":enabled",$(":enabled"));
	
	//:disabled 匹配所有可用元素
	console.debug(":disabled",$(":disabled"));
	
	//:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
	console.debug(":checked",$(":checked"));
	
	//:selected 匹配所有选中的option元素
	console.debug(":selected",$(":selected"),"jquery中d0m个数 = ",$(":selected").length,$(":selected").size());
	
	//console.debug("------------------表单对象属性过滤选择器--------------------");
});

转载于:https://my.oschina.net/dendy/blog/398153