jquery选择器

jquery的插件开发主要分三种：$.extend()， $.fn，$.widget()应用jQuery UI的部件工厂方式创建 通常使用第二种方式进行开发。 第一种方式如下： $.extend({ sayHello: function(name) { console.log('Hello,' + (name ? name : 'Dude') + '!'); } }) $.sayHello(); //调用 $.sayHello('Wayou'); //带参调用 但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。 第二种开发方式如下： 比如我们将页面上所有链接颜色转成红色，则可以这样写这个插件： $.fn.myPlugin = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') this.css('color', 'red'); } jQuery一个时常优雅的特性是支持链式调用，选择好DOM元素后可以不断地调用其他方法，要让插件不打破这种链式调用，只需return一下即可。 $.fn.myPlugin = function() { //在这里面,this指的是用jQuery选中的元素 this.css(

　　层级选择器： 　　　　 层级选择器 符号 解释 使用 空格 后代选择器 $("div p").css("","") + 紧邻选择器 $("div+p").css("","") ~ 兄弟选择器 $("div~p").css("","") > 自带选择器 $("div>p").css("","") 基本过滤选择器 :eq(index) 选择等于index索引值的元素 :odd 选择所有奇数 :even 选择所有偶数 :lt(index) 选择从0开始的一个数字，选择符号大于index :gt(index) 选择从0开始的一个数字，选择符号小于index ：first 选择第一个元素 :last 选择最后一个元素 　　　　属性选择器 $("a[href]") 选择所有href属性的元素 $("a[href='http://ww.baidu.com']") 选择所有href属性为http://www.baidu.com的元素 $("a[href!="http://www.baidu.com"]") 选择所有href属性不为http://www.baidu.com的元素 $("a[href^=web]") 选择所有以web开头的元素 $("a[href$=web]") 选择所有以web结尾的元素 $("a[href*='i']") 选择所有包含i这个字符的元素 $("a[href]

　　稍微学点js然后就用起jQuery，用久了，就好像自己都成高手了，想得少了，都觉得自己就是js高手了。哗啦啦的惭愧啊=。= 　　面试GY的时候，因为在简历上写着大大的会用jQuery快速开发原型页面，然后就被虐惨了=。=。有些东西知其一是没有意思，尤其是技术这门活。~废话不多说，直接看近来几日的复习成果。~可能接触得比较久了，所以学起来比较轻松。 　　jQuery的优点： 轻量级。也就是几十K的样子。压缩前，貌似就是七八十K的样子，如果压缩后，估计也就三四十K了； 强大的选择器。你可能还在犹豫使用CSS中有些选择器的浏览器兼容问题，在jQuery中，只要你想到的CSS选择器就可以使用（目前本人没有发现不可以的）。当然，你还可以自己写个属于自己的选择器； 出色的DOM操作的封装； 可靠的事件处理机制。在预留退路、循序渐进、非侵入式编程思想方面，jQuery做得很不错； 完善的ajax; 不污染顶级变量。其别名$也可以随时交出控制权，绝不会污染其他对象。该特性使jQuery可以与其它js库共存； 出色的浏览器兼容性； 链式操作方式； 隐式迭代。如当用jQuery找到带有".myClass"类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象的集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量；

2013-11-17 一.首先我们要了解jQuery与JavaScript的区别: *JavaSipt是为了适应动态网页制作的需要而诞生的一种编辑语音.他是由Netscape公司开发的一种脚本语音(scripting language). *JQuery是继Prototype之后有一个优势的JavaScript库,他由John Resig创建于2006年1月.他简化了遍历HTML文档.操作DOM.处理事件.执行动画和Ajax的操作.他独特而优雅的代码风格改变了JavaScript程序员的设计方式和思维. 二.jQuery的优势 1.轻量级: 　　jQuery非常轻巧,采用Dean Edwards 的Packer压缩后,只有不到30kb的大小,如果服务器端启用gzip压缩后,甚至只有16kb的大小! 2.强大的选择器: 　　jQuery可以让操作者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器. 3.出色的DOM操作的封装 　　jQuery封装了大量常用DOM操作,使用编写DOM操作相关程序员的时候能够得以应手,优雅的完成各种原版非常复杂的操作,让JavaScript新手也能写出出色的程序. 4.可靠的事件处理机制 　　jQuery的事件处理机制吸取了JavaScript专家Dean Edwards 编写的事件处理函数的精华

