jQuery的基本使用及选择器和筛选器

事件

鼠标
click
dblclick
contextmenu
mouseenter
mouseleave
mousemove
mousedown
mouseup

键盘
keydown
keyup
keypress

表单
submit
reset
blur   失去焦点
focus  获取焦点
change  绑定在select
select  
input  事实改变  兼容性

文档事件
load  
unload
beforeunload

图片事件
load
abort
error

其他事件
scroll
resize

ele.on事件 = function(){}
ele.addEventListener('事件名', function(){}, true/false)

Event对象
clientX
clientY
keyCode
button
target  具体触发事件的元素
stopPropagation()  阻止事件冒泡
preventDefault() 阻止默认动作

BOM

window  
    window.innerWidth
    window.inenrHeight

history
    length
    back()
    forward()
    go()

screen
    

location
    href
    protocol
    host
    hostname
    port
    pathname
    search
    hash

navigator
    userAgent

DOM

文档对象模型

jQuery

1. jQuery 的介绍

2. jQuery的基本使用

2.2 文档就绪事件

$(document).ready(function(){
    code...
})

//上面的简写 我们通常都用的简写
//表示所有元素都加载完毕才执行jquery操作
$(function(){
    
})

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery的基本使用</title>
 6 </head>
 7 <body>
 8     <div >HELLO 小丽丽</div>
 9 
10     <script src="../jquery-3.3.1.js"></script>
11     <script>
12         //jqury 
13         //等到 html的元素加载完毕
14         $(document).ready(function(){
15             //获取页面中的元素 连贯操作
16             $("#box").css('width', '200px')
17                      .css('height', '200px')
18                      .css('border', '1px solid red')
19                      .css('background-color', 'green');
20 
21 
22             //原生js  
23             var box = document.querySelector('#box');
24             console.log(box);
25         });
26 
27         //元素加载完毕 再触发
28         $(document).ready(function(){
29             console.log("OK");
30         });
31 
32 
33         //ready的简写
34         $(function(){
35             console.log('ready简写 ok')
36         })
37         
38     </script>
39 </body>
40 </html>

jQuery的基本使用