前端之jQuery

時間  2019-11-19
標籤 前端 jquery 欄目 JQuery 简体版
原文   原文鏈接

[TOC]css

jQuery介紹

jQuery是一個輕量級、兼容多瀏覽器的JavaScript庫，能使用戶更方便地處理HTML文檔，實現動畫效果、方便地進行Ajax交互。html

jQuery引入方式

一種是引入本地的jQuery文件，另外一種是引用jQuery的cdn前端

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

jQuery基礎語法

$(選擇器).action()

查找標籤

基本選擇器

id選擇器

$('#id')

標籤選擇器

$('div')

class選擇器

$('.c1')

組合選擇器

$('#d1, .c1, p')

全部元素選擇器

$('*')    // 選擇全部的標籤

配合使用

$("div.c1")  // 找到有c1 class類的div標籤

層級選擇器

$("div span")    // div 的全部span後代
$("div > span")   // div的全部兒子span
$("div + span")    // 毗鄰 div緊挨着的span
$("div ~ span")    // div同級下面的全部span

基本篩選器

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配全部索引值爲偶數的元素，從 0 開始計數
:odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
:gt(index)// 匹配全部大於給定索引值的元素
:lt(index)// 匹配全部小於給定索引值的元素
:not(元素選擇器)// 移除全部知足not條件的標籤
:has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

例子：jquery

$('ul li:first')     //找到ul標籤下第一個li標籤

$("div:has(h1)")     // 找到全部後代中有h1標籤的div標籤
$("div:has(.c1)")     // 找到全部後代中有c1樣式類的div標籤

$('div span:has("#d1")')    // 找到div全部後代中有的id爲d1的span標籤
$('div span:not("#d1")')    // 找到div全部後代中有的id不爲d1的span標籤

屬性選擇器

$('[username]')
$('[username = "cwz"]')
$('p[username = "cwz"]')

表單篩選器

:僅僅在表單選擇器上使用，默認是在input框，type屬性瀏覽器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

補充知識點：app

<!--novalidate 取消前端給你作的校驗功能-->
<form action="" novalidate></form>

特殊：函數

$(":checkbox")  // 找到全部的checkbox

篩選器方法

下一個元素動畫

$("#id").next()
$("#id").nextAll()    // 同級之下全部的
$("#id").nextUntil("#i2")

上一個元素this

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素spa

