【前端】jquery基礎學習

時間  2019-11-15
標籤 前端 jquery 基礎 學習 欄目 JQuery 简体版
原文   原文鏈接

jQuery引入

下載連接：[jQuery官網](https://jquery.com/)，首先須要下載這個jQuery的文件，而後在HTML文件中引入這個文件，就可使用這個文件中幫咱們提供的jquery的接口了。

 

jquery對象和dom對象

jquery找到的標籤對象稱爲 -- jquery對象
原生js找到的標籤對象稱爲 -- dom對象
dom對象只能使用dom對象的方法,不能使用jquery對象的方法
jquery對象也是,它不能使用dom對象的方法

dom對象和jquery對象互相轉換:
	jquery對象轉dom對象 -- jquery對象[0]  示例:$('#d1')[0]
	dom對象轉jquery對象 -- $(dom對象)

 

jQuery選擇器

基本選擇器

jQuery('#d1')  -- $('#d1')
基本選擇器（同css）
　　　　　　id選擇器：

	$("#id")  #無論找什麼標籤，用什麼選擇器，都必需要寫$("")，引號裏面再寫選擇器，經過jQuery找到的標籤對象就是一個jQuery對象，用原生JS找到的標籤對象叫作DOM對象，看咱們上面的jQuery對象部分的內容
　　　　　　標籤選擇器：

	$("tagName")  $('div')
　　　　　　class選擇器：

	$(".className")  
　　　　　　配合使用：

	$("div.c1")  // 找到有c1 class類的div標籤
　　　　　　全部元素選擇器：

	$("*")
　　　　　　組合選擇器：

	$("#id, .className, tagName")

	選擇器找到的多是多個標籤,會放到數組裏面,但仍是jquery對象,可以直接使用jquery的方法,意思是找到的全部標籤進行統一設置,若是要單獨設置選中的全部標籤中的某個標籤,能夠經過索引取值的方式找到,而後注意,經過索引取值拿到的標籤,是個dom對象

基本篩選器

<ul>
    <li>蔡世楠</li>
    <li>尤利陽</li>
    <li id="l3">張雷</li>
    <li>申凱琦</li>
    <li id="l5">程德浩</li>
    <li>羅新宇</li>
    <li>曾凡星</li>
</ul>

:first  -- 示例:$('li:first') // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配全部索引值爲偶數的元素，從 0 開始計數
:odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
:gt(index)// 匹配全部大於給定索引值的元素
:lt(index)// 匹配全部小於給定索引值的元素
:not(元素選擇器)// 移除全部知足not條件的標籤
:has(元素選擇器)// --$('li:has(.c1)')  找到後代中含有知足has裏面選擇器的那個標籤
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除後代中含有知足has裏面選擇器的那個標籤

 

屬性選擇器

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

// 示例,多用於input標籤
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標籤
$("input[type!='text']");// 取到類型不是text的input標籤

 

表單篩選器

找到的是type屬性爲這個值的input標籤中
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

表單對象屬性篩選器

:enabled   #可用的標籤
:disabled  #不可用的標籤
:checked   #選中的input標籤
:selected  #選中的option標籤

篩選器方法

下一個:
    $('#l3').next();  找到下一個兄弟標籤
    $('#l3').nextAll(); 找到下面全部的兄弟標籤
    $('#l3').nextUntil('#l5');#直到找到id爲l5的標籤就結束查找，不包含它
上一個
	$("#id").prev()
	$("#id").prevAll()
	$("#id").prevUntil("#i2")
父親元素
    $("#id").parent()
    $("#id").parents()  // 查找當前元素的全部的父輩元素（爺爺輩、祖先輩都找到）
    $("#id").parentsUntil('body') // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止，這裏直到body標籤，不包含body標籤，基本選擇器均可以放到這裏面使用。

兒子和兄弟元素
$('ul').children(); 
$('ul').children('#l3');  #找到符合後面這個選擇器的兒子標籤

$('#l5').siblings();
$('#l5').siblings('#l3'); #找到符合後面這個選擇器的兄弟標籤


find
	$('ul').find('#l3')  -- 相似於  $('ul #l3')
filter過濾
	$('li').filter('#l3');


.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not()  // 從匹配元素的集合中刪除與指定表達式匹配的元素  $('li').not('#l3');
.has()  // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq()  // 索引值等於指定值的元素

 

事件

事件綁定方式

<script src="jquery.js"></script>
<script>
    //方式1
    // $('#d1').click(function () {
    //     $(this).css({'background-color':'green'});
    // });
    //方式2
    $('#d1').on('click',function () {
        $(this).css({'background-color':'green'});
   })
​
</script>

經常使用事件

click  左鍵點擊事件
    //獲取光標觸發的事件
    $('[type="text"]').focus(function () {
        $('.c1').css({'background-color':'black'});
   });
    //失去光標(焦點)觸發的事件
    $('[type="text"]').blur(function () {
        $('.c1').css({'background-color':'purple'});
   });
​
    //域內容發生改變時觸發的事件
    $('select').change(function () {
        $('.c1').toggleClass('cc');
   });
​
    //鼠標懸浮觸發的事件
    // $('.c1').hover(
    //     //第一步:鼠標放上去
    //     function () {
    //         $(this).css({'background-color':'blue'});
    //     },
    //     //第二步,鼠標移走
    //     function () {
    //         $(this).css({'background-color':'yellow'});
    //     }
    // )
​
    // 鼠標懸浮 等同於hover事件
    // 鼠標進入
    // $('.c1').mouseenter(function () {
    //     $(this).css({'background-color':'blue'});
    // });
    // 鼠標移出
    // $('.c1').mouseout(function () {
    //     $(this).css({'background-color':'yellow'});
    // });
 
    // $('.c2').mouseenter(function () {
    //     console.log('得港綠了');
    // });
    // 鼠標懸浮事件
    // $('.c2').mouseover(function () {
    //     console.log('得港綠了');
    // });
    // mouseover 和 mouseenter的區別是：mouseover事件是若是該標籤有子標籤，那麼移動到該標籤或者移動到子標籤時會連續觸發，mmouseenter事件無論有沒有子標籤都只觸發一次，表示鼠標進入這個對象
​
​
//鍵盤按下觸發的事件 e\event事件對象
    $(window).keydown(function (e) {
        // console.log(e.keyCode); //每一個鍵都有一個keyCode值,經過不一樣的值來觸發不一樣的事件
        if (e.keyCode === 37){
            $('.c1').css({'background-color':'red'});
       }else if(e.keyCode === 39){
            $('.c1').css({'background-color':'green'});
       }
        else {
            $('.c1').css({'background-color':'black'});
       }
   })
    // 鍵盤擡起觸發的事件
    $(window).keyup(function (e) {
        console.log(e.keyCode);
   })
​
 
 input事件:
        22期百度:<input type="text" id="search">
        <script src="jquery.js"></script>
        <script>
            $('#search').on('input',function () {
                console.log($(this).val());
           })
​
        </script>
​

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: red;
            height: 200px;
        }
        #d2{
            background-color: green;
            height: 100px;
            width: 100px;
        }

    </style>

