第86節：Java中的JQuery基礎

Java jQuery · 發表 2019-02-11 12:29:35

摘要：標題圖第86節：Java中的JQuery 前言複習定時器： setInterval clearInterval setTimeout clearTimeout 顯示： img.style.display = "bloc...

標題圖

第86節：Java中的JQuery

前言複習

定時器：

setInterval clearInterval
setTimeout clearTimeout

顯示：

img.style.display = "block"

隱藏：

img.style.display = "none"

獲取行

table.rows[]

DOM:

document.createElement
document.createTextNode
appendChild

什麼是JQuery，有什麼用？

jquery是一種快速，小巧，功能豐富的JavaScript庫，可以讓html文件遍歷和操作，事件處理，動畫和ajax更加容易使用的一種api，可以在多種瀏覽器中工作。

封裝了JavaScript常用的功能程式碼，提供了一種簡便的JavaScript設計模式，優化了HTML文件操作，事件處理，動畫設計和ajax互動。

簡單來說jquery是一個JavaScript庫，簡化了JavaScript的程式設計，很容易學習。

事件，ready(fn)

當dom載入就緒就可以查詢及操縱時繫結的一個要執行的函式，這是事件模組中最重要的一個函式，因為它可以提高web應用程式的響應速度。

jquery程式碼：

$().ready(function(){

});

// 導包,引入JQ的檔案
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
/*文件載入完成的事件*/
jQuery(document).ready(function(){
 alert("jQuery(document).ready(function()");
});
// 最簡單的寫法 
$(function(){
 alert("$(function(){");
});

js和jq物件之間的轉換

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
function changeJS(){
var div = document.getElementById("div1");
//div.innerHTML = "JS"
$(div).html("轉成JQ物件")
}

$(function(){
$("#btn2").click(function(){
//div1
//$("#div1").html("JQ");
//將JQ物件轉成JS物件來呼叫
var $div = $("#div1");
//var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML="jq轉成JS物件成功";
});
});


</script>
</head>
<body>
<input type="button" value="JS" onclick="changeJS()" />
<input type="button" value="JQ" id="btn2" />
<div id="div1">
這裡的內容
</div>
<div id="div1">
這裡的內容
</div>
</body>
</html>

事件

click([[data],fn])

觸發每一個匹配的click事件，這個函式會呼叫執行繫結到click事件的所有函式。

fn,在每個匹配元素的click世界中繫結的處理函式
[data],fn

$("p").click();
// 所有段落點選隱藏
$("p").click( function(){
 $(this).hide();
});

效果：

show([speed,[easing],[fn]])
[speed,[easing],[fn]]
speed,[easing],[fn]
speed,[easing],[fn]:
speed三種預定速度之一的字串("slow","normal",or"fase")或表示動畫時長的毫秒數值，fn: 在動畫完成執行的函式，每個元素執行一次

// 顯示段落
html程式碼：
<p style="display: none">hello</p>
jquery程式碼
$("p").show()

jquery庫可以通過一行簡單的程式碼新增到網頁中，庫包含html元素選取和操作，css操作，html事件函式，JavaScript特效和動畫，html dom遍歷和修改，ajax，utilities。

網頁中新增jquery庫

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

簡單案例：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<p>dashucoding.</p>
<button type="button">Click me</button>
</body>
</html>

// Google 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
// Microsoft 
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

jquery語法：

jQuery hide() 函式
$(this).hide()隱藏當前的 HTML 元素

$(selector).action()
$(this).hide() - 隱藏當前元素

jquery函式

// 為了防止文件完全載入就緒之前執行的程式碼
$(document).ready(function(){
});

選擇器

元素選擇器

$("p.kk")
class="kk" 的 <p> 元素

屬性選擇器

$("[href]") 選取帶有 href 屬性的元素

$("[href='#']") 選取帶有 href 值等於 "#" 的元素

$("[href!='#']") 選取帶有 href 值不等於 "#" 的元素

$("[href$='.jpg']") 選取帶有 href 值以 ".jpg" 結尾的元素

CSS 選擇器

$("p").css("background-color","red");

例子：

$("#intro") id="intro" 的第一個元素 
$("ul li:first") 每個 <ul> 的第一個 <li> 元素 
$("[href$='.jpg']") 
所有帶有以 ".jpg" 結尾的 href 屬性的屬性

