Mục lục
1. Sáng tạo giao điểm giới thiệu:
Tam, giao điểm mặt khác tương quan thao tác
Một, tra tìm giao điểm
1. Tóm tắt:
Tra tìm đến sở yêu cầu nguyên tố lúc sau , Có thể thuyên chuyển JQuery Đối tượng attr() Phương pháp tới thu hoạch các loại thuộc tính giá trị.attr() phương pháp có thể dùng cho thiết trí hoặc phản hồi bị lựa chọn nguyên tố thuộc tính giá trị.$(selector).attr(attribute) —— Phản hồi bị lựa chọn nguyên tố thuộc tính giá trị;$(selector).attr(attribute,value) —— Thiết trí bị lựa chọn nguyên tố thuộc tính giá trị.removeAttr() —— Xóa bỏ chỉ định nguyên tố chỉ định thuộc tính .
2. Ví dụ thực tế:
search.html số hiệu như sau:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Search node</title>
<script type= "text/javascript" src= "../../js/jquery-3.7.0.min.js" ></script>
<script type= "text/javascript" >
$(function () {
$( "button[id='button01']" ).click(function () {
$( "img" ).attr( "src", "../../image/3.jpg" );
$( "#button01" ).hide();
$( "#button02" ).show();
});
$( "button[id='button02']" ).click(function () {
$( "img" ).attr( "src", "../../image/4.jpg" );
$( "#button02" ).hide();
$( "#button01" ).show();
});
});
</script>
</head>
<body>
<img src= "../../image/4.jpg" height= "200px" /> <br/>
<button id= "button01" > điểm ta đem hồng nhạt cây xa cúc biến thành màu lam cây xa cúc </button>
<button id= "button02" hidden= "hidden" > điểm ta đem màu lam cây xa cúc biến thành hồng nhạt cây xa cúc </button>
</body>
</html>Vận hành hiệu quả như sau: (GIF đồ )
Nhị, sáng tạo giao điểm
1. Sáng tạo giao điểm giới thiệu:
(1)Sử dụng JQuery nhà xưởng hàm số $(): $(HTML nhãn ); sáng tạo giao điểm,Sẽ căn cứ truyền vào HTML đánh dấu tự phù xuyến sáng tạo một cái JQuery đối tượng cũng phản hồi.
(2)Động thái mà sáng tạo tân nguyên tố giao điểmSẽ không bị tự động tăng thêm đến hồ sơ trung,Yêu cầu tay động mà thuyên chuyển phương pháp đem này cắm vào đến hồ sơ trung.
(3)Đương sáng tạo đơn cái nguyên tố khi, cầnChú ý khép kín nhãnCùngSử dụng tiêu chuẩn XHTML cách thức.eg: $( "<p/>" ); hoặc $( "<p></p>" );.
(4)Sáng tạo văn bản giao điểm chính là ở sáng tạo nguyên tố giao điểm khi trực tiếp đem văn bản nội dung viết ra tới; sáng tạo thuộc tính giao điểm cũng là ở sáng tạo nguyên tố giao điểm khiCùng nhau sáng tạo.
2. Bên trong cắm vào:
2.1 giới thiệu:
Bên trong cắm vào pháp bản chất là ở nguyên tố nội cắm vào nội dung, sử cắm vào nội dung biến thành nên nguyên tố tử nguyên tố hoặc tử giao điểm.(Thuyên chuyển chính là JQuery đối tượng phương pháp)
Thường dùng phương pháp như sau ——
(1)append(content): Hướng mỗi cái xứng đôi nguyên tốBên trong kết cục chỗThêm vào nội dung ( eg: A.append(B), chỉ ở A bên trong kết cục chỗ cắm vào B ).
(2)appendTo(content): Đem mỗi cái xứng đôi đến nguyên tố thêm vào đến chỉ định nguyên tốBên trong kết cục chỗ( A.appendTo(B), chỉ đem A cắm vào đến B bên trong kết cục chỗ ).
(3)prepend(content): Hướng mỗi cái xứng đôi nguyên tốBên trong mở đầu chỗThêm vào nội dung ( eg: A.prepend(B), chỉ ở A bên trong mở đầu chỗ cắm vào B ).
(4)prependTo(content): Đem mỗi cái xứng đôi đến nguyên tố thêm vào đến chỉ định nguyên tốBên trong mở đầu chỗ( A.prependTo(B), chỉ đem A cắm vào đến B bên trong mở đầu chỗ ).
2.2 ví dụ thực tế
InnerSort.html số hiệu như sau:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title> bên trong bài tự biểu thị </title>
<style>
div {
background-color: lightcyan;
width: 350px;
height: 170px;
border: 2px pink solid;
}
#littleDiv {
background-color: lightseagreen;
width: 125px;
height: 50px;
border: 2px purple solid;
}
</style>
<script type= "text/javascript" src= "../../js/jquery-3.7.0.min.js" ></script>
<script>
$(function () {
$( "#but01" ).click(function () {
var $div = $( "<div id=\" littleDiv\ "> bên trong kết cục chỗ </div>" );
$( "#div01" ).append($div);
});
$( "#but02" ).click(function () {
var $div = $( "<div id=\" littleDiv\ "> bên trong mở đầu chỗ </div>" );
$( "#div02" ).prepend($div);
});
$( "#but03" ).click(function () {
var $div = $( "<div id=\" littleDiv\ "> bên trong mở đầu chỗ </div>" );
$div.prependTo($( "#div01" ));
});
$( "#but04" ).click(function () {
var $div = $( "<div id=\" littleDiv\ "> bên trong kết cục chỗ </div>" );
$div.appendTo($( "#div02" ));
});
});
</script>
</head>
<body>
<div id= "div01" >
Đây là cái thứ nhất div ( chú ý tăng thêm nguyên tố khi ở ta phía trên vẫn là dưới )
</div>
<br/><br/>
<div id= "div02" >
Đây là cái thứ hai div ( chú ý tăng thêm nguyên tố khi ở ta phía trên vẫn là dưới )
</div>
<br/><br/>
<input type= "button" id= "but01" value= "Điểm ta, hướng cái thứ nhất div bên trong kết cục chỗ thêm vào một cái tiểu div" /> <br/>
<input type= "button" id= "but02" value= "Điểm ta, hướng cái thứ hai div bên trong mở đầu chỗ thêm vào một cái tiểu div" /> <br/>
<input type= "button" id= "but03" value= "Điểm ta, đem một cái tiểu div thêm vào đến cái thứ nhất div bên trong mở đầu chỗ" /> <br/>
<input type= "button" id= "but04" value= "Điểm ta, đem một cái tiểu div thêm vào đến cái thứ hai div bên trong kết cục chỗ" />
</body>
</html>Vận hành hiệu quả: ( như sau GIF đồ )
3. Phần ngoài cắm vào:
3.1 giới thiệu
Phần ngoài cắm vào pháp bản chất là ở nguyên tố ngoại cắm vào nội dung, sử cắm vào nội dung biến thành nên nguyên tố huynh đệ giao điểm.(Thuyên chuyển chính là JQuery đối tượng phương pháp)
Thường dùng phương pháp như sau ——
(1)after(content): Ở mỗi cái xứng đôi nguyên tốPhần ngoài kết cục chỗCắm vào nội dung ( eg: A.after(B), chỉ ở A nguyên tố lúc sau cắm vào B nguyên tố, sử B trở thành A sau huynh đệ giao điểm ).
(2)insertAfter(content): Đem mỗi cái xứng đôi đến nguyên tố cắm vào đến chỉ định nguyên tốPhần ngoài kết cục chỗ.( eg: A.insertAfter(B), chỉ đem A đối tượng cắm vào đến B đối tượng mặt sau )
(3)before(content): Ở mỗi cái xứng đôi nguyên tốPhần ngoài mở đầu chỗCắm vào nội dung ( eg: A.before(B), chỉ ở A nguyên tố phía trước cắm vào B nguyên tố, sử B trở thành A trước huynh đệ giao điểm ).
(4)insertBefore(content): Đem mỗi cái xứng đôi đến nguyên tố cắm vào đến chỉ định nguyên tốPhần ngoài mở đầu chỗ( eg: A.insertBefore(B), chỉ đem A đối tượng cắm vào đến B đối tượng phía trước ).
3.2 ví dụ thực tế
OuterSort.html số hiệu như sau:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title> phần ngoài bài tự biểu thị </title>
<script type= "text/javascript" src= "../../js/jquery-3.7.0.min.js" ></script>
<script type= "text/javascript" >
$(function () {
$( "#but01" ).click(function () {
$( "#rock" ).after( "<li id=\" ka\ "> Kaslana </li>" );
});
$( "#but02" ).click(function () {
$( "#rock" ).before( "<li id=\" sha\ "> Schariac </li>" );
});
$( "#but03" ).click(function () {
var $li_jia = $( "<li id=\" jia\ "> người qua đường Giáp </li>" );
$li_jia.insertAfter($( "#shit" ));
});
$( "#but04" ).click(function () {
var $li_yi = $( "<li id=\" yi\ "> người qua đường Ất </li>" );
$li_yi.insertBefore($( "#shit" ));
});
})
</script>
</head>
<body id= "character" >
<ul>
<li id= "wind" name= "Barbatos" > Barbatos </li>
<li id= "rock" name= "Zhongli" > ma kéo khắc tư </li>
<li id= "light" name= "Bool" > Baal </li>
<li id= "shit" name= "Auto" > Apocalypse </li>
</ul>
<button id= "but01" > điểm ta, ở ma kéo khắc tư mặt sau gia tăng Kaslana </button>
<br/><br/>
<button id= "but02" > điểm ta, ở ma kéo khắc tư phía trước gia tăng Schariac </button>
<br/><br/>
<button id= "but03" > điểm ta, đem người qua đường Giáp cắm vào đến Apocalypse lúc sau </button>
<br/><br/>
<button id= "but04" > điểm ta, đem người qua đường Ất cắm vào đến Apocalypse phía trước </button>
</body>
</html>Vận hành hiệu quả ( GIF đồ )
Tam, giao điểm mặt khác tương quan thao tác
1. Xóa bỏ giao điểm:
(1)remove()—— từ DOM thụ trung xóa bỏ sở hữu xứng đôi nguyên tố, truyền vào tham số dùng choCăn cứ JQuery biểu đạt thức tới sàng chọn nguyên tố,Đương nào đó giao điểm sử dụng remove() phương pháp xóa bỏ sau, nên giao điểm sở bao hàm sở hữu hậu đại giao điểm cũng đem bị đồng thời xóa bỏ, nên phương pháp phản hồi giá trị là một cái chỉ hướng đã bị xóa bỏ giao điểm trích dẫn.
(2)empty()—— quét sạch trước mặt giao điểm, chỉ quét sạch nguyên tố trung sở hữu hậu đại giao điểm ( không bao hàm thuộc tính giao điểm ) mà trước mặt nguyên tố bản thân vẫn cứ tồn tại.
2. Phục chế giao điểm:
(1)clone()—— clone xứng đôi DOM nguyên tố, phản hồi giá trị vì clone sau phó bản, nhưng lúc này phục chế tân giao điểm không có bất luận cái gì hành vi ( không có clone sự kiện ).
(2)empty()——Phục chế nguyên tố đồng thời cũng phục chế nguyên tố trung sự kiện.
3. Thay đổi giao điểm:
(1)replaceWith()—— đem sở hữu xứng đôi nguyên tố đều thay đổi vì chỉ định HTML nguyên tố hoặc JQuery đối tượng ( eg: A.replaceWith(B), chỉ, dùng B thay đổi sở hữu A ).
(2)replaceAll()——Hiệu quả cùng replaceWith tương phản.
PS:Nếu bị thay đổi nguyên tố thượng đã trói định sự kiện, như vậy nguyên tố bị thay đổi sau, này ban đầu trói định sự kiện sẽ cùng ban đầu nguyên tố cùng nhau biến mất.Nếu dùng cho thay đổi nguyên tố trói định sự kiện, tắc thay đổi sau, tân sự kiện có hiệu lực.
4. Biến lịch giao điểm:
Thường dùng biến lịch giao điểm phương pháp ——
(1)children()—— thu hoạch xứng đôi nguyên tốSở hữu tử nguyên tốTạo thành tập hợp. ( chỉ suy xét tử nguyên tố, mà không suy xét mặt khác hậu đại nguyên tố ).
(2)next() / nextAll()—— thu hoạch xứng đôi nguyên tốMặt sauCùng thế hệ nguyên tố tập hợp ( thu hoạchMột cái hoặc sở hữu).
(3)prev() / prevAll()—— thu hoạch xứng đôi nguyên tốPhía trướcCùng thế hệ nguyên tố tập hợp ( thu hoạchMột cái hoặc sở hữu).
(4)siblings()—— thu hoạch xứng đôi nguyên tốTrước sau sở hữuCùng thế hệ nguyên tố tập hợp.
(5)nextAll().eq(index)—— thu hoạch chỉ định đệ mấy cái nguyên tố.
(6)nextAll().filter( "tag" )——Đối thu hoạch đến cùng thế hệ nguyên tố tiến hành lọc.
Quét qua
1049
Đến 【 tưới nước nhạc viên 】 lên tiếng
