jquery
一.jQuery的概念 封裝了大量的js,封裝了js的入口函數,兼容性問題,DOM操做,事件,ajax 核心思想:write less,do more 官網:jqury.com下載(也能夠搜索bootcdn下載) https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js 是正常的jQuery代碼 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js 是壓縮的jQuery代碼 導入:<script type="text/javascript" src="(指定目錄下的)jQuery.js"></script> jQuery內部的api99%都是方法 事件三步走: jQuery中綁定事件直接$('選擇器就能夠') jQuery中的事件就是JavaScript中的事件去掉on jQuery中的事件驅動就是事件的回調函數 例:$('#box').click(function(){ $('#box').css('color','red); })二.jQuery的入口函數 1.不用等待圖片資源加載完成後就能夠調用(入口函數沒有時間覆蓋現象) <script type="text/javascript" src="jQuery.js"></script> $(document).ready(function(){ 具體操做代碼 }) 2.簡便寫法: $(function(){ 具體操做代碼 })三.js對象和jQuery對象的相互轉換 1.jQuery對象轉換成js對象 (1) <script> $(function(){ //去jQuery對象中的每個值 console.log($('li')) }) </script> (2) jq對象.get(索引) 2.js對象轉換成jQuery對象 <script> $(function(){ oA=document.getElementById('a'); console.log($(oA)) }) </script>四.選擇器 (博客) 1.css中已經學習的選擇器 圖 2.緊鄰選擇器(緊挨着的,是下一個不是上一個) <body> <div> <p>sddf</p> <a href="#">ede</a> <p>a</p>//紅色 <p>awe</p> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ console.log($('a+p').css('color','red')) }) </script> </body> 3.基本過濾選擇器(從多箇中選出一個指定索引的) <body> <div> <span>a</span> <span>g</span> <span>th</span> <span>j</span> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ $('div span:eq(2)').css('color','red') }) </script> </body> 4.屬性選擇器 <body> <form action="#"> <input type="text"> <input type="submit"> <input type="password"> </form> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> //type上不用加引號 $('input[type=text]').css('background-color','red') </script> </body> 5.篩選選擇器 1.find('選擇器') 查找指定元素的全部後代元素(包括子子孫孫) <body> <div> <a href="">dg</a> <div><ul> <li>c</li> <li>c</li> <li>c</li> </ul></div> <span> <a href="">n <span>按時</span></a> </span> <form action=""><input type="text"></form> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ $('div').find('a').css('color','red').mouseout(function(){ //獲得的是js對象 console.log(this) }) }) </script> </body> 2.children('選擇器') 選中的是指定元素的直接子元素(親兒子) <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <a href="">dg</a> <div><ul> <li>c</li> <li>c</li> <li>c</li> </ul></div> <span> <a href="">n <span>按時</span></a> </span> <form action=""><input type="text"></form> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ $('div').children('a').css('color','red') }) </script> </body> 3.parent() 查找父元素(親的) <body> <div> <a href="">dg</a> <div><ul> <li>c</li> <li>c</li> <li>c</li> </ul></div> <span> <a href="">n <span>按時</span></a> </span> <form action=""><input type="text"></form> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ console.log($('span a').parent()) }) </script> </body> 4.eq('索引') 從全部符合條件的中選擇某一個 <body> <div> <a href="">dg</a> <div><ul> <li>c</li> <li>c</li> <li>c</li> </ul></div> <span> <a href="">n <span>按時</span></a> </span> <form action=""><input type="text"></form> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ console.log($('a')[1]) }) </script> </body> 5.siblings() 查找全部兄弟元素(不包括本身) <body> <ul> <li>a</li> <li>a</li> <li>ad</li> <li>ad</li> <li>ad</li> </ul> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ $('li').click(function(){ $(this).css('color','red'); $(this).siblings('li').css('color','#999'); }) }) </script> </body>五.對樣式屬性的操做設置css.樣式(css裏面的屬性能夠用駝峯體,也能夠用-鏈接) 單個: $('#box').css('color','red) 多個: $('#box').css{ 'color':'red'; 'width':'200px': } 例: $('.box').click(function(){ $('.box').css({ 'background-color':'green', 'width':'200px', }) })六.DOM的操做 1.對標籤屬性的操做 attr() <body> <div class="aaa"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ //attr中只有一個值是獲取屬性 console.log($('.aaa').attr('class')); //設置單個屬性 $('.aaa').attr('id','bbb'); //一次設置多個屬性 $('.aaa').attr( { 'color':'yellow', 'background-color':'red', }) }) </script> </body> removeAttr() <body> <div class="aaa"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('.aaa').removeAttr('class'); }) </script> </body> 2.對標籤對象屬性的操做 prop() 特例,只在input的radio中應用 <body> 男<input type="radio" name="sex" checked> 女<input type="radio" name="sex" > <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ console.log($('input').eq(0).prop('checked')); console.log($('input').eq(1).prop('checked')); }) </script> </body> removeProp() 3.對值得操做 html() 對標籤和文本操做 若是沒有參數表示獲取值 有參數表示賦值 <body> <div class="aaa"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('.aaa').html('<a>百度一下</a>'); }) </script> </body> text() 對文本操做,若是沒有參數表示獲取值 有參數表示賦值 <body> <div class="aaa"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('.aaa').text('<a>百度一下</a>');//<a>百度一下</a> 此時的a標籤不起做用 }) </script> </body> val() 必定是標籤中有value屬性的 表單控件 <body> <form action="javascript:void(0)"> <input type="text" value="不犯法"> </form> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('input').val('a'); }) </script> </body> 4.對類名的操做 addClass() 在原有類名的基礎上增長新的類名 <body> <div class="a"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('div').addClass('b') }) </script> removeClass() 移除全部類名中的某一個類名或某一些類名 <body> <div class="a"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('div').addClass('b'); $('div').removeClass('a b') }) </script> </body> toggleClass() 若是類名存在就移除,不存在就增長 <body> <div class="a"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('div').addClass('b'); $('div').toggleClass('b')//移除 }) </script> </body>六.對屬性的操做 jquery的屬性操做模塊分爲四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做 DOM屬性操做：對DOM元素的屬性進行讀取，設置和移除操做。好比prop()、removeProp()九.動畫 9.1 <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 100px; /*display: none;*/ } </style> </head> <body> <button>動畫</button> <button>動畫</button> <button>動畫</button> <div class="box"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ isshow=true; $('button').click(function(){ //顯示隱藏 //hide() 隱藏方法 獲取多個事件時,不用主動便利,內部直接便利 // 括號裏不加參數就是直接隱藏, // 括號里加參數,第一個參數是隱藏所用的時間,第二個參數一秒以後執行的回調函數 // $('.box').hide(1000); //與hide()用法相同 // $('.box').show(1000,function(){ // alert(1); // }); //顯示隱藏簡單版 // $('.box').stop().toggle(1000); //淡入淡出 //$('.box').fadeIn(2000); //顯示 // $('.box').fadeOut(2000); //隱藏 //卷下來,捲上去 //$('.box').slideDown(2000); //$('.box').slideUp(2000); //主動操控 //if(isshow){ //清定時器,先清後開 // $('.box').stop().slideUp(2000); //isshow=false // }else{ // $('.box').stop().slideDown(2000); //isshow=true; // } //jQuery封裝好的 // $('.box').stop().slideToggle(1000); }) }) </script> </body> 9.2自定義動畫 $("選擇器").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; // 樣式字典 所用時間 回調函數 $("div").animate(json, 1000, function () { alert("動畫執行完畢！"); }); })十,
相關文章
- 1. jQuery---jQuery插件
- 2. JQuery - $, JQuery, Window.load, JQuery.ready
- 3. 【jQuery】1、下載jQuery
- 4. 【jQuery】-----jQuery簡介（一）
- 5. Jquery中(function($){...})(jQuery)，$(function(){})，
- 6. jQuery-jQuery選擇器
- 7. JQuery插件——jquery tools
- 8. jQuery attr() 和 jQuery prop()
- 9. 【JQuery】（1）JQuery基礎
- 10. jQuery-什麼是jQuery
- 更多相關文章...
- • jQuery Mobile 安裝 - jQuery Mobile 教程
- • jQuery Mobile 過渡 - jQuery Mobile 教程
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章