jQuery常用事件，each循環，引用當前時間

本文轉載自查看原文 2018-06-11 13:51 1439 前端基礎

1.常用事件

click(function(){...}) #點擊時觸發
hover(function(){...}) #鼠標移到時就觸發
blur(function(){...}) #失去焦點時觸發
focus(function(){...}) #獲得焦點時觸發
change(function(){...})#值發生發化就觸發
keyup(function(){...}) 
off() 方法移除用 .on()綁定的事件處理程序。
input(function(){...})實時監聽input輸入值變化

1.click(function(){...})

click(function(){...}) 
$(".list-group-item .reply_btn").on("click",function () {
    //點擊回復的時候，光標移到評論框
    $("#comment_content").focus();}
 <textarea name="" id="comment_content" cols="60" rows="10"></textarea>

2.hover(function(){...})

當鼠標指針懸停在上面時，改變 <p> 元素的背景顏色：
$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

顯示購物車的內容

<!DOCTYPE html>
<html lang="en">
<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>hover示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .nav {
      height: 40px;
      width: 100%;
      background-color: #3d3d3d;
      position: fixed;
      top: 0;
    }

    .nav ul {
      list-style-type: none;
      line-height: 40px;
    }

    .nav li {
      float: left;
      padding: 0 10px;
      color: #999999;
      position: relative;
    }
    .nav li:hover {
      background-color: #0f0f0f;
      color: white;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    .son {
      position: absolute;
      top: 40px;
      left: 0;
      height: 50px;
      width: 100px;
      background-color: #00a9ff;
      display: none;
    }

    .hover .son {
      /*不換行*/
      display: block;
    }
  </style>
</head>
<body>
<div class="nav">
  <ul class="clearfix">
    <li>登錄</li>
    <li>注冊</li>
    <li >購物車
      <p class="son">
        空空如也...
      </p>
    </li>
  </ul>
</div>

<script src="jquery-3.3.1.js"></script>
<script>

$(".nav li").hover(
  function () {
      // 鼠標移上去。son中的display就會被划掉。.hover .son的權重大於.son 內容顯示出來
    $(this).addClass("hover");
  },
    // 鼠標移走
  function () {
    $(this).removeClass("hover");
  }
)
</script>
</body>
</html>

View Code

3.blur(function(){...})

當輸入域失去焦點 (blur) 時改變其顏色：
$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});

4.focus(function(){...})

當輸入框獲得焦點時，改變它的背景色：
$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

5.change(function(){...})

<input>元素，<textarea>和<select>元素的值都是可以發生改變的，開發者可以通過change事件去監聽這些改變的動作
input元素
監聽value值的變化，當有改變時，失去焦點后觸發change事件。對於單選按鈕和復選框，當用戶用鼠標做出選擇時，該事件立即觸發。
select元素
對於下拉選擇框，當用戶用鼠標作出選擇時，該事件立即觸發
textarea元素
多行文本輸入框，當有改變時，失去焦點后觸發change事件

6.input(function(){...})

在輸入框中個輸入時就提示
 $("#i1").on("input ", function () {
    alert($(this).val());
  })

實時監聽input輸入值變化

<input type="text" id="i1">
<script src="jquery-3.3.1.js"></script>
<script>
  /*
  * oninput是HTML5的標准事件
  * 能夠檢測textarea,input:text,input:password和input:search這幾個元素的內容變化，
  * 在內容修改后立即被觸發，不像onchange事件需要失去焦點才觸發
  * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
  * 使用jQuery庫的話直接使用on同時綁定這兩個事件即可。
  * */
  $("#i1").on("input", function () {
    console.log($(this).val());
  })
</script>

7.keydown和keyup事件組合示例

選中的行，按住shift鍵操作后，整體都改變

按住shift批量操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title> 按住shift批量操作</title>
</head>
<body>
<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Egon</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Alex</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Yuan</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>EvaJ</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Gold</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </td>
  </tr>
  </tbody>
</table>

