var UL = $("
").appendTo(cDiv)
for (var i = 1; i < 10; i ) {
$("
"). AppendTo(UL).text("hello" i).mouseover(function () {
$(this).css(
{
'color': 'white',
'Background' : '회색'
}
);
}).mouseout(function () {
$(this).css(
{
'color': '검은색',
'Background': 'white'
});
}).click(function () {
// cDiv를 시각화하고 선택한 crrent li의 텍스트를 iDiv의 텍스트로 설정
$ ("#cDiv").slideUp().hide();
$("#iDiv").html($(this).html())
}
// 이제 cDiv를 슬라이드 쇼
$("#cDiv").slideDown('slow')
마우스를 올리면 각 li 레코드가 추가되는 것을 볼 수 있습니다. mouseout 및 클릭 이벤트.
클릭 이벤트가 발생하면 cDiv를 SlideUp으로 제공해야 할 뿐만 아니라 다음에 iDiv를 클릭하기 전에 이를 숨기고 cDiv를 지워야 합니다. 이 두 가지 점이 매우 중요합니다. 이 두 가지 일을 하지 않으면 어떤 일이 일어날지 시험해 볼 수 있습니다.
li를 클릭할 때 현재 li의 html 콘텐츠를 iDiv에 복사하는 것을 잊지 마세요. 그렇지 않으면 컨트롤이 실질적인 효과를 발휘하지 못합니다. . . . .
3. Ajax를 사용하여 서버에서 드롭다운 목록의 값을 가져옵니다.
서버에서 드롭다운 목록의 값을 동적으로 가져와야 하는 경우가 많기 때문에 iDiv를 클릭할 때 먼저 jQuey의 ajax 메서드(또는 다른 ajax)를 통해 서버에서 데이터를 로드해야 합니다. 방법), 데이터 로드가 완료되면 방금 UL 목록 생성을 시작했습니다.
Ajax 요청의 데이터 소스로 WCF Servece를 사용하고 있습니다.
사용자 편의성을 높이기 위해 서버에서 데이터를 가져올 때 iDiv가 로드 이미지로 표시되도록 했습니다. . . . . . . . . . . .
2. 재생되는 동영상 파일(플래시 또는 Silverlight 플레이어)을 새로 고치지 않고 전환하려면 jQuery의 추가 기능을 사용하세요.
이전에도 이런게 필요한 미니사이트가 있었습니다. 연구해봤는데 정말 효과가 있더군요.
이러한 플레이어는 모두 삽입 컨트롤이므로 삽입의 src 속성을 대체하여 다양한 동영상을 재생할 수 있습니다. 예:
jQuery의append() 메소드를 사용하면 embed의 src를 변경하고 div1의 html을 다시 바꿀 수 있습니다. 이는 페이지에서 ajax 기술을 사용하는 것과 같습니다.
$("#div1 embed"). 비어 있음() ;
var placeHolder = $("
")
var tempParent = $("
")
var embed = $("# div1 embed" );
embed.replaceWith(placeHolder);
tempParent.append(embed);
embed.attr("src", http://player.ku6.com/refer/DMFZdNYzKDEosiPG/ v.swf&auto =1);
placeHolder.replaceWith(tempParent.html())
3. jQuery를 사용하여 HTML용 머리글 및 바닥글 기능을 구현합니다.
PHP와 asp.net에는 헤더, 푸터 등의 컨트롤이 있는데, php에서는 include를 사용하지만, asp.net에서는 master나 ascx를 사용합니다. HTML의
은 어떻습니까? 나는 그런 적이 없다고 믿습니다. 그런데 고객이 사용자가 너무 많아서 걱정이라며 페이지를 html로 만들어야 한다고 요청했습니다. . . . .
바닥글과 머리글을 사용하면 이러한 부분의 내용을 수정해야 할 때 한 페이지만 수정하면 모든 페이지가 변경된다는 장점이 있습니다.
나중에 jquery의 load() 메서드를 사용하는 방법을 찾았습니다.
먼저 HTML에 두 개의 Div를 추가해야 합니다. 하나는 상단에, 다른 하나는 Id='header' 및 id='footer'를 갖는 것이 가장 좋습니다. .
그런 다음 서버 측에서는 header.html과 footer.html만 생성하면 됩니다.
페이지가 로드되면 jquery의 로드 메소드를 사용하여 header.html 및 footer.html을 로드합니다.
코드:
코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.
$("#header").load("controls/header.html", function (response, status, xhr) {
if (status == "error") {
var msg = "서버 데이터 전송 오류입니다. 페이지를 새로고침하세요."
// $("#error").html(msg xhr.status " " xhr.statusText); msg);
}
});
// 서버에서 바닥글 로드
$("#footer").load("controls/footer.html", 함수(응답, 상태, xhr) ) {
if (status == "error") {
var msg = "서버 데이터 전송 오류입니다. 페이지를 새로고침하세요."
// $("#error").html(msg xhr .status " " xhr .statusText);
alert(msg);
}
})
가능하다면 몇 가지 jQuery 기술을 요약하여 공유하겠습니다. 나중에. . . . . . . . 나중에 드롭다운 상자 코드의 다운로드 주소도 알려드리겠습니다.
건배
닉
코드 다운로드:
http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar
코드 다운로드: 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
