자주 사용하는 jquery 폼 대상의 속성과 값 가져오기
39202 단어 Jquery 및 해당 구성 요소
JQuery의 개념JQuery은 JavaScript의 라이브러리입니다. 이 라이브러리는 많은 기능 방법을 모았습니다. 라이브러리를 이용하여 간단한 코드로 복잡한 JS 효과를 실현할 수 있습니다.2.
JQuery은 코드의 분리를 실현하였다.웹 페이지에 onclick 같은 이벤트를 추가하여 함수를 호출할 필요가 없습니다. JQuery 라이브러리와 자신이 작성한 JQuery 코드를 직접 도입하면 됩니다.예:
$(function(){
$("Element").click{function(){
alert(" ！");
}
}
})；
위 코드에서
Element을 정의하면 이 요소 뒤에 있는 click이 동작입니다.alert(" ！") ;이것은 실행할 코드입니다. 물론 당신은 이 함수에서 많은 조작을 할 수 있습니다.이 안의 $이라는 번호는 JQuery을 대표하는 뜻으로 바로 유고를 인용하는 것이다.3.
JQuery의 핵심 방법each(callback)'은 $("Element").length;'원소의 개수를 순환하는 것과 같이 속성 $("Element").size();'도 원소의 개수이다. 그러나 괄호를 가진 방법은 $("Element").get();'어떤 원소가 페이지에 집합되어 수조의 형식으로 $("Element").get(index);을 저장하는 기능이다. index는 몇 번째 원소를 나타낸다.수조의 하표 $("Element").get().reverse();'얻은 수조 방향 ("Element1").index(("Element1").index(("Element2"));'원소2가 원소1에 있는 색인 값은...4、기본 대상 획득(여기서 획득한 것은 모두
Jquery 대상이지 Dom 대상이 아니다. 하지만 그들 둘은 전환할 수 있다) $("*")은'모든 대상을 획득한다는 뜻인데 나는 지금까지 이렇게 사용한 적이 없다. $("#XXX")'id=XXX의 요소 대상(id은 라벨의 id 또는 CSS 스타일 id)상용 $("input[name='username']") input 라벨 중 name='userName' 원소 대상 상용 $(".abc") '양식class 이름은.abc의 원소 대상은 $("div")'라벨 선택기에서 모든div원소를 선택하는데 $("#a,.b,span")'은 ID가 a인 원소와 클래스 b를 사용한 원소 및 모든span원소 $("#a .b p")'ID번호가 a이고 b양식의 모든 p원소를 사용했음을 나타낸다예:
<html>
<head>
<title>jquery title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.1.js">script>
<style type="text/css">
.checkCss{
color:blue;
}
.redioCss{
color:red;
}
style>
<script type="text/javascript">
$(function(){
// $("#XXX") id=XXX Jquery
$("#subt").click(function(){
// $("XXX") XXX Jquery
alert("input ："+$("input").length);
// $("XXX[name='YYY']") XXX name='YYY' Jquery
// val()
alert("name='userName' ："+$("input[name='userName']").val());
// value
alert("name='note' ："+$("input[name='note']").attr("value"));
alert(" ："+$("#sex option:selected").text());
alert(" ："+$("#sex").val());
alert(" ："+$("input[name='check']:checked").length);
if($("input[name='check']:checked").length>0){
var allCheckValue="";
var allCheckText="";
$("input[name='check']:checked").each(function(){
allCheckValue+=$(this).val()+" ";
allCheckText+=$(this).parent(".checkCss").text()+" ";
});
alert(" ："+allCheckText+" ："+allCheckValue);
}
if($("input[name='status']:checked").length>0){
alert(" ："+("input[name=′status′]:checked").parent(".redioCss").text()+" ："+("input[name=′status′]:checked").parent(".redioCss").text()+" ："+("input[name='status']:checked").val());
}
});
});
script>
head>
<body>
：<input type="text" name="userName" width="250"><br>
：<select id="sex" name="userSex" style="width: 155">
<option value="1"> option>
<option value="2"> option>
<option value="3"> option>
select><br>
：<span class="checkCss"><input type="checkbox" name="check" value="1"> span>
<span class="checkCss"><input type="checkbox" name="check" value="2"> span><br>
<span class="checkCss"><input type="checkbox" name="check" value="3"> span>
<span class="checkCss"><input type="checkbox" name="check" value="4"> span><br>
：<span class="redioCss"><input type="radio" name="status" value="1"> span>
<span class="redioCss"><input type="radio" name="status" value="2"> span><br>
：<input type="text" name="note" width="250"><br>
<input type="button" value=" " id="subt"><br>
body>
html>
5. 등급 요소 획득
$("Element1 Element2 Element3 ....")'앞의 부급 뒤의 서브집합 $("div > p")'div 아래의 모든 p원소 획득 $("div + p")'div 원소 뒤의 첫 번째 p원소 $("div ~ p")'div 뒤의 모든 p원소6. 간단한 대상 획득
$("Element:first")'HTML 페이지에서 특정 요소의 첫 번째 요소 $("Element:last")'HTML 페이지에서 특정 요소의 마지막 요소 ("Element:not(selector)")′은 주어진 선택기와 일치하는 모든 요소를 제거합니다. 예를 들어 ("Element:not(selector)")′은 주어진 선택기와 일치하는 모든 요소를 제거합니다.예를 들어 ("input:not(:checked)")은 선택하지 않은 모든 체크 상자를 선택한다는 뜻이다. $("Element:even")'짝수 행 $("Element:odd“）'홀수 행 $("Element:eq(index)")'주어진 색인 값 $("Element:gt(index)")'주어진 색인 값을 얻은 원소 이후의 모든 원소 $("Element:lt(index)")'주어진 색인 값을 얻은 원소 이전의 모든 원소7. 내용 대상의 취득과 대상의 가시성
$("Element:contains(text)")'요소에 text 텍스트 내용을 포함하는지 여부 $('Element:empty")'요소에는 하위 요소나 텍스트가 포함되지 않은 $("Element:partnt")'요소에는 하위 요소나 텍스트가 포함된 ("Element:has(selector)")'요소, 예를 들어 ("Element:has(selector)")'요소가 포함되는지 여부,예: ("p:has(span)")은 span의 모든 요소를 포함하는 p의 요소를 나타냅니다.8. 기타 대상 획득 방법
$("Element:hidden")'모든 ID 속성을 가진 원소 $("Element:visible")'모든 속성을 획득youlika의 원소 $("Element[id]")'모든 속성을 획득youlika가 아닌 원소 $("Element[attribute = youlika ]"'모든 속성을 획득youlika의 시작이 아닌 원소 $("Element[attribute != youlika ]"'어떤 속성을 획득하여 youlika의 끝이 아닌 원소 $("Element[attribute ^= youlika ]"'모든 속성을 획득하여속성은 youlika의 시작 요소인 ("Element[attribute("Element[attribute= youlika ]"′가 속성 선택기에 부합되는 것을 포함한다. 예를 들어 $("Element[attribute *= youlika ]"′이 속성 선택기에 부합되는 것을 포함한다. 예를 들어 ("Element[selector1][selector2][....]")은 ("Element[selector1][selector2][....]"), ("input[id][name][value=youlika ]")과 ID이 있는 Name의 value 요소를 획득한 것을 의미한다.9. 하위 요소의 획득
youlika'부모 아래 n번째 요소 선택 input'부모 아래 짝수 $("Element:nth-child(index)")'부모 아래 홀수 $("Element:nth-child(even)")'표현식 $("Element:nth-child(odd)")'부모 아래 첫 번째 하위 요소 선택 $("Element:nth-child(3n+1)")'부모 아래 마지막 하위 요소 선택 $("Element:first-child")'부모 아래 유일한 하위 요소와 일치,예를 들어 $("Element:last-child")은 $("Element:only-child") 목록에서 유일하므로 dt을 선택합니다.10. 양식 객체 획득
$(:input)// Input ， ， ， ， 。
$(:text)//
$(:password)//
$(:radio)//
$(:checkbox)//
$(:submit)//
$(:image)// ，
$(:reset)//
$(:button)//
$(:file)//
$(:hidden)// type hidden
$(:enabled)// input ， radio:enabled
$(:disabled)// input ，
$(:checked)//
$(:selected)//
11. 요소 속성의 설정과 제거
dl′은 첫 번째 일치하는 속성 값을 얻는다. 예를 들어 dt′은 첫 번째 일치하는 속성 값을 얻는다. 예를 들어 ("Element").attr(name) ("Element").attr(name)'특정한 원소에 속성 ("img").attr("src")'특정한 원소에 여러 속성을 한꺼번에 설정하는 $("Element".attr(key,value)")'은 모든 일치하는 원소에 계산된 속성 값을 설정한다.$("Element".attr({key:value,key1:value,....}))//속성 제거
좋은 웹페이지 즐겨찾기
