jQuery.docx

1. /$(function()相当于window.onload,代码写在间$(function() /1.选取Button $(button)/2.为Button添加Onclick响应函数 ，方法写在大括号中$(button).click(function() /3.弹出helloworld/alert(hello);alert($(this).text();/弹出你点击那个按钮的值/jQuery和Dom对象的转换/由jQuery转为DOM对象/1).获取一个jQuery对象var $btn=$(button);/2).jquery对象是一个数组/alert($btn.length);/3).可以通过数组的下标转为DOM对象/alert($btn0.firstChild.nodeValue);/2.由DOM对象转为JQuery对象/1).选取一个DOM对象var btn=document.getElementById(bt1);/2.把DOM对象转为一个JQuery对象：使用$()进行包装/alert($(btn).text(););)bt1bt22. 基本选择器$(function()/1. 使用 id 选择器选择 id=btn1 的元素: $(#btn1)/2. 为选择的 jQuery 对象添加 onclick 响应函数: / $(#btn1).click(function(), 响应函数的代码/写在 function() 的中括号中./选择 id 为 one 的元素,修改css样式$(#btn1).click(function()$(#one).css(background, #ffbbaa););/选择 class 为 mini 的所有元素$(#btn2).click(function()$(.mini).css(background, #ffbbaa););/选择 元素名是 div 的所有元素$(#btn3).click(function()$(div).css(background, #ffbbaa););/选择 所有的元素$(#btn4).click(function()$(*).css(background, #ffbbaa););/选择 所有的 span 元素和id为two的元素$(#btn5).click(function()$(span,#two).css(background, #ffbbaa););)3.层数选择器 $(function()/选择 body 内的所有 div 元素,子孙div$(#btn1).click(function()$(body div).css(background, #ffbbaa););/在 body 内, 选择儿子元素是 div 的.不选择孙子元素div$(#btn2).click(function()$(body div).css(background, #ffbbaa););/选择 id 为 one 的下一个 div 元素，只要儿子不要孙子节点$(#btn3).click(function()$(#one + div).css(background, #ffbbaa););/选择 id 为 two 的元素后面的所有 div 兄弟元素$(#btn4).click(function()$(#two div).css(background, #ffbbaa););/选择 id 为 two 的元素所有 div 兄弟元素，如果siblings（）全选所有兄弟元素 不仅仅是div$(#btn5).click(function()$(#two).siblings(div).css(background, #ffbbaa););/选择 id 为 one 的下一个 span 元素$(#btn6).click(function()/以下选择器选择的是近邻 #one 的 span 元素, 若该span/和 #one 不相邻, 选择器无效. /$(#one + span).css(background, #ffbbaa);$(#one).nextAll(span:first).css(background, #ffbbaa););/选择 id 为 two 的元素前边的所有的 div 兄弟元素$(#btn7).click(function()$(#two).prevAll(div).css(background, #ffbbaa););)4.过滤选择器$(document).ready(function()function anmateIt()$(#mover).slideToggle(slow, anmateIt);anmateIt();/选择第一个div$(#btn1).click(function()$(div:first).css(background, #ffbbaa););/选择最后一个div$(#btn2).click(function()$(div:last).css(background, #ffbbaa););/选择class不是one的div$(#btn3).click(function()$(div:not(.one).css(background, #ffbbaa););/选择索引为偶数的div$(#btn4).click(function()$(div:even).css(background, #ffbbaa););/选择索引为奇数的div$(#btn5).click(function()$(div:odd).css(background, #ffbbaa););/选择索引大于3的div$(#btn6).click(function()$(div:gt(3).css(background, #ffbbaa););/选择索引等于3的div$(#btn7).click(function()$(div:eq(3).css(background, #ffbbaa););/选择索引小于3的div$(#btn8).click(function()$(div:lt(3).css(background, #ffbbaa););/选择所有的标题元素$(#btn9).click(function()$(:header).css(background, #ffbbaa););/选择当前正在执行动画的所有元素$(#btn10).click(function()$(:animated).css(background, #ffbbaa););/选择 id 为 two 的下一个 span 元素$(#btn11).click(function()$(#two).nextAll(span:first).css(background, #ffbbaa);););5. 内容过滤选择器$(document).ready(function()/选择 含有文本 di 的 div 元素$(#btn1).click(function()$(div:contains(di).css(background, #ffbbaa););/不包含内容的div元素$(#btn2).click(function()$(div:empty).css(background, #ffbbaa););/包含class=mini的父元素$(#btn3).click(function()$(div:has(.mini).css(background, #ffbbaa););/择含有子元素(或者文本元素)的div元素$(#btn4).click(function()$(div:parent).css(background, #ffbbaa);/$(div:not(:empty).css(background, #ffbbaa);););6. 可见性过滤选择器$(document).ready(function()/选择可见的div元素$(#btn1).click(function()$(div:visible).css(background, #ffbbaa););/选择不可见的div元素让它显示2s$(#btn2).click(function()/alert($(div:hidden).length);/show(time): 可以使不可见的元素变为可见, time 表示时间, 以毫秒为单位/jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该/方法的 jQuery 对象: 可以继续调用该对象的其他方法. $(div:hidden).show(2000).css(background, #ffbbaa););/选择隐藏的表单元素，显示他的value值$(#btn3).click(function()/val() 方法可以返回某一个表单元素的 value 属性值. alert($(input:hidden).val();););7. 属性过滤选择器$(function()$(#btn1).click(function()/选取含有 属性title 的div元素.$(divtitle).css(background, #ffbbaa););$(#btn2).click(function()/选取 属性title值等于test的div元素.$(divtitle=test).css(background, #ffbbaa););$(#btn3).click(function()/选取 属性title值不等于test的div元素(没有属性title的也将被选中).$(divtitle!=test).css(background, #ffbbaa););$(#btn4).click(function()/选取 属性title值 以te开始 的div元素.$(divtitle=te).css(background, #ffbbaa););$(#btn5).click(function()/选取 属性title值 以est结束 的div元素.$(divtitle$=est).css(background, #ffbbaa););$(#btn6).click(function()/选取 属性title值 含有es的div元素.$(divtitle*=es).css(background, #ffbbaa););$(#btn7).click(function()/组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有es的 div 元素.$(dividtitle*=es).css(background, #ffbbaa););$(#btn8).click(function()/选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素$(divtitletitle!=test).css(background, #ffbbaa););)8. 子元素过滤选择器$(document).ready(function()$(#btn1).click(function()/选取div的class为one的下边的第二个子元素/选取子元素, 需要在选择器前添加一个空格. $(div.one :nth-child(2).css(background, #ffbbaa););$(#btn2).click(function()/选取每个class为one的div父元素下的第一个子元素.$(div.one :first-child).css(background, #ffbbaa););/选取每个class为one的div父元素下的最后一个子元素.$(#btn3).click(function()$(div.one :last-child).css(background, #ffbbaa););/如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素.$(#btn4).click(function()$(div.one :only-child).css(background, #ffbbaa);););9. 表单元素过滤选择器.$(function()$(#btn1).click(function()/使所有的可用的单行文本框的 value 值变为 尚硅谷alert($(:text:enabled).val();$(:text:enabled).val(尚硅谷););/表单内 不可用input 赋值操作$(#btn2).click(function()$(:text:disabled).val(););/获取多选框选中的个数$(#btn3).click(function()var num = $(:checkboxname=newsletter:checked).length;alert(num););$(#btn5).click(function()/实际被选择的不是 select, 而是 select 的 option 子节点/所以要加一个 空格. /var len = $(select :selected).length/alert(len);/因为 $(select :selected) 选择的是一个数组/当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了. /alert($(select :selected).val();/jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在/得到的 DOM 对象, 而不是一个 jQuery 对象$(select :selected).each(function()alert(this.value);););/获取下拉框选中的内容$(#btn4).click(function()$(:checkboxname=newsletter:checked).each(function()alert(this.value);););)10.选择器练习$(function()/1. 点击所有的 p 节点, 能够弹出其对应的文本内容/*1. jQuery 对象可以进行隐式迭代: $(p).click(function().);为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 DOM 对象的数组2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来. 3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val()*/$(p).click(function()alert($(this).text();$(this).text( + $(this).text();/alert(this.firstChild.nodeValue););/2. 使第一个 table 隔行变色$(table:first tr:even).css(background, #ffaacc);/3. 点击 button, 弹出 checkbox 被选中的个数$(button).click(function()alert($(:checkbox:checked).length);););11. jQuery_创建节点及插入节点Append, prepend指的是在指定节点内部的前面或者后边，就节点整体而言。/测试使用 jQuery 创建节点并插入节点到指定的节点中/*1. 创建节点: 使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽返回对应节点的 jQuery 对象:$(尚硅谷)2. 添加节点:1). appendTo 和 append: 主语和宾语的位置不同: $(尚硅谷).appendTo($(#city);$(#city).append(尚硅谷);2). prependTo 和 prepend: 主语和宾语的位置不同: $(尚硅谷).prependTo($(#city);$(#city).prepend(尚硅谷);*/$(function()/1. 创建一个 尚硅谷/2. 并把其加入到 #city 的子节点/$(尚硅谷).appendTo($(#city);/$(#city).append(尚硅谷);/$(尚硅谷).prependTo($(#city);$(#city).prepend(尚硅谷);alert($(#atguigu).text();)After，Before指的是某一具体节点的前面或者后面插入。/测试使用 jQuery 插入节点$(function()/1. 创建一个 尚硅谷/2. 并把其加入到 #bj 的后面/$(尚硅谷).insertAfter($(#bj);/$(#bj).after(尚硅谷);/$(尚硅谷).insertBefore($(#bj);$(#bj).before(尚硅谷);)12. 重写 JS 实验之分类添加内容/需求: 点击 submit 按钮时,检查是否选择 type, 若没有选择给出提示: 请选择类型; / 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: 请输入内容;/若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 /需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. $(function()function showContent(li)alert($(li).text();$(li).click(function()showContent(this););/1. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false, /可以取消指定元素的默认行为. 比如 submit, a 等/2. val() 方法, 相当于 attr(value), 获取表单元素的 value 属性值. /3. $.trim(str): 可以去除 str 的前后空格./4. jQuery 对象的方法的连缀: 调用一个方法的返回值还是调用的对象, 于是可以/在调用方法的后面依然调用先前的那个对象的其他方法. $(:submit).click(function()var $type = $(:radioname=type:checked);if($type.length = 0)alert(请选择类型.);return false;var type = $type.val();var $name = $(:textname=name);var name = $name.val();/$.trim(str): 可以去除 str 的前后空格.name = $.trim(name);$name.val(name);if(name = )alert(请输入内容);return false;$( + name + ).appendTo($(# + type) .click(function() showContent(this); );/取消 submit 的默认行为return false;);)13. 删除及清空节点/测试使用 jQuery 删除节点$(function()/1. 为 #city 的每一个 li 添加 click 响应函数: 点击时, li 被删除/$(#city li).click(function()/$(this).remove();/);/jQuery 对象的 remove() 方法: 将把 jQuery 对象对应的/DOM 节点直接删除. $(#bj).remove();/2. 清空 #game 节点/jQuery 对象的 empty() 方法: 清空 jQuery 对象对应的 /DOM 对象的所有的子节点. alert(要清空了!);$(#game).empty();)14. 重写 JS 实验之员工管理. $(function() /1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话 /那么这个对象一定是一个 jQuery 对象 /2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象 function removeTr(aNoe) /获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象 var $trNode = $(aNoe).parent().parent(); var textContent = $trNode.find(td:first).text(); textContent = $.trim(textContent); var flag = confirm(确定要删除 + textContent + 的信息吗?); if(flag) $trNode.remove(); return false; $(#employeetable a).click(function() return removeTr(this); ); $(#addEmpButton).click(function() $().append( + $(#name).val() + ) .append( + $(#email).val() + ) .append( + $(#salary).val() + ) .append(Delete) .appendTo(#employeetable tbody) .find(a) .click(function() return removeTr(this) ); ); )15. 克隆和替换节点/测试使用 jQuery clone 方法: 复制节点$(function()$(li).click(function()alert($(this).text(););/复制 #bj 节点, 并添加到 #rl 节点的后面/*1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.2. clone(true): 在克隆节点的同时, 克隆节点包含的事件. */$(#bj).clone(true) .attr(id, bj2) .insertAfter($(#rl);)/测试使用 jQuery replaceWith (replaceAll) 方法: 替换节点/*1. replaceWith , replaceAll 一对方法, 可以完成一件事. 就是主语宾语哪个在前面的问题. 2. 以上的两个方法还有移动节点的功能3. 节点互换需要先克隆节点. 4. var $rl = $(#rl).replaceWith($bj2);返回替换节点值*/$(function()/1. 创建一个 尚硅谷 节点, 替换 #city 的最后一个 li 子节点$(尚硅谷).replaceAll($(#city li:last);/2. 创建一个 尚硅谷 节点, /替换 #city 的第二个 li 子节点$(#city li:eq(1).replaceWith($(尚硅谷);/3. 互换以下两个节点: #rl 和 #bj. 还有移动的功能./$(#bj).replaceWith($(#rl);/节点互换需要先克隆节点. alert(1);var $bj2 = $(#bj).clone(true);var $rl = $(#rl).replaceWith($bj2);alert(2);$(#bj).replaceWith($rl);)16. jQuery_包裹节点/测试使用 jQuery wrap, wrapAll, wrapInner$(function()/包装 li 本身$(#game li).wrap();/包装所有的 li,也就ul$(#city li).wrapAll();/包装 li 里边的文字. $(#language li).wrapInner();)17. html() 方法 & val() 方法$(function()/1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数$(:text).focus(function()/2. 当获取焦点时, 若 #address 中是默认值/(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 var val = $(this).val();if(val = this.defaultValue)$(this).val();).blur(function()/3. 失去焦点是, 若 #address 的值在去除前后空格后等于 /则为其恢复默认值. var val = this.value;if($.trim(val) = )this.value = this.defaultValue;);/2. $(:button:eq(1).click(function()$(#single).val(选择3号););$(:button:eq(2).click(function()$(#multiple).val(选择2号, 选择4号););$(:button:eq(3).click(function()$(:checkboxname=c).val(check2, check4););$(:button:eq(4).click(function()/即便是为一组 radio 赋值, val 参数中也应该使用数组. /使用一个值不起作用。 $(:radioname=r).val(radio2););$(:button:eq(5).click(function()/val() 可以直接获取 select 的被选择的值. alert($(#single).val();alert($(#multiple).val();/val 不能直接获取 checkbox 被选择的值/若直接获取, 只能得到第一个被选择的值. /因为 $(:checkboxname=c:checked) 得到的是一个/数组. 而使用 val() 方法只能获取数组元素的第一个值/若希望打印被选择的所有制, 需要使用 each 遍历. /alert($(:checkboxname=c:checked).val();$(:checkboxname=c:checked).each(function()alert(this.value););/而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. alert($(:radioname=r:checked).val(););)18. CSS DOM 操作$(function()/测试 jQuery 样式相关的方法. /1. hasClass(): 某元素是否有指定的样式alert($(div:first).hasClass(SubCategoryBox); /true/2. 移除样式$(div:first).removeClass(SubCategoryBox);alert($(div:first).hasClass(SubCategoryBox);/3. 添加样式$(div:first).addClass(SubCategoryBox);/4. 切换样式: 存在, 则去除; 没有, 则添加. $(.showmore).click(fu