jQuery - jQuery的设计思想 - 《Web 基础》

创建元素
获取元素
删除元素
取值和赋值
链式操作
移动元素
事件

使用jQuery获取与创建元素，不返回这些元素，而是返回操作这些元素的对象
常用简写 window.$ = window.jQuery

创建元素

$('<div><span> Hi </span></div') // 创建元素
    .appendTo(document.body); // 插入 body 中

获取元素

//使用 window.jQuery(选择器) 获取对应的元素
$(document)； // 获取整个文档对象
$('#XXX')；  // 获取 id 为 XXX 的网页元素 
$('div.myClass')；  // 获取class为myClass的div元素
// 通过jQuery特有表达式获取元素
$('a.first')； // 获取网页中第一个a元素
$('tr:odd')； // 获取表格的奇数行
$('#myForm :input')； // 获取表单中的input元素
$('div:visible')； // 获取可见的div元素
$('div:gt(2)')； // 获取所有的div元素，除了前三个
$('div:animated')； // 获取当前处于动画状态的div元素
// 使用过滤器对结果进行筛选
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
// 移动获取DOM树上的元素
$('div').next(); // 获取下一个元素
$('div').next('p'); //获取div元素后面的第一个p元素
$('div').parent(); //获取父元素
$('div').children(); // 获取所有子元素
$('div').siblings(); // 获取同级元素
$('div').closest('form'); // 获取离div最近的那个form父元素
$('.red').each(fn); // 遍历每个元素

删除元素

$('div').remove() // 删除元素，不保留被删除元素
$('div').drtach() // 删除元素，保留被删除元素
$('div').empty() // 清空元素内容

取值和赋值

jQuery 使用同一个函数，来完成取值（getter）和赋值（setter）

如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的text内容）

$div.html() ：读写html内容
$div.text()：读写text内容
$div.attr(‘title’, ?) ：读写属性
$div.css({color: ‘red’})：读写style
$div.width()：读写某个元素的宽度
$div.height()：读写某个元素的高度
$div.val() ：取出某个表单元素的值

$('h1').html(); // 取出h1的值
$('h1').html('Hello'); // 对h1进行赋值

链式操作

因为 jQuery 操作返回的是一个 jQuery 对象。所以可以将不同操作连在一起

$('div').find('h3').eq(2).html('Hello'); // 将 div 元素下的第三个 h3 的内容改为 Hello

jQuery 提供 .end() 方法使得结果集后退一步

$('div')
    .find('h3')
    .eq(2)
    .html('Hello')
    .end() // 退回到选中所有的h3元素的那一步
    .eq(0) // 选中第一个h3元素
    .html('World'); // 将它的内容改为World

移动元素

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

// 将 div元素 移动到 p元素后
$('div').insertAfter($('p'));  // 方法返回div元素
$('p').after($('div'));  // 方法返回p元素

事件

jQuery 把事件直接绑定在网页元素上

$('p').click(function(){
    alert('Hello');
});

使用 .bind() 为多个事件绑定同一个函数

$('input').bind(
    'click change', // 同时绑定click和change事件
    function() {
        alert('Hello');
    }
);

使用 .unbind() 解绑事件

$('p').unbind('click');

接收事件对象

$("p").click(function(e) {
    alert(e.type); // "click"
});
// 事件对象的属性与方法
event.pageX // 事件发生时，鼠标距离网页左上角的水平距离
event.pageY // 事件发生时，鼠标距离网页左上角的垂直距离
event.type // 事件的类型（比如click）
event.which // 按下了哪一个键

参考 jQuery设计思想