<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("
#div1").empty();
});
});
</script>
</head>
<body>
// 利用 div 把這個區塊包起來, 然後給他一個id例如div1... 然後利用 $("#div1").empty();
// 來定位到他
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Empty the div element</button>
</body>
</html>
//就可以達到把 div1 的這個區塊empty 的功能
=======================================================================
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".test"); // 指所有的用<p> 的 段落
});
});
</script>
<style>
.test {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="test">This is another paragraph.</p>
<p class="test">This is another paragraph.</p>
<button>Remove all p elements with class="test"</button>
</body>
</html>
=====================================================================
jQuery Manipulating CSS
jQuery has several methods for CSS manipulation. We will look at the following methods:
- addClass() - Adds one or more classes to the selected elements
- removeClass() - Removes one or more classes from the selected elements
- toggleClass() - Toggles between adding/removing classes from the selected elements
- css() - Sets or returns the style attribute
Example Stylesheet
The following stylesheet will be used for all the examples on this page:
.important {
font-weight: bold;
font-size: xx-large;}
.blue {
color: blue;}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("blue"); // 所有的 h1, h2 ,p 都增加 blue 的css
$("div").addClass("important"); // 所有的div 都加入 important 的css
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div><br>
<button>Add classes to elements</button>
</body>
</html>
================================================================
Return a CSS Property
To return the value of a specified CSS property, use the following syntax:
The following example will return the background-color value of the FIRST matched element:
Example
$("p").css("background-color");
Set a CSS Property
To set a specified CSS property, use the following syntax:
css("propertyname","value");
The following example will set the background-color value for ALL matched elements:
Example
$("p").css("background-color", "yellow");
Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
The following example will set a background-color and a font-size for ALL matched elements:
Example
$("p").css({"background-color": "yellow", "font-size": "200%"});
jQuery Dimension Methods
jQuery has several important methods for working with dimensions:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Dimensions
outerWidth = innerWidth + border_width
outerHeight = innerHeight + border_height
jQuery width() and height() Methods
The width() method sets or returns the width of an element (excludes padding, border and margin).
The height() method sets or returns the height of an element (excludes padding, border and margin).
The following example returns the width and height of a specified <div> element:
Example
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
Try it Yourself »
jQuery Traversing
What is Traversing?
jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.
The image below illustrates a family tree. With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM.
Illustration explained:
- The <div> element is the parent of <ul>, and an ancestor of everything inside of it
- The <ul> element is the parent of both <li> elements, and a child of <div>
- The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
- The <span> element is a child of the left <li> and a descendant of <ul> and <div>
- The two <li> elements are siblings (they share the same parent)
- The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
- The <b> element is a child of the right <li> and a descendant of <ul> and <div>
Traversing the DOM
jQuery provides a variety of methods that allows us to traverse the DOM.
The largest category of traversal methods are tree-traversal.
The next chapters will show us how to travel up, down and sideways in the DOM tree.
Traversing Up the DOM Tree
Three useful jQuery methods for traversing up the DOM tree are:
- parent()
- parents()
- parentsUntil()
jQuery parent() Method
The parent() method returns the direct parent element of the selected element.
This method only traverse a single level up the DOM tree.
The following example returns the direct parent element of each <span> elements:
<!DOCTYPE html><html>
<head>
<style>
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// span 的parants 的css都改成 red... border : 2px $("span").parent().css({"color": "red", "border": "2px solid red"});});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent) <span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (grandparent)
<p>p (direct parent) <span>span</span>
</p>
</div>
</div>
</body>
</html>
jQuery parents() Method
The parents() method returns all ancestor elements of the selected element, all the way up to the document's root element (<html>).
The following example returns all ancestors of all <span> elements:
Example
$(document).ready(function(){
$("span").parents();
});
you can also use an optional parameter to filter the search for ancestors.
The following example returns all ancestors of all <span> elements that are <ul> elements:
jQuery parentsUntil() Method
The parentsUntil() method returns all ancestor elements between two given arguments.
The following example returns all ancestor elements between a <span> and a <div> element:
Example
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery Traversing - Descendants
A descendant is a child, grandchild, great-grandchild, and so on.
With jQuery you can traverse down the DOM tree to find descendants of an element.
jQuery children() Method
The children() method returns all direct children of the selected element.
This method only traverse a single level down the DOM tree.
The following example returns all elements that are direct children of each <div> elements:
Example
$(document).ready(function(){
$("div").children();
});
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
//
$("div").children().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (current element)
<p>p (child)
<span>span (grandchild)</span>
</p>
<p>p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>
===============================================================
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 可以用 p.first 來指定到 class 為first
$("div").children("p.first").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (current element)
<p class="first">p (child)
<span>span (grandchild)</span>
</p>
<p class="second">p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>
jQuery find() Method
The find() method returns descendant elements of the selected element, all the way down to the last descendant.
The following example returns all <span> elements that are descendants of <div>:
Example
$(document).ready(function(){
$("div").find("span");
});
======================================================================
jQuery - AJAX Introduction
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.
Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.
