常用Js & JQ 选择器及常用鼠标&键盘事件总结

01 Js & JQ 选择器对比

(1) 根据id

// HTML
<div id = "box">content</div>

// JavaScript
var  box = document.getElementById("box");

// JQuery
var  box = $("#box");

(2) 根据标签

// HTML
<div id = "box">content</div>

// JavaScript
var  box = document.getElementsByTagName("div");

// JQuery
var  box = $("div");

(3) 根据类名

// HTML
<div class = "box">content</div>

// JavaScript
var  box = document.getElementByClassName("box");

// JQuery
var  box = $(".box");

(4) 根据 CSS 查询

// HTML
<div class="content">
    <ul>
        <li>颜色</li>
        <li class="red">红色</li>
        <li class="blue">蓝色</li>
        <li class="red">红色</li>
        <li class="bgreen">绿色</li>
    </ul>
</div>

// JavaScript 
/* 
	querySelector()：返回一个元素对象
	querySelectorAll() ：返回元素集合
*/
// 获得类名为content标签下的第一个li标签 
var  li = document.querySelector(".content ul li");
// 获得类名为content标签下的所有li标签
var  lis = document.querySelectorAll(".content ul li");

// JQuery
/* 这里获得所有li集合*/
var  lis = $(".content ul li");

02 JQ 其他选择器

(1) 层叠选择器

// HTML
<div class="content">
    <ul>
        <li>颜色</li>
        <li class="red">红色</li>
        <li class="blue">蓝色</li>
        <li class="red">红色</li>
        <li class="bgreen">绿色</li>
    </ul>
    <span > span </span>
</div>

// JQuery
/*获得类名为content元素下的span标签*/
var  span = $(".content span");
/*获得类名为content元素下的所有子元素*/
var  Elements = $(".content > *");

(2) 基本过滤选择器

// HTML
<div class="content">
    <ul>
        <li>颜色</li>
        <li class="red">红色</li>
        <li class="blue">蓝色</li>
        <li class="red">红色</li>
        <li class="bgreen">绿色</li>
    </ul>
    <span > span </span>
</div>

// JQuery
/*获得所有li元素中的第一个*/
var  li_first = $(".content ul li：first");
/*获得所有li元素中的最后一个*/
var  li_last = $(".content ul li：last");
/*获得所有li元素中的第3个*/
var  li_three = $(".content ul li：eq(2)");
/*获得所有li元素中的序号大于2的所有元素*/
var  lis = $(".content ul li：gt(2)");
/*获得所有li元素中的序号小于2的所有元素*/
var  lis = $(".content ul li：lt(2)");

(3) 属性过滤选择器

// HTML
<div class="content">
    <ul>
        <li>颜色</li>
        <li class="red">红色</li>
        <li class="blue">蓝色</li>
        <li class="red">红色</li>
        <li class="bgreen">绿色</li>
    </ul>
    <span > span </span>
    <input name="输入" />
</div>

// JQuery
/*获得所有li元素中的第一个*/
var  input = $(".content input[name='输入']");

03 常用鼠标&键盘事件

鼠标事件	描述
onclick	点击 鼠标时触发本事件
ondblclick	双击 鼠标时触发本事件
onmousedown	当鼠标 按下 后触发本事件
onmouseup	鼠标 按下+松开 时触发本事件
onmouseover	当鼠标移动到某个元素上时触发本事件
onmousemove	鼠标移动时触发本事件
onmouseout	当鼠标离开某个元素时触发本事件

键盘事件	描述
onkeypress	当 按下并松开 键盘某一键时触发本事件
onkeydown	当按下键盘上的某个键时触发本事件
onkeyup	当松开键盘上的某个键时触发本事件