【2020Python修煉記】前端開發之 jQuery 屬性/樣式操做&綁定事件

時間 2020-06-10

標籤 2020Python修煉記前端開發 jquery 屬性樣式綁定事件欄目 JQuery 简体版

原文原文鏈接

【目錄】

1、jQuery操做標籤

2、jQuery綁定事件

1、jQuery操做標籤

一、操做類 class

js版本　　　　　　　　 jQuery版本
classList.add() 　　　　　　　　 addClass()
classList.remove() 　　　　　　　　 removeClass()
classList.contains() 　　　　　　　　hasClass()
classList.toggle() 　　　　　　　　 toggleClass()
addClass(class|fn)             爲每一個匹配的元素添加指定的類名
removeClass([class|fn])        從全部匹配的元素中刪除所有或者指定的類
toggleClass(class|fn[,sw])     若是存在（不存在）就刪除（添加）一個類
hasClass(class)                檢查當前的元素是否含有某個特定的類，若是有，則返回true

二、CSS操做

<p>111</p>

<p>222</p>

<p>333</p>

"""一行代碼將第一個p標籤變成紅色，第二個p標籤變成綠色第三個p標籤變成藍色

"""
$('p').first().css('color','red').next().css('color','green').next().css('color','blue')

# jQuery的鏈式操做使用jQuery能夠作到一行代碼操做不少標籤
# jQuery對象調用jQuery方法以後返回的仍是當前jQuery對象也就能夠繼續調用其餘方法

# python 中連續調用函數 — return self
class MyClass(object): 　　def func1(self): 　　print('func1') 　　return self def func2(self): 　　print('func2') 　　return self
 obj = MyClass() obj.func1().func2()

三、位置操做

offset() # 相對於瀏覽器窗口
position() # 相對於父標籤

scrollTop() # （須要瞭解）返回頂部（針對側欄滾動條）

$(window).scrollTop() # 括號內不加參數就是獲取
1733
$(window).scrollTop(500) # 加了參數就是設置
n.fn.init [Window]

scrollLeft() # 向左滑動（針對水平滾動條）

# 方法相似 scrollTop()

四、尺寸設置

$('p').height() # 文本
$('p').width()

$('p').innerHeight() # 文本+padding
$('p').innerWidth()

$('p').outerHeight() # 文本+padding+border
$('p').outerWidth()

五、文本操做

# 操做標籤內部文本
js 　　　　　　　　　　　 jQuery
innerText 　　　　　　　　text() 括號內不加參數就是獲取加了就是設置
innerHTML 　　　　　 html()

# 獲取標籤文本：

$('div').text() # 僅獲取 div裏的文本內容

"有些話聽聽就過去了，不要在乎，都是成年人!"

$('div').html() #獲取 div裏的 html 代碼
"<p>有些話聽聽就過去了，不要在乎，都是成年人!</p>"

# 修改標籤文本（括號內加值，就是賦值修改）

$('div').text('借問酒家何處有')

$('div').html('借問酒家何處有')

# .text 不能識別 html 代碼，即不能顯示其效果。.html 則能夠。

$('div').text('<h1>大家都是個人大寶貝</h1>')

$('div').html('<h1>你個臭妹妹</h1>')

六、獲取值操做

js　　　　　　　　 jQuery
.value　　　　　　 .val()

# 獲取文本數據
$('#d1').val()
"sasdasdsadsadad"
$('#d1').val('520快樂') # 括號內不加參數就是獲取，加了就是設置

