jQuery 시리즈(二): 상용 선택기의 분석 및 응용 전문지(전체 프로그램 제공)
19624 단어 JavaScript
아래의 실례는 저의 프로젝트 수요에 따라 쓴 것입니다. 여러분들이 그 중에서 지식점과 관련된 부분을 추출하여 스스로 이해하면 넓어질 것입니다!!!
1. id 선택기 jQuery("#ID") 또는 $("#id")
document.getElementById()//1.btn1 id
$("#btn1").click(function(){
$("#one").css("background-color","#bbffaa");
});
getElementsByClassName() 함수를 호출하여 실현//2. class mini
$("#btn2").click(function(){
$(".mini").css("background-color","#bbffaa");
});
getElementsByTagName()//3. div
$("#btn3").click(function(){
$("div").css("background-color","#bbffaa");
});
//4.
$("#btn4").click(function(){
$("*").css("background-color","#bbffaa");
});
jQuery("selector1,...,selectorN") 또는 $("selector1,...,selectorN")
//5. span id two
$("#btn5").click(function(){
$("span,#two").css("background-color","#bbffaa");
});
나는 프로그램을 너에게 공유하여 스스로 진지하게 검증할 것이다
$(function(){
/*
1. $("E F")
2. $("E>F")
3. $("E+F")
4. $("E~F")
*/
//1. body div
$("#btn1").click(function(){
$("body div").css("background-color","#bbffaa");
});
//2. body ，div (div )
$("#btn2").click(function(){
$("body > div").css("background-color","#bbffaa");
});
//3. ， id one （ ）div
$("#btn3").click(function(){
$("#one+div").css("background-color","#bbffaa");
});
//4. id two div
$("#btn4").click(function(){
$("#two~div").css("background-color","#bbffaa");
});
})
class hide
input type hideen div
span
둘.차원 선택기
1. 후손 선택기 $("E F")
//1. body div
$("#btn1").click(function(){
$("body div").css("background-color","#bbffaa");
});
//2. body ，div (div )
$("#btn2").click(function(){
$("body > div").css("background-color","#bbffaa");
});
//3. ， id one div
$("#btn3").click(function(){
$("#one+div").css("background-color","#bbffaa");
});
//4. id two div
$("#btn4").click(function(){
$("#two~div").css("background-color","#bbffaa");
});
나는 프로그램을 너에게 공유하여 스스로 진지하게 검증할 것이다
$(function(){
/*
1. $("E F")
2. $("E>F")
3. $("E+F")
4. $("E~F")
*/
//1. body div
$("#btn1").click(function(){
$("body div").css("background-color","#bbffaa");
});
//2. body ，div (div )
$("#btn2").click(function(){
$("body > div").css("background-color","#bbffaa");
});
//3. ， id one （ ）div
$("#btn3").click(function(){
$("#one+div").css("background-color","#bbffaa");
});
//4. id two div
$("#btn4").click(function(){
$("#two~div").css("background-color","#bbffaa");
});
})
class hide
input type hideen div
span
셋.필터 선택기 (직접 예시)
1. 첫 번째div 요소 선택
//1. div
$("#btn1").click(function(){
$("div:first").css("background-color","#bbffaa");
});
2.class가 one이 아닌 모든div 요소를 선택합니다.
//2. class one div
$("#btn2").click(function(){
$("div:not(.one)").css("background-color","#bbffaa");
});
3. 인덱스 값이 0인 div 요소 선택
//3. 0 div
$("#btn3").click(function(){
$("div:eq(0)").css("background-color","#bbffaa");
});
4. 현재 애니메이션이 실행 중인 모든 요소를 선택합니다.
//4.
$("#btn4").click(function(){
$(":animated").css("background-color","#bbffaa");
});
5. 하위 요소가 있는 div 요소 선택
//5. div
$("#btn5").click(function(){
$("div:parent").css("background-color","#bbffaa");
});
6. 보이지 않는div 요소 모두 선택
//6. div
$("#btn6").click(function(){
$("div:hidden").show("normal").css("background-color","#bbffaa");
});
7. 속성 title 값이 "test"와 같은div 요소 선택
//7. title "test" div
$("#btn7").click(function(){
$("div[title='test']").css("background-color","#bbffaa");
});
8.class가 one인 div 부모 요소 아래의 첫 번째 하위 요소를 선택하십시오
//8. class one div
$("#btn8").click(function(){
$("div.one > :first").css("background-color","#bbffaa");
});
9. 모든class가 one인 div 부모 요소 아래의 첫 번째 하위 요소를 선택
//9. class one div
$("#btn9").click(function(){
$("div.one > :first-child").css("background-color","#bbffaa");
});
* 필터링 선택기 전체 프로그램
나는 프로그램을 너에게 공유하여 스스로 진지하게 검증할 것이다
$(function(){
// div
function anmateIt(){
$("#mover").slideToggle(1000,anmateIt);// ， ------
}
//slideToggle
anmateIt();
})
$(function(){
//1. div
$("#btn1").click(function(){
$("div:first").css("background-color","#bbffaa");
});
//2. class one div
$("#btn2").click(function(){
$("div:not(.one)").css("background-color","#bbffaa");
});
//3. 0 div
$("#btn3").click(function(){
$("div:eq(0)").css("background-color","#bbffaa");
});
//4.
$("#btn4").click(function(){
$(":animated").css("background-color","#bbffaa");
});
//5. div
$("#btn5").click(function(){
$("div:parent").css("background-color","#bbffaa");
});
//6. div
$("#btn6").click(function(){
$("div:hidden").show("normal").css("background-color","#bbffaa");
});
//7. title "test" div
$("#btn7").click(function(){
$("div[title='test']").css("background-color","#bbffaa");
});
//8. class one div
$("#btn8").click(function(){
$("div.one > :first").css("background-color","#bbffaa");
});
//9. class one div
$("#btn9").click(function(){
$("div.one > :first-child").css("background-color","#bbffaa");
});
});
id one div，class one div
class mini
id two，class one title test div
class mini title other
class mini title test
class mini
class mini
class mini
class mini
class mini
class mini
class mini
class mini title tesst
class hide
input type hideen div
span
div
넷.양식 필터링, 객체 등록 정보 선택기(직접 예)
1. 폼에 input 값을 부여할 수 있습니다
(필요한 경우 배경색을 추가하여 변경 사항을 쉽게 볼 수 있습니다.)
//1. input ( )
$("#btn1").click(function(){
$("input:enabled").val(" 1").css("background-color","#bbffaa");
})
2. 폼에 input 값을 부여할 수 없습니다
//2. input
$("#btn2").click(function(){
$("input:disabled").val(" 2").css("background-color","#bbffaa");
})
3. 다중 선택 상자의 개수 가져오기(중점)
//3. ( )
$("#btn3").click(function(){
var $cc = $(":checkbox:checked");
alert($cc.length);
});
4. 다중 선택 상자의 내용 가져오기(구덩이 있음)
//4. （ ）
$("#btn4").click(function(){
var $cc = $(":checkbox:checked");
// 1：
/*
for(var i= 0;i5. 드롭다운 상자의 내용 가져오기
//5.
$("#btn5").click(function(){
var $ss = $("select option:selected");
// jquery .each() $ss jquery， $ss.each()
$ss.each(function(){
//this dom $(this) jquery
//alert(this.value);
//
alert($(this).val());
})
});
* 양식 필터링, 객체 등록 정보 선택기 전체 프로그램
&
$(function(){
//1. input ( )
$("#btn1").click(function(){
$("input:enabled").val(" 1").css("background-color","#bbffaa");
})
//2. input
$("#btn2").click(function(){
$("input:disabled").val(" 2").css("background-color","#bbffaa");
})
//3. ( )
$("#btn3").click(function(){
var $cc = $(":checkbox:checked");
alert($cc.length);
});
//4. （ ）
$("#btn4").click(function(){
var $cc = $(":checkbox:checked");
// 1：
/*
for(var i= 0;i<$cc.length;i++)
{
alert($cc[i].value); //$cc[i] DOM
}
*/
// 2： 。each
$cc.each(function(){
//alert(this.value);//dom
//
alert($(this).val());//jquery
});
});
//5.
$("#btn5").click(function(){
var $ss = $("select option:selected");
// jquery .each() $ss jquery， $ss.each()
$ss.each(function(){
//this dom $(this) jquery
//alert(this.value);
//
alert($(this).val());
})
});
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
