jQuery 연구 노트 제어 페이지 구현 code_jquery

each()는 요소(k1)를 순회합니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function () {
$("#btn").html("each()는 요소를 통과합니다.").click(function (event) {
$( "div").each(function (index) {
$(this).html("이것은 "index "div"입니다);
});
event.preventDefault() ;
});
})

속성 값 가져오기(k1) attr(name)

코드 복사 코드는 다음과 같습니다.

$(document).ready(function () {

$("#btn").html( "속성 값 가져오기").click(function (event) {
$("div").each(function () {
alert("제목 속성의 값은 다음과 같습니다." $(this). attr("title"));
event.preventDefault()
})


(k1) attr(이름,값), attr (이름,fn)
eg1

코드 복사

코드는 다음과 같습니다. 다음: $(document ).ready(function () { $("div").each(function () {

$(this).html(this. title);

});
$( "#btn").html("속성 값 설정").click(function (event) {
$("div").each(function ( ) {
$(this).attr("style ", "color:Red");
event.preventDefault()
});


eg2

코드 복사

코드는 다음과 같습니다. $(document).ready(function () { $( "div").each(function () { $(this).html(this.title); });

$("#btn").html("속성 값 설정" ).click(function (event) {

$("div").each(function (index) {
$(this) .attr("id", function () {
return "div -id" index;
}).html($(this).attr("id"))
}); 🎜>event.preventDefault();
});
})


속성 제거(k1) RemoveAttr(name)

요소 스타일 설정

코드 복사


코드는 다음과 같습니다.

addClass(names),removeClass(names),ggleClass( 이름) $(document).ready(function () { $ ("div").each(function () { $(this).html(this.title).addClass(" myClass1").mouseover(function () { $(this).toggleClass( "myClass2");

});

});
});


직접 가져와서 스타일 설정(k1) css(name), css(name,value )




코드 복사

코드는 다음과 같습니다:

$(document).ready(function () { $("div").each(function () { $(this).html (this.title).css({ color: "Red", opacity: "0.5" }).mouseover( function () { $(this).css("opacity", "1.0"); }).mouseout(function () {

$(this).css("opacity", " 0.5");

})
});

판단 CSS 유형 hasClass(name) is(name)


페이지 요소 처리
text()는 일반 텍스트 콘텐츠를 가져옵니다. html()은 innerHTML 속성을 가져옵니다. innerHTML 포함

요소 이동 및 복사(k2)append(),appendTo(target)에는 복사 및 이동, 단일 대상 이동, 다중 대상 복사의 두 가지 형식이 있습니다

코드 복사


코드는 다음과 같습니다.

$(document ).ready(function () { $("p"). 추가($("a:eq(0)")); $("p:eq(1)").append( $("a:eq(1)")); ; 노드 추가: before(), insertBefore(), after(), insertAfter() 예 하위 요소가 아닌 노드 바로 앞이나 뒤에 요소를 추가합니다. 복사 및 이동, 단일 대상 이동, 다중 대상 복사

요소 삭제(k2)
eg1: 제거()

코드 복사


코드는 다음과 같습니다.


$(function () {

$(" p").remove(":contains(P)");/ / $("p:contains("P")").remove() })와 동일;
eg2: 비어 있음() 참고: 비어 있음()과 제거() 사이에는 차이가 있습니다. 비어 있음()은 모든 하위 요소를 삭제합니다.

코드 복사 코드는 다음과 같습니다.

$(function () {
$("p").css({border:"1px solid #FF0000", height:"20px"} ).empty()
});

복사 및 이동 문제를 해결하기 위한 요소 복제(k3)

코드 복사 코드는 다음과 같습니다.

$(function () {
$("#btn-k3"). html("clone() 자신을 복제하고 이벤트를 복제합니다.").click(function () {
//자신을 복제하고 클릭 이벤트를 복제합니다(true로 설정)
$(this).clone(true). insertAfter(this)) ;
})

양식 요소 값 처리(k4) val()

코드 복사 코드는 다음과 같습니다.

$(function () {
$("input[type=button]") .click(function () {
var sValue = $( this).val();
$("input[type=text]").val(sValue);
}); >})


이벤트 처리 중

이벤트 리스너 바인딩(k5) bind(eventType,[data],Listener), eventTypeName(fn), one(eventType,Listener)

코드 복사 코드는 다음과 같습니다.

$(function () {

for (var i = 0; i $( "div:last").clone(true).insertAfter($("div:last"))
$ ("div").one("click", function () {
$(this).addClass("myClass1").html("한 번만 클릭할 수 있습니다.");
}); >})


이벤트 삭제(k5) unbind(), unbind("click"), unbind("click",myFunc)

코드 복사

코드는 다음과 같습니다. $(function () { $("div").clone().html( "unbind() 이벤트 삭제").click(function () {

$(" div").unbind();

}).insertAfter($("div"))
$( "div:first").click(function () {
alert("삭제되지 않은 이벤트");
})
})


/*속성 및 jQuery 이벤트 객체의 메서드
altKey Alt 키를 누르면 true, 그렇지 않으면 false
ctrlKey Ctrl 키를 누르면 true, 그렇지 않으면 false

keyCode keyup 및 keydown 이벤트, 키 값 반환("A"와 "a"는 동일한 값(65)을 가짐)
page.X,page .Y 도구 모음 및 스크롤을 제외한 클라이언트의 마우스 포인터 좌표 bar 등
관련Target 마우스 이벤트에 마우스 포인터가 들어가거나 나가는 요소
screenX, screenY 전체 컴퓨터 화면을 기준으로 한 마우스 포인터의 좌표 값
shiftKey는 Shift 키를 누를 때 true입니다. 눌려지면 false
이벤트를 발생시킨 요소/객체를 대상으로 합니다.
이벤트 이름을 입력합니다.
이것은 키보드 이벤트 키의 유니코드 값이고 마우스 키의 값을 나타냅니다. 이벤트(1은 왼쪽 버튼, 2는 가운데 버튼, 3은 오른쪽 버튼)
stopPropagation()은 이벤트가 위쪽으로 버블링되는 것을 방지합니다.
preventDefault()는 이벤트의 기본 동작을 방지합니다.
* /
자동으로 이벤트(k5 )를 발생시킵니다.

$(function () {
$("div").click(function () {
alert("클릭 이벤트");
});

$( ".myClass3").trigger("click") ; }) 클릭 이벤트의 동적 교체 구현(k6)ggle(fn,fn)

코드 복사


코드는 다음과 같습니다:


$(function () {

$("img"). attr("title","toggle()을 사용하여 클릭 이벤트 동적 변경 구현").toggle(function (event) {
$(event.target).attr("src", "Img/Img2.jpg") ;
},

함수(이벤트) { $(event.target).attr("src", "Img/Img1.jpg") }); ; 센서마우스(k6) 구현

코드복사


코드는 다음과 같습니다.


$(함수 () {
$("img").hover(함수 (이벤트) {

$(event.target).css("불투명도", "1.0") ;
},
함수(이벤트) {

$(event.target).css("opacity", "0.5") } }); html 코드

코드 복사


코드는 다음과 같습니다.

href="#">추가할 링크 1
추가할 링크 2

iPhone p>

Lumia900

;%--k4--%>

>


div class="myClass3">나를 클릭하세요

css 코드

코드 복사 코드는 다음과 같습니다. .myClass1{ 색상: 파란색; 배경:#e58302;}

.myClass2{ 색상: 빨간색;}

.myClass3{ 테두리: 1px 높이: 50px 너비: 80px; :왼쪽;}