1. 程式人生 > >jq常用事件(on,blur,focus,change),js/jq等待圖片(頁面)加載完畢事件,js讀取文件

jq常用事件(on,blur,focus,change),js/jq等待圖片(頁面)加載完畢事件,js讀取文件

load prop 擁有 右鍵 bsp blur 讀文件 das 加載圖片

jq常用事件(on,blur,focus,change)

// 方法一(推薦)
$(‘.box‘).on( "click",function() {} )
$(‘.box‘).on( "click",function(ev) {
    ev.data.aaa   // 跟js事件對象一樣
})

// 方法二
$(".box").click( function(){} )


// 右鍵事件,取消系統默認事件
$(‘.sup‘).on(‘contextmenu‘ , function(ev) {
    ev.preventDefault();   //取消事件
    或者 return
false; // 取消事件 }) // 事件冒泡:子父級擁有同樣事件,子響應事件會傳播到父級 // 子集點擊事件: $(‘.sup‘).on(‘contextmenu‘ , function(ev) { ev.stopPropagation(); // 阻止子集事件冒泡 }) $(".btn").on( function () {} ) // 值變化監測事件(input標簽,只要值一變化觸發) $("#input").blur( function () {} ) // 失去焦點事件 $("#input").focus( function () {} ) // 獲取焦點事件
$("#file").change( function () {} ) // 文件流,值變化觸發事件(只對文件流有用)

js/jq等待圖片(頁面)加載完畢事件

jq頁面加載完畢事件
    $(document).ready(function () {
        console.log(‘xxx‘)
    })

    一般寫成:
    $(function(){
        console.log(‘xxx‘)
    }) 簡寫,可以保證頁面加載完畢,還能保證jq局部變量


js頁面加載完畢事件
    window.onload 
= function () {} window.onload = function() {} 加載圖片玩以後執行( 只能加載一個 ) window.load = function() {} 加載圖片玩以後執行( 可以加載多個 )

js讀取文件

$("#file").change(function () {
    file = this.files[0];
    reader = new FileReader();  {# 變成src屬性,生成一個讀文件的對象 #}
    reader.readAsDataURL(file);  {# 讀取文件流 #}
    
    {# 等待文件流全部讀取完畢 #}
    reader.onload = function () {
        $(‘.head_file‘).attr("src",reader.result)
    }
});

jq常用事件(on,blur,focus,change),js/jq等待圖片(頁面)加載完畢事件,js讀取文件