jQuery 入门

首先要知道由于jq是js的框架。所以，jq里可以混用js。
例如：

$(function(){    
    $("button").click(function(){     
        document.getElementById("demo").innerHTML="hello";	
    });
});

第1,2行都是jq写法。
第3行是js写法。

需要补充的是：
我们说过，为了避免页面没有加载完导致的jq不执行，我们建议把函数放在：

$(document).ready(function() {
     // 代码写这里
});

其实这部分内容可以简写成：

$(function() { 
    // 代码写这里
});

不过为了便于阅读，我们还是推荐用第一个方法。当然，你想怎么样就怎么样。

我们说过jq选择元素更加方便：

$(this).hide() // 隐藏当前元素
$("p").hide() // 隐藏所有p元素
$(".test").hide() // 隐藏类名为test的元素
$("#test").hide() // 隐藏id为test的元素
$("ul li:first").hide() // 隐藏第一个ul中的第一个li
$("ul li:first-child").hide() // 隐藏所有ul中的第一个li
$("a[target='_blank']").hide() // 隐藏target属性值为_blank的所有a元素

　　

跟css选择器是一个思路。

接着我们又学习了执行函数时需要的执行的“事件”。

下面的列表展示出了常用的事件。

鼠标事件	键盘事件	表单事件	文档、窗口事件
click（点击）	keypress（敲击）	submit（提交）	load（加载）
dblclick（双击）	keydown（按下）	change（改变）	resize（尺寸变化）
mouseenter（移入）	keyup（按键上升）	focus（聚焦）	scroll（滚动）
mouseleave（移出）		blur（失焦）	unload（离开本页）

以上的这些事件可以让我们选择什么时候执行函数。 下面是今天的重点内容：

on() 方法

on方法可以绑定多个事件。

例1：

$(window).on("load resize", function(){    
    $("p").css({"color":"red"});
}); 

作用是当窗口加载完毕后或者窗口尺寸发生改变时，所有p元素的文本颜色变成红色。

例2：

$("p").on({
    mouseenter: function(){ 
        $(this).css("background-color", "lightgray");   
    },   
    mouseleave: function(){        
        $(this).css("background-color", "lightblue");    
    },    
    click: function(){        
        $(this).css("background-color", "yellow");    
    }    
});

当鼠标移入的时候p的背景变成淡灰色，鼠标移出的时候变成淡蓝色。如果点击，变成黄色。
再注意一下写法哦！
关于on的详细解释，请查看官网文档：
https://api.jquery.com/on/