# 獲取文件數據
$('#d2').val()
"C:\fakepath\01_測試路由.png"
$('#d2')[0].files[0] # 牢記 js對象和 jQuery 對象之間的轉換
File {name: "01_測試路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 28733, …}

【溫故而知新】 js對象和 jQuery 對象之間的轉換
// jQuery對象 如何變成 標籤對象 $('#d1')[0] <div id="d1">…</div> document.getElementById('d1')  # 查看是否變爲 標籤對象（調用 標籤對象）
<div id="d1">…</div> // 標籤對象 如何變成 jQuery對象 $(document.getElementById('d1')) w.fn.init [div#d1]

七、屬性操做

js　　　　　　　　 jQuery
setAttribute() 　　　　　　 attr(name,value)
getAttribute() 　　　　　　 attr(name)
removeAttribute() 　　　　 removeAttr(name)

在用變量存儲對象的時候，命名規則——

js中推薦使用
　　XXXEle 標籤對象
jQuery中推薦使用
　　$XXXEle jQuery對象

# 舉例：

# 獲取值
let $pEle = $('p') #定義 jQuery 對象

$pEle.attr('id')
"d1"
$pEle.attr('class')
undefined

#修改 / 賦值

$pEle.attr('class','c1')
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
$pEle.attr('id','id666')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.attr('password','jason123')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

#刪除

$pEle.removeAttr('password')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

"""
對於標籤上有的可以看到的屬性和自定義屬性，用attr
對於返回布爾值，好比 checkbox radio option是否被選中，用prop
"""

$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked','checked') # 無效
w.fn.init [input#d3]

$('#d2').prop('checked')
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true) # 使其被選中
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]

八、文檔處理

js 　　　　　　　　　　 jQuery
createElement('p') 　　　$('<p>')
appendChild()　 append()

let $pEle = $('<p>') # 建立一個 p 標籤 jQuery 對象

$pEle.text ('你好啊草莓要不要來幾個?') # 加入文本信息
$pEle.attr('id','d1') # 添加id 信息

$('#d1').append($pEle) # 在id 爲 d1 的標籤內部尾部追加
$pEle.appendTo($('#d1'))

$('#d1').prepend($pEle) # 內部頭部追加
w.fn.init [div#d1]
$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)]

