页面载入-（dom、css、图片 等资源 加载完成） 执行

1、 // 页面载入-（dom、css、图片 等资源 加载完成） 执行

window.onload=function(){
    console.log("aaa");
}

window.onload=function(){
    console.log("bbbb");
}

// 页面载入--（dom 加载完成 ）
$(document).ready(function(){
    console.log("jq--aaaa");
})

$(document).ready(function(){
    console.log("jq--bbbb");
})
//简化版
$(function($){
    console.log("jq--cccc");
})

2、JQ中的class 属性操作

 //添加红色.box 类 -- 宽 高 边框
$("#addBox").click(function(){
    $("#box").addClass("box")
}) 
//添加.bg 类 -- 背景颜色
$("#addBg").click(function(){
    $("#box").addClass("bg")
}) 
// 删除 .bg 
$("#delBg").click(function(){
    $("#box").removeClass("bg")
}) 
//弹框 是否 有 .bg 类
$("#hasBg").click(function(){
  alert(  $("#box").hasClass("bg") );
}) 

 //弹框 是否 有 .box 类
 $("#hasBox").click(function(){
   alert( $("#box").hasClass("box") );
})

3、 // on 事件委托、未来事件（JQ）

   // on(事件名,绑定的元素-(委托元素/未来元素）选择器 ,回调函数 )
    $("#btn").on("click",function(){
        alert("啊啊啊啊啊")
    })

    $("#ul").on("click","#x",function(){
        console.log( this );
    })

    $("#add").click(function(){
        $("body").append("<h1 id='hh'>啊啊啊啊</h1>") ; //未来元素
        // 1、事件放置 在 创建元素后方
        // $("#hh").click(function(){
        //     alert("弹弹弹--1111");
        // })

    })
    // 2、                  未来元素
    $("body").on("click","#hh",function(){
        alert("弹弹弹--22222")
    })