<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "p" ).on({
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" ); }
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Email: <input type="text" name="email">
<br>
<button>Send</button>
</body>
</html>
jQuery Selectors
網頁操作的對象, HTML tag, id, .class, this
$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
Demonstrates the jQuery hide() method, hiding all <p> elements.
$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test".
Demonstrates the jQuery hide() method, hiding the element with id="test".
$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with class="test".
Demonstrates the jQuery hide() method, hiding all elements with class="test".
$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.
Demonstrates the jQuery hide() method, hiding the current HTML element.
HTML element也可以合併使用 class name, 如 $("p.test").hide( )
$(":disabled") All disabled input elements
$(":selected") All selected input elements
$(":checked") All checked input elements
jQuery Events
有兩種寫法:
第一種:
$("p").click(function(){
$("p").text("hello");
});
第二種: // 可以方便對同一個object設多個event callback
$( "p" ).on(
{"click": function() { $("p").text("hello"); },
"mouseover": function() { $("p").text("world"); }
});
jQuery click()
Demonstrates the jQuery click() event.
Demonstrates the jQuery click() event.
jQuery dblclick()
Demonstrates the jQuery dblclick() event.
Demonstrates the jQuery dblclick() event.
jQuery mouseenter()
Demonstrates the jQuery mouseenter() event.
Demonstrates the jQuery mouseenter() event.
jQuery mouseleave()
Demonstrates the jQuery mouseleave() event.
Demonstrates the jQuery mouseleave() event.
jQuery mousedown()
Demonstrates the jQuery mousedown() event.
Demonstrates the jQuery mousedown() event.
jQuery mouseup()
Demonstrates the jQuery mouseup() event.
Demonstrates the jQuery mouseup() event.
jQuery hover()
Demonstrates the jQuery hover() event.
Demonstrates the jQuery hover() event.
jQuery focus() and blur()
Demonstrates the jQuery focus() and blur() events.
Demonstrates the jQuery focus() and blur() events.
jQuery Traversing
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.
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>:
$(document).ready(function(){
$("div").find("span");
});
$("div").find("span");
});
The DOM tree: This method traverse downwards along descendants of DOM elements, all the way down to the last descendant. To only traverse a single level down the DOM tree (to return direct children), use the children() method.
find(): Returns descendant elements of the selected element
filter() :Reduce the set of matched elements to those that match the selector or pass the function's test
each() : Executes a function for each matched element
Filer Example:
$(document).ready(function(){
$("p").filter(".intro").css("background-color", "yellow");
//$("div p").first();
//$("div p").last();
//$("p").eq(1);
//$("p").filter(".intro");
//$("p").not(".intro");
});
Each Example:
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>Alert the value of each list item</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
另一個寫法, 取得參數
function(index,element) A function to run for each matched element.
index - The index position of the selector
element - The current element (the "this" selector can also be used)
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(i,element){
alert(i+$(element).text())
});
});
});
jQuery Prop
http://www.w3schools.com/jquery/html_prop.asp
對html element 自訂一些自有的 property
Add and remove a property named "color":
範例1:
$("button").click(function(){
var $x = $("div");
$x.prop("key", "FF0000");
$x.append("The key property: " + $x.prop("key"));
$x.removeProp("key");
});
------------------------------------
範例2:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").html("attr('checked'): " + $("input").attr('checked123')
+ "<br>prop('checked'): " + $("input").prop('checked'));
});
});
</script>
<button>Check value of attr() and prop()</button>
<input id="check1" type="checkbox" checked123="checkedQQQ">
<label for="check1">Check me</label>
<p id="p1"></p>
$("input").prop('checked') : 會以實際checkbox有無按下做輸出true/false
$("input").attr('checked123') : 會去抓checked123這個屬性的內容checkedQQQ
The most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property
attr() : 這是對HTMLelement 所定義的標準 attribute
$("button").click(function(){
$("img").attr("width","500");
});
$("img").attr("width","500");
});
更多 jQuery Traversing Methods的Method
更多關於Web技術學習資源:
- http://www.w3schools.com/
- jQuery Examples http://www.w3schools.com/jquery/jquery_examples.asp
- http://learn.jquery.com/
沒有留言 :
張貼留言