JQuery學習---JQuery深入學習
阿新 • • 發佈：2018-07-31
node als elf off input css false 隱藏 info
屬性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
<body>
<input id=‘ck‘ type="checkbox" school="peking">
</body>
<script src="jquery-3.2.1.js"></script>
// attr表示自定義的屬性，一個參數標書屬性，2個參數表示參數和參數值
$("#ck").attr("checked","true"); //添加屬性checked
$("#ck").removeAttr("checked"); //取消屬性checked 在JQ3中，取消屬性不能用attr("checked","false"),必須用remove
// prop表示固有的屬性【最適用selected和checked】
$("#ck").prop("checked",true);
$("#ck").prop("checked",false); // 註意這裏布爾值不帶引號，JQ3中取消屬性不能remove,必須使用不帶引號的布爾值
</script>初始值：
用prop修改：自定義屬性修改失敗，固定屬性修改成功[內部有一個Attributes集合，設置成功與否與此有關]
用attr修改[此時id=xxx]：attr都可以進行修改成功[內部有2個狀態，true和false,自定義的默認undefied]
總結一下：
JQ3中： attr的取消必須remove; prop的取消使用不帶引號的布爾值參數
固有屬性[select,checked]用prop; 自定義屬性用attr
文檔處理
內部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after insertAfter()
replaceWith() remove() empty() clone()
取值操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<input id=‘ck‘ type="text" value="你好">
<input type="checkbox" name="hobby" value="basketball"> <!-- value默認是on,如果value有則顯示本身值-->
</body>
</html>
<script src="jquery-3.2.1.js"></script>
<script>
// 取出value屬性
console.log($(":text").val()); //打印：你好，取值操作
$(":text").val("hello world"); //打印:hello world, 此時修改了框內內容
console.log($(":checkbox").val()); //打印:basketball，取值操作
</script>
父子類直接的插入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<div id="div1" style="color: yellowgreen">div1
<p id="p0" style="color: #c233cd">inner_p0</p>
<p id="p2" style="color: #3e40cd">sbulings_p2</p>
</div>
<p id="p1">outer_p1</p>
</body>
</html>
<script src="jquery-3.2.1.js"></script>
<script>
// ------------------------------內部插入------------------------------
// $("#div1").append($("#p1")); // div1 -> inner_p0 -> sbulings_p2 -> outer_p1
// $("#p1").appendTo($("#div1")); // div1 -> inner_p0 -> sbulings_p2 -> outer_p1
// $("#div1").prepend($("#p1")); // outer_p1 -> div1 -> inner_p0 -> sbulings_p2
// $("#p1").prependTo($("#div1")); // outer_p1 -> div1 -> inner_p0 -> sbulings_p2
// ------------------------------外部插入------------------------------
// $("#div1").after($("#p1")); // div1 -> inner_p0 -> sbulings_p2 -> outer_p1
$("#p1").before($("#div1")); // div1 -> inner_p0 -> sbulings_p2 -> outer_p1
</script>
文件操作之刪除：
remove(): 刪除本標簽以及內容
empty() : 僅僅情況了內容，但保留了本標簽
jQuery事件綁定補充之委托
$(‘li‘).click(function () {
// 方法一
})
$(‘li‘).on(‘click‘, function () {
// 方法二
})
// 基於Jquery的委托綁定
$(‘td‘).on(‘click‘, ‘.td-delete‘, function () {
$(‘.remove, .shade‘).removeClass(‘hide‘)
})
事件綁定：
【更多參考】http://jquery.cuishifeng.cn/ready.html
1.DOM下操作
2. jQuery操作[去掉了on的onclick()]
DOM下的操作【復習】：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
<p id="p1" onclick="func1(this)">hello world 2017</p>
<p id="p2">hello world 2018</p>
</body>
<script>
// DOM綁定事件的復習：方法一
function func1(self) {
var info = self.innerHTML;
alert(info);
}
// DOM綁定事件的復習：方法二
var obj = document.getElementById("p2")
obj.onclick = function () {
alert(this.innerHTML) // 可以直接使用this，調用對象的屬性
}
// onload()方法復習
window.onload=function () {
var obj = document.getElementById(‘hello‘);
alert(obj.nodeName)
}
</script>
</html>
jQuery方法復習：實現css樣式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
<p id="p1">hello world 2017</p>
<p id="p2">hello world 2018</p>
</body>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
$("#p1").css("color","red");
</script>
</html>
jQuery下的onload()
取消事件：unload()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
// jQuery下面的onload方法使用一：
$(document).ready(function () {
$("p").css("color","red"); // 給所有的P標簽變紅
$("#p1").css("color","green"); // p1變綠色
})
// jQuery下面的onload方法使用二【推薦使用，方法一的簡寫】：
$(function () {
$("p").css("color","orange"); // 給所有的P標簽變紅
})
</script>
</head>
<body>
<p id="p1">hello world 2017</p>
<p id="p2">hello world 2018</p>
</body>
</html>
jQuery的頁面載入
ready(fn)
jQuery的事件綁定: click(), bind(),on()等事件綁定操作
取消事件：off()等;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
<p id="p1">hello world 2017</p>
<p id="p2">hello world 2018</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<input type="button" value="+" onclick="add()">
</body>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
// jQuery下面的onclick()：
$("p").click(function () {
alert(123);
})
// jQuery下面的bind()[bind方法不建議使用]：
$("p").bind("click", function () {
alert(456);
})
function add() {
$("ul").append(" <li>444</li>");
}
// 點擊li觸發一個函數，但是後面新添加就無法實現點擊觸發的效果了，使用on函數解決
$("ul li").click(function () {
alert("hello world");
})
//jQuery下面的on()：on(events,[selector],[data],fn)
// 實現了動態添加的一個事件委托，綁定了ul，但是實現了li的onclick
// $("ul li").on("click" ,function () { 錯誤的使用,缺少了selector,根bind效果同，無法實現動態綁定效果
$("ul").on("click","li",function () {
alert(‘on‘);
})
function func2(event) {
alert(event.data.foo); // 取值操作
}
$("p").on("click",{foo:‘on的data傳值操作‘},func2)
// JQ3多用on, JQ2多用delegated
</script>
</html>
jQuery的回調函數：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="display: none">hello world</p>
<input id="show" type="button" value="顯示">
<input id="hide" type="button" value="隱藏">
<input id="toggle" type="button" value="toggle">
<script src="jquery-2.1.4.min.js"></script>
<script>
$("#show").click(function () {
$("p").show(2000,function () {
alert(123)
});
});
$("#hide").click(function () {
$("p").hide(1000);
});
$("#toggle").click(function () {
$("p").toggle(1000);
});
</script>
</body>
</html>
jQuery的擴展方法：
自定義擴展[jQuery調用]
自定義擴展[標簽調用]
私有域的擴展[將自定義的函數放入到一個函數內部進行調用,保證內部變量不被外部調用]，變量只在函數內部哈~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="p0">hello world 2018</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
// 自定義函數，直接由jQuery調用
$.extend({
getMax:function (a,b) {
alert(a>b?a:b);
}
})
$.getMax(3,8); // 8
// 自定義函數，必須由標簽對象調用
$.fn.extend({
print:function () {
alert($(this).html()); // jQuery中查詢值
}
});
$("p").print();
// 高級應用 --自定義函數添加私有域，避免內部變量被外部調用，避免變量產生沖突
(function (a) {
alert(a)
})(666) ; // 打印666 // 自執行的匿名函數
(function ($) {
// 擴展的私有方法，添加了私有域
$.fn.extend({
print:function () {
alert($(this).html()); // jQuery中查詢值
}
})
})(jQuery); // 不寫jQuery也可以,為了方便識別
$("p").print(); // hello world 2018
</script>
</body>
</html>
JQuery中for循環的使用
JQuery中for循環的使用:
1. 數組，鍵值對的使用
2. 集合的取值
<script src="jquery-3.2.1.js"></script>
<script>
// for循環：數組，Json的Key-Value
li = [1,2,3,4,5,6,7];
kv = {name:"hello", value:"world"};
$.each(kv,function (key, value) {
console.log(key,value);
})
</script>
for循環集合的打印：【註意$符號】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<ul class="menu">
<li id="c1" class="current" onclick="tab(this);">菜單一</li>
<li id="c2" onclick="tab(this);">菜單二</li>
<li id="c3" onclick="tab(this);">菜單三</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
$("li").each(function () {
console.log($(this).html()) // ，註意$符號取出內容
})
</script>
</html>JQuery學習---JQuery深入學習