jQuery는 페이지 데이터와 이벤트 위임을 동적으로 추가합니다.
- 小云云원래의
- 2018-01-12 10:53:391338검색
이 글에서는 페이지 데이터를 동적으로 추가하는 jQuery 관련 정보와 이벤트 위임에 대해 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
우리가 수행하고 싶은 작업은 페이지 시작 부분에 사진이 몇 개 있다는 것입니다. 클릭하면 사진의 일부가 현재 페이지로 로드됩니다. 다시 클릭하고 나열된 페이지가 로드가 완료되고 링크가 사라질 때까지 계속 로드합니다.
첫 번째 렌더링은 다음과 같습니다.
페이지 하단 부분만 캡처합니다. 마우스를 이미지 위로 가져가면 텍스트가 나타나고, 마우스를 밖으로 이동하면 텍스트가 사라집니다.
이제 해야 할 일은 아래의 MorePhotos 링크를 클릭할 때 데이터의 다른 부분을 로드한 다음, 데이터가 로드될 때까지 데이터의 다른 부분을 클릭하여 로드하는 것입니다.
먼저 본문에 있는 코드는 다음과 같습니다.
<p id = "container">
<h1> Photo Gallery</h1>
<p id = "gallery">
<p class = "photo">
<img src = "./images/1.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye ....</p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/2.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye.... </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/3.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye.... </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
//若干图片
</p>
<p class = "link"><a id = "more-photos" href = "1.html"> More Photos >></a></p>
</p>그런 다음 동일한 루트 디렉터리에 여러 개의 HTML 코드 조각을 작성하여 로드합니다.
예를 들어 다음과 같은 1.html 코드가 있습니다
<p class = "photo">
<img src = "./images/1.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/2.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/3.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/4.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/5.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/6.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>이 HTML 조각에서는 6개의 이미지를 소개했습니다. 2.html 등의 다른 프래그먼트도 위의 프래그먼트를 모방하여 작성할 수 있습니다. 많은 HTML 조각을 정의한 후 jQuery를 사용하여 데이터를 동적으로 추가합니다.
먼저 jquery 라이브러리를 소개합니다. http://libs.baidu.com/jquery/1.9.0/jquery.js
<script>
$(document).ready(function(){
//首先定义一个变量来记录当前是多少页
var pageNum = 1;
//给链接添加点击事件
$("#more-photos").click(function(event){
event.preventDefault();
var $link = $(this);
//获得当前所点链接的url
var url = $link.attr('href');
//如果该链接的url存在，进行页面追加
if(url){
$.get(url, function(data){
$("#gallery").append(data);
});
pageNum ++;
//总共有十个片段要追加，名称分别为1.html,2.html ...10.html
当当前页面的总数小于总数时，进行链接更新。
if(pageNum < 10){
$link.attr('href', './'+pageNum+'.html');
}
//当将所有片段追加完成后，移除链接。
else{
$link.remove();
}
}
})
});위 코드는 페이지에 동적으로 데이터를 추가할 수 있습니다.
하지만 Google Chrome에 다음 오류가 표시됩니다.
jquery.js:8475 XMLHttpRequest가 파일을 로드할 수 없습니다:///C:/Users/%E9%95%BF%E5%AD%99%E4 %B8% B9%E5%87%A4/Desktop/webtest/1.html 교차 출처 요청은 http, data, chrome, chrome-extension, https.
IE10 환경에서 테스트되었으며 문제 없는 프로토콜 체계에 대해서만 지원됩니다.
해결 방법은 웹 서버를 설치한 뒤, 해당 파일을 프로젝트에 복사하고, 웹 서버에 있는 경로로 접속하면 문제 없을 겁니다! http://localhost:8080/ajax/ajaxLoad.html
마우스 호버 이벤트로 인해 사진 위로 마우스를 가져가면 텍스트가 나타납니다. 마우스를 밖으로 움직이면 텍스트가 나타납니다. 그림이 사라집니다.
$(document).ready(function(){
$('p .photo').hover(function(){
$(this).find('.details').fadeTo('slow', 0.7);
},function(){
$(this).find('.details').fadeOut('slow');
})
});또는 위의 코드를 결합하여 중복 코드를 줄일 수 있습니다:
$(document).ready(function(){
$('p.photo').on('mouseenter mouseleave',
function(event){
var $details = $(this).find('.details');
if(event.type == 'mouseenter'){
$details.fadeTo('slow', 0.7);
//0.7代表的是透明度
}
else{
$details.fadeOut('slow');
}
})
}); 위의 두 코드를 사용하여 각 이미지에 마우스 호버 이벤트를 추가하면 초기 페이지의 해당 이미지만 이벤트만 바인딩되지만 이벤트는 동적으로 로드된 그림에 바인딩될 수 없습니다. 이벤트 핸들러는 메서드가 호출될 때 이미 존재하는 요소에만 추가되므로 이러한 방식으로 동적으로 추가된 요소에는 해당 이벤트가 바인딩되지 않습니다.
두 가지 해결 방법이 있습니다.
1. 동적 로딩 후 이벤트 핸들러를 다시 바인딩합니다.
2. 처음부터 이벤트를 기존 요소에 바인딩하고 이벤트 버블링에 의존합니다.
다음 단계는 jquery의 대리자 메서드를 사용하는 것입니다.
$(document).ready(function(){
$('#gallery').on('mouseenter mouseleave', 'p.photo', function(event){
var $details = $(this).find('.details');
if(event.type == 'mouseenter'){
$details.fadeTo('slow', 0.7);
}
else{
$details.fadeOut('slow');
}
})
})$('#gallery').on('mouseenter mouseleave', 'p.photo', function(event), in 'p.photo' '두 번째 매개변수인 .on() 메소드는 이를 선택기와 일치하는 갤러리의 요소에 매핑합니다. 즉, 이는 갤러리에서 p class= 'photo'인 요소를 가리킵니다. 마지막으로 추가된 페이지는 모두 갤러리 아래의 요소에 속하므로 해당 이벤트가 각 사진에 추가됩니다.
추가하려는 페이지가 어느 상위 요소에 속하는지 모르는 경우 $를 넣을 수 있습니다. 문서가 있는 ('#gallery').on()의 '#gallery'입니다. 이렇게 하면 문서가 페이지에 있는 모든 요소의 조상이기 때문에 잘못된 컨테이너를 선택하는 것에 대해 걱정할 필요가 없습니다. 문서 사용의 단점:
DOM 중첩 구조가 매우 깊으면 이벤트가 다수의 상위 요소를 통해 버블링될 때 큰 성능 손실이 발생합니다.
일반적으로 이벤트 핸들러는 DOM 요소가 로드될 때까지 바인딩되지 않습니다. 이것이 바로 $(document).ready(function(){} 안에 코드를 넣는 이유입니다. 문서 요소는 페이지가 로드될 때 거의 사라집니다. 핸들러는 완전한 DOM이 구축될 때까지 기다리지 않고 문서에 바인딩됩니다. 예를 들어 위 코드는 '
(function($){
$(document).on('mouseenter mouseleave', 'p.photo', function(event){
var $details = $(this).find('.details');
if(event.type == 'mouseenter'){
$details.fadeTo('slow', 0.7);
}
else{
$details.fadeOut('slow');
}
})
})(jQuery);전체 문서가 준비될 때까지 기다리지 않기 때문에 모든 ffc9c8114f841227815a848e4d92fbf8 요소가 페이지에 표시되는 한 mouseenter 및 mouseleave 동작을 적용할 수 있습니다. 위에는 jQuery를 사용하여 페이지 데이터를 동적으로 추가하고 이벤트 위임에 대한 모든 지식이 있습니다. 소스 코드는 아래에 첨부되어 있습니다.
动态加载 <script> $(document).ready(function(){ var pageNum = 1; $("#more-photos").click(function(event){ event.preventDefault(); var $link = $(this); var url = $link.attr('href'); console.log(url); if(url){ $.get(url, function(data){ $("#gallery").append(data); }); pageNum ++; if(pageNum < 4){ $link.attr('href', './'+pageNum+'.html'); } else{ $link.remove(); } } }) }) // $(document).ready(function(){ // $('p .photo').hover(function(){ // $(this).find('.details').fadeTo('slow', 0.7); // },function(){ // $(this).find('.details').fadeOut('slow'); // }) // }) $(document).ready(function(){ $(&#39;#gallery&#39;).on(&#39;mouseenter mouseleave&#39;, &#39;p.photo&#39;, function(event){ var $details = $(this).find(&#39;.details&#39;); if(event.type == &#39;mouseenter&#39;){ $details.fadeTo(&#39;slow&#39;, 0.7); } else{ $details.fadeOut(&#39;slow&#39;); } }) }) </script>
Photo Gallery
The Cullin Mountains, Isle of skye ....
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye....
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye....
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye .....
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye ....
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye ...
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye....
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye.....
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye ......
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye
12/24/2000
Alasdair Dougall
The Cullin Mountains, Isle of skye
12/24/2000
Alasdair Dougall
관련 권장 사항:
PHP 디자인 패턴의 위임 패턴에 대한 자세한 설명
JavaScript의 이벤트 위임에 대한 기본 JS 및 jQuery 예제 코드 공유
위 내용은 jQuery는 페이지 데이터와 이벤트 위임을 동적으로 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!