关于jQuery的一些功能

242 阅读1分钟

jQuery是目前使用最广泛、寿命最长的JavaScript函数库。我们可以通过jQuery进行元素的获取、创建、移动、属性的修改以及链式操作。

 获取元素

$(document)    //选择整个文档对象
$('#id1')      //选择id名为id1的元素
$('div.red')   //选择class为red的div元素


$('a:first')    //选择网页中第一个a元素
$('tr:odd')     //选择表格的奇数行
$('#myForm:input')   //选择表单中的input元素

jQuery的基本思想就是选择某个网页的元素后,返回的不是元素本身,而是元素对象。然后对其进行其他操作。

链式操作

$('#test').find('.child').addClass('red').end().addClass('green')

分解:
$('#test')     //找到id为test元素
.find('.child')   //选择其中的child元素
.addClass('red')  //给这个元素的添加class=red
.end()     //退回这个节点,返回到第一步
.addClass('green')    //test元素添加class=green

创建元素

$('<p>hello</p>')

$('<div class='new'> hello </div>')

移动元素

//div元素移动到p元素的后面

$('div').insertAfter($('p'));


//p元素移动到div元素的前面

$('p').after($('div'));

修改元素属性

使用同样一个函数,传的参数不同,函数实现的功能也会不一样。这个叫做重载

$('h1').html()   //无参数,直接读h1的值
$('h1').html('hello')   //将hello放入到h1中