參考：http://jquery.cuishifeng.cn/css.html
1.屬性操作
--------------------------屬性 $("").attr(); 查屬性 自己定義屬性 $("").removeAttr(); $("").prop(); 一個值查屬性 兩個值賦值 返回布爾值類型 固有屬性 $("").removeProp(); --------------------------CSS類 $("").addClass(class|fn) $("").removeClass([class|fn]) --------------------------HTML代碼/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) 一般用於text --------------------------- $("").css("color","red")
2.循環each
//方式一
$.each(arr,funcion(index,obj){
console.log(index);
console.log(obj)
})
//方式二
$(selector).each(function(index,element){
console.log($(this))
})
eg.正反選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
function selectall(){
$("table :checkbox").prop("checked",true)
}
function cancel(){
$("table :checkbox").prop("checked",false)
}
function reverse(){
// var idlist=$("table :checkbox")
// for(var i=0;i<idlist.length;i++){
// var element=idlist[i];
//
// var ischecked=$(element).prop("checked")
// if (ischecked){
// $(element).prop("checked",false)
// }
// else {
// $(element).prop("checked",true)
// }
//
// }
// jquery循環的兩種方式
//方式一
// li=[10,20,30,40]
// dic={name:"yuan",sex:"male"}
// $.each(li,function(i,x){
// console.log(i,x)
// })
//方式二
// $("tr").each(function(){
// console.log($(this).html())
// })
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
// if ($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else {
// $(this).prop("checked",true)
// }
// 思考:如果用attr方法可以實現嗎?
});
}
</script>
</head>
<body>
<button onclick="selectall();">全選</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反選</button>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
</body>
</html>
3.文檔處理
//創建一個標簽對象 $("<p>") //內部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替換 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //刪除 $("").empty() 清空內容 不刪除標簽元素
$("").remove([expr]) 標簽和內容全部刪除 //復制 $("").clone([Even[,deepEven]])
eg：復制克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
//var $clone_obj=$(self).parent().clone(); // $clone_obj放在這個位置可以嗎?
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();會一遍二,二變四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
</script>
</body>
</html>
4.css操作
CSS $("").css(name|pro|[,val|fn]) 位置 $("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val]) 尺寸 $("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options])
4.事件
頁面載入 ready(fn) //當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。 $(document).ready(function(){}) -----------> $(function(){}) 事件處理 $("").on(eve,[selector],[data],fn) // 在選擇元素上綁定一個或多個事件的事件處理函數。 // .on的selector參數是篩選出調用.on方法的dom元素的指定子元素，如： // $('ul').on('click', 'li', function(){console.log('click');})就是篩選出ul下的li給其綁定 // click事件； [selector]參數的好處: 好處在於.on方法為動態添加的元素也能綁上指定事件；如： //$('ul li').on('click', function(){console.log('click');})的綁定方式和 //$('ul li').bind('click', function(){console.log('click');})一樣；我通過js給ul添加了一個 //li：$('ul').append('<li>js new li<li>')；這個新加的li是不會被綁上click事件的 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式綁定，然后動態添加 //li:$('ul').append('<li>js new li<li>');這個新生成的li被綁上了click事件 [data]參數的調用: function myHandler(event) { alert(event.data.foo); } $("li").on("click", {foo: "bar"}, myHandler)
https://www.cnblogs.com/yuanchenqi/articles/6070667.html