jquery -- 學習筆記(一)
.下載jquery後在頁面中引入(一般放在head部份):
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src='/js/jquery-3.3.1.min.js'></script> <!-- 引入jquery -->
</head>.在script標籤中使用(script標籤一般放在body的最下面)
<body> <!-- 其它標籤 --> ... <script type="text/javascript"> ... </script> </body> </html>
.一般需要加上文件就緒函式(ready):
<body>
<!-- 其它標籤 -->
...
<script type="text/javascript">
$(document).ready(function(){
...
})
</script>
</body>
</html>.jquery基礎語法:
$(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢”和“查詢” HTML 元素
- jQuery 的 action() 執行對元素的操作
.jquery選擇器(注意之間有沒有空格, 若有空格則是後代選擇器, 沒有空格則是選擇本身而不是後代)
| $(this) | 當前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每個 <ul> 的第一個 <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結尾的屬性值的 href 屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
.jQuery CSS選擇器可用於改變 HTML 元素的 CSS 屬性
-
$("p").css("background-color","red");
.jQuery 事件函式(如下面的click函式), jQuery 事件處理方法是 jQuery 中的核心函式
$("button").click(function(){
$("p").hide();
});| $(document).ready(function) | 當文件完成載入時 |
| $(selector).click(function) | 點選事件 |
| $(selector).dblclick(function) | 雙擊事件 |
| $(selector).focus(function) | 獲得焦點事件 |
| $(selector).mouseover(function) | 標懸停事件 |
.jQuery hide() 和 show()
可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});$(selector).hide(speed,callback); // speed是隱藏速度, callback是回撥
$(selector).show(speed,callback);
toggle()函式可以切換隱藏或顯示(如果是隱藏的會顯示, 如果是顯示的會隱藏)
$("p").toggle();
.淡入淡出
jQuery 擁有下面四種 fade 方法：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
fadeIn() 用於淡入已隱藏的元素
fadeOut() 方法用於淡出可見元素
fadeToggle() 淡入淡出切換
fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）, 可選引數多一個透明度
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});可以新增slow或者具體的毫秒數
.jquery滑動
jQuery 擁有以下滑動方法(顧名思義:向上滑動,向下滑動,上下切換滑動)：
- slideDown() 下拉顯示(先要是隱藏的)
- slideUp() 上拉隱藏(先要是顯示的)
- slideToggle() 如果是隱藏的, 則下拉顯示出來, 如果是顯示的, 則上拉隱藏
.jquery動畫:
語法: $(selector).animate({params},speed,callback);$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px', //height還可以取值:hide,show,toggle
width:'150px'
},'slow');注意元素需要設定position屬性
可以給一個元素同時設定多個animate函式, 實現非單一動畫
.jQuery 停止動畫
stop() 方法用於在動畫或效果完成前對它們進行停止
在這個動畫過程中將其暫停, 再點動畫它接著繼續執行動畫
直到動畫完成後, 點停止動畫才不起作用(即表示動畫過程中可以重複執行與停止)
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000); //下拉顯示
});
$("#stop").click(function(){
$("#panel").stop(); //停止動畫
});
});.動畫執行回撥
當動畫 100% 完成後，即呼叫 Callback 函式
語法: $(selector).hide(speed,callback)$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});.jquery方法連結
只需要要查詢到jquery物件, 然後給其新增一系列的函式
它就會一個一個執行, 而不需要對同一個元素單獨新增函式
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
.jquery獲取內容和屬性
jQuery 擁有可操作 HTML 元素和屬性的強大方法
jQuery 中非常重要的部分，就是操作 DOM 的能力, jQuery 提供一系列與 DOM 相關的方法
jquery獲取內容: 三個簡單實用的用於 DOM 操作的 jQuery 方法：
- text() - 設定或返回所選元素的文字內容
- html() - 設定或返回所選元素內容（包括 HTML 標記）
- val() - 設定或返回表單欄位的值 (比如input中輸入的內容)
$("#test").text();
$("#test").html();
$("#test").val();jquery獲取屬性: attr() 方法用於獲取屬性值
alert($("#w3s").attr("href"));.設定值:
和上面的方法一樣的, 只是帶參與不帶引數
不帶引數就是獲取值, 帶引數就是設定值
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});可以放置一個函式: (i是被選元素的下標(因為同時可能選擇有多個元素), origText是舊值)
$("button").click(function(){
$("#test").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});
attr()對屬性做設定, 需要兩個對數:
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});也可以放置一個json, 對多個屬性設定
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});attr()第二個引數可以放置一個函式:
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});同上類似: 函式第一個引數i也是被選元素的下標, 第二個引數也是舊值
.新增元素:
- append() - 在被選元素的結尾之前插入內容
- prepend() - 在被選元素的開頭之後插入內容
- after() - 在整個被選元素之後插入內容
- before() - 在整個被選元素之前插入內容
function appendText() {
var txt1="<p>Text.</p>"; // 以 HTML 建立新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 建立新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通過 DOM 來建立文字
$("body").append(txt1,txt2,txt3); // 可同時追加多個元素
}
function afterText() {
var txt1="<b>I </b>"; // 以 HTML 建立元素
var txt2=$("<i></i>").text("love "); // 通過 jQuery 建立元素
var txt3=document.createElement("big"); // 通過 DOM 建立元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之後插入多個新元素
}注意append與after, prepend與before 它們的區別
append與preappend是在元素裡面新增新元素
before與after是在元素外面新增新元素
.刪除元素:
- remove() - 刪除被選元素及其子元素(全刪)
- empty() - 從被選元素中刪除所有子元素(只刪除只元素)
$("#div1").remove();
$("#div1").empty();
$("p").remove(".italic");remove函式可以接收一個引數, 即一個選擇器, 則表示刪除指定子元素
.jquery操作css
- addClass() - 向被選元素新增一個或多個類
- removeClass() - 從被選元素刪除一個或多個類
- toggleClass() - 對被選元素進行新增/刪除類的切換操作
.blue {
color:blue;
}
.important {
font-weight:bold;
font-size:xx-large;
}
$("h1,h2,p").addClass("blue");
$("#div1").addClass("important blue"); // 新增多個類(空格隔開)
$("h1,h2,p").removeClass("blue important"); // 刪除也是類似的
$("h1,h2,p").toggleClass("blue"); // 給元素新增類或刪除類(如果有就刪除, 如果沒有就新增).jquery的css函式:
獲取css欄位值
$("p").eq(2).css("background-color"); // 獲取第三個p元素的顏色
設定css屬性
$("p").css("background-color","yellow");
也可以設定多個css屬性(放一個json)
$("p").css({"background-color":"yellow","font-size":"200%"});
.jquery的尺寸函式:
處理元素和瀏覽器容器的尺寸
- width() 設定或返回元素的寬度（不包括內邊距、邊框或外邊距）
- height() 設定或返回元素的高度（不包括內邊距、邊框或外邊距）
- innerWidth() 方法返回元素的寬度（包括內邊距）
- innerHeight() 方法返回元素的高度（包括內邊距）
- outerWidth() 方法返回元素的寬度（包括內邊距和邊框）
- outerHeight() 方法返回元素的高度（包括內邊距和邊框）
- outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）
-
outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）
$("button").click(function(){
$("#div1").width();
$("#div1").height();
$("#div1").innerWidth();
$("#div1").innerHeight();
$("#div1").outerWidth();
$("#div1").outerHeight();
$("#div1").outerWidth(true);
$("#div1").outerHeight(true);
});獲取html文件和瀏覽器視口的寬高:
$(document).ready(function(){
$("button").click(function(){
var dw = $(document).width(); // 文件的寬
var dh = $(document).height(); // 文件的高
var ww = $(window).width(); // 瀏覽器的寬
var wh = $(window).height(); // 瀏覽器的高
alert("dw=" + dw +",dh=" + dh + ",ww=" + ww + ",wh=" + wh); //dw=940,dh=400,ww=940,wh=400
});
});帶引數設定寬高:
$("button").click(function(){
$("#div1").width(500).height(500);
});