jQuery Selector

Marketplace Forums Plugins My Presentation jQuery Selector

This topic contains 0 replies, has 1 voice, and was last updated by  mythemes 6 years, 5 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #2005

    mythemes
    Keymaster

    Any HTML document contains a tree. The nodes of the tree represent their document tags. The tags are HTML elements. Each element can have different attributes. We will focus on two attributes: class and id.

    class – is the attribute with which characterized several elements. Using the class attribute and CSS styling can write rules for a certain class of HTML elements. That class allows us to characterize a set (group) of elements.

    Id allows us to characterize only one element. id is a unique on document.

    for example:

    <div class="my-group" id="my-group-1"></div>
    <div class="my-group" id="my-group-2"></div>
    <div class="my-group" id="my-group-3"></div>
    

    So we have a class for three div elements and each element has a unique id.

    each attribute selector is composed differently.
    eg:

    for class: .class-name ( dot and class name )
    for id: #id-name ( hash and id name )

    class-name and id-name can contain chars: English alphabetic chars, 0-9, -, _

    IMPORTANT: class-name and id-name start with: English alphabetic char.

    un selector poate fi compus din ambele attribute: class si id

    HTML:

    <div class="my-group" id="my-group-1"></div>
    <div class="my-group" id="my-group-2"></div>
    <div class="my-group" id="my-group-3"></div>
    

    eg selector:

    .my-group#my-group-1
    .my-group#my-group-2
    .my-group#my-group-3

    or
    only id

    #my-group-1
    #my-group-2
    #my-group-3

    if we use the class attribute then we can attach id to different HTML nodes.

    eg:

    <p class="my-test-group">some sample text</p>
    
    <div class="my-test-group">some sample text</div>
    

    In this case to specify the rules of class on a node type we can compose selector by using NODE NAME.

    eg:

    p.my-test-group ( NODE NAME dot class-name)
    div.my-test-group ( NODE NAME dot class-name)

    Child and Parent Nodes.

    HTML code can be organized hierarchically. I mean some nodes may contain other nodes inside.

    eg:

    <div class="main" id="main">
    
        <div class="row" id="row-1">
    
            <a href="">Demo Link 1</a>
            Demo short paragraph 1
    
            <div>Sample Text inner Div Element 1</div>
            <img src="http://demo.com/image1.png">
    
        </div>
    
        <div class="row" id="row-2">
    
            <a href="">Demo Link 2</a>
            Demo short paragraph 2
    
            <div>Sample Text inner Div Element 2</div>
            <img src="http://demo.com/image2.png">
    
        </div>
    
        <div class="row" id="row-3">
    
            <a href="">Demo Link 2</a>
            Demo short paragraph 2
    
            <div>Sample Text inner Div Element 2</div>
            <img src="http://demo.com/image2.png">
    
        </div>
    </div>
    

    so we have the master node: DIV with attr class=”main” and id=”main”.

    This node has three children:

    DIV attr class=”row” and id=”row-1″
    DIV attr class=”row” and id=”row-2″
    DIV attr class=”row” and id=”row-3″

    and each node contains other 4 nodes ( these nodes do not contain attributes class or id )

    So we have the following hierarchy:

    Master
    – children 1 ( children level 0, nr 1 )
    – children 11 ( children level 1, nr 1 )
    – children 12 ( children level 1, nr 2 )
    – children 13 ( children level 1, nr 3 )
    – children 14 ( children level 1, nr 4 )

    – children 2 ( children level 0, nr 2 )
    – children 21 ( children level 1, nr 1 )
    – children 22 ( children level 1, nr 2 )
    – children 23 ( children level 1, nr 3 )
    – children 24 ( children level 1, nr 4 )

    – children 3 ( children level 0, nr 3 )
    – children 31 ( children level 1, nr 1 )
    – children 32 ( children level 1, nr 2 )
    – children 33 ( children level 1, nr 3 )
    – children 34 ( children level 1, nr 4 )
    we can using space as a delimiter to compose a selector from hierarchical nodes.

    eg:

    selector-master selector-child-level-0 selector-child-level-1

    and selector for – children 22 will be:

    all possible selectors:
    #row-2 p ( – children 2: id SPACE – children 22: node )
    .row#row-2 p ( – children 2: class,id SPACE – children 22: node )
    div#row-2 p ( – children 2: node,id SPACE – children 22: node )
    div.row#row-2 p ( – children 2: node,class,id SPACE – children 22: node )
    div #row-2 p ( Master: node SPACE – children 2: id SPACE – children 22: node )
    div .row#row-2 p ( Master: node SPACE – children 2: class,id SPACE – children 22: node )
    div div#row-2 p ( Master: node SPACE – children 2: node,id SPACE – children 22: node )
    div div.row#row-2 p ( Master: node SPACE – children 2: node,class,id SPACE – children 22: node )
    div#main #row-2 p ( Master: node,id SPACE – children 2: id SPACE – children 22: node )
    div#main .row#row-2 p ( Master: node,id SPACE – children 2: class,id SPACE – children 22: node )
    div#main div#row-2 p ( Master: node,id SPACE – children 2: node,id SPACE – children 22: node )
    div#main div.row#row-2 p ( Master: node,id SPACE – children 2: node,class,id SPACE – children 22: node )
    div.main #row-2 p ( Master: node,class SPACE – children 2: id SPACE – children 22: node )
    div.main .row#row-2 p ( Master: node,class SPACE – children 2: class,id SPACE – children 22: node )
    div.main div#row-2 p ( Master: node,class SPACE – children 2: node,id SPACE – children 22: node )
    div.main div.row#row-2 p ( Master: node,class SPACE – children 2: node,class,id SPACE – children 22: node )
    div.main#main #row-2 p ( Master: node,class,id SPACE – children 2: id SPACE – children 22: node )
    div.main#main .row#row-2 p ( Master: node,class,id SPACE – children 2: class,id SPACE – children 22: node )
    div.main#main div#row-2 p ( Master: node,class,id SPACE – children 2: node,id SPACE – children 22: node )
    div.main#main div.row#row-2 p ( Master: node,class,id SPACE – children 2: node,class,id SPACE – children 22: node )

    more details about CSS / jQuery selectors here : http://www.w3schools.com/cssref/css_selectors.asp

    more details about HTML nodes ( tags ) here : http://www.w3schools.com/tags/default.asp?utm_source=twitterfeed&utm_medium=twitter

    How Preview HTML Code on your web page ?

    for example look here: http://test.mythem.es/my-world-with-grass-and-dew-premium-wordpress/my-projects/

    please open with Google Chrome browser
    and on this page you can see Headline “My Projects”

    if put mouse over this headline and do right click ( windows ) will be show a popup menu. Now select from this menu latest item. like in image below (dropbox link):
    https://dl.dropboxusercontent.com/u/63722484/my-presentation/popup.png

    after you select will be show debug code window like in image below:
    https://dl.dropboxusercontent.com/u/63722484/my-presentation/inspect.png

    1. element marked with orange border – this is inspected element.
    2. element marked with green border – this is HTML node ( and attributes ) for inspected element ( node name: H1 and hase class=”mythemes-title” id is miss ).
    3. here is hierarchical selector for inspected element:

    body.page.page-id-298.page-template-default div.container div.container-fluid.wrapper div h1.mythemes-title

    master parent HTML not required to include in selector.

    if click on node like in image below:
    https://dl.dropboxusercontent.com/u/63722484/my-presentation/click-node.png

    will select the node in the HTML page ( node is marked with red border ) and if you click on attr class you will be able to copy classes (not write them manually)

    PS: HTML node can have multiple classes ( id is single and unique ) selector composed from multiple classes look like : NODE.CLASS-NAME-1.CLASS-MANE-2 .. .CLASS-NAME-N
    If you have any questions or something is not clear enough or wants to help with a specific case Notify.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

hermanns@mailxu.com gildingmisha