JavaScript和Jquery我的筆記

時間 2019-11-07

標籤 javascript jquery 我的筆記欄目 JavaScript 简体版

原文原文鏈接

目錄javascript

前言

記錄一下我寫JavaScript和Jquery的時候遇到的一些事css

價格 * 數量 = 金額

這個例子算是告訴我了,不要在HTML上寫什麼onchange方法,直接在Jquery裏面寫html

function ChechUpPrice(value, index) {
    var UnitPrice = $("#UnitPrice").val();
    $("#TotalAmount[" + index + "]").val((UnitPrice * value).toFixed(3) + 'RMB');
}
    $('#UnitPrice,.wareQty').change(function () {
        var unitPrice = $('#UnitPrice').val();
        if (unitPrice && parseFloat(unitPrice) > 0) {
            unitPrice = parseFloat(unitPrice);
        } else {
            unitPrice = 0;
        }
        $('.wareQty').each(function (i,e) {
            var id = $(e).attr('stockWareId');
            var quantity = $(e).val();
            if (quantity && parseFloat(quantity) > 0) {
                quantity = parseFloat(quantity);
            } else {
                quantity = 0;
            }
            $('#totalAmount' + id).text(parseFloat(quantity * unitPrice));
        });
    })

<span id="totalAmount@(item.ProductStockWarehouseId)"></span>

js計算時間差值

var d1 = new Date('2016/03/28 10:17:22');
var d2 = new Date('2016/03/28 11:17:22');
console.log(parseInt(d2 - d1));//兩個時間相差的毫秒數
console.log(parseInt(d2 - d1) / 1000);//兩個時間相差的秒數
console.log(parseInt(d2 - d1) / 1000 / 60);//兩個時間相差的分鐘數
console.log(parseInt(d2 - d1) / 1000 / 60);//兩個時間相差的小時數

若是，拿到的不是日期類型，而是"2016-03-28 10:27:00"這種的字符串格式呢，那麼就須要先將字符串轉換爲日期類型。前端

var t1 = "2016-03-28 10:27:00";
var d1 = t1.replace(/\-/g, "/");
var date1 = new Date(d1);

判斷敲回車或Shift+回車

敲回車的時候,還要判斷shift鍵沒有按下,不然失效java

<input type="text" id="test" value="" />
    <script>
     $(function(){
         $('#test').keydown(function (e){
             if(e.keyCode == 13 && !e.shiftKey){
                 console.log('我敲了回車')
             }else if(e.shiftKey && e.keyCode == 13 ){
                console.log('我敲了Shift+回車')
             }
         })
     })
    </script>

js控制textarea換行

有時候,在作聊天的時候,textarea我但願敲回車發送消息,敲shift+回車纔是換行,這個和上面的同樣的其實jquery

由於自己textarea就有敲回車換行的功能,因此咱們只須要禁止敲回車換行便可ajax

<textarea id="test" style="height: 600px; width:600px;" >你們好,我是Vae</textarea>


    <script>
     
     $(function(){
         $('#test').keydown(function (e){
             if(e.keyCode == 13 && !e.shiftKey){
                 console.log('我敲了回車')
                 e.preventDefault();
             }
         })
     })
            
    </script>

就是如此preventDefault是禁止事件發生的意思,這樣敲回車就不會換行了,按下shift+回車纔會換行npm

$(this)選擇當前元素

我如今有4個a標籤的按鈕,我想點擊誰,誰的名字就輸出,以下bootstrap

可使用$(this)實現,代碼以下api

<!DOCTYPE html>
<html lang="">
<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 Page</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


            <ul id="divGuestList" class="btn-group btn-group-justified btn-group-xs"></ul>
                <li>
                    <a href="#" onclick="test($(this))" class="btn btn-primary">Apple</a>
                    <a href="#" onclick="test($(this))" class="btn btn-primary">Samsung</a>
                </li>
                <li>
                    <a href="#" onclick="test($(this))" class="btn btn-primary">Vae</a>
                    <a href="#" onclick="test($(this))" class="btn btn-primary">xusong</a>
                </li>
            </ul>

    <script>
        function test($this){
            console.log($this.html())
        }
    </script>
</body>
</html>

能夠看到,HTML元素寫的是$(this),下面的js方法寫的就是$this.沒有括號了

結果如圖所示:

前端調試禁止其餘js

在Chrome調試前端的js的時候,老是會進入到相關的js,好比Jquery.js

真的是神煩的,一進去就死命的在裏面,出不來的,這個時候直接把Jquery.js關進黑盒就不會再進入調試了,直接在js上右鍵,選擇BlackBox

js添加a標籤href屬性和文本

//html元素
<a id="UrlReferrer" href="" target="_blank"></a>

//js代碼
document.getElementById("UrlReferrer").href = GuestList[nRet].guest_urlReferrer;                         document.getElementById("UrlReferrer").innerText = "點擊查看"

js控制瀏覽器標籤頁文本閃爍提醒 (已棄用,採用下面的Push.js)

var titleInit = document.title,
    isShine = false;
window.onfocus = function () {
    isShine = false;
};