$('#d2').after($pEle) # 放在某個標籤（此處爲 id 爲d2的標籤）後面
w.fn.init [p#d2]
$pEle.insertAfter($('#d1'))

$('#d1').before($pEle)
w.fn.init [div#d1]
$pEle.insertBefore($('#d2'))

$('#d1').remove() # 將標籤從DOM樹中刪除
w.fn.init [div#d1]
$('#d1').empty() # 清空標籤內部全部的內容
w.fn.init [div#d1]

參考閱讀：https://www.cnblogs.com/xiaoyuanqujing/articles/11670119.htmlcss

https://www.cnblogs.com/xiaoyuanqujing/articles/11670128.htmlhtml

2、jQuery綁定事件以及事件應用舉例

一、綁定事件的兩種方法

// 第一種
    $('#d1').click(function () { alert('你好呀') }); // 第二種(功能更增強大 還支持事件委託)
    $('#d2').on('click',function () { alert('好嗨喲') })

二、克隆事件

<button id="d1">護膚套裝，點擊就送</button>

<script> $('#d1').on('click',function () { // console.log(this) // this指代是當前被操做的標籤對象
        // $(this).clone().insertAfter($('body')) // clone默認狀況下只克隆html和css，不克隆事件
 $(this).clone(true).insertAfter($('body')) // 括號內加true，便可克隆事件
 }) </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        #d1 {
            height: 100px;
            width: 100px;
            background-color: orange;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<button id="d1">屠龍寶刀，點擊就送</button>

<script>
    $('#d1').on('click',function () {
        // console.log(this)  // this指代是當前被操做的標籤對象
        // $(this).clone().insertAfter($('body'))  // clone默認狀況下只克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($('body'))  // 括號內加true便可克隆事件

    })
</script>
</body>
</html>

應用栗子

三、自定義模態框

模態框內部本質就是給標籤移除或者添加上 hide屬性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定義模態框</title>
  <style>
    .cover {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
      width: 600px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="彈" id="i0">

<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label>
  <input id="i1" type="text">
   <label for="i2">愛好</label>
  <input id="i2" type="text">
  <input type="button" id="i3" value="關閉">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  // var tButton = $("#i0")[0];
  $("#i0").click(function () {
    var coverEle = $(".cover")[0];  // 須要手動轉
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");
  })
  // tButton.onclick=function () {
  //   var coverEle = $(".cover")[0];
  //   var modalEle = $(".modal")[0];
  //
  //   $(coverEle).removeClass("hide");
  //   $(modalEle).removeClass("hide");
  // };

  var cButton = $("#i3")[0];
  cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");
  }
</script>
</body>
</html>

詳細代碼

四、左側菜單（有顯隱效果）

<script> $('.title').click(function () { // 先給全部的items加hide
 $('.items').addClass('hide') // 而後將被點擊標籤內部的hide移除
 $(this).children().removeClass('hide') }) </script>
<!--嘗試用一行代碼搞定上面的操做-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .left {
            float: left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title {
            font-size: 36px;
            color: white;
            text-align: center;
        }
        .items {
            border: 1px solid black;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="menu">
        <div class="title">菜單一
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="title">菜單二
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="title">菜單三
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
    </div>
</div>

<script>
    $('.title').click(function () {
        // 先給全部的items加hide
        $('.items').addClass('hide')
        // 而後將被點擊標籤內部的hide移除
        $(this).children().removeClass('hide')
    })
</script>
</body>
</html>

View Code

五、返回頂部

<script> $(window).scroll(function () { if($(window).scrollTop() > 300){ $('#d1').removeClass('hide') }else{ $('#d1').addClass('hide') } }) </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position: fixed;
            background-color: black;

            right: 20px;
            bottom: 20px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<a href="#d1" class="hide">回到頂部</a>

<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>
</body>
</html>

詳細代碼

六、自定義登陸校驗

# 在獲取用戶的用戶名和密碼的時候 用戶若是沒有填寫 應該給用戶展現提示信息 <p>username: <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password: <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script> let $userName = $('#username') let $passWord = $('#password') $('#d1').click(function () { // 獲取用戶輸入的用戶名和密碼 作校驗
 let userName = $userName.val() let passWord = $passWord.val() if (!userName){ $userName.next().text("用戶名不能爲空") } if (!passWord){ $passWord.next().text('密碼不能爲空') } }) $('input').focus(function () { $(this).next().text('') }) </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 獲取用戶輸入的用戶名和密碼 作校驗
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用戶名不能爲空")
        }
        if (!passWord){
            $passWord.next().text('密碼不能爲空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>
</body>
</html>

詳細代碼

七、input實時監控

<input type="text" id="d1">

<script> $('#d1').on('input',function () { console.log(this.value) }) </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>k</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)
    })
</script>
</body>
</html>

View Code

八、hover事件

<script>
    // $("#d1").hover(function () { // 鼠標懸浮 + 鼠標移開
    // alert(123)
    // })
 $('#d1').hover( function () { alert('我來了') // 懸浮
 }, function () { alert('我溜了') // 移開
 } ) </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<p id="d1">到家啊就是度假酒店</p>

<script>
    // $("#d1").hover(function () {  // 鼠標懸浮 + 鼠標移開
    //     alert(123)
    // })

    $('#d1').hover(
        function () {
            alert('我來了')  // 懸浮
    },
        function () {
            alert('我溜了')  // 移開
        }
    )
</script>
</body>
</html>

View Code

九、鍵盤按鍵按下事件

<script> $(window).keydown(function (event) { console.log(event.keyCode) if (event.keyCode === 16){ alert('你按了shift鍵') } }) </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift鍵')
        }
    })
</script>
</body>
</html>

View Code

十、阻止後續事件執行（即阻止標籤自帶的事件被觸發）

<script> $('#d2').click(function (e) { $('#d1').text('寶貝 你能看到我嗎?') // 阻止標籤後續事件的執行 方式1
        // return false
        // 阻止標籤後續事件的執行 方式2
        // e.preventDefault()
 }) </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="">
    <span id="d1" style="color: red"></span>
    <input type="submit" id="d2">
</form>

<script>
    $('#d2').click(function (e) {
        $('#d1').text('寶貝 你能看到我嗎?')
        // 阻止標籤後續事件的執行 方式1
        // return false
        // 阻止標籤後續事件的執行 方式2
        // e.preventDefault()
    })
</script>

</body>
</html>

View Code

十一、阻止事件冒泡（即阻止連續觸發事件）

<script> $('#d1').click(function () { alert('div') }) $('#d2').click(function () { alert('p') }) $('#d3').click(function (e) { alert('span') // 阻止事件冒泡的方式1
            // return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
 }) </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="d1">div
        <p id="d2">div>p
            <span id="d3">span</span>
        </p>
    </div>


    <script>
        $('#d1').click(function () {
            alert('div')
        })
        $('#d2').click(function () {
            alert('p')
        })
        $('#d3').click(function (e) {
            alert('span')
            // 阻止事件冒泡的方式1
            // return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
        })
    </script>
