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("------------------表单对象属性过滤选择器--------------------");
});