快速了解jQuery的使用方法

发表于 更新于 分类于 ， 本文字数： 620 阅读时长 ≈ 2 分钟

目录

  • 一、jQuery如何获取元素
  • 二、jQuery的链式操作是怎么样的
  • 三、jQuery如何创建元素
  • 四、jQuery如何移动元素
  • 五、jQuery如何修改元素

一、jQuery如何获取元素

有两种方法

第一种使用CSS选择表达式方式：

1
2
3
4
5
6
7
8
9
10
11
// 选择整个文档的元素
$(document)	

// 选择ID为myID的网页元素
$('#myId')	

// 选择class为myClass的div元素
$('div.myClass') 

// 选择name属性等于first的input元素
$('input[name=first]')

第二种使用jQuery的表达式（https://api.jquery.com/category/selectors/）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//选择网页中第一个a元素
$('a:first') 

//选择表格的奇数行
$('tr:odd') 

// 选择表单中的input元素
$('#myForm :input') 

//选择可见的div元素
$('div:visible') 

// 选择所有的div元素，除了前三个
$('div:gt(2)') 

// 选择当前处于动画状态的div元素
$('div:animated')

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

链式操作简单来说就是直接在前面语句后面接着使用 <font style="color:#262626;">.</font> 来连接

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

上面这句话等于

1
2
3
4
5
6
7
8
9
10
// 找到div元素
$('div') 

// 选择其中的h3元素
$.find('h3') 
// 选择第3个h3元素
$.eq(2)

// 将它的内容改为Hello
$.html('Hello')

这么对比后是不是发现链式操作方便了很多

三、jQuery如何创建元素

在jQuery中创建元素只需要将html代码直接输入到参数内即可

1
2
3
4
5
$('<div>111</div>')

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

$('ul').append('<li>list item</li>')

四、jQuery如何移动元素

具体方法是

选择元素+操作方法+目标元素

具体操作方法有以下几种：

1
2
3
4
5
6
7
8
9
10
11
在现存元素的外部，从后面插入元素
.insertAfter()和.after()

在现存元素的外部，从前面插入元素
.insertBefore()和.before()

在现存元素的内部，从后面插入元素
.appendTo()和.append()

在现存元素的内部，从前面插入元素
.prependTo()和.prepend()

例如：

将div元素移动到p元素后面

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

五、jQuery如何修改元素

获取元素的值

1
2
// html()不带参数为取值
$('h1').html()

向元素赋值

1
2
// html()带参数为赋值
$('h1').html('Hello')

复制元素

1
2
// 格式为 需要复制的元素+.clone().appendTo+目标位置	
$( ".hello" ).clone().appendTo( ".goodbye" )

删除元素

1
2
// 直接在输入你要删除的元素节点+remove即可
$( ".hello" ).remove()