基礎語法 $(Selector).Method()
$(Selector) :
jQuery最大的特色就是能利用CSS的選擇器(selector)來取的要操作的元素物件，語法如下:
$("h2") or jQuery("h2")，其中$是jQuery的簡寫，兩種寫法都可以使用。
常見的選擇器(selector)如下:
- Element Selector : $("p")
- ID Selector: $("#price")
- Class Selector : $(".phonebook")
- 組合 Selector : $("ul li")
Method() :
selector指定元素，再利用一些method去對元素作操作使用、變更HTML的內容:
text():存取元素內容
<span id="price">12</span>
Q:我要讀出內容12 要怎麼操作?
Ans: $("#price").text() ;
Q:我要修改把 12變成13要怎麼操作?
Ans: $("#price").text('13');
若要大量修改元素內容，可以將元素內佈署一樣的class屬性值，並使用Class Selector做大量修改
<span class="title"> Hello friends</span>
<span class="title"> I will meet you</span>
<span class="title"> I miss you</span>
<span class="title"> See you!</span>
使用 $(".title").text("good bye");
就會把4個span的元素內容改成"good bye"了
val():存取input元素的value值
<form>
<input type="text" value="120" class="amount" />
</form>
讀取value => $(".amount").val();
修改value為190 => $(".amount").val("190");
attr():存取元素的屬性值
<a href="www.w3schools.com"></a>
讀取href的內容值 => $("a").attr("href");
修改href的內容值 => $("a").attr("href" , "bru22.blogspot.com") ;
$('<元素名></元素名>'):建立新元素物件
var elmt = $('<h1>hello world</h1>');
or
var elmt = $('<span></span>').text('hello world');
append():往後插入一個元素物件
$("p").append('<h1>hello</h1>');
還有很多種prepend() 、after()、before()、wrap()、remove()...
來個簡單的範例吧~~
phonelist.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>
Contact: <input id="contact" type="text">
<button>Add</button>
</p>
<p>Have <span id="contactCount">0</span> Contacts</p>
<ul id="list"></ul>
<script>
$('button').click(function(){ //click 'Add' button Event handler
//add new 'li' element
$('#list').append($('<li>'+ $('#contact').val() +'</li>'));
//clear input text
$('#contact').val('');
//diplay list count
$('#contactCount').text($('#list li').length);
});
</script>
</body>
</html>
沒有留言:
張貼留言