[b]大致介绍[/b] 终于开始了我的jQuery学习之路！感觉不能再拖了，要边学习原生JavaScript边学习jQuery [b]jQuery是什么？[/b] jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设　计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。（来自百度-_-） [b]jQuery对象和DOM对象[/b] 我们在编写脚本时，可能会同时用到原生JavaScript和jQuery，那么这时就会存在一些问题。要解决这些问题就先得认识jQuery对象和DOM对象 DOM对象：通过例如getElementById方法获取到DOM树中的元素就是DOM对象 jQuery对象：通过jQuery包装DOM对象后产生的对象 [b]注意：jQuery对象和DOM对象不能使用对方的任何方法[/b] jQuery对象和DOM对象是可以互相转化的 jQuery对象转成DOM对象有两种方法： 1、[index] 2、get(index) DOM对象转成jQuery对象有一种方法：$(DOM对象) [b]jQuery选择器[/b] jQuery中的选择器完全继承了CSS的风格 [img]http://files.jb51.net/file_images/article/201612/2016122116091249.png[/img] 逐一来看 [b]基本选择器[/b] 改变id为div1的所有div的背景色 [code]$('#div1').css('background','#bbffaa');[/code] 改变所有p标签和class为one的div的背景色 [code]$('p,.one').css('background','#bbffaa');[/code] [b]层次选择器[/b] 选取div里的所有span元素 [code]$('div span');[/code] 选取div下元素名是span的子元素 [code]$('div > span');[/code] 选取class是one的下一个<div>同辈元素 [code]$('.one + div');[/code] 选取class是one的后面的所有的<div>同辈元素 [code]$('.one ~ div');[/code] [b]过滤选择器[/b] [b]1、基本过滤选择器[/b] 选取所有<div>元素中第一个<div>元素 [code]$('div:first');[/code] 选取class不是one的<div>元素 [code]$('div:not(.one)');[/code] 选取索引是偶数的的<div>元素 [code]$('div:even');[/code] 选取索引等于2的<div>元素 [code]$('div:eq(2)');[/code] 选取索引大于2的<div>元素 [code]$('div:gt(2)');[/code] 选取所有标题元素，例如h1、h2等 [code]$(':header');[/code] 选取当前正在执行动画的所有元素 [code]$(':animated');[/code] 选取获取当前焦点的元素 [code]$(':focus');[/code] [b]2、内容过滤选择器[/b] 选取含有文本“坚持”的<div>元素 [code]$('div:contains('坚持')');[/code] 选取不包含子元素或者文本的<div>元素 [code]$('div:empty');[/code] 选取含有<p>元素的<div>元素 [code]$('div:has(p)');[/code] 选取含有子元素或者文本的元素 [code]$('div:parent');[/code] [b]3、可见性过滤选择器[/b] 选取所有不可见的元素。包括<input type="hidden" />,<div style="display:none">和<div style="overflow:hidden"> [code]$(':hidden');[/code] 选取所有可见的<div>元素 [code]$('div:visible');[/code] [b]4、属性过滤选择器[/b] 选取有id属性的元素 [code]$('div[id]');[/code] 选取id等于myId的<div>元素 [code]$('div[id="myId"]');[/code] 选取id值不等于myId的<div>元素 [code]$('div[id!="myId"]');[/code] 选取id值以my开头的<div>元素 [code]$('div[id^="my"]');[/code] 选取id值以my结尾的<div>元素 [code]$('div[id$="my"]');[/code] 选取id值含有my的<div>元素 [code]$('div[id*="my"]');[/code] 选取属性title等于en或者以en为前缀（en后跟一个连字符'-'）的元素 [code]$('div[title|="en"]');[/code] 选取属性title中用空格分隔的值中包含字符en的<div>元素 [code]$('div[title~="en"]');[/code] 选取拥有属性id并且属性title以en为前缀的<p>元素 [code]$('p[id][title|="en"]');[/code] [b]5、子元素过滤器[/b] 选取每个class为one的<div>父元素下的第2个子元素 [code]$('div.one :nth-child(2)');[/code] 选取每个class为one的<div>父元素下的第1个子元素 [code]$('div.one :first-child');[/code] 选取<ul>中是唯一子元素的<li>元素 [code]$('ul li:only-child');[/code] [b]6、表单对象属性过滤选择器[/b] 选取id为"form1"表单内的所有可用元素 [code]$('#form1:enabled');[/code] 选取id为"form1"表单内的所有不可用元素 [code]$('#form1:disabled');[/code] 选取所有被选中的<input>元素 [code]$('input:checked');[/code] 选取所有被选中的选项元素 [code]$('select option:selector');[/code] [b]表单选择器[/b] 选取所有的<input>、<textarea>、<select>和<button>元素 [code]$(':input');[/code] 选取所有的单行文本框 [code]$(':text');[/code] 选取所有的不可见的元素 [code] $(':hidden');[/code] 其余的选择方法都可以通过单词了解到意思（例如 ：submit 就是选择所有的提交按钮）就不再赘述。 参考资料：锋利的jQuery(第二版) [url=http://www.1sucai.cn/books/92918.html]http://www.1sucai.cn/books/92918.html[/url] 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！