jQuery wildcard [id^='code'] or [name^='code'] selector summary

I encountered a wildcard problem while doing a special topic these two days. This article mainly introduces the wildcard character [id^='code'] or [name^='code'] in jQuery's selector and jquery selection. Friends who need it can refer to the relevant information summarized by the device. I hope it can help everyone.

//弹层操作
$(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)
 });
 })

The problem has been solved! If you have such a problem, you can refer to the detailed usage below:

1. Selector

(1) Wildcard:

$("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) Select according to the index

$("tbody tr:even"); //Select the index as All tr ​​tags with even numbers
$("tbody tr:odd"); //Select all tr ​​tags with odd numbers

(3) Get the number of inputs of the next-level node of jqueryObj

jqueryObj.children("input").length;

(4) Get all labels under the child nodes of the label with class main

##

$(".main > a");

(5)Select the label immediately adjacent to

##

jqueryObj.next("p");//获取jqueryObj标签的后面紧邻的一个p，nextAll获取所有

2. Filter

//not
$("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签

3.Event

//处理文本框上的键盘操作
jqueryObj.keyup(function(event){
var keyCode = event.which;//获取当前按下键盘的键值，回车键为13
}

4. Tool function

$('#someField').val($.trim($('#someField').val()));//消除空格，语法：$.trim(value)

ps: jQuery selector summary jQuery's selector can be said to be extremely powerful. Here is a brief summary of commonly used element search methods

$("#myELement") Select the element whose id value is equal to myElement. The id value cannot be repeated There can only be one id value myElement in the document, so what you get is the only element

$("p") Select all p tag elements and return the p element array

$(".myClass") Select all elements using css of myClass class

$("*") Select all elements in the document, you can use a variety of selection methods Joint selection: For example, $("#myELement,p,.myclass")

Cascading selector: $("form input" )                                                                         ‐                                                                    out out out out out out out of the box - Select all input elements in form elements

$("#main > *")                                     out                                                 out             out               out The next input element node, after testing, the selector returns all the input label elements that are directly followed by an input label

$("#prev ~ p") The sibling selector returns the id of All p tags of the prev tag element that belong to the same parent element

Basic filter selector:

$("tr:first ")                                                                                                                 can select the first $ ("tr:last")                               can can be found.

#Filter out: all input elements of the checked selector

$("tr:even")                                                                                                                                                                                                                       but but the 0th, 2nd and 4th of all tr ​​elements are selected. . ...elements (Note: Because the selected elements are arrays, the serial numbers start from 0)

$("tr:odd") Select the 1st, 3rd, and 5th of all tr ​​elements ... ...elements

$("td:eq(2)")                                                                                                           Select Select all td elements with sequence numbers greater than 4 in td elements
$("td:ll(4)") Select all td elements with sequence numbers less than 4 in td elements
$(":header")

$ ("p:animated")

Content filter selector:

$("p:contains('John')") Selects all elements containing John text in p
$("td:empty") Selects all tds that are empty (not including text nodes) Array of elements
$("p:has(p)") Select all p elements containing p tag
$("td:parent") Select all element arrays with td as the parent node

Visual filter selector:

$("p:hidden") Select all hidden p elements
$( "p:visible") Select all visible p elements

Attribute filter selector:

$("p[id]" )            Select all p elements that contain the id attribute
$("input[name='newsletter']") Select all input elements with the name attribute equal to 'newsletter'
$("input[name!='newsletter" ']") Select all input elements whose name attribute is not equal to 'newsletter'
$("input[name^='news']") Select all input elements whose name attribute starts with 'news'
$("input[name$='news']") Select all input elements whose name attribute ends with 'news'
$("input[name*='man']") Select all input elements whose name attribute contains The input element of 'news'
$("input[id][name$='man']") can use multiple attributes for joint selection. This selector gets all the attributes containing id and then the attributes start with man Elements ending in

Child element filter selector:

$("ul li:nth-child(2)"),$( "Ul Li: NTH-Child (ODD)"), $ ("Ul Li: Nth-Child (3n + 1)")
$ ("P SPAN: FIRST-Child") Return to the first P element No. 1 An array of child nodes
$("p span:last-child") Returns an array of the last node of all p elements
$("p button:only-child") Returns all p elements An array of all child nodes with only one child node

Form element selector:

$(":input") Select all form input elements, including input, textarea, select and button

$(":text") Select all text input elements
$(":password") Select all Password Input element
$ (": Radio") Choose all Radio Input elements
$ (": Checkbox") Select all Checkbox Input elements
$ (": Submit") Select all Submit Input Element
$ (": Image") Choose all Image input elements
$ (": reset") Select all Reset Input elements
$ (": button") Select all Button Input elements
$(":file") Select all file input elements
$(":hidden") Select all input elements of type hidden or hidden fields of the form

Form element filter selector:

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

相关推荐：

介绍有关jQuery的选择器中的通配符使用方法

jQuer选择器通配符及选择器实例用法总结

SQL中通配符、转义符与"["号的使用(downmoon)_PHP教程

The above is the detailed content of jQuery wildcard [id^='code'] or [name^='code'] selector summary. For more information, please follow other related articles on the PHP Chinese website!