image.png
認(rèn)識(shí)JQuery
- jQuery是什么：jQuery是JavaScript的一個(gè)函數(shù)庫(kù)，十分方便。
- jQuery對(duì)象和DOM對(duì)象關(guān)系：jQuery對(duì)象是使用$()包裝DOM對(duì)象后產(chǎn)生的對(duì)象。
1）、jQuery對(duì)象不能使用DOM對(duì)象的屬性和方法。
2）、jQuery對(duì)象是一個(gè)DOM數(shù)組對(duì)象。
3）、之間的相互轉(zhuǎn)換。
第一：jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象
Var $button = $(“button”); // jQuery對(duì)象
Var but = $button[0];&Var but = $button.get(0); // DOM對(duì)象
第二：DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象
var oDiv = document.getElementById("app"); // DOM對(duì)象
var $oDiv = $(oDiv); // jQuery對(duì)象
- JQuery代碼編寫(xiě)
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert($("#app").html());
});
$().ready(function() {
alert($("#app").html());
});
$(function() {
alert($("#app").html());
});
</script>
- JQuery多庫(kù)并存
<script src="https://cdn.bootcss.com/prototype/1.7.3/prototype.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery.noConflict(); // 將變量$的控制權(quán)移交給prototype.js
jQuery(document).ready(function() { // 使用jQuery
alert(jQuery("#app").html());
});
jQuery().ready(function() {
alert(jQuery("#app").html());
});
jQuery(function() {
alert(jQuery("#app").html());
});
</script>
jQuery選擇器（重點(diǎn)）
常用操作
找對(duì)象
父級(jí)元素：（parent、parents、.closest）
同級(jí)元素：（next、nextAll、prev、prevAll）
子元素：（children、find）注意里面的參數(shù)是元素的名稱(chēng)。
屬性操作
Val：（用來(lái)讀取或修改表單元素的value值）；
Attr：（attr()用于自定義屬性，attr所指的屬性是HTML標(biāo)簽屬性；在javascript中使用getAttribute、setAttribute）；
Text：（用來(lái)讀取或修改元素的純文本內(nèi)容；在javascript中使用innerText）；
Prop：（prop用于固有屬性。prop()最常見(jiàn)的用法就是選中所有復(fù)選框、取消選中所有復(fù)選框、反選）
Html：（用為讀取和修改元素的HTML標(biāo)簽；在javascript中使用innerHTML）方法的區(qū)別和使用？
總結(jié)：對(duì)標(biāo)簽內(nèi)的屬性使用attr來(lái)讀取和設(shè)置；對(duì)DOM對(duì)象固有的一些屬性，使用prop讀取和設(shè)置。
元素隱藏
type= "hidden"
style= "display: none"
style= " visibility: hidden"
區(qū)別：隱藏后是否還占用的頁(yè)面空間。
處于不可點(diǎn)擊狀態(tài)
readonly是文本框處于不可點(diǎn)擊狀態(tài)，但是可以提交value值。
disabled是文本框處于不可點(diǎn)擊狀態(tài)，但是不可以提交value值。
