jQuery功能

1.获取元素

选择某个网页元素,然后对其进行某种操作。

选择表达式可以是CSS选择器:

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

也可以是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元素
$('div').next('p')//选择div元素后面的第1个p元素
$('div').parent()//选择div元素的父元素
$('div').closest('form')//选择离div最近的那个form父元素
$('div').children()//选择div的所有子元素
$('div').siblings()//选择div的同级元素

2.链式操作

选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来。比如:

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

分解

$('div')//找到div元素
    .find('h3')//选择其中的h3元素
    .eq(2)//选择第3个h3元素
    .html('Hello')//将它的内容改为Hello

end()方法可以使结果集后退一步:

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

3.创建、复制、删除元素

创建元素:

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

复制元素:

.clone()

删除元素:

.remove()//不保留被删除元素的事件

.detach()//保留被删除元素的事件,利于重新插入文档时使用

清空元素内容(不删除):

.empty()

4.移动元素

(1).insertAfter()

$('div').insertAfter($('p'))//将div元素插入到p元素后面

(2).after()

$('p').after($('div'))//把p元素加到div元素前面

一共有四对:

.insertAfter()和.after():在现存元素的外部,从后面插入元素
.insertBefore()和.before():在现存元素的外部,从前面插入元素
.appendTo()和.append():在现存元素的内部,从后面插入元素
.prependTo()和.prepend():在现存元素的内部,从前面插入元素

 

5.修改元素的属性

取值赋值二合一

$('h1').html();//没有参数,表示取出h1的值
$('h1').html('Hello');//表示将h1中的内容改为Hello

 

posted @ 2021-10-05 11:03  HQL97  阅读(27)  评论(0)    收藏  举报