jQuery 初探

248 阅读1分钟

本文参考阮一峰老师的 jQuery设计思想 一文,部分代码也来自该文,请知悉。

一、jQuery 如何获取元素

1. 使用 CSS 选择器

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

2. 使用 jQuery 特有的表达式

$('a:first')           // 选择网页中第一个a元素
$('tr:odd')            // 选择表格的奇数行
$('#myForm :input')    // 选择表单中的input元素
$('div:visible')       //选择可见的div元素
$('div:gt(2)')         // 选择所有的div元素,除了前三个
$('div:animated')      // 选择当前处于动画状态的div元素

二、jQuery 的链式操作是怎样的

$('div').find('h3').eq(2).html('Hello')

三、jQuery 如何创建元素

$('<p>Hello</p>')
$('<li class="new">new list item</li>')

四、jQuery 如何移动元素

$('p').insertAfter($('div'))  // 把 p 元素插到 div 元素的后面
$('div').after($('p'))        // div 元素后面是 p 元素

$('div').insertBefore($('p')) // 把 div 元素插到 p 元素的前面
$('p').before($('div'))       // p 元素前面是 div 元素

$('p').appendTo($('div'))     // 把 p 元素从后面添加到 div 元素中
$('div').append($('p'))       // 在 div 元素的后面添加 p 元素

$('p').prependTo('div')       // 把 p 元素从前面添加到 div 元素中
$('div').prepend($('p'))      // 在 div 元素前面添加 p 元素

五、jQuery 如何修改元素的属性

$('div').attr('title', '哈哈哈')  // 设置 div 元素的 title 属性,属性值为 哈哈哈