jQuery-基础（一）

选择器

jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。

• 按ID查找，var div = $('#abc');
• 按tag查找，var ps = $('p'); // 返回所有<p>节点
• 按class查找，var a = $('.red');var a = $('.red.green'); // 注意没有空格！
• 按属性查找，var email = $('[name=email]');// 找出<??? name="email">;var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM;var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
• 组合查找，var emailInput = $('input[name=email]'); // 不会找出<div name="email">；var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>
• 多选项选择器，$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来
• 层级选择器，$('form.test p input'); // 在form表单选择被<p>包含的<input>
• 子选择器，$('parent>child')
• 过滤器

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

• 表单相关，

:input；:file；:checkbox；:radio；:focus；:checked；:enabled；:disabled

查找和过滤

在某个节点中查找

$("div").children(".test")     $("div").find(".test")  //在已选节点中查找子节点

 $(".test").next()    $(".test").nextAll()    $(".test").nextUntil() //对于位于同一层的节点的下一个节点

 $("div").prev()  $("div").prevAll()  $("div").prevUntil()   //对于位于同一层的节点的下一个节点

 $(".test").parent()  $(".test").parents()  $(".test").parentUntil() //从当前开始向上查找

 $("div").siblings() //兄弟节点

过滤

• filter()，过滤不符合选择器条件的节点(还可以接受函数)
• map()，把一个jQuery对象包含的若干DOM节点转化为其它对象
• first()，节点集合中的第一个节点
• last()，节点集合中的最后一个节点
• slice()，节点集合的切片
• eq()，选择节点集合的第几个节点
• hasclass()，选择具有某个属性的节点

操作DOM

修改Text和HTML

分别获取文本和HTML：

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'

修改CSS

jQuery对象的css()方法可以这么用：

var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性

css()方法作用与DOM节点的style属性，具有最高的优先级。如果要修改class属性，可以用jQuery提供的下列方法：

var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

显示和隐藏DOM

var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示

获取DOM的信息

利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码：

// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效

attr()和removeAttr()方法用于操作DOM节点的属性。
prop()方法和attr()类似，但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种。

操作表单

/*
    <input id="test-input" name="email" value="">
    <select id="test-select" name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="SZ">Shenzhen</option>
    </select>
    <textarea id="test-textarea">Hello</textarea>
*/
var
    input = $('#test-input'),
    select = $('#test-select'),
    textarea = $('#test-textarea');

input.val(); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com

select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'

增删DOM

内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

删除

    $("").empty()
    $("").remove([expr])

复制

    $("").clone([Even[,deepEven]])

事件

on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数：

var a = $('#test-link');
a.on('click', function () {
    alert('Hello!');
});

jQuery能够绑定的事件主要包括：
鼠标事件

• click: 鼠标单击时触发；
• dblclick：鼠标双击时触发；
• mouseenter：鼠标进入时触发；
• mouseleave：鼠标移出时触发；
• mousemove：鼠标在DOM内部移动时触发；
• hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

• keydown：键盘按下时触发；
• keyup：键盘松开时触发；
• keypress：按一次键后触发。

其他事件

• focus：当DOM获得焦点时触发；
• blur：当DOM失去焦点时触发；
• change：当<input>、<select>或<textarea>的内容改变时触发；
• submit：当<form>提交时触发；
• ready：当页面被载入并且DOM树完成初始化后触发。

其中，ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。

事件参数

有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息。

取消绑定

一个已被绑定的事件可以解除绑定，通过off('click', function)实现。