jQuery HTML / CSS 方法

面的表格列出了所有用于處理 HTML 和 CSS 的 jQuery 方法。

下面的方法適用于 HTML 和 XML 文檔。除了：html() 方法。

方法	描述
addClass()	向被選元素添加一個(gè)或多個(gè)類名
after()	在被選元素后插入內(nèi)容
append()	在被選元素的結(jié)尾插入內(nèi)容
appendTo()	在被選元素的結(jié)尾插入 HTML 元素
attr()	設(shè)置或返回被選元素的屬性/值
before()	在被選元素前插入內(nèi)容
clone()	生成被選元素的副本
css()	為被選元素設(shè)置或返回一個(gè)或多個(gè)樣式屬性
detach()	移除被選元素（保留數(shù)據(jù)和事件）
empty()	從被選元素移除所有子節(jié)點(diǎn)和內(nèi)容
hasClass()	檢查被選元素是否包含指定的 class 名稱
height()	設(shè)置或返回被選元素的高度
html()	設(shè)置或返回被選元素的內(nèi)容
innerHeight()	返回元素的高度（包含 padding，不包含 border）
innerWidth()	返回元素的寬度（包含 padding，不包含 border）
insertAfter()	在被選元素后插入 HTML 元素
insertBefore()	在被選元素前插入 HTML 元素
offset()	設(shè)置或返回被選元素的偏移坐標(biāo)（相對(duì)于文檔）
offsetParent()	返回第一個(gè)定位的祖先元素
outerHeight()	返回元素的高度（包含 padding 和 border）
outerWidth()	返回元素的寬度（包含 padding 和 border）
position()	返回元素的位置（相對(duì)于父元素）
prepend()	在被選元素的開(kāi)頭插入內(nèi)容
prependTo()	在被選元素的開(kāi)頭插入 HTML 元素
prop()	設(shè)置或返回被選元素的屬性/值
remove()	移除被選元素（包含數(shù)據(jù)和事件）
removeAttr()	從被選元素移除一個(gè)或多個(gè)屬性
removeClass()	從被選元素移除一個(gè)或多個(gè)類
removeProp()	移除通過(guò) prop() 方法設(shè)置的屬性
replaceAll()	把被選元素替換為新的 HTML 元素
replaceWith()	把被選元素替換為新的內(nèi)容
scrollLeft()	設(shè)置或返回被選元素的水平滾動(dòng)條位置
scrollTop()	設(shè)置或返回被選元素的垂直滾動(dòng)條位置
text()	設(shè)置或返回被選元素的文本內(nèi)容
toggleClass()	在被選元素中添加/移除一個(gè)或多個(gè)類之間切換
unwrap()	移除被選元素的父元素
val()	設(shè)置或返回被選元素的屬性值（針對(duì)表單元素）
width()	設(shè)置或返回被選元素的寬度
wrap()	在每個(gè)被選元素的周圍用 HTML 元素包裹起來(lái)
wrapAll()	在所有被選元素的周圍用 HTML 元素包裹起來(lái)
wrapInner()	在每個(gè)被選元素的內(nèi)容周圍用 HTML 元素包裹起來(lái)
$.escapeSelector()	轉(zhuǎn)義CSS選擇器中有特殊意義的字符或字符串
$.cssHooks	提供了一種方法通過(guò)定義函數(shù)來(lái)獲取和設(shè)置特定的CSS值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

query完全繼承了CSS的操作風(fēng)格，使用jquery選擇器有一些注意事項(xiàng)。

1.選擇器中含有特殊符號(hào)，比如.#[(^*$等

由于這些符號(hào)在jquery選擇器中是有特殊含義的，所以不能直接使用，需要轉(zhuǎn)義符進(jìn)行轉(zhuǎn)義。
HTML代碼如下：
<div id="id.a">aa</div>
<div id="id#b">bb</div>
<div id="id[1]">cc</div>
由于上述元素的id中含有特殊字符，使用jquery選擇器時(shí)必須通過(guò)轉(zhuǎn)義符進(jìn)行轉(zhuǎn)義。
$('#id\.a');//轉(zhuǎn)義特殊字符“.”
$('#id\#b');//轉(zhuǎn)義特殊字符“#”
$('#id\[1\]'); //轉(zhuǎn)義特殊字符“[]”

