jquery快速入门（一）

一、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);
　　　　　　});
　　　　});