isShine = true;
setInterval(function () {
    var title = document.title;
    if (isShine == true) {
        if (/新/.test(title) == false) { //這個是正則test方法
            document.title = '【新消息】';
        } else {
            document.title = '【請查看】';
        }
    } else {
        document.title = titleInit;
    }
}, 500);

Push.js推送通知

最近作一個網頁聊天提醒的功能,我嘗試了瀏覽器標題欄變換字體,可是仍是不行,打開的窗口一多根本注意不到,因此使用Push.js推送通知

首先下載js

npm install push.js --save

而後看html

<body>
    <script src="push.min.js"></script>

    <a id="demo_button" href="#" class="button">View Demo</a>
    <!-- Push.Permission.request(); -->
    <script>

        function demo() {
            Push.create('提示', {
                body: '有客戶與您聊天',
                timeout: 4000,
                onClick: function () {
                    window.focus();
                    this.close();
                },
                vibrate: [200, 100, 200, 100, 200, 100, 200]
            });
        }

        $(document).ready(function () {
            $("#demo_button").click(demo);
        });

    </script>
</body>

==坑==:我不知道本地是沒法彈窗通知的,在VS Code裏面本地打開html,一直刷新啊刷新啊,死都不出來彈窗,最後換成服務器模式,能夠了.......

調試js

某個頁面本身的js能夠在瀏覽器上直接打斷點調試,可是若是這個頁面用了其餘頁面,其餘頁面的js調試辦法很簡單,寫一個debugger便可

debugger

a標籤空跳轉

<a href="javascript:;"></a>

Jquery操做屬性,讀取,賦值,添加,判斷

//循環遍歷divGuestList這個元素下全部的li下的a元素
$("#divGuestList li a").each(function () { 
    //判斷class屬性裏面有沒有某個值
    if ($(this).hasClass(info.CustomerId)) {
        //獲取id的值
        $(this).attr('id')
        //修改屬性id的值
        $(this).attr({id:'vae'})
        //class屬性添加一個內容
        $(this).addClass("btn-yellow");
    }
});

鏈式

這個選中元素下的元素還可使用$(this).find('a')來表示,感受像是爬蟲似的

siblings()的意思就是全部的同級元素,使用超級方便了

<script type="text/javascript">
    $(function () {
    $('.list-tittle-panel li').mouseenter(function () {
        $(this).css({ "background-color": "#1b4684"});
        $(this).find('a').css({ "color": "#ffffff" });
    });
    $('.list-tittle-panel li').mouseleave(function () {
        $(this).css({ "background-color": "#f0f0f0"});
        $(this).find('a').css({ "color": "#666" });
    });
    $('.list-tittle-panel li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });

    $('.classification li').click(function () {
        $(this).css({ "color": "#0cb0b7" }).siblings().css({"color": "#666" });
        $(this).addClass('active').siblings().removeClass('active');
    });      
});
</script>

還有,上面的鼠標進入,移出事件仍是很差,直接用hover,完美

$('.list-tittle-panel li').hover(function () {
    $(this).css({ "background-color": "#1b4684"});
    $(this).find('a').css({ "color": "#ffffff" });
}, function () {
    $(this).css({ "background-color": "#f0f0f0"});
    $(this).find('a').css({ "color": "#666" });
});

標籤頁

講講標籤頁是怎麼實現的,參考Bootstrap就能夠理解了,可是我不但願使用Bootstrap,咱們能夠本身寫

首先標籤頁就是下面這東西

咱們能夠先寫一個ul和li做爲標籤頁的選擇,而後內容呢,咱們能夠寫div,ul+li或者單純的p元素

三個標籤頁就寫3個內容元素,我點擊第一個標籤頁就顯示第一個內容元素,其餘兩個隱藏

思路大概就是這樣,看一下js怎麼控制

首先標籤頁的點擊去除了on,又給我點擊的那個加了on,這個on在css裏面有樣式,點了以後就好看了

index這個是獲取下標的,看你點擊的是第幾個,而後經過下標找到內容元素,這個eq方法以前沒用過,能夠經過下標獲取元素

而後本身加上顯示的class,其餘的內容元素移除顯示class

在css裏面控制顯示class,display設置爲block仍是flex看狀況

$(function () {
    $('.product-cates li').click(function () {
        $(".product-cates li").removeClass('on');
        $(this).addClass('on');
        var index = $(".product-cates li").index($(".product-cates li.on"));
        var currUrl = $(".product-list").eq(index);
        currUrl.addClass('hotshow');
        currUrl.siblings(".product-list").removeClass('hotshow');
    });
});

多個CheckBox被選中,條件篩選

多個ul和li,每個ul有一個name,記錄是哪一個條件

而後選完條件傳參的時候我腦殘的寫了好幾個if elseif....

凡是寫了不少if的,都是能夠被優化的

//被選中的全部的CheckBox
$("input:checkbox:checked").each(function () {
    //判斷被選中的這個CheckBox的name是啥,是哪一個條件列裏面的
    if ($(this).attr('name') == 'vae') {
        //獲取值
        $(this).val()

我是這樣作的,結果以string形式傳,而後個人數據返回以後是動態拼接到tbody的,清空tbody是這樣