2.屬性選擇器的@

1.1.0版本的屬性選擇器中有使用@，從1.3.1以后的版本中不再使用@，這一點(diǎn)需要注意。

3.選擇器中含有空格

選擇器中的空格往往表示的是后代選擇器，不加空格表示的是對(duì)元素進(jìn)行的過(guò)濾操作等，操作的是元素本身。在實(shí)際的使用過(guò)程中，有空格和沒(méi)有空格會(huì)取得截然不同的結(jié)果，這一點(diǎn)尤其需要注意。

實(shí)例代碼：

運(yùn)行結(jié)果：

以上即為使用jquery選擇器需要注意的一些問(wèn)題，需要在實(shí)際的使用過(guò)程中慢慢體會(huì)。

了執(zhí)行Javascript，需要在HTML文件內(nèi)以特定的方式書寫JavaScript的代碼，JavaScript的書寫方法有多種，其執(zhí)行的流程也各不相同：

1 <script>標(biāo)簽嵌入

此種嵌入方法無(wú)法操作<script>之后的DOM元素。因?yàn)?lt;script>之后的DOM元素還未構(gòu)造，因此在<script>標(biāo)簽內(nèi)就無(wú)法取得位于其后的DOM元素。

2 讀取外部JavaScript文件

此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行，async可以異步執(zhí)行。

3 onload嵌入

此種嵌入方法在頁(yè)面讀取完后再對(duì)其執(zhí)行，所以可以對(duì)所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

當(dāng)window.onload事件觸發(fā)時(shí)，頁(yè)面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。

//window.onload不能同時(shí)編寫多個(gè)。
//以下代碼無(wú)法正確執(zhí)行，結(jié)果只輸出第二個(gè)。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同時(shí)編寫多個(gè)
//結(jié)果兩次都輸出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些許區(qū)別：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，結(jié)果為：

"DOMContentLoaded"
"bodyonload"

說(shuō)明body中的onload會(huì)覆蓋window.onload

在chrome下，結(jié)果為：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代碼移到最下面，結(jié)果又會(huì)是什么樣呢？

chrome和IE10、FireFox的結(jié)果竟然是一樣的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 誰(shuí)在下面就是誰(shuí)覆蓋誰(shuí)，只會(huì)執(zhí)行后面的那個(gè)。

4 DOM ContentLoaded嵌入

onload方法可能需要等待時(shí)間，而本方法可以在完成HTML解析后發(fā)生的事件，減少等待時(shí)間。

在chrome、IE10和FireFox中，執(zhí)行結(jié)果是：DOMContentLoaded然后才是onload的輸出。所以說(shuō)一般情況下，DOMContentLoaded事件要在window.onload之前執(zhí)行，當(dāng)DOM樹(shù)構(gòu)建完成的時(shí)候就會(huì)執(zhí)行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是個(gè)jQuery使用者，你可能會(huì)經(jīng)常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件

5 動(dòng)態(tài)載入JavaScript文件

5.1 使用原生js方法

動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并指定script的src屬性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

還可以使用同樣的原理動(dòng)態(tài)加載css文件，只不過(guò)插入的的父節(jié)點(diǎn)是head標(biāo)簽。

5.2 使用document.write/writeln(）方式

該種方式可以實(shí)現(xiàn)js文件的動(dòng)態(tài)加載，原理就是在重寫文檔流，這種方式會(huì)導(dǎo)致整個(gè)頁(yè)面重繪。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的轉(zhuǎn)義。

5.3 使用jQuery

使用getScript(url,callback)方法實(shí)現(xiàn)動(dòng)態(tài)加載js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

在線咨詢

上一篇：Power Query抓取網(wǎng)絡(luò)數(shù)據(jù)的方法，CSV格式取URL
下一篇：Pandas庫(kù)常用方法、函數(shù)集合

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商