javaee의 JQuery 연습 1
19121 단어 javaee
기본적으로 jQuery를 배우는 것은 그 방법과 선택기를 배우는 것이다. 기본 선택기, 등급 선택기를 포함한다.문서를 불러오는 방법, 클릭하는 방법...
JQuery 및 Dom 객체:
JQuery 대상은 JQuery() 또는 $()로 dom 대상을 포장한 후의 대상이다.jQuery 대상은 jQuery 라이브러리에만 있는 것입니다.만약 jQuery 대상이라면
그러면 jQuery 라이브러리의 모든 방법을 사용할 수 있습니다. 주의해야 할 것은dom와 jQuery 두 대상은 상대방의 방법을 사용할 수 없기 때문에 전환이 필요합니다.
①,dom 객체와 jQuery 객체의 상호 변환
My JSP '02_jquery_turn.jsp' starting page
$(document).ready(function(){
var div = document.getElementById("div");
//dom jQuery
//div = $(div);
//alert(div);
var div1 = $("#div");
//jQuery dom
//div1 = div1.get(0);
//alert(div1);
var input1 = $("#div");
alert(input1.html()); // input1 html ，
alert(input1.text()); // input1 ， html
alert(input1.val()); // value
});
div
②、기본 선택기
$(document).ready(function(){
//
doAnimate($("#div5")[0]);
$("#btn1").click(function(){
$("#div4>div:first").addClass("cBlack");
});
$("#btn2").click(function(){
$("#div4>div:last").addClass("cBlack");
});
$("#btn3").click(function(){
$("#div2 :not(div)").addClass("cBlack");
});
$("#btn4").click(function(){
$("div:even").addClass("cBlack");
});
$("#btn5").click(function(){
$("div:odd").addClass("cBlack");
});
$("#btn6").click(function(){
$("div:eq(2)").addClass("cBlack");
});
$("#btn7").click(function(){
$("div:gt(2)").addClass("cBlack");
});
$("#btn8").click(function(){
$("div:lt(2)").addClass("cBlack");
});
$("#btn9").click(function(){
//alert($(":header"));
$(":header").css("color","white").addClass("cBlack");
});
$("#btn10").click(function(){
$(":animated").addClass("cBlack");
});
});
function doAnimate(obj){
$(obj).animate({"opacity":"toggle"},"slow",function(){
doAnimate(this);
});
};
id div1 div
class subDivCls div
id div2 div
div2 span,id span1
class subDivCls div
subDivCls
span2
id div3 div，title itcast，
div3 span
id div4 div
subDivCls
span4
title itcast
class subDivCls div
id div5 div
③、등급 선택기
$(document).ready(function(){
$("#btn1").click(function(){
$("#div2 span").addClass("cBlack");
});
$("#btn2").click(function(){
$("#div2 >span").addClass("cBlack");
});
$("#btn3").click(function(){
$("#div2+div").addClass("cBlack");
});
$("#btn4").click(function(){
$("#div2~ span").addClass("cBlack");
});
$("#btn5").click(function(){
$("#div2").siblings("div").addClass("cBlack");
});
});
id div1 div
class subDivCls div
id div2 div
div2 span,id span1
class subDivCls div
subDivCls
span2
id div3 div，title itcast，
div3 span
id div4 div
subDivCls
span4
title itcast
class subDivCls div
④ 하위 요소의 필터 선택기
$(document).ready(function(){
$("#btn1").click(function(){
// 1
$("ul li:nth-child(2)").addClass("cGreen");
});
$("#btn2").click(function(){
// 1
$("ul li:nth-child(odd)").addClass("cCyan");
});
$("#btn3").click(function(){
// 1
$("ul li:nth-child(3n)").addClass("cYellow");
});
$("#btn4").click(function(){
// 1
$("ul li:first-child").addClass("cPink");
});
$("#btn5").click(function(){
// 1
$("ul li:last-child").addClass("cBlue");
});
$("#btn6").click(function(){
// 1
$("ul li:only-child").addClass("cPurple");
});
});
：
-
-
-
-
-
：
-
-
-
-
：
-
⑤. 표시된 내용을 숨기는 선택기
、
$(document).ready(function(){
$("#btn1").click(function(){
$("div div:contains(itcast)").addClass("cBlack");
});
$("#btn2").click(function(){
$("div:empty").addClass("cBlack");
});
$("#btn3").click(function(){
$("div:has(span)").addClass("cBlack");
});
$("#btn4").click(function(){
$("div:parent").addClass("cBlack");
});
$("#btn5").click(function(){
alert($("input:hidden").val());
});
$("#btn6").click(function(){
$("input:visible").addClass("cBlack");
});
});
id div1 div
class subDivCls div
id div2 div
div2 span,id span1
class subDivCls div
subDivCls
span2
id div3 div，title itcast， ， hello
div3 span
id div4 div
subDivCls
span4
title itcast
class subDivCls div
⑥, 태그의 속성 필터링 선택기
$(document).ready(function(){
$("#btn1").click(function(){
$("div[id]").addClass("cBlack");
});
$("#btn2").click(function(){
$("div[title='itcast']").addClass("cBlack");
});
$("#btn3").click(function(){
$("div[title!='itcast']").addClass("cBlack");
});
$("#btn4").click(function(){
$("div[title^='it']").addClass("cBlack");
});
$("#btn5").click(function(){
$("div[title$='cast']").addClass("cBlack");
});
$("#btn6").click(function(){
$("div[title*='s']").addClass("cBlack");
});
$("#btn7").click(function(){
$("div[id][title*='s']").addClass("cBlack");
});
});
id div1 div，title test
class subDivCls div
id div2 div
div2 span,id span1
class subDivCls div
subDivCls
span2
id div3 div，title itcast，
div3 span
id div4 div
subDivCls
span4
title itcast
title test
jQuery에 대해 말하자면 경량급, 강력한 선택기와dom 조작의 봉인 이벤트 처리 메커니즘은 우리가 jQuery를 배울 만한 큰 하이라이트이다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
RMI 시작 인스턴스RMI는 JavaEE의 핵심 구성 요소이며 분산 개발의 기초입니다.다음은 RMI의 응용 프로세스를 보여 주는 예입니다. 업무 인터페이스 구축 RMI 서비스를 제공하는 인터페이스 클래스는 자바를 계승해야 합니다.rmi...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
