jQuery 양식 선택기

데이터를 제출하든 전송하든 동적 대화형 페이지에서 양식 요소의 역할은 매우 중요합니다. 양식 선택기가 jQuery에 특별히 추가되어 특정 유형의 양식 요소를 얻는 것이 매우 편리해졌습니다.

양식 선택기에 대한 구체적인 방법 설명:

참고:

입력 외에 필터 선택기에서 거의 모든 양식 카테고리 필터는 입력 요소의 유형 값에 해당합니다. 대부분의 양식 카테고리 필터는 속성 필터로 대체될 수 있습니다. 예를 들어 $(':password') == $('[type=password]')

양식의 양식 요소 수를 가져오려는 경우 코드는 다음과 같습니다.

$("#form1  :input").length;        //注意与$("#form1   input")的区别

원하는 경우 양식의 한 줄 텍스트 상자 수를 얻으려면 코드는 다음과 같습니다.

$("#form1   :text").length;

양식의 비밀번호 상자 수를 얻으려는 경우 코드는 다음과 같습니다.

$("#form1   :password").length;

마찬가지로 다른 양식 선택기는 다음과 유사합니다

페이지의 모든 <p> 요소를 가져오고 각각에 <p> 요소에 onclick 이벤트를 추가합니다. 예:

$("p").click(function({
            //doing somethingr（操作）
})

ID가 tb인 요소를 가져옵니다. 그런 다음 그 아래에서 tbody 태그를 찾은 다음 tbody 아래에서 인덱스 값이 짝수인 tr 요소를 찾아 배경색을 변경합니다(css(" property","value"); jQuery 객체의 스타일을 설정하는 데 사용됨). 예:

$('#tb tbody tr:even').css("BackgroundColor","#888");

속성 선택을 먼저 사용한 다음 양식 개체 속성을 사용하여 필터링하고 마지막으로 길이를 가져옵니다. 예를 들어 jQuery 객체의 경우:

$('#btn').click(function(){
                  var   length=$("input[name='check']:checked").length;
                  alert("选中的个数为："+length);
})

모든 입력 유형="text" 텍스트 상자 내용 지우기: $("input:text").val("");

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> input{ display: block; margin: 10px; padding:10px; } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style> input{ display: block; margin: 10px; padding:10px; } </style> </head> <body> <h2>子元素筛选选择器</h2> <h3>input、text、password、radio、checkbox</h3> <h3>submit、image、reset、button、file</h3> <div class="left first-div"> <form> <input type="text" value="text类型"/> <input type="password" value="password"/> <input type="radio"/> <input type="checkbox"/> <input type="submit" /> <input type="image" /> <input type="reset" /> <input type="button" value="Button" /> <input type="file" /> </form> </div> <script type="text/javascript"> //查找所有 input, textarea, select 和 button 元素 //:input 选择器基本上选择所有表单控件 $(':input').css("border", "1px groove red"); </script> <script type="text/javascript"> //匹配所有input元素中类型为text的input元素 $('input:text').css("background", "#A2CD5A"); </script> <script type="text/javascript"> //匹配所有input元素中类型为password的input元素 $('input:password').css("background", "yellow"); </script> <script type="text/javascript"> //匹配所有input元素中的单选按钮,并选中 $('input:radio').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的复选按钮,并选中 $('input:checkbox').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的提交的按钮,修改背景颜色 $('input:submit').css("background", "#C6E2FF"); </script> <script type="text/javascript"> //匹配所有input元素中的图像类型的元素,修改背景颜色 $('input:image').css("background", "#F4A460"); </script> <script type="text/javascript"> //匹配所有input元素中类型为按钮的元素 $('input:button').css("background", "red"); </script> <script type="text/javascript"> //匹配所有input元素中类型为file的元素 $('input:file').css("background", "#CD1076"); </script> </body> </html>

제출하다 코드 재설정

자동운전