Jquery 학습(4) - Jquery 공통 이벤트 메소드 인스턴스 효과
3809 단어 jquery
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function() {
// (focus)
$("#input1").focus(function() {
$("#input1").css("background-color", "#FFFFCC");
});
// (blur)
$("#input1").blur(function() {
$("#input1").css("background-color", "#D6D6FF");
});
// 、
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
// ， ：dblclick
$("#button1").dblclick(function(){
$("#p1").slideToggle(1000,function(){
alert(" ");
});
});
// ， keydown() keyup()
$("#input2").keydown(function(){
$("#input2").css("background-color","#FFFFCC");
});
//
$("#input2").keyup(function(){
$("#input2").css("background-color","#D6D6FF");
});
// ，
$("#button2").mousedown(function(){
$("#p2").slideToggle(1000,function(){
alert(" ...")
});
});
// （ ） ，
$("#p3").mouseenter(function(){
$("#p3").css("background-color","yellow");
});
//
$("#p3").mouseleave(function(){
$("#p3").css("background-color","#E9E9E4");
});
//
$(document).mousemove(function(e){
$("#span1").text(e.pageX + ", " + e.pageY);
});
});
</script></head>
<body>
<h2>jQuery </h2>
<p> ， ， ， 。</p>
INPUT NAME:
<input type="text" id="input1"/>
<p> ， </p>
INPUT NAME:
<input type="text" class="field"/>
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
<p id="p1">This is a paragraph.</p>
<button id="button1">Double-click to Toggle</button><br>
<p> keydown keyup ， 。 。</p>
INPUT NAME:
<input type="text" id="input2"/><p></p>
<p id="p2">This is a paragraph.</p>
<button id="button2">mousedown to Toggle</button><br>
<p style="background-color:#E9E9E4" id="p3"> 。</p>
<p> ： <span id="span1"></span>.</p>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
