一、java基礎-7_Java程式執行機制-編譯型&解釋型
jQuery
基礎概念
概念
JavaScript 原生DOM有些許不便:API不好記、設定事件不方便、呼叫繁瑣。
jQuery是第三方的javaScript框架。jQuery本質是一個js檔案,內部已經寫好了大量的函式用於進行快捷的DOM操作。jQuery旨在“Write Less,Do More”,它具有獨特的鏈式語法和短小清晰的多功能介面,具有高效靈活的CSS選擇器,並且可對CSS選擇器進行擴充套件,擁有便捷的外掛擴充套件機制和豐富的外掛。
目前國內用的比較多的是3.5.1版本,以及能夠支援IE8的1.11.1版本(從jQuery2.x開始,就不再支援IE8)。
引入
通過<script src="jQuery檔案地址"> </script>
<script src="jQuery檔案地址"> </script>
<script>
//jQuery程式碼
</script>
使用流程
- 引入jQuery
- 利用jQuery選擇器找到需要操作的HTML標籤
- 通過jQuery提供的函式完成DOM操作
注意點
如果頁面使用了jQuery,那麼用jQuery操作的HTML標籤就不能再使用原生的DOM API。比如innerHTML、appendChild、parentElement等。如果要用,那麼必須先完成jQuery標籤和原生DOM標籤的轉換。
獲取jQuery標籤及原生DOM標籤的切換
通過jQuery獲取頁面上的標籤
$("css選擇器");
//例子:
var $box = $('#box');//獲取id為box的HTML標籤
通過CSS選擇器去尋找匹配到的HTML標籤,會根據返回的個數自動判斷是返回一個元素或一個數組。
更多選擇器可查閱jQuery參考手冊 - 選擇器。
jQuery標籤和DOM標籤切換
-
jQuery轉原生DOM
var 原生dom標籤變數名 = jQuery標籤變數名.get(0); //例子: var $box = $('#box'); //把jquery 轉為原生 DOM 標籤 var box = $box.get(0); console.log($box) console.log(box);
-
原生DOM轉jQuery
var jQuery標籤變數名 = $(原生DOM標籤變數名); //例子: var box = document.querySelector('#box'); var $box = $(box); console.log($box);
基本操作
內容獲取/修改
-
html()
:用於獲取或設定某個標籤的內部HTML程式碼,類似於原生中的innerHTML。 -
text()
:獲取或設定標籤的內部文字,類似於原生的innerText。 -
val()
:獲取或設定表單元素的內容,類似於原生的value。//獲取 jQuery標籤變數名.html(); jQuery標籤變數名.text(); jQuery標籤變數名.val(); //設定 jQuery標籤變數名.html("新內容"); jQuery標籤變數名.text("新內容"); jQuery標籤變數名.val("新內容");
-
例子:
<div> <p>這是div中的 p標籤</p> </div> <input value="123">
//獲取 var divText = $('div').text(); var divHTML = $('div').html(); var inputValue= $('input').val(); //設定 $('div').text('新內容'); $('div').html("<a href='#'>百度一下</a>"); $('input').val("456");
屬性獲取/修改
-
attr()
:獲取或設定HTML標籤的某個屬性。 -
prop()
:獲取或設定HTML標籤的某個屬性,跟attr()
相比,prop()
適用於標籤的內建屬性,而attr()
更適用於使用者自定義屬性。 -
removeProp()
:刪除某個指定的屬性。 -
removeAttr()
:刪除某個指定的屬性(推薦使用)。 -
addClass()
:給某個標籤追加一個class。 -
removeClass()
:刪除某個標籤的指定class。jQuery標籤變數名.attr("屬性名"); jQuery標籤變數名.attr("屬性名", "屬性值"); jQuery標籤變數名.prop("屬性名"); jQuery標籤變數名.prop("屬性名", "屬性值"); jQuery標籤變數名.removeProp("屬性名"); jQuery標籤變數名.removeAttr("屬性名"); jQuery標籤變數名.addclass("class名"); jQuery標籤變數名.removeclass("class名");
-
例子:
<div class="item"> <p>這是div中的 p標籤</p> </div> <input value="123">
//獲取 var value1 = $('input').attr('value') var value2 = $('input').prop('value') //設定 $('div').addClass('box'); $('div').removeClass('item');
新增/刪除
新增
-
append()
:在某個標籤之後插入一個新標籤,新標籤會作為最後一個子標籤,類似於原生DOM的appendChild
。 -
before()
:在某個標籤之前插入一個新標籤,新標籤會作為上一個兄弟標籤。 -
after()
:在某個標籤之後插入一個新標籤,新標籤會作為下一個兄弟標籤。jQuery標籤變數名.append("新標籤的HTML程式碼"); jQuery標籤變數名.before("新標籤的HTML程式碼"); jQuery標籤變數名.after("新標籤的HTML程式碼");
刪除
-
remove()
:刪除找到的所有標籤。jQuery標籤變數名.remove();
- 如果找到多個標籤,則它們都會被刪除。
獲取子/兄弟/父標籤
獲取子標籤
-
children()
:獲取某個標籤的所有直接子標籤。 -
find('css選擇器')
:根據CSS選擇器獲取獲取某個標籤滿足條件的所有後代標籤。
獲取兄弟標籤
-
prev()
:獲取某個標籤的上一兄弟標籤。 -
next()
:獲取某個標籤的下一兄弟標籤。
獲取父標籤
-
parent()
:獲取某個標籤的直接父標籤。 -
parents('css選擇器')
:獲取某個標籤的某個祖先標籤,具體是通過CSS選擇器來指代。
jQuery標籤變數名.parent();
jQuery標籤變數名.parents(CSS選擇器);
jQuery標籤變數名.prev();
jQuery標籤變數名.next();
jQuery標籤變數名.children();
jQuery標籤變數名.find(CSS選擇器);
遍歷
-
first()
:獲取遍歷標籤中的第一個。 -
last()
:獲取遍歷標籤中的最後一個。 -
each()
:對jQuery標籤的快捷遍歷。 -
eq(i)
:獲取找到標籤中指定下標的標籤,即第i個jQuery標籤。$jQuery待遍歷標籤變數名.first(); $jQuery待遍歷標籤變數名.last(); $jQuery待遍歷標籤變數名.each(function(index){}); $jQuery待遍歷標籤變數名.eq(i);
修改CSS
css()
//語法:
//設定
jQuery標籤變數名.css('CSS屬性名', 'CSS屬性值');
//批量設定css
jQuery標籤變數名.css({
'CSS屬性名1': 'CSS屬性值1',
'CSS屬性名2': 'CSS屬性值2',
'CSS屬性名3': 'CSS屬性值3',
});
//獲取
jQuery標籤變數名.css('CSS屬性名');
動畫
內建動畫
淡入/淡出
-
fadeIn()
:淡入 -
fadeOut()
:淡出
下拉/上滑
-
slideDown()
:下拉 -
slideUp()
:上滑
jQuery標籤變數名.slideDown(動畫毫秒時間);
jQuery標籤變數名.slideUp(動畫毫秒時間);
jQuery標籤變數名.fadeIn(動畫毫秒時間);
jQuery標籤變數名.fadeOut(動畫毫秒時間);
- 如果對同一個標籤設定了多個動畫,按照動畫程式碼的書寫順序依次執行
自定義動畫
animate()
:使用者自定義動畫
jQuery標籤變數名.animate({
"css屬性名1": "css屬性值1",
"css屬性名2": "css屬性值2",
"css屬性名n": "css屬性值n"
}, 動畫持續毫秒時間);
- animate基本上只支援跟位置和尺寸相關的動畫,其他的基本都不支援。
- 如果要顏色的動畫,可以使用css3,用JavaScript來切換class達到控制動畫的目的。
動畫結束後執行js程式碼
jQuery的每個動畫函式都可以支援額外的引數,該引數必須是一個函式,用於表示在動畫結束後要執行的程式碼。
jQuery標籤變數名.動畫函式名(其他引數, function(){
//動畫結束後要執行的程式碼
});
事件
on()
on()
預設使用事件委託。
$父標籤標籤變數名.on('事件名', '要執行事件的標籤CSS選擇器', function(e){
//觸發事件時要執行的程式碼
});
例子:
<div id='box'><div>
$('body').on('click', '#box', function(e){
//當id為box的標籤發生點選事件要執行的程式碼
});
- this仍為DOM原生元素,如果轉為jQuery元素需使用$(this)。
其它快捷事件方法
不推薦使用,這些快捷事件方法不適用於用js程式碼新增的標籤,而on()
則適用當前及未來的元素,故建議使用on()
。
click
hover
dblclick
更多快捷事件方法參見jQuery 參考手冊 - 事件。
其他API
-
show()
:等同於css('display','block')
,顯示某個標籤。 -
hide()
:等同於css('display','none')
,隱藏某個標籤。jQuery標籤變數名.show(); jQuery標籤變數名.hide();
鏈式呼叫
概念
如果需要對同一個標籤執行多句的jQuery程式碼,則需要不斷的獲取jQuery標籤,造成程式碼量過多的問題。採用鏈式呼叫可將對同一個標籤的多句程式碼整合成一句,達到程式碼整齊並減少一定的程式碼量的效果。
語法
jQuery標籤變數名.函式名1().函式名2().函式名3()....函式名n();
例子:
$('div').css('width','300px').animate({"margin-left":"300px"},1000).text('123');
$('div').css('width','300px');
- 以上的每個函式都是接著前一個函式的執行結果繼續執行。