Jquery learning, jquery

Jquery learning, jquery

• Selector
• Select child element and css attribute
• Obtain the number of child elements

Selector

Jquery's selector is very powerful. If you can, it is very convenient to use jquery.

Select child element and css attribute

Let's take a look at the following code:

SelectColor = $(ColorId).children('svg').children('rect').css('fill');

This code is easy to understand. First:

ColorId = $ ("# id ");
Svg is a sub-element label.
Rect is a child element under svg.
Fill is a css attribute of rect.

We can see that I used two children, because jquery can only select one layer of child elements at a time and cannot be more hierarchical.

Obtain the number of child elements

In fact, this is also very simple.
For example, we have the following code:

<div class="box" id="c0" onclick="changeColor('c0', '#fe0000')">                <svg width="32" height="32" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">             <rect x="6" y="6" width="20" height="20" style="fill:#fe0000;"></rect>        <polyline fill="none" stroke="black" class="polylinehide" style="stroke-width:2" points="2,16 2,30 16,30 "/></polyline>        <polyline fill="none" stroke="black" class="polylinehide" style="stroke-width:2" points="16,2 30,2 30,16 "/></polyline>    </svg></div>

This is the html code of the example. We want to obtainid = c0(It should be 2) the code is as follows:

var polyNum = $('#co').children('svg').children('polyline');alert(polyNum.length);

This is the number.