一、jquery加载文档
jquery加载文档（也叫入口函数）
$(document).ready(function(){
// 这里写 jQuery 代码...
});
简写方式：
$(function(){
// 这里写 jQuery 代码...
});
javascript加载文档（也叫入口函数）
window.onload = function() {
//执行代码
}
在这里说一下jquery的加载和javascript的加载的区别：
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
二、jquery选择器
1.元素选择器
如：$('p').hide();
2.id选择器
如：$('#test').hide();
3.class 选择器
如：$('.test').hide();
4.选取所有元素
如：$('*').hide();
5.选取当前 HTML 元素
如：$(this).hide();
6.选取 class 为 intro 的 <p> 元素
如：$('p.intro').hide();
7.选取第一个 <p> 元素
如：$('p:first').hide();
8.选取第一个 <ul> 元素的第一个 <li> 元素
如：$('ul li:first').hide();
9.选取每个 <ul> 元素的第一个 <li> 元素
如：$('ul li:first-child').hide();
10.选取带有 href 属性的元素
如：$('[href]').hide();
11.选取所有 target 属性值等于 "_blank" 的 <a> 元素
如：$('a[target='_blank']').hide();
12.选取所有 target 属性值不等于 "_blank" 的 <a> 元素
如：$('a[target!='_blank']').hide();
13.选取所有 type="button" 的 <input> 元素 和 <button> 元素
如：$(':button').hide();
14.选取偶数位置的 <tr> 元素
如：$('tr:even').hide();
要注意的是，从零开始，第一个tr为零，所以第一个为偶数。
15.选取奇数位置的 <tr> 元素
如：$('tr:odd').hide();
要注意的是，从零开始，第一个tr为零，所以第二个为奇数
三、jquery事件
1.鼠标事件
1.1 单击事件click() 例: $('p').click(function(){
alert("段落点击了");
})
还有如下图的写法：
1.2 双击事件dblclick() 例：$("p").dblclick(function(){
$(this).hide();
})
1.3 鼠标进入元素 mouseenter() , 和离开元素 mouseleave() ,事件 例：$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","#0f0");
});
$("p").mouseleave(function(){
$("p").css("background-color","#f00");
});
});
1.4 鼠标悬停事件 hover() 例：
注：hover()事件包含有 鼠标进入元素 mouseenter() , 和离开元素 mouseleave() 两个事件的功能
$(document).ready(function(){
$("#p1").hover(
function(){
$("#p1").css("background-color","#0f0");
},
function(){
$("#p1").css("background-color","#ff0");
}
)
});
1.5 鼠标按下 mousedown() , 和松开 mouseup() ,事件 例：$(document).ready(function(){
$("#p1").mousedown(function(){
console.log("鼠标在该段落上按下！");
});
$("#p1").mouseup(function(){
console.log("鼠标在段落上松开。");
});
});
2.键盘事件
2.1 键被按下 keypress() ,键按下的过程 keydown() ,键被松开 keyup() ,事件
2.1.1 keypress() 例： 2.1.2 keydown() 和 keyup() 例：
<p>次数: <span>0</span></p> 输入你的名字: <input type="text">
<button>按钮</button> <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
i=0; $(document).ready(function(){
$(document).ready(function(){ $("input").keydown(function(){
$("p").keypress(function(){ $("input").css("background-color","#0f0");
$("span").text(i+=1); });
}); $("input").keyup(function(){
$("button").click(function(){ $("input").css("background-color","#f00");
$("p").keypress(); });
}); });
});
注意：keypress 事件与 keydown 事件类似。但是，keypress 事件不会触发所有的键
（比如 ALT、CTRL、SHIFT、ESC）。需要使用 keydown() 方法来检查这些键。
keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，
所以监听无效 ,也就是说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发
keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.
这里是使用keypress()方法的效果图 ：
下面是使用keydown()方法的效果图：
附加：1.获取按键代码或字符的ASCII码
$(window).keydown( function(event){
// 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码.
）};
2.传递数据给事件处理函数
// 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围.
var validKeys = { start: 65, end: 90 };
$("#keys").keydown( validKeys, function(event){
var keys = event.data; //拿到validKeys对象.
return event.which >= keys.start && event.which <= keys.end;
} );
3.表单事件
3.1 提交 submit() 事件,
注意：该事件只适用于 <form> 元素。submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。
例：<form action="">
哈哈: <input type="text" name="哈哈" value="ha"><br>
呵呵: <input type="text" name="呵呵" value="he"><br>
<input type="submit" value="提交">
</form>
$(document).ready(function(){
$("form").submit(function(){
alert("提交");
});
});
3.2 更改、修改、替换 change() 事件
注意：当元素的值改变时发生 change 事件（仅适用于表单字段）。change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
例：<p>点击按钮触发 change 事件</p>
<button>输入框中触发 change 事件</button>
<p>输入你的名字: <input value="Runoob" onchange="alert(this.value)" type="text"></p>
$(document).ready(function(){
$("button").click(function(){
$("input").change();
});
});
3.3 获取焦点 focus() 事件和 失去焦点 blur() 事件 例：
<input>
<span style="display:none;">请输入你的电话号码?</span>
<p>点击输入框获取焦点。</p>
$(document).ready(function(){
$("input").focus(function(){
$("span").css("display","inline").fadeOut(2000);
});
});
说明："display","inline"把span标签的内容关联到input，fadeOut(2000);两秒后淡出 该方法通常与 blur() 方法一起使用
例：账号: <input type="text" name="fullname"><br>
邮箱: <input type="text" name="email">
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#0f0");
});
$("input").blur(function(){
$(this).css("background-color","#f00");
});
});
4.文档/窗口事件
4.1调整浏览器窗口大小 resize() 事件
例：<p>窗口重置了 <span>0</span> 次大小。</p>
<p>请改变窗口大小</p>
x=0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x+=1);
});
});
4.2滚动 scroll() 事件
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
例：<p>滚动div中的滚动条</p>
<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">
学习是进步的源泉，学的不仅是技术，更是梦想！学习是进步的源泉 —— 学的不仅是技术，更是梦想！
<br><br>
学习是进步的源泉 —— 学的不仅是技术，更是梦想！学习是进步的源泉 —— 学的不仅是技术，更是梦想！
</div>
<p>滚动了 <span>0</span> 次。</p>
x=0;
$(document).ready(function(){
$("div").scroll(function(){
$("span").text(x+=1);
});
});
