Acticle 17：jquery基础（基本选择器）

1.什么是jquery？–banyuanchuang
jquery logo Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种 应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插 入一堆js来调用命令了，只需定义id即可。(简言之，jquery就是javascript的升级版，是js语言里面的一部分)。

2.query选择器

---

a.基本选择器—-重点

（1）$("#box") :选择id值等于box的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 ；$()括号里面的引号用单引号跟双引号都可以，不过一般单引号是规范的写法。

（2）$(“div”)： 选择所有的div标签元素，返回div元素数组 ；

（3）$(“.one”):选择所有类名为one的所有元素。

---

b.层级选择器—-重点
（1）$(“p span”) 选择所有的p元素中的span元素

（2）$(“#box > *”) 选择id值为box 的所有的子元素

（3）$(“ul + input”) 选择所有的ul元素的下一个input元素节点，经测试选择器返回的是ul 标签后面直接跟一个input标签的所有input标签元素

（4）$(“#prev ~ div”) 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签（找自己下面的div兄弟，简称找弟弟(^__^) ）；

---

c.基本过滤选择器
（1）$(“tr:first”) 选择所有tr元素的第一个

（2）$(“tr:last”) 选择所有tr元素的最后一个

（3）$(“input:not(:checked) + span”)

（4）过滤掉：checked的选择器的所有的input元素

（5）$(“tr:even”) 选择所有的tr元素的第0，2，4… …个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

（6）$(“tr:odd”) 选择所有的tr元素的第1，3，5… …个元素

（7）$(“td:eq(2)”) 选择所有的td元素中序号为2的那个td元素

（8）$(“td:gt(4)”) 选择td元素中序号大于4的所有td元素

（9）$(“td:lt(4)”) 选择td元素中序号小于4的所有的td元素

（10）$(“:header”) 选择h1、h2、h3之类的

（11）$(“div:animated”) 选择正在执行动画效果的元素

---

d.子元素过滤选择器—重点

（1）$("ul li:nth-child(2)"),$(“ul li:nth-child(odd)”),$(“ul li:nth-child(3n + 1)”)

（2）$(“div span:first-child”) 返回所有的div元素的第一个子节点的数组

（3）$(“div span:last-child”) 返回所有的div元素的最后一个节点的数组

（4）$(“div button:only-child”) 返回所有的div中只有唯一一个子节点的所有子节点的数组

---

e.表单选择器

（1）$(“:input”) 选择所有的表单输入元素，包括input,
textarea, select 和 button

（2）$(“:text”) 选择所有的text input元素

（3）$(“:password”) 选择所有的password input元素

（4）$(“:radio”) 选择所有的radio input元素

（5）$(“:checkbox”) 选择所有的checkbox input元素

（6）$(“:submit”) 选择所有的submit input元素

（7）$(“:image”) 选择所有的image input元素

（8）$(“:reset”) 选择所有的reset input元素

（9）$(“:button”) 选择所有的button input元素

（10）$(“:file”) 选择所有的file input元素

（11）$(“:hidden”) 选择所有类型为hidden的input元素或表单的隐藏域