jQuery笔记（入门简介与选择器）

1 jQuery简介

与JavaScript相比，jQuery拥有跨浏览器的兼容性，获取网页中不存在的元素也不会报错。

jQuery有两个版本分别是1.x与2.x，区别在于2.x移除了对IE6、7、8的支持。

符号$

jQuery把所有的功能都封装在jQuery变量上，而$符号就是jQuery的别名，jQuery是一个函数，也能被当成对象。
如果引入其他JavaScript库内也有$符号从而发生冲突，此时可以使用noConflict来解除jQuery库中的$符号。

jQuery.noConflict();

jQuery对象类似一个数组，而里面装载着一些DOM节点对象，可以使用$(xxx).length的形式得出数量。

---

2 选择器

jQuery的选择器用法与CSS中的选择器用法相差无几。
使用$(xxx)的形式，就能返回一个jQuery对象，jQuery对象类似一个数组，而里面装载着一些DOM节点对象，可以使用$(xxx).length的形式得出数量。
jQuery对象与DOM节点对象可以互相转换，如：

/* 为了区分jQuery对象与普通对象的区别，变量一般以$开头 */
var $div=$(".abc");

/* 注意返回的是一个Array对象，内容是jQuery包含的内容，里面是abc类的DOOM节点对象集合（有时候使用了map()方法，返回集合的内容可能会发生变化） */
$div.get();
$div.get(0);//读取

/* 也可以直接用索引读取 */
$div[0];

/* 节点对象转换jQuery */
$(divDOM);

jQuery的选择器可分为基本选择器，层级选择器，过滤选择器，表单选择器。

2.1 基本选择器

基本选择器有：#id选择器，.class选择器，element选择器，*选择器。
此外这些选择器还可以适当地组合：

/* 选择同时拥有多个类名的节点 */
var $a=$(".classname1.classname2");//与CSS的一样，没有空格号

/* 按组合查找，与选择同时拥有多个类名的节点的方法类似 */
var $a=$('p.abc');
var $b=$('input[name=name]');

/* 多项选择 */
var a=$("p,div");

2.2 层级选择器

层级选择器就是通过DOM元素之间的层次关系来获取特定的元素，如后代元素，子元素（子元素是后代元素的子集），同辈元素，相邻元素等。

使用选择器表达相邻元素，使用的是+符号（也可以使用next()方法），如：

/* 获取ip为div1的div元素的下一个同辈的div元素 */
var $div = $("div#div1+div");

使用选择器表达某元素后面所有的同辈元素，使用的是~符号（也可使用nextAll()方法），如：

/* 获取ip为div1的div元素后面的所有同辈的div元素 */
var $div = $("div#div1~div")

2.3 过滤器选择器

过滤器选择器（filter）就像是CSS中的伪类选择器，通常以:号开头。
可分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单属性过滤。

2.3.1 基本过滤选择器

• :first：选取第一个元素
• :last：选取最后一个元素
• :not(selector)：剔除与之匹配的元素
• :even：选取索引是偶数的元素，使用时要注意索引的基准，索引以0开始（CSS3中的选择器并没有这类型）
• :odd：选取奇数索引
• :eq(index)：选取索引为index的元素，如$(:eq(1))
• :gt(index)：选取索引比index大的元素，如$(:gt(1))
• :lt(index)：选取索引比index小的元素，如$(:lt(1))
• :focus：选取当前获得焦点的元素

2.3.2 内容过滤选择器

• :contains(text)：选取含有文本内容为text的元素，如$("div.contain('我')")，注文本要加引号
• :has(selector)：选取含有 选择器所匹配元素 的元素，$("div:has(p)")，选取含有p元素的div元素

2.3.3 可见性过滤选择器

隐藏和显示对于动态网页很重要

• :hidden：选取看不见的元素，包括<input type="hidden"/>，<div style="display:none;">等
• :show：选取看得见的元素

2.3.4 属性过滤选择器

2.3.5 子元素过滤选择器

