How do I understand jquery? (2) complex Selector

In the previous section, we have learned some basic knowledge about jquery and basic query DOM statements. Today, let's talk about a slightly complex query statement, which is complicated, but not complex. It is still based on the CSS3 standard. We will focus on the commonly used statements in our daily work, other and... syntaxHighlighter. all ();

In the previous section, we have learned some basic knowledge about jquery and basic query DOM statements. Today, let's talk about a slightly complex query statement, which is complicated, but not complex. It is still based on the CSS3 standard. We will focus on the commonly used statements in our daily work, other and reference manual. Welcome to the Q group: 70210212

 

Click here for the case in this article.

When talking about this topic, I think it is necessary to talk about other things that were not mentioned last time. For example, addClass ("even") is used to add class styles to paragraphs in the previous section "), someone said, I just want to write a simple style. There is no need to add a new class. At this time, we can use $ (").css (" color "," red ") this method is clear at a glance. If there are multiple, you can continue later, because they are all returned jquery objects, so they all have this css () method. The Code is as follows:

$ (": Button" ).css ({"background-color": "gray", "color": "white" }).css ("font-size", "24px "). addClass ("even ");

There are two ways to write multiple styles, one is the continuous click addition method just mentioned, and the other is in json format. The above example is easy to understand, it starts with braces, followed by the attribute values corresponding to the colon, multiple are separated by commas. These are the styles for setting html elements. If we want to get the values in the styles, we should write $ ("# id" ).css ("fontsize") in this way to get the font, this is like a dynamic parameter. If you only pass the first parameter, It is the return value (getter). If you pass the second parameter, It is the setter value. The second parameter can also be a function, as long as you return the correct value, for example:

Certificate (this).css ({
Width: function (index, value ){
Return parseFloat (value) * 1.2; // remember the return value here;
}
});

In jquery, only strings are returned. Basically, the method names can be connected, that is, You Can $ ("# id" ).css(...).html (...). find (...).... in this way, keep running.

Let's get down to the truth. Let's talk about today's theme. What are the complex matching characters?

There should be more than a dozen or twenty characters here. I will not list them one by one. I will only talk about three or two of them. The first thing I want to talk about is the attribute selector. [] It is enclosed in brackets, in this example, the property name = 'Property value' is used. For example, if you want to find the value of the type = "button" control, you can write it as follows:

$ ("[Type = 'button ']"). val ();

The val () method is to takeForm ControlIn the value or text value, it only takes the first value, so if it is a set, it is necessary to carry out an each loop, since it is a Form Control, therefore, jquery has a simpler way of writing a form:

$ (": Button"). val ()

This colon selector is also very common. Here it takes the type attribute in the input, but if I want to search for controls based on other attributes, I still need to use the quote character, html can define some attributes at will, for example, in my HTML:

  Type = "checkbox" name = "newsletter" value = "Hot Fuzz"/>

The ref = "xxx" here is an attribute that I write at will. If I want to find all the controls with the ref attribute on the page, I can write it like this:

Console. log ($ ("[ref]")

In this way, we can see all the nodes that contain the ref attribute in the firebug console. If we continue to add conditions, for example, if I want to find the dom node of myclassName, such as xxx in the input control, I can write it like this:

Console. log ($ ("input [ref = 'xxx']. myclassName: eq (0 )"));

 

Even you can add up more other conditions. For example, if I want to meet the first node of the above conditions, isn't it getting worse? How nice if I can point these conditions out like methods, coincidentally, the jquery team does the same. It can also display them in the form of methods:

$ ("*"). Find ("input"). filter ("[ref = 'xxx']"). filter (". myclassName"). first ()

The code is getting longer, but it is better understood. You can write it properly to understand it, and the amount of code is not large. You can be sure of this, find here is to find the child element, filter is to filter out the elements that meet the conditions, first () is to take the first jquery object, unlike get (0), get (0) or [0] means to retrieve the first dom object and it becomes "native" Js, the conversion between native and jquery objects mentioned in the previous section should not be forgotten.

After talking about so much and writing so much code, you may also be confused. I have been using $ ("# id, if I want to write JavaScript code, I will write an id. Otherwise, I will show an example of full and multi-choice to illustrate its role:

Html:

Select All/reselect

 

JS:

$ (Function (){
$ ("[Ref = 'xxx']"). attr ("title", "this is TITLE ")
// Console. log ($ ("# mytxt"). val ())
$ ("[Name = 'checkall']"). click (checkAll)
Function checkAll (){
$ ("[Type = 'checkbox']: not ([name = 'checkall'])"). each (function (){
$ (This). attr ("checked ",! $ (This). attr ("checked "));
});
Return true;
}
});

Here, the all-selected checkbox is name = 'checkall'. After it is clicked, We will select or invert other checkboxes on the page, $ ("[type = 'checkbox']: not ([name = 'checkall']) ") Here, why should I check it like this and use: not to remove checkAll? You can try it by yourself, if it is not removed, it will never be selected if you select it all. Even if this function is basically completed, the inverse choice is to change its checked attribute to its own opposite attribute.

But is this function the best solution? Obviously not. If I select some of the checkpoints first and then select all of them, it will change the selected ones to unselected ones, although it is logical, it is unreasonable. Therefore, we need to improve it to only select all or select inverse, that is, select all. If it is not checked, it is invert. The Code is as follows:

Function checkAll (){
$ (": Checkbox"). attr ("checked", $ ("[name = 'checkall']"). attr ("checked "));
Return true;
}

Each is not used here because every item of our object is filled with the same value. It will automatically complete the each operation internally. Will this be better than just now, or you still don't think it is enough, but you still want to go further. If you select all the other checkpoints, it will be automatically selected if you select all of them, or if you select one or more, all the items will be selected, these solutions are good. You can try them on your own. The frontend is a service profession for people. It is good only when it is closer to people's habits. It is really good to say Hello everyone!

Okay, so far today. If you have any questions, don't ask me. Please read these two articles over and over again! Click here for the case in this article