jQuery ??? DOM ??

???

JavaScript ????? ??? ? ?? ??? ??? ???. jQuery ???? ????? ??? ?? ??? ??? ?? ? ????. ??? ?? "<? ?? ?? ?? ??? ?? ??? ?? ? ????. ??? ?? ?? ???? ???? ????." a> ??", ??? ??? ????? jQuery ??? ???? ???? ???. jQuery ???? ???? ?? jQuery ???? ?? ??? ?????.

Dom ?? ? jQuery ?? ??

????? ????? API ??? ?? ? Dom ??? jQuery ?? ??? ???? ? ?? ??? ???? ???.

1. Dom ??

???? JavaScript ????? ??? ?? ?? Dom ??? ?? ?????.

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

??? ?? document.getElementById ???? ???? ID? ???? ?? Dom ??? ?????. document.getElementsByTagName ??? HTML ?? ??? ???? Dom ?? ???? ?????.

?? ??? ????? ??? ???? ?? ???? ??? ??? ??? ?????(?, ????? ??? ????? IE6? ??? ??) ??? ??? ??(Firefox)? ??? ? ????. ?? srcElement(IE6)? ???? ??? ???? Dom ??? ?????.

??? ?? ?? ?? Dom ?????. Dom ???? ??, div, ?? ?? ?? ??? ??? ????. Dom ???? ??? ??? ???? ????.

2.jQuery ?? ??

jQuery ?? ??? Dom ??? ????? ? ? ????. jQuery? ????? ???? ???? ?? ??? jQuery ?? ??? ??????. ?? ?? ??? ??? jQuery ?? ??? ???? ??:

var jQueryObject = $("#testDiv");

jQuery ?? ??? ??? ?? ?????. jQuery ?? ???? ??? ??? ??? ??? ????.

3. Dom ??? jQuery ??? ??

(1) Dom? jQuery ??? ???

jQuery?? ???? ??? ????? ?? jQuery ?? ??? ???? ???. ? ???? ??? jQuery ???? ???? ??? ?? jQuery ?? ??? ?? ??? ? ????.

$("#testDiv");

? ????? ??? ?? ???? ID? testDiv? ??? ??? ?????.

?? ??? ?? Dom ??? ?? ?????.

var div = document.getElementById("testDiv");

? ???? div? Dom ????? Dom ??? jQuery ?? ??? ??? ? ????.

var domToJQueryObject = $(div);

(2) jQuery ?? ?? to Dom ??

jQuery ?? ??? ?????? ???? ?? ? ?? ?? ??? ???? ? ????.

var domObject = $("#testDiv")[0];

???? ?? ???? ?? ? ?? jQuery ?? ??? ??? Dom ?????!

jQuery ?? Each()? ?? ??? ?? ?? ?????? ?? ???? ??? ?? Dom ??? ??? ? ????.

$("#testDiv").each(function() {
  alert(this)
});

????? ??? ?? ???? Dom ??? ???? jQuery ??? ? ??? ?????. ?? ??? ????:

$("#testDiv").each(function() {
  $(this).html("修改內(nèi)容")
});

??: ?? ?? ??? Dom ??? jQuery ??? ??? ??? ??? ??? ???. ??? ?? ??? ?? ?????. ? ?? ??? ?? ??? ????? ??? ? ???? ? ????.

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>  <script type="text/javascript"> window.onload = function(){ // 通過原生JS語法獲取id為php1的元素p var p = document.getElementById('php1'); // 將元素p在html中內(nèi)容改變 p.innerHTML = 'P1：php中文網(wǎng)是您自學(xué)php的正確途徑'; // 將元素p的內(nèi)容顏色改為紅色 p.style.color = 'red'; } </script>  <script type="text/javascript"> $(document).ready(function() { /** * 通過jQuery語法獲取id為php2的元素獲得一個jQuery對象 * 調(diào)用該對象的html()方法進(jìn)行更改內(nèi)容 * 調(diào)用該對象的css()方法進(jìn)行更改顏色樣式 */ var $p = $('#php2'); $p.html('P2：php中文網(wǎng)是您自學(xué)php的正確途徑').css('color','red'); }); </script> </head> <body> <p id="php1"></p> <p id="php2"></p> </body> </html>

?????? ???

????