2012播客jquery课程-第一天第一课轻松学习

目一．jquery简二．javascript与jquery之间的关三．jQuery基础语四．jQuery选择器、操作页面文档元JQuery–就是1个js ess,DoMore。写得少，做得多浏览器差异跨浏览器兼容性好（IE6.0FF2+SafariOpera9.0+,（在jQuery之前也是一种类库）后者是jQuery。菜谱里面都集JQuery在做所有事情之前,我们要让jQuery和处理文档的DOM,必 在这里写你的代码

$(function()在这里写你的代码 alert(" 当页面Dom$(function()alert("和onload类似，但是onload只 的 JQuery的ready和Dom的onload的区别(*)：onload是所有Dom元素创建完毕、图什么是jQueryjQuery对象就是通过jQuery包装DOM对象后产生的对象jQuery对象jQuery独有的如果一个对象jQuery对象么它就可以使用jQuery里的方法:比如st.htm() 意思是指：获取ID为test的元素内的m代码。m()是jQr里的方法这段代码等同于用DOM实现代码 虽然jQu对象是包装OM对象后产生的，但是jQu无法使用OM对象的任何方法，同理M对象也不能使用ju里的方法乱使用会报错约定：如果获取的是jQuery对象,那么要在变量前面加上var$variablejQuery对varvariableDOM对DOM对象转成jQueryO对象，只需要用)把O对象包装起来，就可jQr对象了。DOM对象)jQueryjQuery对象转成DOM对(1)jQuery对象是一个数组对象，可以通过[index]的方法，来得到应的DOM对(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对 等价 jQuery选择器是jQuery的根基jQuery中对事件处理DOMAjax操作都依赖于选择jQuery选择器的优点简洁的写完善的事件处理机jQuery//若网页中没有id=value的元素,浏览器会 //需要判 ementById("username")是否存 var alert("没有该id元素}//使用JQUERYvaralert("^^^//注意:在javaScript中函数返回值为空,表示JQuery选择器用于查找满足条件的元素基本选择器是JQuery中最常用的选择器,也是最简单的选择器,元素id,class和tagName来查找dom元1.$("#id"):id选择器 3.$(".myClass"):类选择器,返回所有class="myClass"的元4.$("*"):返回所有元素,多用于结合上下文5.$("div,span,p.myClass"):多条件选择器,返回所有查到的元idoneclassmini<div改变所有的<span>idtwo如果想通过DOM 间的层次关系来获取特定元素,例如后代元素,子元素相邻元素兄弟元素等则需要使用层次选择器1、ancestor用法:$(”forminput”) 返回值集合元说明:在给定的祖先元素下匹配所有后代元素.这个要与下面讲的”parent2、parent用法:$(”form>input”) 返回值集合元说明:在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元3、prev用法:$(”label+input”); 返回值集合元素说明:匹配所有紧接在prev元素后的next元素4、prev~用法:$(”form~input”) 返回值集合元说明:匹配prev 后的所有siblings元素.注意:是匹配之后的元idone的下一<div的背景色为改变idtwo的元素后面的所有兄弟<div>的元素的背景色为紧接相邻选择器prev+next可以使用next()方法替后面相邻兄弟选择器prev~siblings可以使用nextAll()方法替选择前后相邻兄弟可以使用siblings()方过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器:”开头按照不同的过滤规则过滤选择器可以分为基本过滤内容过滤,可见性过滤属性过滤子元素过滤和表单对象属性过滤选择器.1、用法:$(”tr:first”) 返回值单个元素的组成的集说明:2、用法: 返回值集合元说明:匹配找到的最后一个元素.与:first相对应3、用法$(”input:not(:checked)”)说明:去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(input的4、用法: 返回值集合元说明:0开始计数.js的数组都是从0开始计数的.选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数5、用法$(”tr:odd返回值集合元素说明:匹配所有索引值为奇数的元素,和:even对应,0开始计数6、用法: 返回值集合元说明:匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是7、用法: 返回值集合元说明:匹配所有大于给定索引值的元素8、用法: 返回值集合元说明:匹配所有小于给定索引值的元素9、:header(固定写法用法:$(”:header”).css(”background”, 返回值集合元说明h1,h2,h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素10、:animated(固定写法 返回值集合元说明:divdiv改变classonedivdivdiv3div3div3divfunctionfunctioncartoon(){//}内容过滤选择器的过滤规则主要1、用法: 返回值集合元说明:匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是 2、用法: 返回值集合元说明:3、用法: 返回值集合元说明:匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,使用的例子就完全清楚了:给所有包含p元素的 加上4、用法: 返回值集合元说明:匹配含有子元素或者文本的元素.注意:这里是”:parent”,哦!感觉与上面讲的”:empty”形成反义词改变含有文本di’div元素的背景色为改变不包含子元素(或者文本元素)的div空元素的背景色改变含有classmini元素的div元素的背景色为改变含有子元素(或者文本元素)的div元素的背景色为可见性过滤选择器是根据元素的可见和不可见状态来选1、用法$(”tr:hidden”)返回值集合元说明匹配所有的不可见元素，inputtype属性为“hidden”的话也会被匹配到.css中display:none的都会2、用法$(”tr:visible”)返回值集合元说明:匹配所有的可见元素改变所有可见的div元素的背景色为选取所有不可见的元素利用jQuery中的show方法将它们显示出来,并设置其背景色为#0000FF选取所有的文本隐藏域,并打印它们的1、用法$(”div[id说明:匹配包含给定属性的元素.例子中是选取了所有带”id”属性的 2、 返回值集合元说明:匹配给定的属性是某个特定值的元素.例子中选取了所有namenewsletterinput元素3、 返回值集合元说明:匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价[attr]:not([attr=value]).:not派上了用场.4、用法$(”input[name^=‘news’]“)说明:匹配给定的属性是以某些值开始的元素5、用法$(”input[name$=‘letter’]“)返回值集合元素说明:匹配给定的属性是以某些值结尾的元素6、用法: 返回值集合元说明:匹配给定的属性是以包含某些值的元素7、用法$(”input[id][name$=‘man’]“)说明:复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有id属性,并且它的name属性是man结尾的元素.选取下列元素,改变其背景色为含有属性title的div元素属性title值等于"test"的div元素属性title值不等于"test"的div元素(没有属性title的也将被选中属性title值以"te"开始的div元素属性title值以"est"结束的div元素属性title值含有"es"的div元素选取有属性id的div元素，然后在结果中选取属性title值含有“es”div元素1、:nth-用法:$(”ulli:nth- 返回值集合元说明:匹配其父元素下的第N个子或奇偶元素.的eq()有些类似,不同的地方就是前者是从0开始,后者是从1开始用法:$(”ulli:first- 返回值集合元说明:匹配第一个子元素.’:first’只匹配一个元素,而此选择符将为每个父元素匹 用法:$(”ulli:last- 返回值集合元说明:匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹4、only-用法:$(”ulli:only- 返回值集合元说明:如果某个元素是父元素中唯一的子元素,那将会被匹配.其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配nth-child((1):nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数元(2):nth-child(2):能选取每个父元素下的索引值为2的元(3):nth-child(3n):能选取每个父元素下的索引值是3的倍数的元(3):nth-child(3n1能选取每个父元素下的索引值3n1的元选取下列元素,改变其背景色为每个class为one的div父元素下的第2个子元素每个class为one的div父元素下的第一个子元每个class为one的div父元素下的最后一个子元如果css为的父元素下的仅仅只有一个子元素，那么选中这个子元素此选择器主要对所选择的表单元素进行过1、用法: 返回值集合元说明匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”2、用法: 返回值集合元说明:匹配所有不可用元素.与上面的那个是相对应的3、用法: 返回值集合元说明:匹配所有选中的被选中元素(复选框、单选框等，不包括select中option).这话说起来有些绕口4、用法:$(”select 返回值集合元说明:匹配所有选中的option元素利用jQuery对象val()方法改变表单内可用<input>元素的利用jQuery对象的val()方法改变表单内不可用<input>元素值利用jQuery对象的length属性获取多选框选中的个利用jQuery对象的text()方法获取下拉框选中的内$("select$("select1、用法:$(”:input”) 返回值集合元说明:匹配所input,textareaselectbutton元<inputtype="text"<inputtype="text"<inputtype="radio"<inputtype="password"<inputtype="button"<scriptalert($(":button").length);//得到所有的buttonalert($("button").length);//得到<button/>按照元 alert($("input[type='button']").length);//得<inputtype="button"用法$(”:text说明:匹配所有的单行文本框3、用法:$(”:password返回值集合元素说明:匹配所 框4、用法:$(”:radio返回值集合元素说明:匹配所有单选按钮5、用法$(”:checkbox返回值集合元素说明:匹配所有复选6、用法:$(”:submit”) 返回值集合元说明:匹配所有提交按钮7、用法: 返回值集合元说明:匹配所有图像域8、用法$(”:reset返回值集合元素说明:匹配所有重置按钮9、用法$(”:bu