前端-jQuery

時間  2020-06-20
標籤 前端 jquery 欄目 JQuery 简体版
原文   原文鏈接

目錄

jQuery總結

jQuery引入

  • 下載連接：jQuery官網 (https://jquery.com/)，首先須要下載這個jQuery的文件，而後在HTML文件中引入這個文件，就可使用這個文件中幫咱們提供的jquery的接口了
  • 中文文檔：jQuery AP中文文檔 (http://jquery.cuishifeng.cn/)
jQuery的引入方式有兩種：
	1.直接下載文件到本地（最經常使用），從本地中導入
	2.使用文件的網絡地址，就像咱們img標籤裏面的那個src的用法差很少。
引入完以後，就能夠直接使用jQuery的語法來寫了，可是仍是要寫在script標籤裏面，而且要注意引入順序，先引入文件，再在script標籤裏面寫jQuery的代碼，先導入再使用。

jQuery對象與dom對象

  • 使用jQuery方法找到的標籤稱爲jQuery對象
  • 原生的js(javascipt)方法找到的標籤就是dom對象
  • dom對象只能使用dom對象的方法，不能使用jQuery對象的方法，一樣的jQuery對象也是

jQuery對象與dom對象之間的轉換

#jQuery對象轉dom對象：
	jQuery對象[index]       $('#d1')[0]
#dom對象轉jQuery對象：
	$(dom對象)			  $($('#d1')[0])

查找標籤

  • jQuery的查找標籤等同於css的基本選擇器
#元素(標籤)選擇器
$('標籤名')		$('div')
#id選擇器
$('#id名')		 $('#d1')
#類選擇器
$('.類名')		$('.c1')
#混合
$('標籤名.類名')	   $('div.c1')
#通用選擇器
$('*')
#分組
$('div,#d1,,c1')
  • 注意：當使用選擇器找到的標籤是多個標籤時會造成一個數組，咱們要取到某一具體標籤須要用到[index]的方法，但這樣取值會將jQuery對象轉換爲dom對象，所以咱們又必須再手動將dom對象轉換爲jQuery對象

層級選擇器

  • jQuery的層級選擇器等同於css的組合選擇器
#後代選擇器
$('div c1')
#兒子選擇器
$('div>c1')
#毗鄰選擇器
$('div+c1')
#第第選擇器
$('div~c1')

屬性選擇器

  • 屬性選擇器等同於css的屬性選擇器 經常使用於input標籤
[屬性]
標籤[屬性]
標籤[屬性=值]
標籤[屬性!=值]    :$(input[type!='text'])

基本篩選器

  • 選擇以後再進行篩選過濾
:first    		#找到第一個
:last			#找到最後一個
:eq(index)		#找到index序號的那個
:even			#找到全部序號數爲偶數的，從0開始
:odd			#找到全部序號數爲奇數的
:gt(index)		#找到全部序號數大於index的      不包含index
:lt(index)		#找到全部序號數小於index的	  不包含index
:not(選擇器)	  #找到全部不包含選擇器的
:has(選擇器)	  #找到全部含有選擇器子標籤的父標籤

1592320148257

表單篩選器

  • 多用於from表單中的input標籤
:text
:password
:radio
:checkbox
:file
:submit

表單對象屬性篩選器

:enable			#可用的，沒有disable屬性的
:disable		#不可用的，帶有disable屬性的
:checked		#默認選中的input標籤
:selected		#默認選中的select標籤

篩選器方法

  • 下一個元素
$('#l1').next();				#找到下一個兄弟標籤
$('#l1').nextAll();			    #找到l1後面全部的兄弟標籤
$('#l1').nextUntil('#l3');      #往下走直到找到id爲l3的標籤就結束，不包含l3
  • 上一個元素
$('#l4').next();				#找到id爲l4的上一個兄弟標籤
$('#l4').nextAll();			    #找到l4前面全部的兄弟標籤
$('#l4').nextUntil('#l2');      #往上走直到找到id爲l2的標籤就結束，不包含l2
  • 父親元素
$('#l1').parent();				#找到id爲l1的父標籤
$('#l1').parents();				#找到id爲l1的父標籤，爺爺標籤，祖宗標籤....
$('#l1').parentsUntil('body');	#往上走找id爲l1的祖宗標籤，直到找到boby標籤爲止，不包含body
  • 兒子元素和兄弟元素
$('.u1').children();			#class爲u1的標籤的全部兒子標籤
$('.u1').siblings();			#class爲u1的標籤的全部兄弟標籤
  • 查找
$('ul').find('.l1');			#相似與$('ul #l3'),從後代中找到class爲l1的
  • 篩選
$('ul li').fliter('.l1');			#從結果集中過濾出有class爲l1的全部
  • 其他方法
.first()
.last()
.eq(index)
.not()
.has()

標籤操做

文檔操做

#1.在標籤內部後面添加一個標籤
$(A).append(B);        #將B添加到A標籤內部最後面
$(A).appendTo(B);      #將A添加到B標籤內部最後面

#2.在標籤內部前面添加一個標籤
$(A).prepend(B);	   #將B添加到A標籤內部最前面
$(A).prependTo(B);     #將A添加到B標籤內部最前面

#3.在標籤前面添加一個標籤
$(A).before(B);		   #將B添加到A標籤的前面
$(A).insertBefore(B);  #將A插入到B標籤的前面

#4.在標籤後面添加一個標籤
$(A).after(B);		   #將B添加到A標籤的後面
$(A).insertAfter(B);   #將A插入到B標籤的後面

#5.替換標籤
$(A).replaceWith(B);   #用B替換A標籤
$(A).replaceAll(B);	   #用A替換B標籤

#6.刪除或者清空一個標籤
$(A).remove();		   #刪除A標籤
$(A).empty();		   #清空A標籤

#7.克隆標籤
$(A).clone();		   #克隆標籤A
$(A).clone(true);	   #克隆標籤A以及A的關聯的事件
#實例
var d=document.createElement('span');
d.innerText='你開心就好';
#1 在標籤內部後面添加一個標籤
$('.d1').append($(d));
$(d).appendTo($('.d1'));
$('.d1').append('<a href='http://www.baidu.com'>百度</a>)      #比較經常使用
#2 在標籤內部前面添加一個標籤
$('.d1').prepend($(d));
$(d).prependTo($('.d1'));
#3 在標籤前面添加一個標籤
$('.d1').before($(d));
$(d).insertBefore($('.d1'));
#4 在標籤後面添加一個標籤
$('.d1').after($(d));
$(d).insertAfter($('.d1'));
#5 替換標籤
$('.d1').replaceWith($(d));
$(d).replaceAll($('.d1'));
#6 清空和刪除標籤
$('.d1').empty();
$('.d1').remove()
#7 克隆
<button id="b1">寶刀屠龍，點擊就送</button>
<script src="jquery源碼.js"></script>
<script>

    $('#b1').click(function () {
            // var b=$(this).clone();    #this表示當前標籤，是個dom對象，因此要轉jquery對象
            var b=$(this).clone(true);   #clone(true) 表示克隆了當前事件
            $(this).after($(b))
    })
</script>

文本操做

#1.查看標籤文本
$(A).text();		#查看A標籤的全部內容，不能識別標籤
$(A).html();		#查看A標籤全部內容和標籤，能識別標籤

#2.設置標籤文本
$(A).text('值');
$(A).html('值');

屬性操做

#1.查看屬性
.attr();

#2.增長屬性
.addAttr('class','c2');				    #設置單個屬性
.addAttr({'class':'c2','age':18})		#設置多個屬性，用自定義對象的方式

#3.刪除屬性
.removeAttr('屬性名')

#4.prop方法 -- 針對的是checked\selected\disabled..
	#查看標籤是否有checked屬性,也就是是否被選中
	    attr $(':checked').attr('checked'); //checked -- undefined
	    prop $(':checked').prop('checked'); //true  -- false
		
    #經過設置屬性的方式來設置是否選中:
		$(':radio').eq(2).prop('checked',true);  true和false不能加引號
		$(':radio').eq(2).prop('checked',false);
#簡單總結:
	1.對於標籤上有的能看到的屬性和自定義屬性都用attr
	2.對於返回布爾值的好比checkbox、radio和option的是否被選中或者設置其被選中與取消選中都用prop。
	具備 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其餘的使用 attr()

值操做

#1.查看值
.val()
#實例
$(':text').val('大黃');			   #查看input標籤下的text內容
$(':radio:checked').val();			#查看radio單選選中的值
var ch=$(':checkbox:checked');		#查看checkbox多選選中的值
for (var i=0;i<ch.length;i++){
	console.log(ch.eq(i).val())
}
$('[name=city]').val();				#查看select下拉框單選和多選的值

#2.設置值
.val('值')
#實例
$(':text').val('大黃');			   #設置input標籤下的text內容
$(':radio').val(['1']);				#設置radio單選選中的值
$(':checkbox').val(['1','3']);      #$(':checkbox:checked').val(['1','3']);不行
$('[name=city]').val(['1','3']);	#設置select下拉框單選和多選的值

樣式class操做

.addClass();             	#添加指定的CSS類名。
.removeClass(); 			#刪除指定的CSS類名。
.hasClass(); 				#判斷樣式存不存在
.toggleClass(); 			#切換CSS類名，若是有就移除，若是沒有就添加
#實例
$('.d1').addClass('d2');
$('.d1').removeClass('d2');
$('.d1').hasClass('d2');
$('.d1').toggleClass('d2');
$('.d1').toggleClass('d2');

CSS操做

.css('css屬性','值')							  #單個css屬性設置
.css({'css屬性1':'值1','css屬性2':'值2'},....)	#多個css屬性設置
#實例
$('.d1').css('height','300px');
$('.d1').css({'background-color':'blue','text-align':'center','line-height':'300px'});

位置操做

.offset()				#相對於瀏覽器窗口的位置,()裏面能夠設置值({top:20,left:20})
.position()				#相對於父級標籤的位置，不能設置值，只能查看
$(window).scrollTop()	#滾輪距離瀏覽器窗口頂部的距離
$(window).scrollLeft()	#滾輪距離瀏覽器窗口左邊的距離
#實例
<head>
    <meta charset="UTF-8">
    <title>位置</title>
    <style>
        .d1{
            height: 500px;width: 200px;
            background-color: blue;
        }
        .d2{
            height: 500px;width: 200px;
            background-color: pink;
        }
        .d3{
            height: 40px;width: 80px;
            background-color: red;
            text-align: center;
            line-height: 40px;
            position: fixed;bottom: 20px;left: 20px;
        }
        .d3>#a1{
            font-size: 16px;color: white;
            text-decoration: none;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<!--    <a name="top">頂部</a>-->     設置錨點的回到頂部
    <div class="d1">

    </div>
    <div class="d2">

    </div>
    <div class="d3">
<!--       <a id="a1" href="#top">回到頂部</a>-->
        <a id="a1" href="">回到頂部</a>
    </div>

    <script src="jquery源碼.js"></script>
    <script>
        #設置返回頂部
        $('#a1').click(function () {
            $(window).scrollTop(0);
        });                                  
        #設置window監聽事件
        $(window).scroll(function () {
            var top=$(window).scrollTop();
            if (top<=300){
                $('.d3').addClass('hide')
            }
            else {
                $('.d3').removeClass('hide')
            }
        })


    </script>
</body>

尺寸

$('.d1').height();  		#content高度
$('.d1').width();   		#content寬度
$('.d1').innerHeight();		#content高度 + padding高度
$('.d1').innerWidth(); 		#content寬度 + padding寬度
$('.d1').outerHeight();		#content高度 + padding高度 + border高度
$('.d1').outerWidth();		#content寬度 + padding寬度 + border寬度

事件

事件綁定方式

#第一種方式
#.evevt(function(){})
$('.d1').click(function(){
	$(this).css({'background-color':'red'})
})
#第二種方式
#.on('events','selector',function(){})
$('.d1').on('click',function(){
	$(this).css({'background-color':'red'})
})

經常使用事件

click		鼠標點擊時觸發事件
focus		得到光標時觸發事件
blur		失去光標時觸發事件
change		域中內容發生改變時觸發事件
mouseenter	鼠標光標進入標籤時觸發事件
mouseout	鼠標光標離開標籤時觸發事件
mouseover	鼠標光標進入標籤時觸發事件，於mouseenter有區別，mouseenter只會觸發一次，哪怕裏面含有			子標籤，可是若是mouseover裏面若是有子標籤，子標籤也會得到事件。
hover		mouseenter+mouseout   .hover(function(){},function(){})
keydown		點擊鍵盤時觸發事件 經常使用於$(window).keydown(function(e){...e.keycode....})
keyup		釋放鍵盤時觸發事件，與keydown相反
input		監聽輸入文本內容，不能使用input(function(){})方法，要使用.on('input',function()			{})的方法
#input事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經常使用事件</title>
</head>
<body>

    <input type="text" name="username">百度一下那你就知道了！

<script src="jquery源碼.js"></script>
<script>

    $('[type=text]').on('input',function () {
                console.log($(this).val())
    })

</script>

</body>
</html>
#keydown和keyup事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經常使用事件</title>
    <style>
        .d1{
            height: 200px;width: 200px;
            background-color: pink;
        }

    </style>

</head>
<body>

<!--    <input type="text" name="username">百度一下那你就知道了！-->
    <div class="d1">
        <div class="dd1">
            你若安好！
        </div>
    </div>

<script src="jquery源碼.js"></script>
<script>

    $(window).keydown(function (e) {
                $('.d1').css({'background-color':"red"});
                console.log(e.keyCode)
    });
    $(window).keyup(function (e) {
                $('.d1').css({'background-color':"pink"});
                 console.log(e.keyCode)
    });

    $('[type=text]').on('input',function () {
                console.log($(this).val())
    })

</script>

</body>
</html>
#mouseenter/out以及hover事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            height: 200px;width: 200px;
            background-color: pink;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="d1">
        你若安好
    </div>

<script src="jquery源碼.js"></script>

<script>
    $('.d1').hover(function () {
                $(this).css({'font-size':'24px',})},
        function () {
                $(this).css({'font-size':'16px',})})
    
    // $('.d1').mouseenter(function () {
    //             $(this).css({'font-size':'24px'})
    // });
    // $('.d1').mouseout(function () {
    //             $(this).css({'font-size':'16px'})
    // });
</script>
</body>
</html>
#focus/blur/change事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            height: 100px;width: 100px;
            background-color: red;
        }
        .d2{
            height: 100px;width: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>

隨便寫點就行<input type="text" name="username">
    <select name="city" id="city">
        <option value="1">長沙</option>
        <option value="2">武漢</option>
        <option value="3">上海</option>
    </select>
<div class="d1"></div>
<div class="d2"></div>

<script src="jquery源碼.js"></script>
<script>
    $('[type=text]').focus(function () {
                $('.d1').css({'background-color':'yellow'})
    });
    $('[type=text]').blur(function () {
                $('.d1').css({'background-color':'pink'})
    });
    $('#city').change(function () {
                $('.d2').css({'background-color':'black','height':'200px'})
    })
    
</script>
</body>
</html>

事件冒泡

  • 事件冒泡是由於html能夠嵌套，若是你給父標籤綁定了點擊事件，無論兒子標籤設沒設置點擊事件，點擊兒子標籤都會觸發父標籤的點擊事件，若是兒子標籤自己設置了點擊事件，當點擊兒子標籤時，會先執行兒子的點擊事件，再執行父標籤的點擊事件。因此咱們要阻止這種事件冒泡行爲
  • 阻止事件冒泡有兩種方法
    • return false：在兒子標籤function裏面最後寫上return false
    • e.stopPropagation(); 用法跟上面同樣
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>
        .d1{
            height: 200px;width: 200px;
            background-color: pink;
        }
        .dd1{
            height: 50px;width: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="d1">
    <div class="dd1">

    </div>
</div>


<script src="jquery源碼.js"></script>
<script>
    $('.d1').click(function () {
                $(this).css({'background-color':'red'})
    });
    $('.dd1').click(function (e) {
                $('.d1').css({'background-color':'yellow','height':'300px'});
                // return false			 #使用return false阻止事件冒泡
                e.stopPropagation()      #使用e.stopPropagation()阻止事件冒泡
    })

</script>
</body>
</html>

事件委託

  • 事件委託是基於事件冒泡的基礎實現的，利用父標籤的事件會影響子標籤的做用將子標籤的事件委託給父標籤，以實現父標籤後面新加入的標籤後也具備同樣的功能
  • $( '被委託標籤' ).on( 'evet' , '委託標籤' , function(){ ……} )
    • 注意：事件委託過程當中$(this)所指的標籤爲委託標籤(當前點擊的子標籤)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委託</title>
    <style>
        .btn1{
            border: 5px solid blue;
        }
    </style>
</head>
<body>

    <span class="d1">
        <button class="btn1">你上你也行</button>
    </span>

<script src="jquery源碼.js"></script>
<script>
    $('.d1').on('click','.btn1',function () {
                var b=document.createElement('button');
                b.innerText='你上你也行';
                $(b).addClass('btn1');
                console.log($(this))            #注意這個this是指當前點擊的標籤
                $('.d1').append($(b));
    })
</script>
</body>
</html>

頁面加載

#1.jquery文件要在使用jquery的代碼以前引入

#2.js代碼最好都放到body標籤下面或者裏面的最下面來寫

#3.window.onload
	// window.onload = function () {
    //     $('.c1').click(function () {
    //         $(this).css({'background-color':'green'});
    //     })
    // }
#4.頁面載入,$(function (){alert('xx');})  -- $(document).ready(function(){});
	頁面載入與window.onload的區別
　　　　1.window.onload()函數有覆蓋現象，必須等待着圖片資源加載完成以後才能調用
　　　　2.jQuery的這個入口函數沒有函數覆蓋現象，文檔加載完成以後就能夠調用（建議使用此函數）
　　　　
#示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        // 等待整個頁面中的內容所有加載完成以後,觸發window.onload對應的函數裏面的內容
        // window.onload 有覆蓋現象,會被後面的window.onload給從新賦值
        // window.onload = function () {
        //     $('.c1').click(function () {
        //         $(this).css({'background-color':'green'});
        //     })
        // }

        
        $(function () {
            $('.c1').click(function () {
                $(this).css({'background-color':'green'});
            })
        });

    </script>
    <script src="xx.js"></script>


    <style>
        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<img src="" alt="">


</body>

</html>
　　　　

動畫效果

#speed,easing,fn參數說明 	後面兩個參數用得較少
 	speed:三種預約速度之一的字符串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)
    easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
    fn:在動畫完成時執行的函數，每一個元素執行一次
    
#普通隱藏和顯示
show([speed,[easing],[fn]])		#隱藏的標籤緩慢出現
hide([speed,[easing],[fn]])		#標籤隱藏，若是自己是隱藏的就不會顯示，如display:none
toggle([speed],[easing],[fn])	#若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的

#窗簾式  
slideDown([speed],[easing],[fn])	#窗簾式向下顯示
slideUp([speed],[easing],[fn])		#窗簾式向上隱藏
slideToggle([speed],[easing],[fn])  #高度變化來切換全部匹配元素的可見性

#淡入淡出式
fadeIn([speed],[easing],[fn])			#淡入
fadeOut([speed],[easing],[fn])			#淡出
fadeTo([[speed],opacity,[easing],[fn]]) #o表示透明度：0-1的區間
fadeToggle([speed,[easing],[fn]])		#淡入淡出進行切換

#自定義動畫
animate(params,[speed],[easing],[fn])   #params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合
    # 在一個動畫中同時應用三種類型的效果
    $("#go").click(function(){
      $("#block").animate({ 
        width: "90%",
        height: "100%", 
        fontSize: "10em", 
        borderWidth: 10
      }, 1000 );
    });

each循環

#1.標籤內部循環
<body>
    <ul type="dotted">
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
<script src="jquery源碼.js"></script>
<script>
    $('li').each(function (k,v) {
        console.log(k,$(v).text())		#這裏的k是指索引，v是指標籤
    })

#2.數組元素內部循環
var a=[11,22,33,44];
$.each(a,function(k,v){
        console.log(k,v);})				#這裏的k是指索引，v是指數組內元素

data

  • 給標籤對象添加數據，相似與全局變量
#1.設置值
$('.d1').data('name','大黃');
#2.查看值
$('.d1').data('name')
#3.刪除值
$('.d1').removeData('name');

插件

#1.給整個jQuery添加方法，但標籤不能使用自定義的方法
<script>
    $.extend({                      #$就等於jQuery，因此能夠寫$,也能夠寫jQuery
        max:function (a,b) {		#自定義了一個min和max方法
                return c =a>b?a:b;
        },
        min:function (a,b) {
                return c =a<b?a:b;
        }
    })
    jQuery.min(1,,2);				#結果爲1
    jQuery.max(1,2);				#結果爲2
</script>

#1.給整個jQuery的全部標籤添加自定義方法
<script>

    $.fn.extend({
        max:function (a,b) {
                return c =a>b?a:b;
        },
        min:function (a,b) {
                return c =a<b?a:b;
        }
    })
	$('.d1').max(1,2)				#結果爲2
	$('.d1').min(1,2)				#結果爲1
</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程