jQuery-介紹 加載 選擇器 樣式操作 屬性操作 綁定click事件
jQuery - 介紹 加載 選擇器 樣式操作 屬性操作 綁定click事件
註意：以下部分問題不能實現效果，因該是單詞拼寫錯誤(少個t)或者沒有加引號(“swing”)。。。
jquery介紹
jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。
jQuery的版本分為1.x系列和2.x、3.x系列，1.x系列兼容低版本的瀏覽器，2.x、3.x系列放棄支持低版本瀏覽器，目前使用最多的是1.x系列的。
jquery是一個函數庫，一個js文件，頁面用script標簽引入這個js文件就可以使用。
<script type= " text/javascript " src= " js/jquery-1.12.2.js " ></script>
jquery的口號和願望Write Less, Do More（寫得少，做得多）
1、http://jquery.com/ 官方網站
2、https://code.jquery.com/ 版本下載
jquery加載
將獲取元素的語句寫到頁面頭部，會因為元素還沒有加載而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的window.onload 更快。
<script type= " text/javascript" > $(document).ready(function(){ ...... }); </script>
可以簡寫為：
<script type= " text/javascript " > $(function(){ ...... }); </script>
jquery選擇器
jquery用法思想一
選擇某個網頁元素，然後對它進行某種操作
jquery選擇器
jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。
$( " #test " ).html() 意思是指：獲取ID為test的元素內的html代碼。其中html()是jQuery裏的方法 這段代碼等同於用DOM實現代碼： document.getElementById( " test " ).innerHTML; 雖然jQuery對象是包裝DOM對象後產生的，但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裏的方法.亂使用會報錯 約定：如果獲取的是jQuery 對象, 那麽要在變量前面加上$. var $variable = jQuery對象 var variable = DOM對象 $variable[ 0 ]：jquery對象轉為dom對象$( " #msg " ).html(); $( " #msg " )[ 0 ].innerHTML
jquery的基礎語法：$(selector).action()
參考：http://jquery.cuishifeng.cn/
$(document) // 選擇整個文檔對象 $( ‘ li ‘ ) // 選擇所有的li元素 $( ‘ #myId ‘ ) // 選擇id為myId的網頁元素 $( ‘ .myClass ‘ ) // 選擇class為myClass的元素 $( ‘ input[name=first] ‘ ) // 選擇name屬性等於first的input元素 $( ‘ #ul1 li span ‘ ) // 選擇id為為ul1元素下的所有li下的span元素
對選擇集進行修飾過濾(類似CSS偽類)
$( ‘ #ul1 li:first ‘ ) // 選擇id為ul1元素下的第一個li $( ‘ #ul1 li:odd ‘ ) // 選擇id為ul1元素下的li的奇數行 $( ‘ # ul1 li:eq(2) ‘ ) // 選擇id為ul1元素下的第3個li $( ‘ #ul1 li:gt(2) ‘ ) // 選擇id為ul1元素下的前三個之後的li $( ‘ #myForm :input ‘ ) // 選擇表單中的input元素 $( ‘ div:visible ‘ ) // 選擇可見的div元素
表單選擇器
:enabled :disabled : checked :selected
<body> <form> <input type= " checkbox " value= " 123 " checked > <input type= " checkbox " value= " 456 " checked > < select > <option value= " 1 " >Flowers</option> <option value= " 2 " selected= " selected " >Gardens</option> <option value= " 3 " selected= " selected " >Trees</option> <option value= " 3 " selected= " selected " >Trees</option> </ select > </form> <script src= " jquery.min.js " ></script> <script> // console.log($("input:checked").length); // 2 // console.log($("option:selected").length); // 只能默認選中一個,所以只能lenth:1 $( " input:checked " ).each(function(){ console.log($( this ).val()) }) </script> </body>such as
對選擇集進行函數過濾
$( ‘ div ‘ ).has( ‘ p ‘ ); // 選擇包含p元素的div元素 $( ‘ div ‘ ).not( ‘ .myClass ‘ ); // 選擇class不等於myClass的div元素 $( ‘ div ‘ ).filter( ‘ .myClass ‘ ); // 選擇class等於myClass的div元素 $( ‘ div ‘ ).first(); // 選擇第1個div元素 $( ‘ div ‘ ).eq( 5 ); // 選擇第6個div元素
選擇集轉移
$( ‘ div ‘ ).prev( ‘ p ‘ ); // 選擇div元素前面的第一個p元素 $( " div " ).prevAll() $( " div " ).prevUntil() // 直到找到符合括號裏面的條件的停止 $( ‘ div ‘ ).next( ‘ p ‘ ); // 選擇div元素後面的第一個p元素 $( " .test " ).nextAll() $( " .test " ).nextUntil() $( ‘ div ‘ ).closest( ‘ form ‘ ); // 選擇離div最近的那個form父元素 $( ‘ div ‘ ).parent(); // 選擇div的父元素 $( " .test " ) .parents();所有級別的父級別標簽 $( " .test " ).parentUntil() ；所有級別的父級別標簽，直到。。。 $( ‘ div ‘ ).children(); // 選擇div的所有子元素 $( ‘ div ‘ ).siblings(); // 選擇div的同級元素 $( ‘ div ‘ ).find( ‘ .myClass ‘ ); // 選擇div內的class等於myClass的元素
jquery樣式操作
jquery用法思想二
同一個函數完成取值和賦值
操作行間樣式
// 獲取div的樣式 $( " div " ).css( " width " ); $( " div " ).css( " color " ); // 設置div的樣式 $( " div " ).css( " width " , " 30px " ); $( " div " ).css( " height " , " 30px " ); $( " div " ).css({fontSize: " 30px " ,color: " red " });
特別註意
選擇器獲取的多個元素，獲取信息獲取的是第一個，比如：$("div").css("width")，獲取的是第一個div的width。
操作樣式類名
$( " #div1 " ).addClass( " divClass2 " ) // 為id為div1的對象追加樣式divClass2 $( " #div1 " ).removeClass( " divClass " ) // 移除id為div1的對象的class名為divClass的樣式 $( " #div1 " ).removeClass( " divClass divClass2 " ) // 移除多個樣式 $( " #div1 " ).toggleClass( " anotherClass " ) // 重復切換anotherClass樣式
jquery屬性操作
1、html() 取出或設置html內容
// 取出html內容 var $htm = $( ‘ #div1 ‘ ).html(); // 設置html內容 $( ‘ #div1 ‘ ).html( ‘ <span>添加文字</span> ‘ );
2、text() 取出或設置text內容
// 取出文本內容 var $htm = $( ‘ #div1 ‘ ).text(); // 設置文本內容 $( ‘ #div1 ‘ ).text( ‘ <span>添加文字</span> ‘ );
3、attr() 取出或設置某個屬性的值
// 取出圖片的地址 var $src = $(‘#img1‘).attr(‘src‘); // 設置圖片的地址和alt屬性 $(‘#img1‘).attr({ src: "test.jpg", alt: "Test Image" });
綁定click事件
給元素綁定click事件，可以用如下方法：
$(‘#btn1‘).click(function(){ // 內部的this指的是原生對象 // 使用jquery對象用 $(this) })
事件委派
$(父標簽).on("click",".item",function(){});
--- 解決添加子元素的綁定事件
$(標簽).off(事件)
--- 接觸事件
jQuery-介紹 加載 選擇器 樣式操作 屬性操作 綁定click事件