jQuery相關方法10
阿新 • • 發佈：2018-06-04
info 同時 col inpu 進入 http 邊框 屬性 font
一、鏈式編程的原理
<script> //構造函數 function Person(age){ this.age=age; this.sayHi=function(txt){ if(txt){ console.log("你好"+txt); return this;//返回的是這個對象，就可以鏈式編程 }else{ consle.log("hello"); } } this.eat=function(){ console.log("吃大餐"); return this; } } //實例對象 var per=new Person(10); per.sayHi("謝謝").eat();//你好謝謝 吃大餐 </script>
二、each方法
-
每個元素需要做不同的操作的時候，使用each方法，遍歷jQuery的對象
- 語法$(selector).each(function(index,element))
- each方法就是用來遍歷jQuery對象的，但是裏面的每個元素最開始是DOM對象，如果要使用jQuery的方法，必須轉換為jQuery對象
- 例：分別把十個li設置成不一樣的透明度
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> //每個元素需要做不同的操作的時候，使用each方法，遍歷jQuery的對象 //語法$(selector).each(function(index,element))//each方法就是用來遍歷jQuery對象的，但是裏面的每個元素最開始是DOM對象，如果要使用jQuery的方法，必須轉換為jQuery對象 //例：分別把十個li設置成不一樣的透明度 $(function(){ $("#uu>li").each(function(index,ele){ var opacity=(index+1)/10; $(ele).css("opacity",opacity); }); }); </script> <ul id="uu"> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> </ul>
三、案例：評分
*{ margin: 0; padding: 0; } .comment li{ list-style: none; float: left; font-size: 50px; }
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $(".comment>li").mouseenter(function(){//進入事件 //當前的li是實心的,前面的li也是實心的,鼠標後面的裏li是空心的 $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆"); }).click(function(){//點擊事件 //做一個記錄:為當前點擊的五角星添加一個自定義屬性和值,並且移除兄弟li的這個屬性 $(this).attr("index","1").siblings("li").removeAttr("index"); }).mouseleave(function(){//離開事件 //鼠標離開先把所有的五角星變成空心的 $(".comment>li").text("☆"); //如果有其中一個li是有index這個屬性,則改變這個li和他前面的li變成實心五角星 $(".comment>li[index=1]").text("★").prevAll("li").text("★"); }); }); </script> <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul>
四、多庫共存
- 當多個庫同時以$符或者jQuery為命名空間時,那麽此時,就會和jQuery的$符號產生沖突。
- 其實，多庫共存就是“$ ”符號的沖突。
- 利用jQuery的實用函數$.noConflict();這個函數歸還$的名稱控制權給另一個庫，因此可以在頁面上使用其他庫。
- 這時，我們可以用"jQuery "這個名稱調用jQuery的功能。
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> var n=$.noConflict();//把$的權利讓給了n,$可以在其他變量或者庫使用,而n就是jQuery的新的符號了 var $=10; console.log($);//10 //頁面加載事件 n(function(){ n("#btn").click(function(){ console.log("n是新的jQuery符號!!!!"); }); }); </script> <input type="button" value="點擊" id="btn">
五、包裝集
- 包裝集:把很多的DOM對象進行包裝,或者是封裝----->jQuery對象
- jQuery對象裝換成DOM對象:jQuery對象[0]或者是jQuery對象.get(0)
- 如果是一個對象集,則[0]換成1,2,3....
- jQuery中判斷這個元素是否存在,就是通過包裝集的length屬性
- 例:點擊按鈕(無論點擊多少次),只創建一個p標簽
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> $(function(){ $("#btn").click(function(){ if($("#p1").length==0){ $("<p id=p1>這個一個p</p>").appendTo($("#dv")); console.log($("#p1")[0]);//<p id=p1>這個一個p</p> console.log($("#p1")[1]);//undefined console.log($("#p1").get(0));//<p id=p1>這個一個p</p> console.log($("#p1").get(1));//undefined } }); }); </script> <input type="button" value="點擊" id="btn"> <div id="dv" style="width: 200px;height: 200px;background: #ccc;"></div>
六、獲取元素的寬高的不同方法和區別
*{ margin: 0; padding: 0; } #dv{ width: 200px; height: 200px; border: 10px solid #000; margin: 30px; padding: 20px; background: #ccc; }
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ //innerWidth和innerHeight返回元素的寬高,包括內邊距 console.log($("#dv").innerWidth()+"========"+$("#dv").innerHeight());//240========240 //outerWidth和outerHeight返回元素的寬高,包括內邊距和邊框 console.log($("#dv").outerWidth()+"========"+$("#dv").outerHeight());//260========260 //outerHeight(true)和outerHeight(true)返回元素的寬高,包括內外邊距和邊框 console.log($("#dv").outerHeight(true)+"========"+$("#dv").outerHeight(true));//320========320 }); </script> <div id="dv">這個div寬高200,邊框10,內邊距20,外邊距30</div>
七、jQuery添加方法
- 如果希望jQuery的對象能夠調用某個方法,把方法加入到$.fn中(相當於添加原型)
八、mouseover事件和mouseenter事件的區別
- mouseover事件：不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。
- mouseenter事件：只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。
九、jQuery插件（步驟）
- 下載
- 壓縮包(js文件,css文件,插件的js文件,index.hmml文件)
- 創建一個新的文件夾
- 引入(下載的js文件,css文件,插件的js文件)
- 把index.html讓復制的HTML代碼復制到自己的body或者div中
- 把index.html讓復制的jQuery代碼復制到自己的script標簽中
十、jQuery UI（使用）
- 引入jQuery UI的css文件
- 引入jQuery的js文件
- 引入jQueryUI的js文件
- 查找和復制jQueryUI中的某個功能的所有代碼,包括html,css,js
- 測試和使用
jQuery相關方法10