Jquery一些用法和技巧
阿新 • • 發佈:2018-12-20
1,禁用頁面的右鍵選單
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
2,輸入框文字輸入和失去焦點
<input type="text" class="text1" /> <script> $(document).ready(function() { $("input.text1").val("Enter your search text here."); textFill( $('input.text1') ); }); function textFill(input){ //input focus text function var originalvalue = input.val(); input.focus( function(){ if( $.trim(input.val()) == originalvalue ){ input.val(''); } }).blur( function(){ if( $.trim(input.val()) == '' ){ input.val(originalvalue); } }); } </script>
3.返回頭部以及滑到底部 的 滑動動畫
<script type="text/javascript"> //返回頂部 $(".upToTop").click(function(){ $("html").animate({scrollTop:0 },700); }); //返回底部 var content_height=document.body.scrollHeight; //獲取頁面高度 $(".downToFooter").click(function(){ $("html").animate({scrollTop:content_height },700); }); </script>
4,獲取滑鼠位置
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../../scripts/jquery.js" type="text/javascript"></script> </head> <body> <div id="XY" ></div> <script> $(document).ready(function () { $(document).mousemove(function(e){ $('#XY').html("X : " + e.pageX + " | Y : " + e.pageY); }); }); </script> </body> </html>
5,判斷元素是否存在
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="XY" ></div>
<script>
$(document).ready(function() {
if ($('#XY').length){
alert('元素存在!')
}else{
alert('元素不存在!')
}
});
</script>
</body>
</html>
6,點選div進行跳轉
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<div style="width:200px;height:40px;background:#eee;cursor:pointer;">
<a href="http://www.cssrain.cn">home</a>
</div>
<script>
$(document).ready(function() {
$("div").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
</script>
</body>
</html>
8,回車提交表單
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<style>
#XY{
width:40px;
height:100px;
background:#aaa;
}
</style>
</head>
<body>
<input type="input" />
<script>
$(document).ready(function() {
$("input").keyup(function(e){
if(e.which=="13"){
alert("回車提交!")
}
})
});
</script>
</body>
</html>