事件

jquery事件處理函式是jquery中和核心函式。

jquery案例：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<p>dashucoding</p>
<button type="button">Click me</button>
</body>

</html>

$("button").click(function() { ... } )

$("p").hide();

事件處理器：

$(document).ready(function() {...} )

獨立的jquery檔案：

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

如果存在名稱衝突，需要重新命名 jQuery 庫

$(document).ready(function)
$(selector).click(function)
$(selector).dblclick(function)
$(selector).focus(function)
$(selector).mouseover(function)

slide panel 效果

<html>
<head>

<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>dashucoding</p>
</div>
 
<p class="flip">Show</p>
 
</body>
</html>

jQuery fadeTo() 函式

<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
});
</script>
</head>

<body>
// 淡化
<div id="test" style="background:yellow;width:300px;height:300px">
<button type="button">Fade</button>
</div>

</body>

</html>

jQuery animate() 函式

<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script> 
</head>
 
<body>

<p><a href="#" id="start">dashucoding</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
 
</body>
</html>

隱藏和顯示

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

speed 引數

設定值：

"slow", "fast", "normal" 或 milliseconds

$("button").click(function(){
$("p").hide(1000);
});

隱藏顯示的元素，顯示隱藏的元素

$(selector).toggle(speed,callback)

<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">Toggle</button>
<p>dashucoding</p>

</body>
</html>

滑動函式

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 引數

值："slow", "fast", "normal" 或 毫秒

$(".flip").click(function(){
$(".panel").slideDown();
});

$(".flip").click(function(){
$(".panel").slideUp()
})

$(".flip").click(function(){
$(".panel").slideToggle();
});

jQuery Fade 函式

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

$("button").click(function(){
$("div").fadeOut(4000);
});

jQuery 自定義動畫

$(selector).animate({params},[duration],[easing],[callback])

animate({width:"70%",opacity:0.5,marginLeft:"0.6in",fontSize:"4em"});

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

// 效果
$(selector).fadeIn() 
淡入被選元素 

$(selector).fadeOut() 
淡出被選元素 

$(selector).fadeTo() 
把被選元素淡出為給定的不透明度

Callback 函式

$("button").click(function(){
$("p").hide(1000);
});
// "slow", "fast", "normal" 或毫秒

語法：

$(selector).hide(speed,callback)

$("p").hide(1000,function(){
alert("dashucoding");
});

HTML 操作

$(selector).html(content)
// 追加內容
$(selector).append(content)
// 內部預置（Prepend）內
$(selector).prepend(content)

// 元素之後插入 HTML 內容
$(selector).after(content)
$(selector).before(content)

CSS 函式

$(selector).css(name,value) 
$(selector).css({properties}) 
$(selector).css(name)

$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
$(this).css("background-color");

$(selector).height(value) 
$(selector).width(value) 

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#id1").height("200px");
});
});
</script>

$(selector).width(value)
$("#id200").width("300px");

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#id2").width("300px");
});
});
</script>

jQuery AJAX 函式

什麼是 AJAX？

Asynchronous JavaScript and XML
一種快速建立動態網頁的技術

AJAX 和 jQuery- HTTP Get 和 HTTP Post

語法如下

$(selector).load(url,data,callback)
// $.ajax(options) 是低層級 AJAX 函式的語法
url 被載入的資料的 URL
data 傳送到伺服器的資料
callback 被載入時，所執行的函式
type 被返回的資料的型別
options 完整 AJAX 請求

小結

hide() 函式
fadeout() 函式
animate() 函式
$("button#demo").click()
$("button#demo").click(function(){$("img").hide()})

效果

結言

好了，歡迎在留言區留言，與大家分享你的經驗和心得。

感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

達叔小生：往後餘生，唯獨有你

You and me, we are family !

90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通

簡書部落格：達叔小生

https://www.jianshu.com/u/c785ece603d1

結語

下面我將繼續對其他知識深入講解，有興趣可以繼續關注
小禮物走一走 or 點贊

第86節：Java中的JQuery基礎

前言複習

選擇器

事件

隱藏和顯示

滑動函式

小結

結言

結語

您可能也會喜歡…