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

WBOY
풀어 주다: 2016-05-16 17:55:53
원래의
1089명이 탐색했습니다.


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 )




코드 복사


코드는 다음과 같습니다: $(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("클릭 이벤트");
});

코드 복사


코드는 다음과 같습니다:


$(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





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


css 코드


코드 복사 코드는 다음과 같습니다. .myClass1{ 색상: 파란색; 배경:#e58302;}
.myClass2{ 색상: 빨간색;}
.myClass3{ 테두리: 1px 높이: 50px 너비: 80px; :왼쪽;}


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