50个实用的jquery案例

jquery 案例 jquery 案例 1 如何创建嵌套的过滤器 1 允许你减少集合中的匹配元素的过滤器 2 只剩下那些与给定的选择器匹配的部分 在这种情况下 3 查询删除了任何没 not 有 has 4 包含 class 为 selected selected 的子节点 5 filter not has selected jquery 案例 2 如何重用元素搜索 1 var allItems div item 2 var keepList div container1 div item 3 现在你可以继续使用这些 jQuery 对象来工作了 例如 4 基于复选框裁剪 keep list 复选框的名称 5 符合 6 class names 7 formToLookAt input checked each function 8 keepList keepList filter this attr name 9 10 jquery 案例 3 任何使用 has 来检查某个元素是否包含某个类或是元素 1 jQuery 1 4 包含了对这一 has 方法的支持 该方法找出 2 某个元素是否包含了其他另一个元素类或是其他任何的 3 你正在查找并要在其之上进行操作的东东 4 input has email addClass email icon jquery 案例 4 如何使用 jQuery 来切换样式表 1 找出你希望切换的媒体类型 media type 然后把 href 设置成新的样式表 2 link media screen attr href Alternative css jquery 案例 5 如何限制选择范围 基于优化目的 1 尽可能使用标签名来作为类名的前缀 2 这样 jQuery 就不需要花费更多的时间来搜索 3 你想要的元素 还要记住的一点是 4 针对于你的页面上的元素的操作越具体化 5 就越能降低执行和搜索的时间 6 var in stock shopping cart items input is in stock Item X Item Y Item Z 6 如何正确地使用 ToggleClass 1 切换 toggle 类允许你根据某个类的 2 是否存在来添加或是删除该类 3 这种情况下有些开发者使用 4 a hasClass blueButton a removeClass blueButton a addClass blueButton 5 toggleClass 允许你使用下面的语句来很容易地做到这一点 6 a toggleClass blueButton 7 如何设置 IE 特有的功能 1 if browser msie 2 Internet Explorer 就是个虐待狂 3 8 如何使用 jQuery 来代替一个元素 1 thatdiv replaceWith fnuh 9 如何验证某个元素是否为空 1 if keks html 2 什么都没有找到 3 10 如何从一个未排序的集合中找出某个元素的索引号 1 ul li click function 2 var index this prevAll length 3 11 如何把函数绑定到事件上 1 foo bind click function 2 alert User clicked on foo 3 12 如何追加或是添加 html 到元素中 1 lal append sometext 13 在创建元素时 如何使用对象字面量 literal 来定义属性 1 var e href class a class another class title 14 如何使用多个属性来进行过滤 1 在使用许多相类似的有着不同类型的 input 元素时 2 这种基于精确度的方法很有用 3 var elements someid input type sometype value somevalue ge t 15 如何使用 jQuery 来预加载图像 1 jQuery preloadImages function 2 for var i 0 i arguments length i 3 attr src arguments i 4 5 6 用法 7 preloadImages image1 gif path to image2 png some image3 jp g 16 如何为任何与选择器相匹配的元素设置事件处理程序 1 button someClass live click someFunction 2 注意 在 jQuery 1 4 2 中 delegate 和 undelegate 选项 3 被引入代替 live 因为它们提供了更好的上下文支持 4 例如 就 table 来说 以前你会用 5 live 6 table each function 7 td this live hover function 8 this toggleClass hover 9 10 11 现在用 12 table delegate td hover function 13 this toggleClass hover 14 17 如何找到一个已经被选中的 option 元素 1 someElement find option selected 18 如何隐藏一个包含了某个值文本的元素 1 p value contains thetextvalue hide 19 如果自动滚动到页面中的某区域 1 jQuery fn autoscroll function selector 2 html body animate 3 scrollTop selector offset top 4 500 5 6 7 然后像这样来滚动到你希望去到的 class area 上 8 area name autoscroll 20 如何检测各种浏览器 1 检测 Safari if browser safari 2 检测 IE6 及之后版本 if browser msie 2 el html el html replace word ig 22 如何禁用右键单击上下文菜单 1 document bind contextmenu function e 2 return false 3 23 如何定义一个定制的选择器 1 expr mycustomselector function element index meta stack 2 element 一个 DOM 元素 3 index 栈中的当前循环索引 4 meta 有关选择器的元数据 5 stack 要循环的所有元素的栈 6 如果包含了当前元素就返回 true 7 如果不包含当前元素就返回 false 8 定制选择器的用法 9 someClasses test doSomething 24 如何检查某个元素是否存在 1 if someDiv length 2 万岁 它存在 3 25 如何使用 jQuery 来检测右键和左键的鼠标单击两种情况 1 someelement live click function e 2 if browser msie 4 else if e button 2 5 alert Right Mouse Button Clicked 6 7 26 如何显示或是删除 input 域中的默认值 1 这段代码展示了在用户未输入值时 2 如何在文本类型的 input 域中保留 3 一个默认值 4 wap val 5 swap each function i 6 wap val i this val 7 this focusin function 8 if this val swap val i 9 this val 10 11 focusout function 12 if trim this val 13 this val swap val i 14 15 16 27 如何在一段时间之后自动隐藏或关闭元素 支持 1 4 版本 1 这是 1 3 2 中我们使用 setTimeout 来实现的方式 2 setTimeout function 3 mydiv hide blind 500 4 5000 5 而这是在 1 4 中可以使用 delay 这一功能来实现的方式 这很像是休眠 6 mydiv delay 5000 hide blind 500 28 如何把已创建的元素动态地添加到 DOM 中 1 var newDiv 2 newDiv attr id myNewDiv appendTo body 29 如何限制 Text Area 域中的字符的个数 1 jQuery fn maxLength function max 2 this each function 3 var type this tagName toLowerCase 4 var inputType this type this type toLowerCase null 5 if type input 8 9 else if type textarea 10 this onkeypress function e 11 var ob e event 12 var keyCode ob keyCode 13 var hasSelection document selection document sele ction createRange text length 0 this selectionStart this sele ctionEnd 14 return this value length max 15 16 this onkeyup function 17 if this value length max 18 this value this value substring 0 max 19 20 21 22 23 24 用法 25 mytextarea maxLength 500 30 如何为函数创建一个基本的测试 1 把测试单独放在模块中 2 module Module B 3 test some other test function 4 指明测试内部预期有多少要运行的断言 5 expect 2 6 一个比较断言 相当于 JUnit 的 assertEquals 7 equals true false failing test 8 equals true true passing test 9 31 如何在 jQuery 中克隆一个元素 1 var cloned somediv clone 32 在 jQuery 中如何测试某个元素是否可见 1 if element is visible true 2 该元素是可见的 3 33 如何把一个元素放在屏幕的中心位置 1 jQuery fn center function 2 this css position absolute 3 this css top window height this height window scrollTop px 4 this css left window width this width 2 window scrollLeft px 5 return this 6 7 这样来使用上面的函数 8 element center 34 如何把有着某个特定名称的所有元素的值都放到一个数组中 1 var arrInputValues new Array 2 input name table each function 3 arrInputValues push this val 4 35 如何从元素中除去 HTML 1 function 2 fn stripHtml function 3 var regexp gi 4 this each function 5 this html this html replace regexp 6 7 return this 8 9 jQuery 10 用法 11 p stripHtml 36 如何使用 closest 来取得父元素 1 searchBox closest div 37 如何使用 Firebug 和 Firefox 来记录 jQuery 事件日志 1 允许链式日志记录 2 用法 3 someDiv hide log div hidden addClass someClass 4 jQuery log jQuery fn log function msg 5 if console 6 console log s o msg this 7 8 return this 9 38 如何强制在弹出窗口中打开链接 1 jQuery a popup live click function 2 newwindow window open this attr href height 200 width 150 3 if window focus 4 newwindow focus 5 6 return false 7 39 如何强制在新的选项卡中打开链接 1 jQuery a newTab live click function 2 newwindow window open this href 3 jQuery this target blank 4 return false 5 40 在 jQuery 中如何使用 siblings 来选择同辈元素 1 不这样做 2 nav li click function 3 nav li removeClass active 4 this addClass active 5 6 替代做法是 7 nav li click function 8 this addClass active siblings removeClass active 9 41 如何切换页面上的所有复选框 1 var tog false 2 或者为 true 如果它们在加载时为被选中状态的话 3 a click function 4 input type checkbox attr checked tog 5 tog tog 6 42 如何基于一些输入文本来过滤一个元素列表 1 如果元素的值和输入的文本相匹配的话 2 该元素将被返回 3 someClass filter function 4 return this attr value input someId val 5 43 如何获得鼠标垫光标位置 x 和 y 1 document ready function 2 document mousemove function e 3 XY html X Axis e pageX Y Axis e pageY 4 5 44 如何把整个的列表元素 List Element LI 变成可点击的 1 ul li click function 2 window location this find a attr href 3 return false 4 1 2 Link 1 3 Link 2 4 Link 3 5 Link 4 6 45 如何使用 jQuery 来解析 XML 基本的例子 1 function parseXml xml 2 找到每个 Tutorial 并打印出 author 3 xml find Tutorial each function 4 output append this attr author 5 6 46 如何检查图像是否已经被完全加载进来 1 theImage attr src