整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、jQuery的事件有哪些？
javscript的事件：onClick,onmouseover
jquery的事件：click,mouseover
注意jQuery的事件比javascript的事件少一個(gè)on
1）鼠標(biāo)事件
click：?jiǎn)螕羰录?/p>
//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="#">首頁(yè)</a></li>
<li><a href="#">服裝</a></li>
<li><a href="#">電器</a></li>
<li><a href="#">團(tuán)購(gòu)</a></li>
<li><a href="#">在線瀏覽</a></li>
</ul>
</div>
2) 鍵盤事件
keydown：鍵盤按下事件
keypress：鍵盤按下并放開(kāi)時(shí)觸發(fā)
keydown：鍵盤放開(kāi)時(shí)觸發(fā)
<script type="text/javascript">
$(function(){
//按回車鍵自動(dòng)登錄(不用再點(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)容清空（值等于"請(qǐng)輸入登錄名.."）
//文本框失去焦點(diǎn)時(shí)，判斷內(nèi)容是否為"請(qǐng)輸入登錄名.."或是否為空，那么將這個(gè)值"請(qǐng)輸入登錄名.."設(shè)回到文本框
$("#txtLoginName").focus(function(){
if($(this).val()=='請(qǐng)輸入登錄名...'){
$(this).val('');//清空內(nèi)容
}
}).blur(function(){
if($(this).val().trim()==''){
$(this).val('請(qǐng)輸入登錄名...');//清空內(nèi)容
}
});
});
</script>
<form id="actionForm" action="../index.html">
登錄名：<input id="txtLoginName" value="請(qǐng)輸入登錄名..." /><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)前頁(yè)面時(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>
測(cè)試
</body>
大網(wǎng)站常用的頁(yè)面加載動(dòng)畫
一、使用場(chǎng)景
經(jīng)常見(jiàn)到某些網(wǎng)站的動(dòng)畫是在屏幕顯示到當(dāng)前元素的時(shí)候，會(huì)有個(gè)過(guò)渡動(dòng)畫。
頁(yè)面在向下滾動(dòng)的時(shí)候，有些元素會(huì)產(chǎn)生細(xì)小的動(dòng)畫效果。雖然動(dòng)畫比較小，但卻能吸引你的注意
使用wow.js和Animate.css，實(shí)現(xiàn)各大網(wǎng)站常用的頁(yè)面加載動(dòng)畫
1.wow.js
實(shí)現(xiàn)了在網(wǎng)頁(yè)滾動(dòng)時(shí)的動(dòng)畫效果，有漂亮的動(dòng)畫效果，依賴于Animate.css。
2.Animate.css
非常優(yōu)秀的CSS3動(dòng)畫庫(kù)，不依賴于jQuery，純CSS動(dòng)畫
二、使用方法
1,下載文件
animate.css 下載地址: 網(wǎng)址前綴+daneden.github.io/animate.css/
wow.min.js 下載地址: 網(wǎng)址前綴+www.downyi.com/downinfo/37040.html#address
2,引入文件
<link rel="stylesheet" href="css/animate.css" rel="external nofollow" >
<script src="js/wow.min.js"></script>
3、HTML
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
可以加入 data-wow-duration（動(dòng)畫持續(xù)時(shí)間）和 data-wow-delay（動(dòng)畫延遲時(shí)間）
屬性，如：
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
4、JavaScript
new WOW().init();
要自定義配置，可如下使用：
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
三、兼容性
四、配置屬性
過(guò) jQuery，可以很容易地添加新元素/內(nèi)容。
添加新的 HTML 內(nèi)容
我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法：
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開(kāi)頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容
jQuery append() 方法
jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。
實(shí)例
$("p").append("追加文本");
jQuery prepend() 方法
jQuery prepend() 方法在被選元素的開(kāi)頭插入內(nèi)容。
實(shí)例
$("p").prepend("在開(kāi)頭追加文本");
通過(guò) append() 和 prepend() 方法添加若干新元素
在上面的例子中，我們只在被選元素的開(kāi)頭/結(jié)尾插入文本/HTML。
不過(guò)，append() 和 prepend() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素。可以通過(guò) jQuery 來(lái)生成文本/HTML（就像上面的例子那樣），或者通過(guò) JavaScript 代碼和 DOM 元素。
在下面的例子中，我們創(chuàng)建若干個(gè)新元素。這些元素可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建。然后我們通過(guò) append() 方法把這些新元素追加到文本中（對(duì) prepend() 同樣有效）：
實(shí)例
functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}
jQuery after() 和 before() 方法
jQuery after() 方法在被選元素之后插入內(nèi)容。
jQuery before() 方法在被選元素之前插入內(nèi)容。
實(shí)例
$("img").after("在后面添加文本"); $("img").before("在前面添加文本");
通過(guò) after() 和 before() 方法添加若干新元素
after() 和 before() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素。可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建新元素。
在下面的例子中，我們創(chuàng)建若干新元素。這些元素可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建。然后我們通過(guò) after() 方法把這些新元素插到文本中（對(duì) before() 同樣有效）：
實(shí)例
functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素vartxt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本}
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
