整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Query 擁有可操作 HTML 元素和屬性的強(qiáng)大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列與 DOM 相關(guān)的方法，這使訪問和操作元素和屬性變得很容易。
| DOM=Document Object Model（文檔對象模型） DOM 定義訪問 HTML 和 XML 文檔的標(biāo)準(zhǔn)： "W3C 文檔對象模型獨(dú)立于平臺和語言的界面，允許程序和腳本動態(tài)訪問和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式。" |
開發(fā)過程中，jQuery.html() 是獲取當(dāng)前節(jié)點(diǎn)下的html代碼，并不包含當(dāng)前節(jié)點(diǎn)本身的代碼，然后我們有時候確需要，找遍jQuery api文檔也沒有任何方法可以拿到。
看到有的人通過parent().html()，如果當(dāng)前元素沒有兄弟元素還行，如果有那就行不通了。后臺實(shí)驗(yàn)發(fā)現(xiàn)有一個jQuery的一個方法可以解決，而且非常簡便，如下：
jQuery.prop("outerHTML");
<div class="test"><p>hello，你好！</p></div>
<script>$(".test").prop("outerHTML");</script>輸出結(jié)果為：<div class="test"><P>hello,你好！</p></div>
因?yàn)樵鶭S DOM里有一個內(nèi)置屬性 outerHTML （看清大小寫哦，JS是區(qū)分大小寫的）用來獲取當(dāng)前節(jié)點(diǎn)的html代碼(包含當(dāng)前節(jié)點(diǎn))，所以用jQuery的prop()能拿到，經(jīng)過實(shí)驗(yàn)attr()方法是拿不到的，不信的話，大家也可以嘗試嘗試，謝謝。
當(dāng)然也有人用jQuery的 clone() 函數(shù)配合append() 來創(chuàng)建一個只有一個子元素的節(jié)點(diǎn)，然后來拿節(jié)點(diǎn)的html，這樣也是可行的，但是代碼繁瑣。
、jQuery的事件有哪些？
javscript的事件：onClick,onmouseover
jquery的事件：click,mouseover
注意jQuery的事件比javascript的事件少一個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元素時添加樣式
}).mouseout(function(){
//$(this).removeClass() //當(dāng)鼠標(biāo)移出時刪除所有樣式
$(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時刪除指定樣式
});
});
</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：鍵盤按下并放開時觸發(fā)
keydown：鍵盤放開時觸發(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)時觸發(fā)
blur：失去焦點(diǎn)
select：文本選中時觸發(fā)
<script type="text/javascript">
$(function(){
//文本框獲得焦點(diǎn)時，將當(dāng)前文本框的內(nèi)容清空（值等于"請輸入登錄名.."）
//文本框失去焦點(diǎn)時，判斷內(nèi)容是否為"請輸入登錄名.."或是否為空，那么將這個值"請輸入登錄名.."設(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(){
//綁定單個事件
// $("#btn1").bind('click',function(){
// alert("OK");
// });
//綁定多個事件
$("#btn1").bind({
mouseover:function(){
alert("鼠標(biāo)懸念");
},
mouseout:function(){
alert("鼠標(biāo)移出");
}
})
//解除綁定事件
$("#btn2").click(function(){
//$("#btn1").unbind("click");//解除綁定的單個事件
$("#btn1").unbind("mouseover mouseout");//解除多個綁定的事件，用空格分隔
//$("#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元素時添加樣式
// }).mouseout(function(){
// //$(this).removeClass() //當(dāng)鼠標(biāo)移出時刪除所有樣式
// $(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時刪除指定樣式
// });
$("#nav li").hover(
function(){
$(this).addClass("abc");//當(dāng)鼠標(biāo)移入li元素時添加樣式
},
function(){
$(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時刪除指定樣式
}
);
});
</script>
togger()：
a) 鼠標(biāo)連續(xù)點(diǎn)擊
b) 顯示和隱藏
<script type="text/javascript">
$(function(){
//點(diǎn)擊當(dāng)前頁面時顯示紅綠藍(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小時內(nèi)與您取得聯(lián)系。