</body>
</html>

View Code

十二、事件委託（一勞永逸-新增的標籤只要在指定範圍內，都可有該事件）

<button>是兄弟，就兩肋插刀</button>

<script>
    // 給頁面上全部的button標籤綁定點擊事件
    // $('button').click(function () { // 沒法影響到動態建立的標籤
    // alert(123)
    // })

    // 事件委託 
 $('body').on('click','button',function () { alert(123) // 在指定的範圍內 將事件委託給某個標籤 不管該標籤是事先寫好的，仍是後面動態建立的
 }) </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="../../Desktop/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<button>是兄弟，就兩肋插刀</button>

<script>
    // 給頁面上全部的button標籤綁定點擊事件
    // $('button').click(function () {  // 沒法影響到動態建立的標籤
    //     alert(123)
    // })

    // 事件委託
    $('body').on('click','button',function () {
        alert(123)  // 在指定的範圍內 將事件委託給某個標籤 不管該標籤是事先寫好的仍是後面動態建立的
    })
</script>
</body>
</html>

View Code

1三、頁面加載（等待頁面加載完畢再執行代碼）

# js 等待頁面加載完畢再執行代碼 window.onload = function(){ // js代碼
} """jQuery中等待頁面加載完畢""" # 第一種 $(document).ready(function(){ // js代碼
}) # 第二種 $(function(){ // js代碼
}) # 第三種 """直接寫在body內部最下方"""

1四、動畫效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        #d1 {
            height: 1000px;
            width: 400px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>
</html>

基礎代碼

【 瀏覽器console 裏的操做】
$('#d1').hide(5000) w.fn.init [div#d1] $('#d1').show(5000) w.fn.init [div#d1] $('#d1').slideUp(5000) w.fn.init [div#d1] $('#d1').slideDown(5000) w.fn.init [div#d1] $('#d1').fadeOut(5000) w.fn.init [div#d1] $('#d1').fadeIn(5000) w.fn.init [div#d1] $('#d1').fadeTo(5000,0.4) w.fn.init [div#d1]

1五、補充——each / data

（1）each()

$('div').each(function(index){console.log(index)})

$('div').each(function(index,obj){return[index,obj]})

$.each([111,222,333],function(index,obj){console.log(index,obj)})

$.each([111,222,333],function(index,obj){return[index,obj]})

# each() # 第一種方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../Desktop/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div id="d1" username="jason">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>

操做基礎代碼

【瀏覽器 console 操做】

$('div') w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)] $('div').each(function(index){console.log(index)}) VM181:1 0 VM181:1 1 VM181:1 2 VM181:1 3 VM181:1 4 VM181:1 5 VM181:1 6 VM181:1 7 VM181:1 8 VM181:1 9 $('div').each(function(index,obj){console.log(index,obj)}) VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>
 # 第二種方式 $.each([111,222,333],function(index,obj){console.log(index,obj)}) VM484:1 0 111 VM484:1 1 222 VM484:1 2 333 (3) [111, 222, 333] """ 有了each以後 就無需本身寫for循環了 用它更加的方便 """

（2）data()

.data('attrName', 'attrVlue')

.data('attrName')

$('對象名').first().data('attrName')

$('對象名').last().data('attrName')

.removeData(attrName)

""" 可以讓標籤幫咱們存儲數據 而且用戶肉眼看不見(即 檢查網頁html也沒法查看到) """
# 添加數據 $('div').data('info','回來吧，我原諒你了!') w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)] $('div').first().data('info') "回來吧，我原諒你了!" $('div').last().data('info') "回來吧，我原諒你了!" 
# 未定義的數據 $('div').first().data('xxx') undefined

# 刪除數據 $('div').first().removeData('info') w.fn.init [div#d1, prevObject: w.fn.init(10)] $('div').first().data('info') undefined $('div').last().data('info') "回來吧，我原諒你了!"

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【2020Python修煉記】前端開發之 jQuery 屬性/樣式操做&綁定事件

