Introduction to the selection, use and performance of jquery selectors_jquery

After writing the first chapter of , I saw the replies from my friends who pointed out some problems in my code. It was true that I did not use an IDE due to time constraints, so I did it directly. Also, due to my poor memory, So I forgot all the capitalization. Fortunately, I went home at night and changed it with VS. Haha, I’m really sorry for everyone.

Starting from this lecture, we will directly contact a JQ class library, learn how to write JQ, some common commands of JQ, etc. Today we mainly talk about the selector in JQ, which is also JQ A major feature of jQuery, which can be seen from its name jQuery, is that its main function is reflected in query.

Foreword: For code written in <script></script>, generally in a JS environment, we generally write the code in window.onload=function(){. ..} code block, this means that after the page is loaded, the JS code block will be executed. For JQ, it also has a similar method $(function(){...}); we put the code The paragraph is written here. Sometimes if you don’t want to write it that way (usually the JS code is placed in the tag, but this will affect the page loading speed), you can write the JS code in .
ID Selector

Copy code The code is as follows:

alert($("#name").val()); //Output the value of the input element with ID name

Class selector

Copy code The code is as follows:

alert($(".nameclass").val()); //output Value of input element with css named nameclass

Special selector

Copy code The code is as follows:

alert($("input[type=text][name=name]").val()) //The output type is text and name is name. The value of the input element

Copy code The code is as follows:

// Select the specified select element:
function chekStatus(o) {
$('#OrderStatus').find('option[value=' o ']').attr('selected', true);
$('#search_btn').trigger();
}
//Select all
$('#SelectAll').click(function() {
if (this.checked ) {
$('.forShop:not(:checked)').each(function() {
this.click();
});
}
else {
$('.forShop:checked').each(function() {
this.click();
});
}
});
//Is there any Selected item
$('#delSelectProduct').click(function() {
if ($('.protucitem:checked').size() == 0) {
alert('Please select Baby');
return false;
}
//According to the index, select the specified option and add CSS style to the option
function chekStatus(o) {
$('#OrderStatus ').find('option')[o].selected = true;
$($('#tabs').find('dd').removeClass('cur')[o]).addClass( 'cur');
$('#search_btn').trigger('click');
}
//Add alternate row color changing effects to the rows of the table. Click the row and then change color
var $trs = $("#baike_div>table>tbody>tr"); //Select all rows
$trs.filter(":odd").addClass("odd"); //Give odd rows Add odd style
$trs.filter(":even").addClass("even"); //Add odd style to even rows

Here are some selector skills that you need Let’s learn about

Copy code The code is as follows:

//(1) Wildcard:
$("input[id^='code']"); //All input tags whose id attribute starts with code
$("input[id$='code']"); //The id attribute starts with code All input tags ending with code
$("input[id*='code']"); //All input tags whose id attribute contains code
//(2) Select according to index
$( "tbody tr:even"); //Select all tr ​​tags with even indexes
$("tbody tr:odd"); //Select all tr ​​tags with odd indexes
//(3) Obtain The number of inputs of the lower-level node of jqueryObj
jqueryObj.children("input").length;
//(4) Obtain all tags under the child node of the tag with class main
$(".main > a");
//(5) Select the label immediately
jqueryObj.next("div"); //Get the div immediately behind the jqueryObj label, nextAll gets all
// (6) Select
$("div").eq(0) based on index; //Get the first div tag
//Filter
$("#code input: not([id^='code'])"); //The id is code. The tag does not contain all input tags whose id starts with code

I have listed some selectors that are often used in projects. In fact, as long as we understand their direct meaning, each of us can write specific JQ code. Of course, whether the efficiency of the code is efficient or not requires further study by ourselves.
In short, realizing the basic required functions is only the first step!

Tips: The return value of these selectors $("#...") is a JQ object, and it can directly operate JQ's internal events, such as click, mouseover and other events

Okay, I finally finished writing the JQ selector, thank you for reading!