<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>DOM Content Demo</title>
<!-- get jQuery from Google's CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
window.onload = function () {
// note : selector uses # before element id - here 'the title' is found
var title = $('#title').text();
console.log(title);
alert($('#title').text());
// note : without # selector gets element with tag name - here 'DOM Content Demo' is found
title = $('title').text();
console.log(title);
alert($('title').text());
// returns raw HTML inside the tags
console.log($('ul').html());
alert($('ul').html());
// when multiple elements are found the text of the elements is concatenated
console.log($('li').text());
alert($('li').text());
// returns the attribute value of the named attribute - here 'test()' is found
console.log($('button').attr('onclick'));
alert($('button').attr('onclick'));
}
// returns text from the input element
function test() {
console.log($('input').val());
alert($('input').val());
}
// change the text of an element
function changeTitleText() {
$('#title').text('a new title');
}
// change the text of the page title
function changePageTitle() {
$('title').text('a new page title');
}
// change the HTML in all the p tags
function changeParagraphElements() {
$('p').html('new text');
}
// set value of the input element
function setInputValue() {
$('input').val('my new value');
}
</script>
</head>
<body>
<h1 id="title">the title</h1>
<p class="paragraph">paragraph text 1</p>
<p class="paragraph">paragraph text 2</p>
<input type="text" />
<button onclick="test()">Test</button>
<br />
<br />
<button onclick="changeTitleText()">Change h1 Text</button>
<br />
<br />
<button onclick="changePageTitle()">Change Page Title</button>
<br />
<br />
<button onclick="changeParagraphElements()">Change Paragraph Elements</button>
<br />
<br />
<button onclick="setInputValue()">Set Input Value</button>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>DOM Structure Demo</title>
<!-- get jQuery from Google's CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
window.onload = function () {
}
function addLi() {
var count = $('ul').children().length + 1;
var txt = "List element " + count;
var newLi = $('<li></li>').text(txt);
$('ul').append(newLi);
}
function removeLi() {
if ($('ul').children().length > 0) {
$('ul li:last').remove();
}
}
</script>
</head>
<body>
<h1 id="title">the title</h1>
<p class="paragraph">paragraph text 1</p>
<p class="paragraph">paragraph text 2</p>
<input type="text" />
<p />
<button onclick="addLi()">Add</button>
<p />
<button onclick="removeLi()">Remove</button>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>DOM Structure Demo</title>
<!-- get jQuery from Google's CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
window.onload = function () {
}
</script>
</head>
<body>
<h1 id="title">the title</h1>
<p class="paragraph">paragraph text 1</p>
<p class="paragraph">paragraph text 2</p>
<input type="text" />
<ul>
<li>List element 1</li>
<li>List element 2</li>
<li class='active'>List element 3</li>
<li>List element 4</li>
<li>List element 5</li>
</ul>
</body>
</html>
this snippet outlines ul's child elements
$('ul').children().css('outline', '1px solid red');
this snippet outlines body's child elements
$('body').children().css('outline', '1px solid blue');
this snippet sets the bottom border of p elements
$('body').children('p').css('border-bottom', '2px solid red');
this snippet sets the top border of elements with class name
$('body').children('.paragraph').css('border-top', '2px solid red');
this snippet sets the top border of elements with id
$('body').children('#title').css('border-top', '2px solid red');
this snippet changes all siblings except the one used by the selector
$('h1').siblings().css('color', 'red');
this snippet changes next sibling of the one used by the selector
$('h1').next().css('color', 'blue');
this snippet changes all sibling after the one used by the selector until the tag
used as arg to nextUntil method
$('p:last').nextUntil('ul').css('background-color', 'yellow');
prev, prevAll, prevUntil methods work the same way except in reverse direction
this snippet changes ul border
$('li:first').parent().css('outline', '3px dotted yellow');
this snippet changes ul and body borders
$('li:first').parents().css('outline', '3px dotted yellow');
parentsUntil method works similar
these two snippets work the same way
$('li').first().css('outline', '3px dotted red');
$('li:first').css('outline', '3px dotted red');
this snippet changes li with index equal to arg (zero-based)
$('li').eq(2).css('outline', '3px dotted red');
this snippet outlines the li element with the class active
$('li').filter('.active').css('outline', '1px solid red');
this snippet outlines all the li elements except the class active
$('li').filter('.active').css('outline', '1px solid red');