整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
面的表格列出了所有用于處理 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)（相對于文檔） |
| offsetParent() | 返回第一個(gè)定位的祖先元素 |
| outerHeight() | 返回元素的高度（包含 padding 和 border） |
| outerWidth() | 返回元素的寬度（包含 padding 和 border） |
| position() | 返回元素的位置（相對于父元素） |
| prepend() | 在被選元素的開頭插入內(nèi)容 |
| prependTo() | 在被選元素的開頭插入 HTML 元素 |
| prop() | 設(shè)置或返回被選元素的屬性/值 |
| remove() | 移除被選元素（包含數(shù)據(jù)和事件） |
| removeAttr() | 從被選元素移除一個(gè)或多個(gè)屬性 |
| removeClass() | 從被選元素移除一個(gè)或多個(gè)類 |
| removeProp() | 移除通過 prop() 方法設(shè)置的屬性 |
| replaceAll() | 把被選元素替換為新的 HTML 元素 |
| replaceWith() | 把被選元素替換為新的內(nèi)容 |
| scrollLeft() | 設(shè)置或返回被選元素的水平滾動條位置 |
| scrollTop() | 設(shè)置或返回被選元素的垂直滾動條位置 |
| text() | 設(shè)置或返回被選元素的文本內(nèi)容 |
| toggleClass() | 在被選元素中添加/移除一個(gè)或多個(gè)類之間切換 |
| unwrap() | 移除被選元素的父元素 |
| val() | 設(shè)置或返回被選元素的屬性值（針對表單元素） |
| width() | 設(shè)置或返回被選元素的寬度 |
| wrap() | 在每個(gè)被選元素的周圍用 HTML 元素包裹起來 |
| wrapAll() | 在所有被選元素的周圍用 HTML 元素包裹起來 |
| wrapInner() | 在每個(gè)被選元素的內(nèi)容周圍用 HTML 元素包裹起來 |
| $.escapeSelector() | 轉(zhuǎn)義CSS選擇器中有特殊意義的字符或字符串 |
| $.cssHooks | 提供了一種方法通過定義函數(shù)來獲取和設(shè)置特定的CSS值 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
測試 JavaScript 框架庫 - jQuery
引用 jQuery
如需測試 JavaScript 庫，您需要在網(wǎng)頁中引用它。
為了引用某個(gè)庫，請使用 <script> 標(biāo)簽，其 src 屬性設(shè)置為庫的 URL：
引用 jQuery
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
</body>
</html>
jQuery 描述
主要的 jQuery 函數(shù)是 $() 函數(shù)（jQuery 函數(shù)）。如果您向該函數(shù)傳遞 DOM 對象，它會返回 jQuery 對象，帶有向其添加的 jQuery 功能。
jQuery 允許您通過 CSS 選擇器來選取元素。
在 JavaScript 中，您可以分配一個(gè)函數(shù)以處理窗口加載事件：
JavaScript 方式：
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
等價(jià)的 jQuery 是不同的：
jQuery 方式：
function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);
上面代碼的最后一行，HTML DOM 文檔對象被傳遞到 jQuery ：$(document)。
當(dāng)您向 jQuery 傳遞 DOM 對象時(shí)，jQuery 會返回以 HTML DOM 對象包裝的 jQuery 對象。
jQuery 函數(shù)會返回新的 jQuery 對象，其中的 ready() 是一個(gè)方法。
由于在 JavaScript 中函數(shù)就是變量，因此可以把 myFunction 作為變量傳遞給 jQuery 的 ready 方法。
| jQuery 返回 jQuery 對象，與已傳遞的 DOM 對象不同。jQuery 對象擁有的屬性和方法，與 DOM 對象的不同。您不能在 jQuery 對象上使用 HTML DOM 的屬性和方法。 |
測試 jQuery
請?jiān)囈幌孪旅孢@個(gè)例子：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
請?jiān)僭囈幌逻@個(gè)例子：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
正如您在上面的例子中看到的，jQuery 允許鏈接（鏈?zhǔn)秸Z法）。
鏈接（Chaining）是一種在同一對象上執(zhí)行多個(gè)任務(wù)的便捷方法。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
、jQuery的事件有哪些？
javscript的事件：onClick,onmouseover
jquery的事件：click,mouseover
注意jQuery的事件比javascript的事件少一個(gè)on
1）鼠標(biāo)事件
click：單擊事件
//dbclick：雙擊事件
mouseover：鼠標(biāo)懸念（移入）
mouseout：鼠標(biāo)移出
<style>
.abc{
background-color: #aaa;
}
</style>
<script type="text/javascript">
$(function(){
$("#nav li").mouseover(function(){
$(this).addClass("abc");//當(dāng)鼠標(biāo)移入li元素時(shí)添加樣式
}).mouseout(function(){
//$(this).removeClass() //當(dāng)鼠標(biāo)移出時(shí)刪除所有樣式
$(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時(shí)刪除指定樣式
});
});
</script>
<div id="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">服裝</a></li>
<li><a href="#">電器</a></li>
<li><a href="#">團(tuán)購</a></li>
<li><a href="#">在線瀏覽</a></li>
</ul>
</div>
2) 鍵盤事件
keydown：鍵盤按下事件
keypress：鍵盤按下并放開時(shí)觸發(fā)
keydown：鍵盤放開時(shí)觸發(fā)
<script type="text/javascript">
$(function(){
//按回車鍵自動登錄(不用再點(diǎn)擊登錄按鈕)
$(document).keydown(function(event){
if(event.keyCode==13){
$("#actionForm").submit();
return true;
}
return false;
})
});
</script>
<form id="actionForm" action="../index.html">
登錄名：<input id="txtLoginName" /><br />
密碼：<input type="password" />
<input type="button" value="登錄" />
</form>
3) 表單事件
focus：獲得焦點(diǎn)時(shí)觸發(fā)
blur：失去焦點(diǎn)
select：文本選中時(shí)觸發(fā)
<script type="text/javascript">
$(function(){
//文本框獲得焦點(diǎn)時(shí)，將當(dāng)前文本框的內(nèi)容清空（值等于"請輸入登錄名.."）
//文本框失去焦點(diǎn)時(shí)，判斷內(nèi)容是否為"請輸入登錄名.."或是否為空，那么將這個(gè)值"請輸入登錄名.."設(shè)回到文本框
$("#txtLoginName").focus(function(){
if($(this).val()=='請輸入登錄名...'){
$(this).val('');//清空內(nèi)容
}
}).blur(function(){
if($(this).val().trim()==''){
$(this).val('請輸入登錄名...');//清空內(nèi)容
}
});
});
</script>
<form id="actionForm" action="../index.html">
登錄名：<input id="txtLoginName" value="請輸入登錄名..." /><br />
密碼：<input type="password" />
<input type="button" value="登錄" />
</form>
4）其它事件
bind()：綁定事件
unbind()：移除綁定事件
<script type="text/javascript">
$(function(){
//綁定單個(gè)事件
// $("#btn1").bind('click',function(){
// alert("OK");
// });
//綁定多個(gè)事件
$("#btn1").bind({
mouseover:function(){
alert("鼠標(biāo)懸念");
},
mouseout:function(){
alert("鼠標(biāo)移出");
}
})
//解除綁定事件
$("#btn2").click(function(){
//$("#btn1").unbind("click");//解除綁定的單個(gè)事件
$("#btn1").unbind("mouseover mouseout");//解除多個(gè)綁定的事件，用空格分隔
//$("#btn1").unbind();//解除所有綁定的事件
});
});
</script>
<input type="button" id="btn1" value="點(diǎn)我" /><br />
<input type="button" id="btn2" value="解除綁定" />
hover()：相當(dāng)于mouseover和mouseout的組合
.abc{
background-color: #aaa;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
// $("#nav li").mouseover(function(){
// $(this).addClass("abc");//當(dāng)鼠標(biāo)移入li元素時(shí)添加樣式
// }).mouseout(function(){
// //$(this).removeClass() //當(dāng)鼠標(biāo)移出時(shí)刪除所有樣式
// $(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時(shí)刪除指定樣式
// });
$("#nav li").hover(
function(){
$(this).addClass("abc");//當(dāng)鼠標(biāo)移入li元素時(shí)添加樣式
},
function(){
$(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時(shí)刪除指定樣式
}
);
});
</script>
togger()：
a) 鼠標(biāo)連續(xù)點(diǎn)擊
b) 顯示和隱藏
<script type="text/javascript">
$(function(){
//點(diǎn)擊當(dāng)前頁面時(shí)顯示紅綠藍(lán)的背景色
$("body").toggle(
function(){
$(this).css("background-color","red");
},
function(){
$(this).css("background-color","green");
},
function(){
$(this).css("background-color","blue");
}
);
});
</script>
</head>
<body>
測試
</body>
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