【目錄】

1、jQuery操做標籤

2、jQuery綁定事件

1、jQuery操做標籤

一、操做類 class

js版本 jQuery版本classList.add() addClass()classList.remove() removeClass()classList.contains() hasClass()classList.toggle() toggleClass()

二、CSS操做

<p>111</p>

<p>222</p>

<p>333</p>

"""一行代碼將第一個p標籤變成紅色，第二個p標籤變成綠色 第三個p標籤變成藍色

"""$('p').first().css('color','red').next().css('color','green').next().css('color','blue')

# jQuery的鏈式操做 使用jQuery能夠作到一行代碼操做不少標籤# jQuery對象調用jQuery方法以後返回的仍是當前jQuery對象 也就能夠繼續調用其餘方法

# python 中 連續調用函數 — return self

三、位置操做

offset() # 相對於瀏覽器窗口position() # 相對於父標籤

scrollTop() # （須要瞭解） 返回頂部 （針對 側欄滾動條） $(window).scrollTop() # 括號內不加參數就是獲取 1733 $(window).scrollTop(500) # 加了參數就是設置 n.fn.init [Window]

scrollLeft() # 向左滑動（針對 水平滾動條）

# 方法相似 scrollTop()

四、尺寸設置

$('p').height() # 文本$('p').width()

$('p').innerHeight() # 文本+padding$('p').innerWidth()

$('p').outerHeight() # 文本+padding+border$('p').outerWidth()

五、文本操做

# 操做標籤內部文本js jQueryinnerText text() 括號內不加參數就是獲取加了就是設置innerHTML html()

# 獲取標籤文本：

$('div').text() # 僅獲取 div裏的文本內容

"有些話聽聽就過去了，不要在乎，都是成年人!"

$('div').html() #獲取 div裏的 html 代碼"<p>有些話聽聽就過去了，不要在乎，都是成年人!</p>"

# 修改標籤文本 （括號內 加值，就是賦值修改）

$('div').text('借問酒家何處有')

$('div').html('借問酒家何處有')

# .text 不能識別 html 代碼，即 不能顯示其效果。.html 則能夠。

$('div').text('<h1>大家都是個人大寶貝</h1>')

$('div').html('<h1>你個臭妹妹</h1>')

六、獲取值操做

js jQuery.value .val()

# 獲取文本數據$('#d1').val() "sasdasdsadsadad"$('#d1').val('520快樂') # 括號內不加參數就是獲取，加了就是設置

【溫故而知新】 js對象 和 jQuery 對象 之間的轉換

七、屬性操做

js jQuerysetAttribute() attr(name,value)getAttribute() attr(name)removeAttribute() removeAttr(name)

在用變量存儲對象的時候，命名規則——

js中推薦使用 XXXEle 標籤對象jQuery中推薦使用 $XXXEle jQuery對象

# 舉例：

# 獲取值let $pEle = $('p') #定義 jQuery 對象

$pEle.attr('id')"d1"$pEle.attr('class')undefined

#修改 / 賦值

$pEle.attr('class','c1')w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]$pEle.attr('id','id666')w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]$pEle.attr('password','jason123')w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

#刪除

$pEle.removeAttr('password')w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

八、文檔處理

js jQuerycreateElement('p') $('<p>')appendChild() append()

let $pEle = $('<p>') # 建立一個 p 標籤 jQuery 對象

$pEle.text ('你好啊 草莓要不要來幾個?') # 加入文本信息$pEle.attr('id','d1') # 添加id 信息

