<script type="text/javascript">
$(document).ready(function() {
$("<p>123</p>").appendTo("body");
});
</script>
如此可以包裝一個HTML片段，並新增body元素的最後一個子元素
ID選擇器：以id取得元素，如果有很多一樣id，它只會抓第一個。
jQuery( "#id" ) 在括號中下#字號，表示要取得id
jQuery( "#id" ) 在括號中下#字號，表示要取得id
<body> <div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div> <script> $( "#myDiv" ).css( "border", "3px solid red" ); </script> </body>如果要選取陣列形式的id，請記得加跳脫字元\\
<div id="myID.entry[0]">id="myID.entry[0]"</div> <div id="myID.entry[1]">id="myID.entry[1]"</div> <div id="myID.entry[2]">id="myID.entry[2]"</div> <script> $( "#myID\\.entry\\[1\\]" ).css( "border", "3px solid red" ); </script>在. [ ] 前面加\\ 如果沒有加會選不到，沒效果，有關於更多請見http://bit.ly/1V8RUjs
Class選擇器：以class選取元素，可一次選取多個同名class，即使不同種類的標籤，同class名稱都可以選擇。
jQuery( ".class" ) 在括號裡面下一個. ， 表示要選取class
<div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> <script> $( ".myClass" ).css( "border", "3px solid red" ); </script>其他寫法：
<div class="myclass">div class="notMe"</div> <div class="myclass otherclass">div class="myClass"</div> <span class="myclass otherclass">span class="myClass"</span> <script> $( ".myclass.otherclass" ).css( "border", "13px solid red" ); </script>
元素選擇器：以標籤來選取，同樣的標籤也會一次被選起來。
jQuery( "element" ) 括號內放要選取的標籤
<div>DIV1</div> <div>DIV2</div> <span>SPAN</span> <script> $( "div" ).css( "border", "9px solid red" ); </script>
多重選擇器Multiple Selector：可同時用不同屬性來選取元素，如可同時用標籤、class來選取
jQuery( "selector1, selector2, selectorN" )
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>multiple demo</title>
<style>
div, span, p {
width: 126px;
height: 60px;
float: left;
padding: 3px;
margin: 2px;
background-color: #eee;
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
<script>
$( "div, span, p.myClass" ).css( "border", "3px solid red" );
</script>
</body>
</html>
$("li#book1").addClass("red");
$("li.item-2").addClass("green");
button篩選選擇器：選取所有type為button的元素
jQuery( ":button" )
*屬性選擇器：以屬性的值去挑選
$( "input[name*='man']" ).val( "has man in it!" );
只要name這個屬性的值有man的，都會被挑出來
^$開頭&結尾屬性選擇器：挑屬性值的開頭或結尾
$( "input[name^='news']" ).val( "news here!" ); //挑開頭為news$( "input[name$='letter']" ).val( "a letter" ); //挑結尾為letter
.addClass() ：在某個元素標籤內，插入class屬性，參數是class名稱，記得加雙引號
$( "p" ).last().addClass( "selected" );
$( "p:last" ).addClass( "selected highlight" );
.text() ：取得某標籤的內容文字
<p><b>Test</b> Paragraph.</p> <p></p> <script> var str = $( "p:first" ).text(); $( "p:last" ).html( str ); </script>第五行：取得第一個p標籤的內容，所以取得<b>Test</b> Paragraph.，存到str變數
第六行：在最後一個p標籤插入一段html，內容即是str
val()：取得表單元素的value，如input、select、textarea
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button">
<script>
$( "button" ).click(function() {
var text = $( this ).text();
$( "input" ).val( text );
});
</script>
此例可明顯看出val()與text()的差別12行：取得被點擊到的button的內容文字，指定給text變數
13行：將input的value用val()改變
css()：存取css屬性
<style type="text/css">
.title{
font-size: 18px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var fontSize;
fontSize = $("p.title").css("font-size");
alert(fontSize);
});
</script>
</head>
<p class="title">Xanxus</p>
<body>
</body>
</html>
如此可以存取css屬性的值css()：設定css屬性與值
$("h2").css("background-color","red");
$("p").css({
"background-color" : "#F83A09",
"font-size" : "17pt"
});
設定多個值可以這麼寫
沒有留言:
張貼留言