<script src="jquery-3.3.1.js"></script>
<script>
    // 定義一個全局的變量,保存shift有沒有被按下的狀態
    var flag = false;

    // 給window綁定按鍵被按下的事件
    $(window).on("keydown", function (e) {
//        查看shift鍵摁下去后的返回值
        console.log(e.keyCode);
        if (e.keyCode === 16){
            // 表示shift被按下!!!
            flag = true;
        }
    });

    // 給window綁定按鍵被抬起的事件
    $(window).on("keyup", function (e) {
        if (e.keyCode === 16){
            // 表示shift被按下!!!
            flag = false;
        }
    });

    // select標簽的值發生變化之后,觸發事件
    $("select").on("change", function () {

        // 1. 判斷shift有沒有被按下
        // 2. 判斷當前行有沒有被選中 找到選擇的值 this表示select 找到tr標簽，在tr標簽中找到多選框這一標簽
        var isChecked = $(this).parent().parent().find(":checkbox").prop("checked");
        if (flag && isChecked) {
            // 按下就進入批量編輯模式
            // 1. 取到select變化之后的值
            var value = $(this).val();
            // 2. 找到所有的選中的checkbox,把對應的select設置成上面能取到的值 找到多選框選中的這一標簽，找到tbody，然后找select
            $("input:checked").parent().parent().find("select").val(value);
        }
        // 沒有被按下,啥都不做
    })
</script>
</body>
</html>

View Code

2.事件委托

事件委托是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件。
(基於已經存在的標簽給未來的標簽綁定事件)
事件委托的格式 $("已經存在的標簽").on("事件名稱", "選擇器", function(){...})
$("table").on("click", ".delete", function () {
 // 刪除按鈕綁定的事件
})

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>事件委托示例</title>
</head>
<body>
<input type="button" value="添加新數據" id="add">
<!--表格的樣式-->
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>金老板</td>
        <td><input type="button" value="刪除" class="delete"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>景女神</td>
        <td><input type="button" value="刪除" class="delete"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>隔壁老王</td>
        <td><input type="button" value="刪除" class="delete"></td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
    // 點擊添加按鈕添加一條新數據
    // 1. 找到按鈕綁定點擊事件
    $("#add").on("click", function () {
        // 當添加按鈕被點擊之后要做的事兒
        // 1. 創建一個新的tr
        var trEle = document.createElement("tr");
        trEle.innerHTML = '<td>4</td> <td>哪吒</td> <td><input type="button" value="刪除" class="delete"></td>';
        // 2. 把創建好的tr追加到tbody里面
        $("tbody").append(trEle);
    });
    // 點擊每一行的刪除按鈕,把當前行刪除掉
    // 1. 找到每一行的刪除按鈕,綁定點擊事件
//    //    方法一：
//     $(".delete").on("click",function(){
////        console.log($(this).parent().parent())  找到當前標簽所在的tr標簽
//        $(this).parent().parent().remove()
////        存在着不足。新建的數據刪除不掉
//    })
//    方法二：使用事件委托處理
    $("table").on("click", "input.delete", function () {
        // 給table標簽綁定事件,監聽我子子孫孫里面有delete樣式類的標簽如果被點擊了,我就做下面的事兒
        // 當每一行的刪除按鈕被點擊后要做的事兒
        // 1. 刪除當前被點擊的按鈕的這一行
        console.log(this);
        $(this).parent().parent().remove();
    })

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

View Code

3.動畫效果

// 基本
show([s,[e],[fn]])
可設置時間：$("#1").show(2000);
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
設置透明度：$("#1").fadeIn(2000，0.4);
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義（了解即可）
animate(p,[s],[e],[fn])

4.頁面載入

當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
它可以極大地提高web應用程序的響應速度。
我們的js代碼通常寫在body的最下面。如果要寫在head里面，可以通過頁面載入
$(document).ready(function(){
// 在這里寫你的JS代碼...
})
但是一般都會寫到body里面
<script src="jquery-3.3.1.js"></script>
<script>
    $(document).ready(function () {
        // 文檔加載完之后才執行!!!
        console.log($("#d1").text());
    });
#簡寫方式，一般不提倡
//    $(function () {
//        console.log($("#d1").text());
//    });
</script>

點贊動畫示例

