jquery教程、基本语法、jQuery选择器、事件

jQuery教程

jQuery引用

• 下载jQuery库（jquery.com），然后通过script标签src属性引入jquery-x.x.x.js文件。
• CDN载入jQuery。

jQuery语法

基础语法：$(selector).action()

• $ 定义jQuery
• 选择符(selector)“查询”和查找HTML元素。
• jQuery 的 action() 执行对元素的操作。
  实例

1. $(this).hide(); 隐藏当前对象。
2. (“p”).hide(); 隐藏所有p元素。
3. (".test").hide(); 隐藏class名为test的元素。
4. ("#test").hide(); 隐藏id名为test的元素。

jQuery选择器

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
实例
$(“p”) 根据元素名选择
$(".test") 根据元素class名选择
jQuery选择器和css选择器语法基本一致

jQuery事件

文档就绪事件

为了防止jQuery代码在DOM元素加载完毕之前运行，需要为jQuery设置入口函数

//第一种
$(document).ready(function(){
    //jquery代码
})
//第二种
$(function(){
    //jquery代码
})

鼠标事件方法

• click(); 点击事件

---

$(function(){
    $("#id").click(()=>{
        alert("你点了我");
    })
})

• dblclick(); 双击事件

---

$("#id").dblclick(function(){
    alert("再点一下试试");
})

• mouseenter(); 鼠标穿过(移入)元素事件

---

 $("div").mouseenter(()=>{
    alert("go out!")
})

• mouseleave(); 鼠标离开(移出)元素事件

---

$("div").mouseleave(()=>{
    alert("come on!");
})

• mousedown(); 鼠标移入元素并按下鼠标触发mousedown();

---

$("p").mousedown(()=>{
    alert("你在p元素上按了一下")
})
//注意区别mousedown和click事件，mousedown在鼠标按下的同时就会触发事件，click则是鼠标按下松开的瞬间触发事件。

• mouseup(); 当在元素上松开鼠标时会触发mouseup();

---

$("p").mouseup(()=>{
    alert("你松开了鼠标");
})
//mouseup和click事件的视觉效果基本一致 但是他们的执行顺序不同，mouseup优先于click。

• hover(); 当鼠标移动到元素上时 触发hover()事件。

---

$("p").hover(()=>{
    alert("stop!");
},()=>{
    alert("run!");
})
//hover(function1,function2)方法有两个参数，鼠标移入时触发function1(这里和mouseenter()方法相似)，
//鼠标移出时触发function2（这里和mouseleave()方法相似）。

• focus(); 当元素获得焦点时 触发
• blur(); 当元素失去焦点时 触发 focus()和blur()往往同时使用。

---

$("input").focus(function(){
    $(this).css("background-color","#ccc");
    //被选中（获得焦点）的input背景颜色设置为#ccc
});
$("input").blur(function(){
    $(this).css("background-color","#fff");
    //当input元素失去焦点，背景颜色设置为#fff
});

键盘事件方法

• keydown() 键被按下的过程
• keypress() 键被按下
• keyup() 键被松开