JQuery笔记.docx

JQUERY笔记jQuery对象转换为dom对象 jQuery对象不能使用 DOM 中的方法, 但如果使用 DOM方法的时候, 有如下两种处理方法: 1、jQuery 对象是一个数组对象, 可以通过 index 的方法得到对应的 DOM对象. $(#msg)0 2、使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象 $(#msg).get(0) dom对象转换为jquery对象 对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 例如： $(document.getElementById(“msg”)Jquery对象的事件处理:$(“#tid”).focus(); /获取该文本的焦点；$(“#id”).focus(function(); /获取焦点并绑定一个处理事件/方式一:获取焦点不触发函数 $(#tid).focus(); /获取文本框的焦点 /方式二:获取焦点触发函数$(#tid).focus(function()alert(xxxx););ready(functiton();函数：当页面文档加载完毕即执行函数中绑定的函数。类似于JavaScript中window.onload = function()each()函数/* *$inputs.each(function(index,domEle) * each()函数：遍历集合和数组。 * 参数的回调函数function(index,domEle) * index:每次比遍历的索引。 * domEle:每次遍历的对象 */ $inputs.each(function(index,domEle) /使用dom对象，this是dom对象，循环每次遍历的当前对象/ alert(this.value); /使用JQuery的方法 alert($(this).val(); );Jquery对象就是通过包装DOM对象后产生的对象。Jquery对象是Jquery独有的。$(“#test”).html();获取ID为test的元素内的html代码。等同于document.getElementById(“test”).innerHTML; JQuery对象与 DOM对象之间的任何方法不能互用。如果获取的是Jquery对象，那么要在变量前面加上$符号var $variable = Jquery对象。Var variable = DOM对象。Jquery对象和DOM对象之间相互转换。对于已经是一个DOM对象，主要用$()把DOM对象包装起来就可以得到Jquery对象。var obj = document.getElementById(“test”);var $obj = $(obj);两种方式将一个Jquery对象转换成DOM对象：index or .get(index);(1) Jquery对象是一个数组对象，可通过index方法，来得到相应的DOM对象(2) Jquery本身提供get(index)方法来获取相应的DOM对象。DOM对象转换成JQuery对象 /dom对象转换成JQuery对象$(dom对象) var usernameObj = document.getElementById(username); /dom对象转成JQuery对象 var $usernameObj = $(usernameObj); / alert($usernameObj.val(); /获取JQuery对象 var $usernameElement = $(#username) ; /方法一:将JQuery对象转成DOM对象 /* var usernameElement = $usernameElement0; alert(usernameElement.value); */ /方法二:将JQuery对象转成DOM对象var usernameElement = $usernameElement.get(0); /alert(usernameElement.value);Jquery选择器选择器是Jquery的根基，在Jquery中，对事件处理，遍历DOM和AJAX操作都依赖于选择器。Jquery选择器的优点:简洁的写法$(“#id”) 等价于 document.getElementById(“id”);$(“tagName ”) 等价于 document.getElementsByTagName(“tagName”);完善的事件处理机制。基本选择器1,#id:用法：$(“#id”); 返回值:单个元素的组成的集合。2，Element 用法: $(“Element”);返回值：集合元素:Element就是html中已经定义的标签元素.3，class 用法: $(“. myClass”);返回值：集合元素 ；说明：这个标签是直接选择HTML页面代码中class=”myClass”的元素或元素组(在同一个html页面，class可以存在多个相同的值)。4，* 用法: $(“*”); 返回值:集合元素； 说明：匹配所有元素，多用于结合上下文来搜索。5，selector1,selector2,selectorN;用法:$(“div,span,p.myClass”) ;返回值：集合元素。说明:将每一个选择器匹配到的元素合并后一起返回。可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。其中p.myClass 是表示匹配元素为 p class=”myClass”基本选择器 div,span width:140px; height:140px; margin:20px; background: #9999cc; border:#000 1px solid; float:left; font-size: 17px; font-family: Roman; div.mini width:30px; height:30px; background: #cc66FF; border:#000 1px solid; font-size: 12px; font-family: Roman; .td width:30px; height:30px; background: #cc66FF; border:#000 1px solid; font-size: 12px; font-family: Roman; input type=button value=改变元素名为的所有元素的背景色为#00FFFF id=b2 / input type=button value=改变所有的元素和id为two的元素的背景色为#3399FF id=b5 / 天气冷了 天气又冷了 id is one id is two and class is mini class is one class is mini class is mini class is one class is mini01 class is mini 动画 span span class is mini / $(#b1).click(function() $(#one).css(background, #000FFF); ); / input type=button value=改变元素名为的所有元素的背景色为#00FFFF id=b2 / $(#b2).click(function() $(div).css(background,#00FFFF); ); / $(#b3).click(function() $(.mini).css(background,#ff0033); ); / $(#b4).click(function() $(*).css(background,#00FF33); ); / input type=button value=改变所有的元素和id为two的元素的背景色为#3399FF id=b5 / $(#b5).click(function() $(span,#two).css(background,#3399FF); );层次选择器如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，相邻元素，父元素，子元素，兄弟元素等等；则需要层次选择器。1、 ancestor descendant 用法:$(“form input”);返回值：集合元素；说明:在给定的祖先元素下匹配所有后代元素，这个要和parent child区分开。2、 parent child 用法: $(“form input”)； 返回值:集合元素说明:在给定的父元素下匹配所有子元素。要注意:区分好后代元素与子元素3、 prev + next 用法:$(“label + input”) ;返回值：集合元素说明:匹配所有紧接在prev元素后的next元素4、 prev siblings 用法:$(“form input”); 返回值：集合元素说明:匹配prev元素之后的所有siblings元素;注意:是匹配之后的元素，不包含该元素在内，并且siblings匹配和prev同辈的元素，其后辈不匹配。注意：(“prev siblings”) 选择器只能选择”#prev”元素后面的同辈元素，而 Jquery中的方法siblings与前后位置无关，只要是同辈节点就可以选取基本选择器 div,span width:140px; height:140px; margin:20px; background: #9999cc; border:#000 1px solid; float:left; font-size: 17px; font-family: Roman; div.mini width:30px; height:30px; background: #cc66FF; border:#000 1px solid; font-size: 12px; font-family: Roman; .td width:30px; height:30px; background: #cc66FF; border:#000 1px solid; font-size: 12px; font-family: Roman; input type=button value=改变内所有的背景颜色为#0000ff id=b1 / input type=button value=改变内子元素的背景颜色为#FF0033 id=b2 / input type=button value=改变id为one的下一个的背景颜色为#00FFFF id=b3 / input type=button value=改变id为two的元素后面的所有兄弟的元素的背景颜色为#00F88F id=b4 / input type=button value=改变id为two的元素所有兄弟元素的背景色为#777777 id=b5 / 天气冷了 天气又冷了 id is one id is two and class is mini class is one class is mini class is mini class is one class is mini01 class is mini 动画 span span class is mini / input type=button value=改变内所有的背景颜色为#0000ff id=b1 / $(#b1).click(function() $(body div).css(background, #0000ff); ); / input type=button value=改变内子元素的背景颜色为#FF0033 id=b2 / $(#b2).click(function() /body div 表示值匹配body元素下的所有子元素div,不包含其他后代div元素 $(body div).css(background, #FF0033); ); / input type=button value=改变id为one的下一个的背景颜色为#00FFFF id=b3 / $(#b3).click(function() /#one + div 匹配id为one的下一个div元素 $(#one + div).css(background, #FF0033); ); / input type=button value=改变id为two的元素后面的所有兄弟的元素的背景颜色为#00F88F id=b4 / $(#b4).click(function() /#two div 匹配id为two的元素后面的所有兄弟div元素 $(#two div).css(background, #00F88F); ); / input type=button value=改变id为two的元素所有兄弟元素的背景色为#777777 id=b5 / $(#b5).click(function() $(#two div).siblings(div).css(background, #00F88F); );过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以”:”开头按照不同的过滤规则，过滤器可以分为基本过滤，内容过滤，可见性过滤，不可见性过滤，子元素过滤和表单对象属性过滤选择器。基础过滤器1，:first 用法:$(“tr:first”);返回值：单个元素的组成的集合。 说明:找到匹配的第一个tr元素。2，:last 用法:$(“tr:last”);返回值：单个元素的组成的集合。 说明:找到匹配的最后一个tr元素。3，:not(selector) 用法:$(“input:not(checked)”) 返回值：集合元素。 说明：去除所有与给定选择器匹配的元素。匹配没有被选中的input(当input的type为checkbox)4，:even 用法:$(“tr:even”) 返回值:集合元素。 说明:匹配所有索引值为偶数的元素。从0开始计数，js的数组都是从0开始。$(“tr:even”) 即匹配所有数组下标为偶数的tr5, :odd 用法:$(“tr:odd”) 返回值:集合元素。 说明:匹配所有索引值为奇数的元素。从0开始计数，js的数组都是从0开始。$(“tr:odd”) 即匹配所有数组下标为奇数的tr6,:eq(index) 用法:$(“tr:eq(7)”) 返回值:集合元素。eq(7)就是获取第七个tr元素7，:gt(index) 用法:$(“tr:gt(7)”) 返回值:集合元素。匹配索引值7的tr元素8，:lt(index) 用法:$(“tr:lt(7)”) 返回值:集合元素。匹配索引值7的tr元素9, :header(固定写法) 用法:$(“:header”).css(“background”,”red”); 返回值:集合元素。说明:匹配如h1,h2,h3之类的标题元素，这个是专门用来获取h1,h2这样的标题元素10, :animated(固定写法) 用法: $(“: animated”) 返回值:集合元素。说明:匹配所有正在执行动画效果的元素。基本选择器 div,span width:140px; height:140px; margin:20px; background: #9999cc; border:#000 1px solid; float:left; font-size: 17px; font-family: Roman; div.mini width:30px; height:30px; background: #cc66FF; border:#000 1px solid; font-size: 12px; font-family: Roman; .td width:30px; height:30px; background: #cc66FF; border:#000 1px solid; font-size: 12px; font-family: Roman; input type=button value=改变第一个的背景颜色为#0000ff id=b1 / input type=button value=改变最后一个的背景颜色为#FF0033 id=b2 / input type=button value=改变class不为one的所有的背景颜色为#00FFFF id=b3 / input type=button value=改变索引值为偶数的的元素的背景颜色为#00F88F id=b4 / input type=button value=改变索引值为奇数的兄弟元素的背景色为#777777 id=b5 / input type=button value=改变索引值大于3的的背景色为#85754f id=b6 / input type=button value=改变索引值小于3的的背景色为#eeddaa id=b7 / input type=button value=改变索引值等于3的的背景色为#85200f id=b8 / 天气冷了 天气又冷了 id is one id is two and class is mini class is one class is mini class is mini class is one class is mini01 class is mini 动画 span span class is mini / input type=button value=改变第一个的背景颜色为#0000ff id=b1 / $(#b1).click(function() $(div:first).css(background, #0000ff); ); / input type=button value=改变最后一个的背景颜色为#FF0033 id=b2 / $(#b2).click(function() $(div:last).css(background, #FF0033); ); / input type=button value=改变class不为one的所有的背景颜色为#00FFFF id=b3 / $(#b3).click(function() $(div:not(.one).css(background, #FF0033); ); / input type=button value=改变索引值为偶数的的元素的背景颜色为#00F88F id=b4 / $(#b4).click(function() $(div:even).css(background, #00F88F); ); / input type=button value=改变索引值为偶数的兄弟元素的背景色为#777777 id=b5 / $(#b5).click(function() $(div:odd).css(background, #00F88F); ); /input type=button value=改变索引值大于3的的背景色为#85754f id=b6 / $(#b6).click(function() $(div:gt(3).css(background,#85754f); ); / input type=button value=改变索引值小于3的的背景色为#eeddaa id=b7 / $(#b7).click(function() $(div:lt(3).css(background,#eeddaa); ); / input type=button value=改变索引值等于3的的背景色为#85200f id=b8 / $(#b8).click(function() $(div:eq(3).css(background,#85200f); ); / $(#b9).click(function() $(:header).css(background,#00ddea); ); / /增加动画 function callback() $(#mover).slideToggle(slow,callback); callback(); $(#b10).click(function() $(:animated).css(background,#FF77FF); );内容过滤选择器(主要体现在它所包含的子元素和文本内容上)1、:contains(text) 用法: $(“div:contains(zheng)”) 返回值:集合元素 说明:配给包含给定文本的元素，它的作用是查找被标签围起来的文本内容是否符合指定的内容。2、:empty 用法:$(“td:empty”) 返回值:集合元素 说明:匹配所有不包含子元素或者文本的空元素。3、:has(selector) 用法:$(“div:has(p)”).addClass(“test”) 返回值:集合元素 说明:匹配含有选择器所匹配的元素的元素，$(“div:has(p)”).addClass(“test”)：给所有包含p元素的div标签加上class=”test”.4、:parent 用法: $(“:parent”) 返回值:集合元素 说明:匹配含有子元素的或者文本的元素:注意:这里是”:parent”不是”.parent”哦！ 与”:empty”：相反基本选择器 div,span width:140px; height:140px; margin:20px; background: #9999cc; border:#000 1px solid; float:left; font-size: 17px; font-family: Roman; div.mini width:30px; height:30px; background: #cc66FF; border:#000 1px solid; font-size: 12px; font-family: Roman; .td width:30px; height:30px; background: #cc66FF; border:#000 1px solid; font-size: 12px; font-family: Roman; input type=button value=改变含有文本zheng的的背景颜色为#0000ff id=b1 / input type=button value=改变不含子元素（或文本元素）的空元素的背景颜色为#FF0033 id=b2 / input type=button value=改变含有class为mini元素的的背景颜色为#00FFFF id=b3 / input type=button value=改变含有子元素（或文本元素）的的元素的背景颜色为#00F88F id=b4 / input type=button value=改变不含有文本zheng的兄弟元素的背景色为#777777 id=b5 / 天气冷了 天气又冷了 id is one id is two and class is mini class is one zheng class is mini class is mini class is one zheng class is mini01 class is mini 动画 span span class is mini / input type=button value=改变含有文本zheng的的背景颜色为#0000ff id=b1 / $(#b1).click(function() $(div:contains(zheng).css(background, #0000FF); ); / input type=button value=改变不含子元素（或文本元素）的空元素的背景颜色为#FF0033 id=b2 / $(#b2).click(function() $(div:empty).css(background, #FF0033); ); / input type=button value=改变含有class为mini元素的的背景颜色为#00FFFF id=b3 / $(#b3).click(function() $(div:has(.mini).css(background,