jQuery 基础功能小结

1. jQuery如何获取元素 | How to get jQuery elements

使用 jQuery 的第一步，通常是讲一个选择表达式放进 jQuery() 中(简写为$)，然后得到被选中的元素。选择表达式可以是 CSS 选择器

$(document)  //选择整个文档对象
$('#itsId')  //选择ID为itsId的网页元素
$('div.itsClass')  //选择class为itsClass的div元素
$('input[name=firstname]')  //选择name属性等于firstname的input元素

也可以是 jQuery 特有的表达式

$('c:first')  //选择网页中第一个c元素
$('tr:even')  //选择表格的偶数行
$('#myForm :input')  //选择表单中的input元素
$('div:visible')  //选择可见的div元素
$('div:gt(3)')  //选择所有的div元素，除了前四个
$('div:animated')  //选择处于动画状态的div元素

jQuery 提供的过滤器，可以对结果集进行筛选，从而缩小选择的结果

$('div').has('p');  //选择包含p元素的div元素
$('div').not('.itsClass');  //选择class不等于itsClass的div元素
$('div').filter('.itsClass');  //选择class等于itsClass的div元素
$('div').first();  //选择第一个div元素
$('div').eq(4);  //选择第5个div元素

还可以从结果集出发，移动到附近的元素

$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent();  //选择div元素的父代元素
$('div').children();  //选择div元素的子代元素
$('div').siblings();  //选择div元素的同代元素
$('div').closest('form');  //选择离div最近的那个form的父代元素

获取值：jQuery可以使用同一个函数，来实现取值和赋值(getter and setter)，也就是所谓的“取值器与赋值器合一”。至于是 get 还是 set，由函数的参数决定。常见的取值/赋值函数由 .html / text / attr / width / height / val()

$('h1').html();  //html()没有参数，表示取出h1的值
$('h1').html('name');  //html()由参数name，表示对h1进行赋值

2. jQuery的链式操作是怎样的 | How to do jQuery Method Chaining

jQuery 最终选中网页元素之后，可以对其进行一系列操作，并且这一系列操作可以连接在一起，代码写出来像链子，所以叫做链式操作

$('div').find('h1').eq(3).html('name'); //可以拆分成下面（第2-5行）代码
$('div').       //找到div元素
 .find('h1')    //选择其中的h1元素
 .eq(3)         //选择第4个h1元素
 .html('name')  //将它的内容改成name

jQuery还有 .end() 的操作，可以让结果集后退一步

$('div')
   .find('h1')
   .eq(3)
   .html('name')
   .end()           //退回到选中所有的h1元素那一步
   .eq(1)           //选中第2个h1元素
   .html('number')  //将它的内容改为number

3. jQuery如何创建和删除元素 | How to add/remove elements in jQuery

把新元素直接传入 jQuery 函数中，即可创建该元素； 删除元素使用 remove 和 detach 两种方式，其中 remove 不保留被删除元素的事件，而 detach 保留，detach 更有利于重新插入文档时使用；想要请空元素内容但是不删除该元素，可以使用 empty 操作

$('ul').append('<li>list name</li>'); //在ul中插入名为list name的list
$div.remove()
$div.detach()
$div.empty()

4. jQuery如何移动元素 | How to move elements in jQuery

移动元素，可以使用以下操作

$('div').insertAfter($('p'));  //把div元素移动到p元素后面，即insert-div-After-p，返回div
$('p').after($('div'));  //把p元素加到div元素前面，即p-after-div，返回p

使用这种模式的操作方法一共有以下4对：

• .insertAfter() 和 .after() ：在现存元素的外部，从后面插入元素
• .insertBefore() 和 .before() ：在现存元素的外部，从前面插入元素
• .appendTo() 和 .append() ：在现存元素的内部，从后面插入元素
• .prependTo() 和 .prepend() ：在现存元素的内部，从前面插入元素

5. jQuery如何修改元素属性 | How to edit elements' attributes in jQuery

可以通过赋值的方式，修改属性

$div.attr('title',xxx)  //读写title的属性，并修改为xxx
$div.css({color:'red'})  //读写style并修改color为red