jQuery 선택기 및 jquery 선택기 summary_jquery의 와일드카드 [id^='code'] 또는 [name^='code']
- WBOY원래의
- 2016-05-16 15:23:491376검색
이틀 동안 특별한 주제를 할 때 와일드카드 문제가 발생했습니다
//弹层操作
$(function(){
//视频播放
$("a[href^='#video']").each(function(index, element) {
$(this).click(function(){
$(".popDiv,#videoBox1").show();
});
});
//图片
$(".imgs a:not([href^='#video'])").each(function(){
$(this).children("img").click(function(){
var src=$(this).attr("attr");
//alert(src);
$("#picBox img").attr("src","images/" + src);
$(".popDiv,#picBox").show();
$("#picBox img").animate({opacity:'1'},500)
});
});
$(".close").click(function(){
$(".popDiv,.popBox").hide();
$(".box").css("margin","0 0 0 100%");
$("#picBox img").css({opacity:'0'},1000)
});
})
문제가 해결되었습니다! 이런 문제가 있는 경우 아래의 자세한 사용법을 참고하시면 됩니다.
1. 선택자
(1) 와일드카드:
$("input[id^='code']");//id属性以code开始的所有input标签
$("input[id$='code']");//id属性以code结束的所有input标签
$("input[id*='code']");//id属性包含code的所有input标签
$("input[name^='code']");//name属性以code开始的所有input标签
$("input[name$='code']");//name属性以code结束的所有input标签
$("input[name*='code']");//name属性包含code的所有input标签
$("input[name*='code']").each(fuction(){
var sum=0;
if($(this).val()!=""){
sum=parseInt(sum)+parseInt($(this).val());
}
$("#").text(sum);
})
(2) 색인에 따라
을 선택합니다.$("tbody tr:even"); //짝수 인덱스를 가진 모든 tr 태그 선택
$("tbody tr:odd"); //홀수 인덱스를 가진 모든 tr 태그 선택
(3) jqueryObj의 다음 레벨 노드의 입력 개수를 구합니다
jqueryObj.children("input").length;
(4) 메인 클래스
를 사용하여 레이블의 하위 노드 아래에 있는 모든 레이블을 가져옵니다.
$(".main > a");
(5)
옆의 라벨을 선택합니다.
jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div，nextAll获取所有
2. 필터
//not
$("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签
3. 이벤트
//处理文本框上的键盘操作
jqueryObj.keyup(function(event){
var keyCode = event.which;//获取当前按下键盘的键值，回车键为13
}
4. 유틸리티 기능
$('#someField').val($.trim($('#someField').val()));//消除空格，语法：$.trim(value)
ps: jQuery 선택기 요약
jQuery의 선택기는 매우 강력합니다. 다음은 일반적으로 사용되는 요소 검색 방법에 대한 간략한 요약입니다.
$("#myELement") id 값이 myElement와 동일한 요소를 선택합니다. id 값은 반복될 수 없습니다. 문서에는 id 값 myElement가 하나만 있을 수 있으므로 유일한 요소를 가져옵니다.
$("div") 모든 div 태그 요소를 선택하고 div 요소의 배열을 반환합니다.
$(".myClass") myClass 클래스의 CSS를 사용하여 모든 요소 선택
$("*") 문서의 모든 요소를 선택합니다. 공동 선택을 위해 다양한 선택 방법을 사용할 수 있습니다. 예: $("#myELement,div,.myclass")
계단식 선택기:
$("form input") 양식 요소의 모든 입력 요소 선택
$("#main > *") id 값이 main
인 모든 하위 요소를 선택합니다.
$("label input") 모든 레이블 요소 중 다음 입력 요소 노드를 선택합니다. 테스트 후 선택기는 입력 레이블 바로 뒤에 오는 모든 입력 레이블 요소를 반환합니다.
$("#prev ~ div") 형제 선택자, 이 선택자는 ID가 prev인 태그 요소의 동일한 상위 요소
기본 필터 선택기:
$("tr:first") 모든 tr 요소 중 첫 번째 요소 선택
$("tr:last") 모든 tr 요소 중 마지막
을 선택합니다.
$("input:not(:checked) 범위")
필터 아웃: 선택한 선택기의 모든 입력 요소
$("tr:even") 모든 tr 요소 중 0번째, 2번째, 4번째... 요소를 선택합니다. (참고: 선택한 여러 요소는 배열이므로 순서 번호는 0부터 시작됩니다.)
$("tr:odd") 모든 tr 요소 중 첫 번째, 세 번째, 다섯 번째... 요소 선택
$("td:eq(2)") 모든 td 요소 중 일련번호 2를 갖는 td 요소를 선택합니다
$("td:gt(4)") td 요소에서 시퀀스 번호가 4보다 큰 모든 td 요소를 선택합니다.
$("td:ll(4)") td 요소에서 시퀀스 번호가 4보다 작은 모든 td 요소를 선택합니다.
$(":헤더")
$("div:애니메이션")
콘텐츠 필터 선택기:
$("div:contains('John')")은 div에서 John 텍스트가 포함된 모든 요소를 선택합니다.
$("td:empty") 비어 있는 모든 td 요소의 배열을 선택합니다(텍스트 노드 제외)
$("div:has(p)") p 태그가 포함된 모든 div 요소 선택
$("td:parent") td를 상위 노드로 사용하는 모든 요소 배열을 선택합니다
시각적 필터 선택기:
$("div:hidden") 숨겨진 div 요소 모두 선택
$("div:visible") 보이는 모든 div 요소 선택
속성 필터 선택기:
$("div[id]") id 속성을 포함하는 모든 div 요소 선택
$("input[name='newsletter']") 이름 속성이 'newsletter'와 동일한 모든 입력 요소를 선택합니다.
$("input[name!='newsletter']")는 이름 속성이 'newsletter'와 같지 않은 모든 입력 요소를 선택합니다.
$("input[name^='news']") 이름 속성이 'news'로 시작하는 모든 입력 요소를 선택합니다.
$("input[name$='news']") 이름 속성이 'news'로 끝나는 모든 입력 요소를 선택합니다.
$("input[name*='man']") 이름 속성에 'news'가 포함된 모든 입력 요소를 선택하세요.
$("input[id][name$='man']") 공동 선택을 위해 여러 속성을 사용할 수 있습니다. 이 선택기는 id 속성을 포함하는 모든 요소를 가져오고 속성은 man
하위 요소 필터 선택기:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器：
$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器：
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();
$("A B") 查找A元素下面的所有子节点，包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点
1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点
例子：找到表单中所有的 input 元素
HTML 代码:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
2. $("A>B") 查找A元素下面的直接子节点
例子：匹配表单中所有的子级input元素。
HTML 代码:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]
3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
例子：匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点
例子：找到所有与表单同辈的 input 元素
HTML 代码:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]