jQuery

新增DOM元素

<script type="text/javascript">
    $(document).ready(function() {
        $("<p>123</p>").appendTo("body");
    });
    </script>

如此可以包裝一個HTML片段，並新增body元素的最後一個子元素

ID選擇器：以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"
});

設定多個值可以這麼寫

一個超級特務拯救世界打擊罪犯的日誌

2017/2/25

jQuery

沒有留言:

張貼留言