jQuery系列1
一、jQuery簡介
1概念：jQuery是一個輕量級的庫，其中包含了很多函數使用戶能夠更加方便的處理HTML、event以及實現一些動態的效果。
2.作用：是用戶能夠更方便的處理HTML，event，以及實現一些動畫效果。
3.語法：jQuery的書寫方法如下：
$(select).action();
(1)$代表定義jQuery語法。
(2)select代表選擇的元素，可以使用選擇器進行選擇。
(3)action()是一個函數，當選擇了某個屬性之後，通過該函數對元素進行處理。也可以在action的參數列表中自定義匿名函數。
4.註意：因為jQuery文件是一個以.js結尾的文件，所以使用之前要先通過script進行引入，如果需要同時引入jQuery和外部js文件要將jQuery寫在前面。
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
下面是一個測試實例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script></head> <body> <p>hello world</p> </body> <script type="text/javascript"> $(document).ready(function(){ alert("文檔加載完畢"); })
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
})
})
</script> </html>
其中.ready()是jQuery的一個函數，當網頁加載完畢之後執行特定的行為。.click()當選定的元素被點擊時，觸發該函數，並執行相應的行為。該段代碼的執行結果是當網頁加載完畢之後彈出對話框，點擊某個p標簽時，該標簽隱藏，即觸發.hide()。
二jQuery選擇器
1.基礎選擇器：jQuery的基礎選擇器與css的基礎選擇器相同，只是書寫的方法不同。
$("selector").action();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <style type="text/css"> * { padding:0; margin:0; } </style> </head> <body> <div> <p>this is p</p> <span>this is span</span><br> <i>this is i</i><br> <b>this is b</b> </div> </body> <script type="text/javascript"> $(function(){ $("p").html("hello world!"); }) </script> </html>
該段代碼中使用了標簽選擇器，.html()是jQuery提供的方法，用於向標簽中寫入內容，作用類似於js中的innerHTML()。
2.屬性選擇器
(1)$("[attribute|=‘value‘]");
說明：該屬性選擇器選擇指定的屬性的屬性值與給定的字符串等價或者以給定的字符串為前綴(給定字符串後加“-”)的元素。
(2)$("[attribute*=‘value‘]")
說明：選擇指定的屬性的屬性值中包括給定字符串的元素。
(3)$("[attribute~=‘value‘]")
說明：選擇指定的屬性以空格分割的屬性值中與給定字符串等價的元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> </head> <body>
<input type="text" name="man-news">
<input type="text" name="man new">
<input type="text" name="people man new">
<input type="text" name="Anews">
</body>
<script type="text/javascript"> $(function(){ $("[name|=‘man‘]").css("color","red"); }) </script> </html>
這裏使用了第一種選擇器，選擇name的屬性值是man的或者以man為前綴的,所以選擇的是第一個input標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> </head> <body> <!-- <a href="##" hreflang="en">英文</a> <a href="##" hreflang="zh">中文</a> --> <input type="text" name="man-news"> <input type="text" name="man new"> <input type="text" name="people man new"> <input type="text" name="Anews"> </body> <script type="text/javascript"> $("input[name*=‘new‘]").css("color","red"); </script> </html>
這裏使用了第二種選擇器，只要是name中包含new的都會被選中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> </head> <body> <!-- <a href="##" hreflang="en">英文</a> <a href="##" hreflang="zh">中文</a> --> <input type="text" name="man-news"> <input type="text" name="man new"> <input type="text" name="people man new"> <input type="text" name="Anews"> </body> <script type="text/javascript"> $("input[name~=‘new‘]").css("color","red"); </script> </html>
這裏使用了第三種選擇器，屬性值以空格符分割，分割之後的單個屬性值與new相同的元素都會被選中。
jQuery系列1