<!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>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      /*color: red;*/
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">點贊</div>
<script src="../55/jquery-3.3.1.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
//      opacity: 0
        fontSize: "68px"

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

View Code

5.each

jQuery內置循環。遍歷一個jQuery對象，為每個匹配元素執行一個函數。

<div id="1">div1</div>
<div id="2">div2</div>
<div id="3">div3</div>

1.使用for循環

var $content=$("div");
for (var a=0;a<$content.length;a++){
console.log($content[a].text());查看內容報錯。$content[a]是DOM對象不能用text得用innerText
可以把$content[a]轉換成jQuery對象
for (var a=0;a<$content.length;a++){
console.log($($content[a]).text());
}

2.使用each循環

$.each($content,function(){console.log(this);})  #得到每個div標簽對象，是DOM對象
$("div").each(function(){console.log(this);})和上面效果一樣，
等同於$.each($content,function(i,v){console.log(v);}) v和this相同，都是當前標簽對象

<div id="1">div1</div>
<div id="2">div2</div>
<div id="3">div3</div> 
$.each($content,function(){console.log($(this).text());})#得到每個div標簽文本內容
div1
div2
div3

3.jQuery將具有相同名稱的元素的值提取出來放到一個數組內

<h1 class="c1">沙河前端小王子</h1>
<h1 class="c1">帶你學習jQuery</h1>
var $content=$(".c1");
var value=new Array();
$.each($content,function(i,v){value.push($(v).text());})
value #["沙河前端小王子", "帶你學習jQuery"]

4.終止each循環 return false；

<h1 class="c1">1</h1>
<h1 class="c1">2</h1>
var content=$(".c1");

1.得到標簽對象

$.each(content,function(i){
console.log(content[i]);
})
#<h1 class="c1">1</h1>
#<h1 class="c1">2</h1>

2.終止循環：

$.each(content,function(i){
value=$(content[i]).text();
if(value==1){
console.log(value);
return false;
}else{console.log(value);};
})
#1

3.跳過某個值：return

$.each(content,function(i){
value=$(content[i]).text();
if(value==1){
return ;
}else{console.log(value);};
})
#2

輸入賬號密碼為空時，后續的不能進行

$("#i1").on("click", function () {
        alert(123);
        var username = $("#username").val();
        var pwd = $("#pwd").val();

        if (username.trim().length === 0 || pwd.trim().length===0) {
            // username和pwd有一個為空就表示數據不合格,就不讓提交
            // 也就是不讓執行默認submit事件
            return false;  // 后續的事件不執行
        }
    })

6.data()

在匹配的元素集合中的所有元素上存儲任意相關數據或返回匹配的元素集合中的
第一個元素的給定名稱的數據存儲的值。

.data(key, value):
$("div").data("k",100);//給所有div標簽都保存一個名為k，值為100
$("div").data("k");//返回第一個div標簽中保存的"k"的值
$("div").removeData("k");  //移除元素上存放k對應的數據
$("div").removeData();  取多個值
$("div").removeData();  移除多個值
$("#1").data("k",100);
$("#1").data("k");
100

在js中自定義當前時間，並設置格式

Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小時
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };
 var choose_date = new Date().Format("yyyy-MM-dd");

View Code

在js和視圖中獲取當前路徑

在js中：

地址欄的地址：http://127.0.0.1:8000/index/
在js中得到獲取主機地址之后的路徑
var url = location.pathname; #/index/
獲取當前地址欄上完整路徑
var url1 = location.href; #http://127.0.0.1:8000/index/

獲取django中獲取url有如下三種方法：

http://127.0.0.1:8000/Xadmin/app01/book/?page=2
獲取帶參數URL：request.get_all_path()  #/Xadmin/app01/book/?page=2
獲取不帶參數URL：request.path #/Xadmin/app01/book/
獲取主機地址：request.get_host() #127.0.0.1:8000

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery怎么跳出當前的each循環 jquery each和for循環比較窗體的常用事件 vue常用事件 javascript的常用事件有哪些 jsplumb 常用事件 jquery的each循環 jQuery的$.each循環的對象 JavaScript基礎之常用事件 js中的常用事件