整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
面的表格列出了所有用于處理 HTML 和 CSS 的 jQuery 方法。
下面的方法適用于 HTML 和 XML 文檔。除了：html() 方法。
| 方法 | 描述 |
|---|---|
| addClass() | 向被選元素添加一個或多個類名 |
| after() | 在被選元素后插入內容 |
| append() | 在被選元素的結尾插入內容 |
| appendTo() | 在被選元素的結尾插入 HTML 元素 |
| attr() | 設置或返回被選元素的屬性/值 |
| before() | 在被選元素前插入內容 |
| clone() | 生成被選元素的副本 |
| css() | 為被選元素設置或返回一個或多個樣式屬性 |
| detach() | 移除被選元素（保留數據和事件） |
| empty() | 從被選元素移除所有子節點和內容 |
| hasClass() | 檢查被選元素是否包含指定的 class 名稱 |
| height() | 設置或返回被選元素的高度 |
| html() | 設置或返回被選元素的內容 |
| innerHeight() | 返回元素的高度（包含 padding，不包含 border） |
| innerWidth() | 返回元素的寬度（包含 padding，不包含 border） |
| insertAfter() | 在被選元素后插入 HTML 元素 |
| insertBefore() | 在被選元素前插入 HTML 元素 |
| offset() | 設置或返回被選元素的偏移坐標（相對于文檔） |
| offsetParent() | 返回第一個定位的祖先元素 |
| outerHeight() | 返回元素的高度（包含 padding 和 border） |
| outerWidth() | 返回元素的寬度（包含 padding 和 border） |
| position() | 返回元素的位置（相對于父元素） |
| prepend() | 在被選元素的開頭插入內容 |
| prependTo() | 在被選元素的開頭插入 HTML 元素 |
| prop() | 設置或返回被選元素的屬性/值 |
| remove() | 移除被選元素（包含數據和事件） |
| removeAttr() | 從被選元素移除一個或多個屬性 |
| removeClass() | 從被選元素移除一個或多個類 |
| removeProp() | 移除通過 prop() 方法設置的屬性 |
| replaceAll() | 把被選元素替換為新的 HTML 元素 |
| replaceWith() | 把被選元素替換為新的內容 |
| scrollLeft() | 設置或返回被選元素的水平滾動條位置 |
| scrollTop() | 設置或返回被選元素的垂直滾動條位置 |
| text() | 設置或返回被選元素的文本內容 |
| toggleClass() | 在被選元素中添加/移除一個或多個類之間切換 |
| unwrap() | 移除被選元素的父元素 |
| val() | 設置或返回被選元素的屬性值（針對表單元素） |
| width() | 設置或返回被選元素的寬度 |
| wrap() | 在每個被選元素的周圍用 HTML 元素包裹起來 |
| wrapAll() | 在所有被選元素的周圍用 HTML 元素包裹起來 |
| wrapInner() | 在每個被選元素的內容周圍用 HTML 元素包裹起來 |
| $.escapeSelector() | 轉義CSS選擇器中有特殊意義的字符或字符串 |
| $.cssHooks | 提供了一種方法通過定義函數來獲取和設置特定的CSS值 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
query完全繼承了CSS的操作風格，使用jquery選擇器有一些注意事項。
由于這些符號在jquery選擇器中是有特殊含義的，所以不能直接使用，需要轉義符進行轉義。
HTML代碼如下：
<div id="id.a">aa</div>
<div id="id#b">bb</div>
<div id="id[1]">cc</div>
由于上述元素的id中含有特殊字符，使用jquery選擇器時必須通過轉義符進行轉義。
$('#id\.a');//轉義特殊字符“.”
$('#id\#b');//轉義特殊字符“#”
$('#id\[1\]'); //轉義特殊字符“[]”
1.1.0版本的屬性選擇器中有使用@，從1.3.1以后的版本中不再使用@，這一點需要注意。
選擇器中的空格往往表示的是后代選擇器，不加空格表示的是對元素進行的過濾操作等，操作的是元素本身。在實際的使用過程中，有空格和沒有空格會取得截然不同的結果，這一點尤其需要注意。
實例代碼：
運行結果：
以上即為使用jquery選擇器需要注意的一些問題，需要在實際的使用過程中慢慢體會。
了執行Javascript，需要在HTML文件內以特定的方式書寫JavaScript的代碼，JavaScript的書寫方法有多種，其執行的流程也各不相同：
此種嵌入方法無法操作<script>之后的DOM元素。因為<script>之后的DOM元素還未構造，因此在<script>標簽內就無法取得位于其后的DOM元素。
此種嵌入方法可以指定defer、async屬性。defer可以推遲執行，async可以異步執行。
此種嵌入方法在頁面讀取完后再對其執行，所以可以對所有的DOM元素操作。
<body onload="alert('hello')">
window.onload = function(){alert('hello');};當window.onload事件觸發時，頁面上所有的DOM、樣式表、腳本、圖片、flash都已經加載完成了。
//window.onload不能同時編寫多個。
//以下代碼無法正確執行，結果只輸出第二個。
window.onload = function(){
alert("test1");
};
window.onload = function(){
alert("test2");
};
//$(document).ready()能同時編寫多個
//結果兩次都輸出
$(document).ready(function(){
alert("Hello World");
});
$(document).ready(function(){
alert("Hello again");
}); window.onload和body中onload也有些許區別：
<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下，結果為 ：
"DOMContentLoaded"
"bodyonload"
說明body中的onload會覆蓋window.onload
在chrome下，結果為：
DOMContentLoaded
window.onload
bodyonload
然后，如果把javascript代碼移到最下面，結果又會是什么樣呢？
chrome和IE10、FireFox的結果竟然是一樣的：
DOMContentLoaded
window.onload
IE 10、Fire Fox可以理解，window.on load和body中的 on load 誰在下面就是誰覆蓋誰，只會執行后面的那個。
onload方法可能需要等待時間，而本方法可以在完成HTML解析后發生的事件，減少等待時間。
在chrome、IE10和FireFox中，執行結果是：DOMContentLoaded然后才是onload的輸出。所以說一般情況下，DOMContentLoaded事件要在window.onload之前執行，當DOM樹構建完成的時候就會執行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>如果你是個jQuery使用者，你可能會經常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件
5.1 使用原生js方法
動態創建script標簽，并指定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');
});還可以使用同樣的原理動態加載css文件，只不過插入的的父節點是head標簽。
5.2 使用document.write/writeln(）方式
該種方式可以實現js文件的動態加載，原理就是在重寫文檔流，這種方式會導致整個頁面重繪。
document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
需要注意的是特殊字符的轉義。
5.3 使用jQuery
使用getScript(url,callback)方法實現動態加載js文件
$.getScript('test.js',function(){
alert('done');
});－End－
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
