Section 1 - Selectors
//boiler
<html>
<head>
</head>
<body>
<h1 id ="title"> title </h1>
<p class="paragraph">Paragraph text 1 </p>
<p class="paragraph">Paragraph text 2 </p>
<input type="text"></input>
<ul>
<li>List element 1 </li>
<li>List element 2 </li>
<li>List element 3 </li>
<li>List element 4 </li>
<li>List element 5 </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>Selectors
Invoke jquery function -> $()
Takes a selector
$('selector')
$('.paragraph').css("outline", "1px solid red");
$('ul').css("outline", "1px solid red");Work like css elements
. for class
for id, etc
classList element 4
$('ul .paragraph').css("outline", "1px solid red");Specify selectors further by chaining selectors.
List element 1
List element 2
List element 3
List element 4
List element 5
List element 1
List element 2
List element 3
List element 4
List element 5
$('ul li:first-child').css("outline", "1px solid red");
//starts counting at 0
$('ul li:odd').css("outline", "1px solid red");Selectors by the attribute tag directly:
<p class="paragraph">Paragraph text 1 </p>
<p class="paragraph">Paragraph text 2 </p>
<li name = 'anything'>List element 1 </li>
$('[name]').css("outline", "1px solid red");
$('[class]').css("outline", "1px solid blue");Also have the option of specifying attribute tags like this
<p name='more specific'>Paragraph text 2 </p>
<li name = 'anything'>List element 1 </li>
$("[name='more specific']").css("outline", "1px solid red");Selectors as inverses
//Selects everything but the selector
$("[name!='more specific']").css("outline", "1px solid red");Shortcuts: selecting all children of a selector
List element 1
List element 2
Paragraph text 1
Paragraph text 2
List element 3
List element 4
List element 5
$('ul *').css("outline", "1px solid red");Last updated
Was this helpful?