jQuery 와일드카드 [id^='code'] 또는 [name^='code'] 선택기 요약
- 小云云원래의
- 2017-12-19 09:19:293126검색
지난 이틀 동안 특별한 주제를 작업하던 중 와일드카드 문제가 발생했습니다. 이 글에서는 주로 jQuery의 선택기에서 와일드카드 문자 [id^='code'] 또는 [name^='code']를 소개하고 jQuery에 대한 요약을 소개합니다. 선택기 필요한 친구들은 관련 정보를 참고해서 모두에게 도움이 되었으면 좋겠습니다.
//弹层操作
$(function(){
//视频播放
$("a[href^='#video']").each(function(index, element) {
$(this).click(function(){
$(".popp,#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);
$(".popp,#picBox").show();
$("#picBox img").animate({opacity:'1'},500)
});
});
$(".close").click(function(){
$(".popp,.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("p");//获取jqueryObj标签的后面紧邻的一个p，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가 하나만 있을 수 있습니다. 값은 myElement이므로 얻는 것은 유일한 요소입니다
$("p") 모든 p 태그 요소를 선택하고 p 요소의 배열을 반환합니다
$(".myClass") myClass 클래스의 CSS를 사용하여 모든 요소를 선택합니다
$("*") 공동 선택을 위해 다양한 선택 방법을 사용할 수 있습니다. 예: $( "#myELement,p,.myclass")
계단식 선택기:
$("form input") 양식 요소의 모든 입력 요소 선택
$("#main > *") 모든 하위 선택 id 값이 main
$("label + input")인 요소 모두 선택 레이블 요소의 다음 입력 요소 노드입니다. 테스트 후 선택기는 입력 레이블 바로 뒤에 오는 모든 입력 레이블 요소를 반환합니다. "#prev ~ p") 동포 선택기, 이 선택기는 다음을 반환합니다: ID가 prev인 태그 요소의 모든 p 태그는 동일한 상위 요소에 속합니다
기본 필터 선택기:
$("tr:first") 동일한 상위 요소에 속하는 모든 tr 요소 중 첫 번째$("
$("input:not(:checked) +span")
Filter out: 체크된 선택기의 모든 입력 요소
$("tr : ODD ") 첫 번째, 3, 5 ...를 선택합니다. ... ... 개인용 $ (" TD: EQ (2) ") 모든 TD 요소에서 일련 번호 2가 있는 TD 요소를 선택합니다. $("td:gt(4)") 다음을 사용하여 모든 td 요소를 선택할 수 있습니다. 4보다 큰 일련 번호 $("td:ll(4)") 일련 번호가 4보다 작은 모든 td 요소만 선택할 수 있습니다 $(" :header")
$("p:animated ")
$("p:contains('John')") p에서 John 텍스트를 포함하는 모든 요소를 선택합니다.
$("td:empty") 비어 있는 td 요소의 모든 배열을 선택합니다(텍스트 노드 제외)
$( "p:has(p)") p 태그를 포함하는 모든 p 요소 선택
$("td:parent") td를 상위 노드로 사용하는 모든 요소 배열 선택
시각적 필터 선택기:
$( "p:hidden") 모든 숨겨진 p 요소 선택
$("p:visible") 보이는 모든 p 요소 선택
속성 필터 선택기:
$( "p[id]") 모든 p 요소 선택 id 속성 포함
$("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)")
$("p span:first-child") 모든 p 요소의 첫 번째 하위 노드 배열을 반환합니다.
$("pspan:last-child") 모든 p 요소의 배열을 반환합니다. 마지막 노드의 배열
$("p 버튼: only-child") 모든 p에 하위 노드가 하나만 있는 모든 하위 노드의 배열을 반환합니다.
양식 요소 선택기:
$(" :input") 입력을 포함한 모든 양식 입력 요소를 선택합니다. 텍스트 영역, 선택 및 버튼
$(":text") 모든 텍스트 입력 요소 선택
$(":password") 모든 비밀번호 입력 요소 선택
$ (": Radio") 모든 라디오 입력 요소 선택
$ (" : Checkbox") 모든 Checkbox 입력 요소 선택
$ (": Submit") 모든 제출 입력 요소 선택
$ (": Image") 모든 이미지 입력 요소
$(":reset") 모든 재설정 입력 요소 선택
$( ":button") 모든 버튼 입력 요소 선택
$(":file") 모든 파일 입력 요소 선택
$( ":hidden") 모든 입력 요소 또는 숨겨진 유형의 양식의 숨겨진 필드 선택
양식 요소 필터 선택기:
$(":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" /> ]
相关推荐：
SQL中通配符、转义符与"["号的使用(downmoon)_PHP教程
위 내용은 jQuery 와일드카드 [id^='code'] 또는 [name^='code'] 선택기 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!