（1）轻量级。jQuery非常轻巧，采用Dean Edwards的Packer(http://dean.edwards.name/packer/)压缩后，只有不到30KB的大小，如果服务器端启用gzip压缩后，甚至只有16KB的大小！ （2）强大的选择器。jQuery可以让操作者使用从CSS 1到CSS 3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。如果你需要，还可以加入插件使其支持XPath选择器！下一章我们将为你详细讲解jQuery中强大的选择器。 （3）出色的DOM操作的封装。jQuery封装了大量常用DOM操作，使你编写DOM操作相关程序的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。第三章将为你重点介绍jQuery中优雅的DOM操作。 （4）可靠的事件处理机制。jQuery的事件处理机制吸取了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery处理事件绑定的时候相当的可靠。在预留退路(graceful degradation)方面，jQuery也做的非常不错。第四章将为你重点介绍jQuery中的事件处理。 （5）完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax里

jQuery的理念是写得少做的多(write less，do more)。 jQuery独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。 概括起来有以下优势： (1)轻量级。 jQuery非常轻巧，采用Packer压缩后不到30KB。 (2)强大的选择器。 jQuery允许开发者使用 从CSS1到CSS3几乎所有的选择器 ，以及jQuery独创的高级而复杂的选择器。 (3)出色的DOM操作的封装 jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序时能够得心应手。 (4)可靠的事件处理机制 jQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。 (5 )出色的浏览器兼容 jQuery能在IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+下正常运行。 (6 )完善的Ajax。 jquery将所有的Ajax操作封装到一个函数里$.ajax()里，使得开发者处理Ajax时能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 (7 )链式操作方式 jQuery最具有特色的莫过于它的链式操作模式—即对发生在同一个jQuery对象上的一组动作

前两天做了一个点击任意位置，都能关闭菜单的功能，因为菜单里面的每一个a,的点击事件都是用on绑定的。所以在阻止冒泡的时候不管用，今天特意来理解一下on的机制 on 是委托事件，利用的就是冒泡原理 $(selector).on(event,[selector],handler); selector 如果为空，表示的就是目标元素就是所选元素，如果有值代表的是符合所选元素的所有后代元素 实际上，事件委托的事件处理函数是 当被委托的元素上的事件触发时判断e.target后执行 ，而不是目标元素上的事件被触发后就立即执行，在没有阻止冒泡的情况下，事件还是一层层传播的，只是处理函数在事件到达那一层被触发的问题。根据事件代理的规则，点击li元素后，click事件是从li至ul至ul父元素一层层冒泡上去的，沿途触发各个元素上的事件处理函数。如果我们将事件委托在ul上，调用了stopPropagation，就 阻止了事件从ul继续向上冒泡，而不是阻止事件从li向上冒泡 。这样从ul开始，ul及其祖先元素上的事件冒泡被阻止。 重要说明 ： 如果传递了 selector 参数，那么 on() 函数并 不是 为当前jQuery对象匹配的元素绑定事件处理函数，而是 为它们的 后代元素中符合选择器 selector 参数的元素绑定事件处理函数 。 on() 函数并不是直接为这些后代元素挨个绑定事件

element（标签、元素）选择器：$("div") 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>element选择器</title> 5 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 6 </head> 7 8 <body> 9 <button id="btntest">点我</button> 10 <script type="text/javascript"> 11 $("button").attr("disabled","true"); 12 </script> 13 </body> 14 </html> id选择器：$("#id") 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>#id选择器</title> 5 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 6 </head> 7 8 <body> 9 <div id="divtest">div的内容</div> 10 <div id="default"></div

第十七章 jQuery http://jquery.cuishifeng.cn/ 一.过滤选择器 ： 目的：处理更复杂的选择，是jQuery自定义的，不是CSS3中的选择器。 语法：jQuery的过滤选择器借鉴了css中伪类的语法，即选择器以冒号（：）开始。 　　　　jQuery常用的过滤选择器 　　 选择器 说明 :animated　 所有处于动画中的元素 :button 所有按钮，包括input[type=button]、input[type=submit]、input[type=reset]和<button>标记 :checkbox 所有复选框，等同于input[type=checkbox] :checked 选择被选中的复选框或单选框 :contains( characters ) 选择所有包含了文本" characters "的元素 :disabled 页面中被禁用了的元素 :enabled 页面中没有被禁用的元素 :file 表单中的文件上传元素，等同于input[type=file] :header 选中所有标题元素，例如<h1>~<h6> :hidden 匹配所有的不可见元素，例如设置为display:none的元素或input元素的type属性为“hidden”的元素 :image 表单中的图片按钮，等同于input[type=image] :input

无论何时，我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点： 隐式迭代 $(“选择器”).css(“background-color”,”red”)则是为这组元素中每个元素的样式都加上红色背景。jQuery会自动迭代每个元素，这就免去了我们编写代码遍历每个元素对象的操作。 无需判断对象是否存在 如果页面上不存在id为test的DOM 元素，$(“#test”).css(“background-color”,”red”)不会产生任何异常，而 document.getElementById(“test”).style.backgroundColor=’red’就会产生未找到对象的异常。 虽然jQuery这样操作不会产生异常，但是我们在开发jQuery插件的时候，是有必要判断jQuery选择器有没有获取到元素的，这样可以在插件未正常获取到元素的时候，可以立即停止插件的运行，可以提高性能而且减少意外情况的发生。如何获取呢？可以这样 if ($("选择器").length() > 0){ //说明获取到元素了}else{ //未获取到元素} 上面一段文字貌似和今天要说的jQuery层次选择器好像没多大关系呢，呵呵~~的确，上面的东西是我临时想起来的，感觉比较实用，所以就在这里和大家说一下