1 Востаннє редагувалося Betterthanyou (10.02.2017 22:35:47)

Тема: JQuery, Селектори, декілька прикладів

Селектор в JQuery виглядає так

jQuery

або

$

Ось декілька прикладів використання селекторів

$("p") - вибрати всі <p> елементи.
$(".test") - вибрати елементи де class="test".
$("#test") - вибрати по ідентифікатору
$("*") - вибрати всі елементи
$(this) - вибрати поточній HTML елемент
$("p.intro") - вибрати всі <p> елементи з class="intro"
$("p:first") - вибрати перший <p> елемент
$("ul li:first") - вибрати перший <li> елемент в <ul> елементі
$("ul li:first-child") - вибрати перший <li> елемент кожного <ul>
$("[href]") - вибрати всі елементи з атрибутом href
$("a[target='_blank']") - вибрати всі <a> елемент з "target" атрибутом де значення дорівнює "_blank"
$(":button") - вибрати всі <button> елементи і <input> елементи типу "button"
$("tr:even") - вибрати всі парін <tr> елементи
$("tr:odd") - вибрати всі непарні <tr> елементи

Код де можна це побачити (http://codepen.io/oleksandr_myronchuk/pen/mRQpye)

<!DOCTYPE html>
<html>
    <head>
        <title>Selector</title>
        <!--Begin debugging-->
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
        <meta http-equiv="Pragma" content="no-cache"/>
        <meta http-equiv="Expires" content="0"/>
        <!--End debugging-->
        <style type="text/css">
            * {
                color: Black;
                background-color: White;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <p>Набір елементів для тестування селекторів JQuery 
        (Вибрані елементи виділяться червоним кольором і зеленим фоном)</p>
        <!--Begin-->
        <div>
            <p>text</p>
            <div id="divID">
                -text (id="divID")
                <p>-text</p>
                <p>-text</p>
                <div class="divClass">
                    --text (class="divClass")
                    <p>--text</p>
                    <p>---<span>text</span></p>
                    <p name="pName1">--text</p>
                    <p name="pName2">--text</p>
                    <a href="#">--a</a><br>
                    <a href="#" target='_blank'>--a (target='_blank')</a>
                    <form>
                        <br><input type="text" name="inputName1"/>
                        <br><input type="password" name="inputName2"/>
                    </form>
                </div>
            </div>
        </div>
        <!--End-->
        <p>Виберіть селекторі</p>
        <form>
            <p>
                <input type="radio" name="typeOfSelector" value="1">
                $("*") - вибирає всі елементи сторінки
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="2">
                $(this) - вибирає поточний об'єкт
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="3">
                $(".divClass") - вибирає елемент по його класу
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="4">
                $(".divClass p") - вибирає всі елементи "p" які знаходяться в елементах з класом "divClass"
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="5">
                $("p:first") - вибирає лише перший елемент "p"
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="6">
                $(".divClass p:first") - вибирає лише перший елемент "p" який знаходиться в елементах з класом "divClass"
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="7">
                $("#divID p:first") - вибирає лише перший елемент "p" який знаходиться в елементах з ідентифікатором "divID"
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="8">
                $("#divID p:last") - вибирає лише останній елемент "p" який знаходиться в елементах з ідентифікатором "divID"
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="9">
                $("[name]") - вибирає всі елементи з атрибутом "name"
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="10">
                $("[name=pName1]") - вибирає всі елементи з атрибутом "name" де його значення "pName1"
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="11">
                $("a[target='_blank']") - вибирає всі теги (елементи) "а" з атрибутом target і значенням атрибуту "_blank"
            </p>
            <p>
                <input type="radio" name="typeOfSelector" value="12">
                $(":enabled") - вибирає всі елементи з псевдокласом "enabled"
            </p>
            <button type="button" id="clear">Очистити</button>
        </form>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            function clearStyleSheet() {
                /*Clear*/
                var ob = $("*");
                ob.css('color', 'Black');
                ob.css('background-color', 'White');
                ob.css('fontSize', '16px');
            }
            
            function setStyleSheet(ob) {
                /*Set*/
                ob.css('color', 'Red');
                ob.css('background-color', 'DarkGreen');
                ob.animate({fontSize: '30px'}, "slow");
            }
            
            /*Demonstration "this"*/
            function createButton() {
                var b = document.createElement("button");
                b.appendChild( document.createTextNode("Натисти по мені!") );
                b.setAttribute("type", "button");
                b.setAttribute("id", "DTbutton");
                $("form p")[1].append(b);
                
                $("#DTbutton").click(function() {
                    var ob = $(this);
                    if( ob.html() == "Натисти по мені!" )
                    {
                        ob.html("Приховати");
                        setStyleSheet(ob);
                    }
                    else
                    {
                        ob.remove();
                    }
                });                
            }

            /*Select selector*/
            $( "input[type=radio]" ).on( "click", function() {
                /*Clear*/
                clearStyleSheet();
                /*Select*/
                switch($( "input:checked" ).val())
                {
                    case "1": ob = $("*"); break;
                    case "2": createButton(); return;
                    case "3": ob = $(".divClass"); break;
                    case "4": ob = $(".divClass p"); break;
                    case "5": ob = $("p:first"); break;
                    case "6": ob = $(".divClass p:first"); break;
                    case "7": ob = $("#divID p:first"); break;
                    case "8": ob = $("#divID p:last"); break;
                    case "9": ob = $("[name]"); break;
                    case "10": ob = $("[name=pName1]"); break;
                    case "11": ob = $("a[target='_blank']"); break;
                    case "12": ob = $(":enabled"); break;
                }
                /*Using*/
                setStyleSheet(ob);
            });
            
            $( "#clear" ).click(clearStyleSheet);
        </script>
    </body>
</html>
Подякували: 221VOLT, Master_Sergius2

2

Re: JQuery, Селектори, декілька прикладів

ловіть ще до купи

$("p:eq(0)") - вибрати елемент за індексом

і зауваження до

$("a[target='_blank']") 

маю претензії до лапок. ви в хтмл також пишите ось із такими лапками (') <a targer='_blank'> ?
якщо так, то маю для вас погані новини, це не валідно, тому і селектори також потрібно писати із такими ж лапками, що і в html. Неважливо чи це в сss чи в jQuery.

$('a[target="_blank"]');
(function(){
  console.log("called anonymously");
})()
Подякували: Betterthanyou, 221VOLT2

3 Востаннє редагувалося Betterthanyou (10.02.2017 22:49:36)

Re: JQuery, Селектори, декілька прикладів

mike написав:

і зауваження до

$("a[target='_blank']") 

маю претензії до лапок. ви в хтмл також пишите ось із такими лапками (') <a targer='_blank'> ?
якщо так, то маю для вас погані новини, це не валідно, тому і селектори також потрібно писати із такими ж лапками, що і в html. Неважливо чи це в сss чи в jQuery.

$('a[target="_blank"]');

То я таке в http://www.w3schools.com побачив, дум так теж правильно

Подякували: mike, 221VOLT2

4

Re: JQuery, Селектори, декілька прикладів

Betterthanyou написав:
mike написав:

і зауваження до

$("a[target='_blank']") 

маю претензії до лапок. ви в хтмл також пишите ось із такими лапками (') <a targer='_blank'> ?
якщо так, то маю для вас погані новини, це не валідно, тому і селектори також потрібно писати із такими ж лапками, що і в html. Неважливо чи це в сss чи в jQuery.

$('a[target="_blank"]');

То я таке в http://www.w3schools.com побачив, дум так теж правильно

:o

немаю слів
в мене був випадок із цими лапками, через них якраз і не працював селектор
хорошим тоном писати всюди однаково, а не, в html/css писати із подвійними лапками, а в js писати із одинарними лапками

(function(){
  console.log("called anonymously");
})()
Подякували: Betterthanyou, 221VOLT2

5

Re: JQuery, Селектори, декілька прикладів

чудово, а тепер розпишіть -- котрі з тих селекторів працюють швидше, а котрі - повільніше, і чому так
(бажано з власними тестами-бенчмарками)

а також розкажіть-покажіть який оверхед-код знаходиться "під капотом" кожного із селекторів
(на гітхаб я і сам зходити можу, проте якщо ви розпочали статтю -- то напевно варто писати повну хорошу статтю -- або ж ніякої)

https://blog.clever-games.win/
Це ще не кінець. Це навіть не початок кінця. Але, можливо, це кінець початку.
Зростання мудрості можна точно вимірювати ступенем зменшення злоби.
Подякували: Betterthanyou1

6

Re: JQuery, Селектори, декілька прикладів

221VOLT написав:

чудово, а тепер розпишіть -- котрі з тих селекторів працюють швидше, а котрі - повільніше, і чому так
(бажано з власними тестами-бенчмарками)

а також розкажіть-покажіть який оверхед-код знаходиться "під капотом" кожного із селекторів
(на гітхаб я і сам зходити можу, проте якщо ви розпочали статтю -- то напевно варто писати повну хорошу статтю -- або ж ніякої)

О, дуже цікава ідея, зараз спробую.

7

Re: JQuery, Селектори, декілька прикладів

http://replace.org.ua/post/94601/