</head>
<body>

<div id="d1">
    <div id="d2"></div>

</div>


<script src="jquery.js"></script>
<script>
    $('#d1').click(function () {
        alert('父級標籤');
    });
    $('#d2').click(function () {
        alert('子級標籤');
    });
    

</script>

</body>
</html>

阻止後續事件發生

    $('#d1').click(function () {
        alert('父級標籤');
    });
    $('#d2').click(function (e) {
        alert('子級標籤');
        return false;
        // e.stopPropagation();
    });

 

事件委託

事件委託是經過事件冒泡的原理，利用父標籤去捕獲子標籤的事件，將將來添加進來的某些子標籤自動綁定上事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="d1">
    <button class="c1">愛的魔力轉圈圈</button>

</div>

<script src="jquery.js"></script>
<script>
    // $('.c1').on('click',function () {
    //     alert('得港被雪飛調教了,大壯很難受!');
    //     var btn = document.createElement('button');
    //     $(btn).text('愛的魔力轉圈圈');
    //     $(btn).addClass('c1');
    //     console.log(btn);
    //     //添加到div標籤裏面的後面
    //     $('#d1').append(btn);
    //
    // });

	#將'button' 選擇器選中的標籤的點擊事件委託給了$('#d1');
    $('#d1').on('click','button',function () {
        alert('得港被雪飛調教了,大壯很難受!');
        var btn = document.createElement('button');
        $(btn).text('愛的魔力轉圈圈');
        $(btn).addClass('c1');
        console.log(btn);
        console.log($(this)) //仍是咱們點擊的那個button按鈕
        //添加到div標籤裏面的後面
        $('#d1').append(btn);

    });


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

 

頁面載入和window.onloadcss

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>
　　　　
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程