jQuery 선택기 및 jquery 선택기 summary_jquery의 와일드카드 [id^='code'] 또는 [name^='code']

이틀 동안 특별한 주제를 할 때 와일드카드 문제가 발생했습니다

//弹层操作
$(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인 태그 요소의 동일한 상위 요소

에 속하는 모든 div 태그를 반환합니다.

기본 필터 선택기:

$("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" /> ]