Тема: 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>
