jQuery 如何获取元素

jQuery 获取元素的方式通常是将一个选择表达式放入构造函数 jQuery()（简写为$）中，这样我们就得到了被选中的元素。

jquery(document)        //选择整个文档对象
$(document)             //选择整个文档对象
$('#ThisIsId')          //选择 id 为 ThisIsId 的网页元素
$('div.ThisIsClass')    //选择 class 为 ThisIsClass 的div元素
$('input[name=first]')  //选择 name 属性等于 first 的 input 元素
$('input:radio') // 查找所有单选按钮
$('a:first') // 选择第一个a元素
$('#testId').get(0) // 获取ID为testId的第一个元素

jQuery 的链式操作

$(选择器)用于获取对应的元素，但是它却不返回这些元素。相反，它返回一个 jQuery 构造出来的对象，这个对象包含了可以操作这些元素的 API。在这些 API 中，每一步的 jQuery 操作，返回的都是一个 jQuery 对象，所以不同操作可以连在一起。 此外，jQuery 还提供了 .end() 方法

$('div')
    .find('h3')
    .eq(2)
    .html('hello')
    .end() // 退回到选中的所有h3元素那一步
    .eq(0) // 选中第一个元素
    .html('World')

jQuery 如何创建元素

jQuery 创建元素只需要将新元素直接传入 jQuery 的构造函数中就行

$('<p>Hello</p>')                       //创建一个内容为 Hello 的 p 标签
$('<li class="newClass">New List</li>') //创建内容为 New List，class 为 newClass 的 li 标签
$('ul').append('<li>New Li</li>')       //创建 ul 标签并将内容为 New Li 的 li 标签作为 ul 标签的子元素

jQuery 如何移动元素

jQuery 移动元素有两种方法，一是直接移动目标元素，二是通过移动其他元素来间接让目标元素到达我们想要的位置。

下面通过将一个 div 元素移动到 p 元素的后面的例子来说明这两种方法。

//使用 .insertAfter() 将 div 元素移动到 p 元素后面
$('div').insertAfter($('p')
//使用 .after 将 p 元素加到 div 元素前面
$('p').after($('div')
//是使用 .appendTo() ，把 div 移动到 body 后面
$div.appendTo(document.body)
//使用 .append() ，把 body 插入到 div 前面
$(body).append($div)

jQuery 如何修改元素的属性

• .attr() ：获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性

console.log($('div').attr('id'))    //将第一个 div 元素的 id 的值打印出来
$('div').attr('class','newClass')   //给每一个 div 元素设置一个值为 newClass 的 class

• .removeAttr() ：为匹配的元素集合中的每个元素移除一个属性

$('div').removeAttr('class')    //将每一个 div 元素的 class 属性移除掉

• .prop() ：获取匹配的元素集中第一个元素的属性值或设置每一个匹配元素的一个或多个属性

$('div').prop('id')                 //获取第一个 div 的 id 的值
$('div').prop('class','newClass')   //将每一个 div 的 class 设置为 newClass

$div.text(?) // 括号内不加内容只为读文本内容，加内容修改文本内容
$div.html(?) // 括号内不加内容只为读 html 内容，加内容修改为html 内容