1弥锄、
如何引入jq語句
<script type="text/javascript">
$(document).ready(function(){
// 開始寫 jQuery 代碼...
});
</script>
簡潔寫法(與以上寫法效果相同):
$(function(){
// 開始寫 jQuery 代碼...
});
2账月、
<!-- 使用JS原生語法 -->
<script type="text/javascript">
window.onload = function(){
var p = document.getElementById('imooc1');
p.innerHTML = 'P1:您好疆导!通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑';
p.style.color = 'red';
}
</script>
<!-- 使用jQuery語法 -->
<script type="text/javascript">
$(document).ready(function() {
var $p = $('#imooc2');
$p.html('P2:您好赁项!通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑').css('color','red');
});
</script>
3、
jQuery是一個(gè)類數(shù)組對象,而DOM對象就是一個(gè)單獨(dú)的DOM元素悠菜。
如何把jQuery對象轉(zhuǎn)成DOM對象舰攒? get()方法
<script type="text/javascript">
var $div = $('div'); //jQuery對象
var div = $div.get(0) //通過get方法,轉(zhuǎn)化成DOM對象
/*var div = $div[0] //轉(zhuǎn)化成DOM對象*/
div.style.color = 'red'; //操作dom對象的屬性
</script>
4悔醋、
DOM對象轉(zhuǎn)化成jQuery對象: $(div)
<script type="text/javascript">
var div = document.getElementsByTagName('div'); //dom對象
var $div = $(div); //將dom節(jié)點(diǎn)div轉(zhuǎn)化為$div的jquery對象
var $first = $div.first(); //找到第一個(gè)div元素
$first.css('color', 'red'); //給第一個(gè)元素設(shè)置顏色
</script>
5摩窃、jQuery選擇器之層級選擇器
http://js.jirengu.com/vufujurabo/1/
$( "parent > child" ) 子選擇器:選擇所有指定“parent”元素中指定的"child"的直接子元素。
$("ancestor descendant") 后代選擇器:選擇給定的祖先元素的所有后代元素, 一個(gè)元素的后代可能是該元素的一個(gè)孩子芬骄,孫子猾愿,曾孫等
$("prev + next") 相鄰兄弟選擇器:選擇所有緊接在“prev”元素后的“next”元素
$("prev ~ siblings") 一般兄弟選擇器:匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素账阻,并匹配過濾“siblings”選擇器
6蒂秘、jQuery選擇器之基本篩選選擇器
http://js.jirengu.com/lezaterimi/1/
7、jQuery選擇器之內(nèi)容篩選選擇器
http://js.jirengu.com/jegezimiqi/1/
8淘太、姻僧??
9琴儿、段化??jQuery選擇器之屬性篩選選擇器
在這么多屬性選擇器中[attr="value"]和[attr="value"]是最實(shí)用的
[attr="value"]能幫我們定位不同類型的元素造成,特別是表單form元素的操作,比如說input[type="text"],input[type="checkbox"]等
[attr="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件
http://js.jirengu.com/zequwovuke/1/
10雄嚣、jQuery選擇器之子元素篩選選擇器
注意事項(xiàng):
:first只匹配一個(gè)單獨(dú)的元素晒屎,但是:first-child選擇器可以匹配多個(gè):即為每個(gè)父級元素匹配第一個(gè)子元素。這相當(dāng)于:nth-child(1)
:last 只匹配一個(gè)單獨(dú)的元素缓升, :last-child 選擇器可以匹配多個(gè)元素:即鼓鲁,為每個(gè)父級元素匹配最后一個(gè)子元素
如果子元素只有一個(gè)的話,:first-child與:last-child是同一個(gè)
:only-child匹配某個(gè)元素是父元素中唯一的子元素港谊,就是說當(dāng)前子元素是父元素中唯一的元素骇吭,則匹配
jQuery實(shí)現(xiàn):nth-child(n)是嚴(yán)格來自CSS規(guī)范,所以n值是“索引”歧寺,也就是說燥狰,從1開始計(jì)數(shù),:nth-child(index)從1開始的斜筐,而eq(index)是從0開始的
nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計(jì)算龙致,后者從后往前計(jì)算
http://js.jirengu.com/natuxojaka/1/
11、jQuery選擇器之表單元素選擇器
http://js.jirengu.com/rozewivuma/1/
12顷链、jQuery選擇器之表單對象屬性篩選選擇器
注意事項(xiàng):
選擇器適用于復(fù)選框和單選框目代,對于下拉框元素, 使用 :selected 選擇器
在某些瀏覽器中,選擇器:checked可能會錯(cuò)誤選取到<option>元素,所以保險(xiǎn)起見換用選擇器input:checked榛了,確保只會選取<input>元素
http://js.jirengu.com/mocucafudo/1/
13在讶、jQuery選擇器之特殊選擇器this
this,表示當(dāng)前的上下文對象是一個(gè)html對象霜大,可以調(diào)用html對象所擁有的屬性和方法真朗。
$(this),代表的上下文對象是一個(gè)jquery的上下文對象,可以調(diào)用jQuery的方法和屬性值僧诚。
http://js.jirengu.com/petubuzefo/1/