$("#id").parent()
$("#id").parents()  // 查找當前元素的全部的父輩元素
$("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止。

兒子和兄弟元素：

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


$('div span:first')   // 等價操做：

$('div span').first()

操做標籤

樣式操做

addClass();     // 增長類
removeClass();    // 移除指定的類
hasClass();      // 判斷樣式是否存在
toggleClass();    // 有則移除，沒有就增長

例子：開關燈實例

修改css有樣式

<div>
    <p>11</p>
    <p>22</p>
</div>

需求：把11所在標籤變爲紅色，22所在標籤變爲綠色

$('div').children().first().css('color','red').next().css('color','green')

位置操做

offset()    // 獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()   // 獲取匹配元素相對父元素的偏移
scrollTop()   // 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()   // 獲取匹配元素相對滾動條左側的偏移
$(window).scrollTop(0)   // 瀏覽器滾動條能快速回到頂部

邊框尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

示例：

$('p').innerHeight()
60.8

$('p').innerWidth()
820

文本操做

$('div').text()    // 獲取文本值
$('div').html()    // 獲取html代碼

$('div').text('有點意思')   // 設置文本值
$('div').html('<h1>有點意思</h1>')    // 設置全部匹配元素的html內容，識別內容裏的標籤元素

獲取用戶輸入的值

$('input').val()

$('input').val('阿什頓')   // 不加參數，獲取值；加了參數，設置值

自定義登陸校驗示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>註冊頁面</h1>
<form action="">
    <p>
        username:<input type="text" id="d1">
        <span style="color: red" class="errors"></span>
    </p>
    <p>
        password:<input type="password" id="d2">
        <span style="color: red" class="errors"></span>
    </p>
    <p>
        <input type="button" value="按鈕" id="submit">
    </p>
</form>
<script>
    var btnEle = $('#submit')[0];
    btnEle.onclick = function () {
        // 獲取用戶輸入的用戶名 密碼
        var userNameVal = $('#d1').val();
        var passWordVal = $('#d2').val();
        // 檢驗用戶名和密碼是否輸入
        if (userNameVal.length === 0) {
            // 去對應的提示框中 展現錯誤信息
            $('.errors').first().text('用戶名不能爲空')
        }
         if (passWordVal.length === 0) {
            // 去對應的提示框中 展現錯誤信息
            $('.errors').last().text('密碼不能爲空')
        }
    };

    var inputEleList = $('input');
    for(let i=0;i<inputEleList.length;i++){
        inputEleList[i].onfocus = function () {
            $(this).next().text('')
        }
    }

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

屬性操做

attr(attrName)   // 返回第一個匹配元素的屬性值
attr(attrName, attrValue)   // 爲全部匹配元素設置一個屬性值
attr({k1: v1, k2:v2})   // 爲全部匹配元素設置多個屬性值
removeAttr()   // 從每個匹配的元素中刪除一個屬性

對於checked和radio：

// attr()不能動態獲取用戶輸入的內容,而prop()能夠判斷用戶是否選中

$('input').first().attr('checked', 'checked')   // 不能設置值
$('input').first().prop('checked', 'checked')   // 能夠設置值

移除屬性：

// $('input').first().removeProp('checked') 已經沒有效果了

$('input').first().prop('checked', false)

注意：在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操做時會出bug，在3.x版本的jQuery中則沒有這個問題。爲了兼容性，咱們在處理checkbox和radio的時候儘可能使用特定的prop()，不要使用attr("checked", "checked")。

總結：

  1. 對於標籤上有的能看到的屬性和自定義屬性都用attr
  2. 對於返回布爾值的好比checkbox、radio和option的是否被選中都用prop。
  3. 刪除也是使用prop

文檔處理

添加到元素內部的後面

var pEle = document.createElement('p')
$('body').append(pEle)
$(pEle).appendTo('body')    // 二者效果同樣

添加到元素內部的前面

$(A).prepend(B)     // 把B前置到A
$(A).prependTo(B)    // 把A前置到B

添加到指定元素外部的後面

$(A).after(B)      // 把B放到A的後面
$(A).insertAfter(B)    // 把A放到B的後面

添加到指定元素外部的前面

$(A).before(B)         // 把B放到A的前面
$(A).insertBefore(B)   // 把A放到B的前面

移除和清空元素

remove()     // 從DOM中刪除全部匹配的元素。
empty()      // 刪除匹配的元素集合中全部的子節點。

克隆

close()   //括號裏能夠加參數true

克隆示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        button {
            height: 100px;
            width: 150px;
            background-color: red;
            border: 3px solid darkgrey;
            color: white;
            font-size: 18px;
        }
    </style>
</head>
<body>
<button>不經一番寒徹骨，怎得梅花撲鼻香。</button>
</body>
<script>
    // var btnEle = $('button')[0];
    // btnEle.onclick = function () {
    //     $(this).clone(true).insertAfter(this)
    // }
    // jQuery事件的綁定方式
    $('button').on('click', function(){
        $(this).clone(true).insertAfter(this)
    })
</script>
</html>

事件

經常使用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

jQuery事件綁定

事件名(function(){
    // 事件代碼
})


$(選擇器).on('事件名',function(){
    // 事件名
})   // 這種用途更廣

hover綁定事件

<script>
    $('span').hover(
        function () {    // 鼠標懸浮上去的時候觸發，若是隻寫了一個函數，那麼懸浮和移開，只寫同一個
            alert('歡迎光臨~')
        },
        function () {
            alert('再見阿布~')
        }
    )
</script>

實時監測input內部輸入內容

<script>
    $('input').on('input',function () {
        // 獲取用戶輸入內容
        console.log($(this).val())
    })
</script>

阻止後續事件執行

兩種方法：

  1. return false; // 常見阻止表單提交等
  2. e.preventDefault();
<form action="">
    <input type="submit">
    <span></span>
</form>
<script>
    $('input').click(function (e) {
        $(this).next().text('有點意思~');
        // 阻止標籤後續的事件
        // return false
		// 方法2
        e.preventDefault()
    })
</script>

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
    <p>p
        <span>span</span>
    </p>
</div>
</body>
<script>
    $('div').click(function () {
        alert('div')
    });
    $('p').click(function () {
        alert('p')
    });
    $('span').click(function () {
        alert('span')
    })
</script>
</html>

產生的效果：span標籤在最裏面，當點擊span時，彈出框彈出三次。

事件冒泡：一層一層往上觸發

阻止事件冒泡：e.stopPropagation()

頁面載入

$(document).ready(function(){
// 在這裏寫你的JS代碼...
})


// 簡寫
$(function(){
// 你在這裏寫你的代碼
})

事件委託

事件委託是經過事件冒泡的原理，利用父標籤去捕獲子標籤的事件。

$('body').on('click','button',function () {
        alert(123)
})
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程