$('#d1').before($pEle)w.fn.init [div#d1]$pEle.insertBefore($('#d2'))

$('#d1').remove() # 將標籤從DOM樹中刪除w.fn.init [div#d1]$('#d1').empty() # 清空標籤內部全部的內容w.fn.init [div#d1]

2、jQuery綁定事件 以及 事件應用舉例

一、綁定事件的兩種方法

二、克隆事件

三、自定義模態框

模態框內部本質就是給標籤移除或者添加上 hide屬性

四、左側菜單（有顯隱效果）

五、返回頂部

六、自定義登陸校驗

七、input實時監控

八、hover事件

九、鍵盤按鍵按下事件

十、阻止後續事件執行（即 阻止標籤自帶的事件被觸發）

十一、阻止事件冒泡（即 阻止連續觸發事件）

十二、事件委託（一勞永逸-新增的標籤 只要在指定範圍內，都可有該事件）

1三、頁面加載（等待頁面加載完畢再執行代碼）

1四、動畫效果

1五、補充——each / data

（1）each()

$('div').each(function(index){console.log(index)})

$('div').each(function(index,obj){return[index,obj]})

$.each([111,222,333],function(index,obj){console.log(index,obj)})

$.each([111,222,333],function(index,obj){return[index,obj]})

（2）data()

js版本　　　　　　　　 jQuery版本
classList.add() 　　　　　　　　 addClass()
classList.remove() 　　　　　　　　 removeClass()
classList.contains() 　　　　　　　　hasClass()
classList.toggle() 　　　　　　　　 toggleClass()

"""一行代碼將第一個p標籤變成紅色，第二個p標籤變成綠色第三個p標籤變成藍色

"""
$('p').first().css('color','red').next().css('color','green').next().css('color','blue')

# jQuery的鏈式操做使用jQuery能夠作到一行代碼操做不少標籤
# jQuery對象調用jQuery方法以後返回的仍是當前jQuery對象也就能夠繼續調用其餘方法

# python 中連續調用函數 — return self

offset() # 相對於瀏覽器窗口
position() # 相對於父標籤

scrollTop() # （須要瞭解）返回頂部（針對側欄滾動條）

$(window).scrollTop() # 括號內不加參數就是獲取
1733
$(window).scrollTop(500) # 加了參數就是設置
n.fn.init [Window]

scrollLeft() # 向左滑動（針對水平滾動條）

$('p').height() # 文本
$('p').width()

$('p').innerHeight() # 文本+padding
$('p').innerWidth()

$('p').outerHeight() # 文本+padding+border
$('p').outerWidth()

# 操做標籤內部文本
js 　　　　　　　　　　　 jQuery
innerText 　　　　　　　　text() 括號內不加參數就是獲取加了就是設置
innerHTML 　　　　　 html()

$('div').html() #獲取 div裏的 html 代碼
"<p>有些話聽聽就過去了，不要在乎，都是成年人!</p>"

# 修改標籤文本（括號內加值，就是賦值修改）

# .text 不能識別 html 代碼，即不能顯示其效果。.html 則能夠。

js　　　　　　　　 jQuery
.value　　　　　　 .val()

# 獲取文本數據
$('#d1').val()
"sasdasdsadsadad"
$('#d1').val('520快樂') # 括號內不加參數就是獲取，加了就是設置

【溫故而知新】 js對象和 jQuery 對象之間的轉換

js　　　　　　　　 jQuery
setAttribute() 　　　　　　 attr(name,value)
getAttribute() 　　　　　　 attr(name)
removeAttribute() 　　　　 removeAttr(name)

js中推薦使用
　　XXXEle 標籤對象
jQuery中推薦使用
　　$XXXEle jQuery對象

# 獲取值
let $pEle = $('p') #定義 jQuery 對象

$pEle.attr('id')
"d1"
$pEle.attr('class')
undefined

$pEle.attr('class','c1')
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
$pEle.attr('id','id666')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.attr('password','jason123')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

$pEle.removeAttr('password')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

js 　　　　　　　　　　 jQuery
createElement('p') 　　　$('<p>')
appendChild()　 append()

$pEle.text ('你好啊草莓要不要來幾個?') # 加入文本信息
$pEle.attr('id','d1') # 添加id 信息

$('#d1').before($pEle)
w.fn.init [div#d1]
$pEle.insertBefore($('#d2'))

$('#d1').remove() # 將標籤從DOM樹中刪除
w.fn.init [div#d1]
$('#d1').empty() # 清空標籤內部全部的內容
w.fn.init [div#d1]

2、jQuery綁定事件以及事件應用舉例

十、阻止後續事件執行（即阻止標籤自帶的事件被觸發）

十一、阻止事件冒泡（即阻止連續觸發事件）

十二、事件委託（一勞永逸-新增的標籤只要在指定範圍內，都可有該事件）