jQuery总结
近来学习了jQuery,也看了阮一峰的博客,这里,简单总结一下jQuery的用法。
一、获取元素
jQuery获取元素,往往就是把一个选择表达式,放进构造函数jQuery(),然后就可以得到被选中的元素。如下例子:
$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素
二、jQuery的链式操作
链式操作,是jQuery的重要设计思想,就是最终选中元素以后,可以对它进行一些列操作,并且所有操作可以连接在一起,以链条的形式写出来。如下例子:
$('div').find('h3').eq(2).html('Hello');
也可以这样:
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
这是jQuery最方便的地方。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。
另外,jQuery还提供了了.end()方法,使得结果集可以后退一步:
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World
三、jQuery创建元素
jQuery创建元素很简单,只要把新元素传入jQuery的构造函数就可以了。如下例子:
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
四、jQuery移动元素
jQuery有两组方法,可以移动元素。分别是直接移动元素和移动其他元素。
假定我们选中了一个div元素,需要把它移动到p元素后面。
第一种方法,是使用.insertAfter(),把div元素移动到p元素后面:
$('div').insertAfter($('p'));
第二种方法,是使用.after(),把p元素加到div元素前面:
$('p').after($('div'));
两种方法效果一样,但是,实际上返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。
使用这种模式的操作方法,一共有四队:
.insertAfter()和.after():在现存元素的外部,从后面插入元素
.insertBefore()和.before():在现存元素的外部,从前面插入元素
.appendTo()和.append():在现存元素的内部,从后面插入元素
.prependTo()和.prepend():在现存元素的内部,从前面插入元素
五、jQuery修改元素的属性
jQuery修改元素的属性也很简单,使用.css()或者.style就可以了,一般使用.style更好。
文章链接:https://www.lilianhua.com/jquery-summary.html
English (US)
Español (ES)
Português (PT)
Français (CA)
Español (MX)
Español (VE)
Español (CO)
Español (AR)
Português (BR)
Quechua (PE)
Guaraní (PY)
简体中文 (ZH)
繁體中文 (HK)
日本語 (JP)
한국어 (KR)
हिन्दी (HI)
Pilipino (PH)
ไทย (TH)
Tiếng Việt (VN)
Bahasa Melayu (MY)
Bahasa Indonesia (ID)
বাংলা (BD)
اردو (PK)
සිංහල (LK)
ភាសាខ្មែរ (KH)
English (UK)
Français (FR)
Deutsch (DE)
Italiano (IT)
Русский (RU)
Nederlands (NL)
Türkçe (TR)
Polski (PL)
Svenska (SE)
Norsk (NO)
Dansk (DK)
Suomi (FI)
Ελληνικά (GR)
Čeština (CZ)
Magyar (HU)
Română (RO)
Български (BG)
Српски (RS)
Українська (UA)


