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的基本使用