• nth-child(index/even/odd/equation)：选取每个父元素下的第index个子元素，注意p:nth-child与p :nth-child的区别
• :first-child
• :last-child
  

  注意：nth-child(index)其中的index是从1开始，而不是像eq(index)那样从0开始

$("ol li:first-child");
$("ol li:last-child");
$("ol li:nth-child(2)")

2.3.6 表单对象属性过滤选择器

此过滤器主要对表单的属性过滤：

• :enabled：选取可用元素
• :disabled：选取不可用元素
• :checked：选取被选中的元素（单选框，多选框），用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')
• :selected：选取被选中的元素（下拉列表）

2.4 表单选择器

• :input：可以选出input，button，select和textarea，注意概念，这并不仅仅选出input。比如想要去除button，可以这么写#formname :input:not(button)
• :file：可以选择<input type="file">，和input[type=file]一样；
• :checkbox：可以选择复选框，和input[type=checkbox]一样；
• :radio：可以选择单选框，和input[type=radio]一样；
• :text：选取单行文本框
• 等等，主要就是针对type属性

---

3 查找

3.1 find()

使用find()查找等同于使用组合查找方法，在某个节点的所有子节点中查找，使用find()方法，它本身又接收一个任意的选择器。

<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

var $ul = $('ul.lang'); // 获得<ul>
var $dy = ul.find('.dy'); // $('ul.lang.dy')
var $swf = ul.find('#swift'); // $('ul.lang#swift')
var $hsk = ul.find('[name=haskell]'); // $('ul.lang[name=haskell]')

3.3 children()方法

与find()类似，只不过children()方法只取得当前节点的子元素，注意只考虑子元素不考虑后代元素，该方法接受可选的选择器表达式

3.2 parent()，parents()方法

parent()取得当前节点的父级元素，注意只考虑父级元素不考虑祖先元素，该方法接受可选的选择器表达式，而parents()方法可以历遍所有祖先元素，并返回所有匹配的祖先元素。

3.3 next() ， prev()与siblings()方法

同层的节点就可以使用next()与prev()，同样的，方法本身可以接受一个任意选择器。其中next()用于向下找，而prev()用于向上找，另外还有nextAll()以及prevAll()方法。

siblings()方法用于获取所有匹配元素前后的同辈元素，同样的，方法本身可以接受一个任意选择器。

---

4 过滤

与高阶函数map、filter类似，jQuery对象也有类似的方法。

4.1 filter()

使用filter() 参数可以为节点选择器或函数，值得注意的是如果在函数中运用到this，那么this的指向是DOM对象（毕竟jQuery对象像是一个包含DOM对象的数组嘛）。

/* 传入选择器 */
var $langs = $('ul.lang li'); 
var $a = $langs.filter('.dy'); 

/* 传入函数 */
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

4.2 map()

map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象，所以说jQuery对象的内容不一定都是DOM节点

/* 传入函数 */
var langs = $('ul.lang li');
var arr = langs.map(function () {
    return this.innerHTML;
}).get();
// 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

4.3 first()、last()和slice()

如同一直所说那样jquery对象就像是个数组，如果一个jQuery对象如果包含了不止一个DOM节点，first()、last()和slice()方法可以返回一个新的jQuery对象。

var langs = $('ul.lang li'); //
var js = langs.first(); // 相当于$('ul.lang li:first-child')
var haskell = langs.last(); // 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // 参数和数组的slice()方法一致

4.4 $().each与$.each()

$().each 方法规定为每个匹配元素规定运行的函数。注：返回 false 可用于及早停止循环，如：

var $li = $('.li');
$li.each(function(){
    if ($(this).text() == 'python') {//注意：this指向的是JavaScript的DOM对象，而不是jQuery对象
        alert('找到了' + $(this).index());
        return false;
    }
})

而$.each()的作用是处理数组，如：

/* 拼接URL */
var data={name:"seiei",age:'19',sex:'man'};
var arr=[];
$.each(data,function(k,v){
    arr.push(k + "=" + encodeURIComponent(v));
});
data = arr.join('&');