//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]);//第一种,jQuery2DOMconsole.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("------------------表单对象属性过滤选择器--------------------");});
