jQuery初识和常用事件（一）

一、jQuery

1.jQuery是一个JavaScript函数库（框架）。

2.jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

3.jQuery库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities
  提示： 除此之外，Jquery还提供了大量的插件。

4.jQuery是目前最流行的js框架，而且提供了大量的扩展。
5.jQuery 拥有可操作 HTML 元素和属性的强大方法，就是操作 DOM 的能力。
6. ‘$’ 是 jQuery 的简称，可以使用 $，也可以使用 jQuery

二、入口函数

jQuery 入口函数:
在 html 所有标签(DOM)都加载之后，就会去执行。

$(document).ready(function(){
    
    
    // 执行代码
});
或者
$(function(){
    
    
    // 执行代码
});

JavaScript 入口函数:
等到所有内容，包括外部图片之类的文件加载完后，才会执行。

window.onload = function () {
    
    
    // 执行代码
}

三、选择器

• jQuery 中所有选择器都以美元符号开头：$()
• jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素
• 元素选择器：$(“p”)
• id选择器：$("#test")
• 类选择器：$(".test")
• 进阶选择：
  $("*") 选取所有元素
  $(this) 选取当前 HTML 元素
  $(“p.intro”) 选取 class 为 intro 的 p 元素
  $(“p:first”) 选取第一个 p 元素
  $(“ul li:first”) 选取第一个 ul 元素的第一个 li 元素
  $(“ul li:first-child”) 选取每个 ul 元素的第一个 li 元素
  $("[href]") 选取带有 href 属性的元素
  $(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 a 元素
  $(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 a 元素
  $(":button") 选取所有 type=“button” 的 input 元素 和 button 元素
  $(“tr:even”) 选取偶数位置的 tr 元素
  $(“tr:odd”) 选取奇数位置的 tr 元素

选择器小结 ★

1.基本选择器
$("#id")            // ID选择器
$("div")            // 元素选择器
$(".classname")     // 类选择器
$(".classname,.classname1,#id1")     // 组合选择器

2.层次选择器
$("#id>.classname ")    // 子元素选择器
$("#id .classname ")    // 后代元素选择器
$("#id + .classname ")    // 紧邻下一个元素选择器
$("#id ~ .classname ")    // 兄弟元素选择器

3.过滤选择器(重点)
$("li:first")    // 第一个li
$("li:last")     // 最后一个li
$("li:even")     // 挑选下标为偶数的li
$("li:odd")      // 挑选下标为奇数的li
$("li:eq(4)")    // 下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    // 下标大于 2 的li
$("li:lt(2)")    // 下标小于 2 的li
$("li:not(#runoob)") // 挑选除 id="runoob" 以外的所有li

3.2内容过滤选择器
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 // 不包含子元素或者文本的空元素
$("div:has(selector)")        // 含有选择器所匹配的元素
$("td:parent")                // 含有子元素或者文本的元素

3.3可见性过滤选择器
$("li:hidden")       // 匹配所有不可见元素，或type为hidden的元素
$("li:visible")      // 匹配所有可见元素

3.4属性过滤选择器
$("div[id]")       		  // 所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")       // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

3.5状态过滤选择器
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

4.表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

全部选择器参考 ☆

菜鸟教程 - 选择器

四、常用的 jQuery 事件方法

事件写法

$('selector').func(arg1,arg2,...);
// selector：某个元素
// func：事件函数
// arg1：参数，一般是事件函数的配置参数，和回调函数

eg：jQuery使用事件 —— 点击元素后隐藏该元素：

$("p").click(function(){
    
    
  $(this).hide();
});

• $(document).ready()，等价 $() —— html 所有标签(DOM)都加载之后执行

  扫描二维码关注公众号，回复： 12043849 查看本文章

• 获取事件对象，里面包含各种有用的信息：

  $(document).ready(function(){
        
        
      $(window).keypress(function(event){
        
            
          //获取事件对象，里面包含各种有用的信息。
          console.log(event);
          //console.log(event.which);
      });
  });
  

鼠标事件

• click() —— 单机元素
• dblclick() —— 双击元素
• mouseenter() —— 当鼠标指针穿过元素时，会发生 mouseenter 事件。
• mouseleave() —— 当鼠标指针离开元素时，会发生 mouseleave 事件
• mousedown() —— 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
• mouseup() —— 当在元素上松开鼠标按钮时，会发生 mouseup 事件
• hover() ——光标悬停事件

元素事件

• focus() —— 元素（表单）获取焦点
• blur() —— 元素（表单）失去焦点
• change() —— 当元素的值改变时发生 change 事件（仅适用于表单字段）
• submit() —— 当提交表单时，会发生 submit 事件。该事件只适用于 form 元素。

键盘事件

• keydown() —— 在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;

• .keyup() —— 用户松开某一个按键时触发, 与keydown相对, 返回键盘代码

• .keypress() —— 在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
  
  拓： keypress事件获取键入字符

  $(window).keypress(function(event){
        
        
      //event.which是获取ASCII码，前面的函数是将ASCII码转换成字符，空格键和Enter键输出均为空白。
      console.log(String.fromCharCode(event.which));
      //从event对象中key属性获取字符，但是Enter键的key值为"Enter"，空白键还是空白" "。
      console.log(event.key);
  });
  

文档/窗口事件

• load() —— 当指定的元素已加载时，会发生 load 事件。该方法在 jQuery 版本 1.8 中已废弃。
• resize() —— 当调整浏览器窗口大小时，发生 resize 事件。
• scroll() —— 当用户滚动指定的元素时，会发生 scroll 事件。
• unload() —— Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果。
  当用户离开页面时，会发生 unload 事件。
  当发生以下情况下，会触发 unload 事件：
  点击某个离开页面的链接
  在地址栏中键入了新的 URL
  使用前进或后退按钮
  关闭浏览器窗口
  重新加载页面
  
  unload() 方法规定当 unload 事件发生时会发生什么。
  unload() 方法只应用于 window 对象。
  注意：unload 事件在不同浏览器中效果不一样，请确保使用前在所有浏览器测试该方法。unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除。

全部事件方法参考 ☆

菜鸟教程 - 事件方法

五、效果事件

• 显示与隐藏：hide，show，toggle

  $(selector).hide(speed,callback); 隐藏元素
  $(selector).show (speed,callback); 显示元素
  $(selector).toggle(speed,callback); 切换元素的显示/隐藏状态
  可选参数：
  speed —— 执行时间（slow，fast，ms）
  callback —— 回调函数
  细节：
  1.(selector)选中的元素的个数为n个，callback 函数不加括号时则callback函数会执行n次；当 callback 函数加上括号时，函数立即执行，只会调用一次
  2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；
  3.callback既可以是函数名，也可以是匿名函数；

• 淡入和淡出：fadeIn()，fadeOut()，fadeToggle()，fadeTo()

  $(selector).fadeIn(speed,callback); 淡入已隐藏的元素
  $(selector).fadeOut(speed,callback); 淡出可见元素
  $(selector).fadeToggle(speed,callback); 切换淡入、淡出状态
  $(selector).fadeTo(speed,opacity,callback); 渐变为给定的不透明度
  可选参数：
  speed —— 执行时间（slow，fast，ms）
  callback —— 回调函数
  opacity —— 透明度（值介于 0 与 1 之间）
  细节：
  fadeTo() 没有默认参数，必须加上 slow/fast/ms（时间，单位是毫秒）

• 滑动：slideDown()，slideUp()，slideToggle()

  $(selector).slideDown(speed,callback); 向下滑动（显示）
  $(selector).slideUp(speed,callback); 向上滑动（隐藏）
  $(selector).slideToggle(speed,callback); 切换状态
  可选参数：
  speed —— 执行时间（slow，fast，ms）
  callback —— 回调函数

• 自定义动画：animate()

  animate 方法允许你创建自定义的动画：
  $(selector).animate({params},speed,easing,callback);
  Alternate 语法(另一种传参):
  (selector).animate({styles},{options})

  必选参数：
  {params} —— 必选参数，用于形成具体的css样式，可以是一个或多个样式
  可选参数：
  easing —— 规定在动画的不同点中元素的速度。默认值是 “swing”。可选：
  “swing” - 在开头/结尾移动慢，在中间移动快
  “linear” - 匀速移动
  speed，callback —— 同上
  实例：

  	$("button").click(function(){
        
        
  	  $("div").animate({
        
        
  	    left:'250px',	// 新的左边距
  	    height:'toggle',	// 以高度为基准切换显示状态
  	    width:'+=150px'		// 增宽150px
  	  });
  	});
  
  	$("button").click(function(){
        
        
  	  var div=$("div");
  	  div.animate({
        
        left:'100px'},"slow");
  	  div.animate({
        
        fontSize:'3em'},"slow");
  	});
  

  细节：
  1、position ：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
  2、 Camel 标记法：当使用 animate() 设置元素新位置样式时（通过传参），必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left等等。此方法几乎可以设置所有的样式。
  3、色彩动画：色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。
  4、定义相对值：（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=。比如让元素变高10个像素：height:’+=10px’
  5、使用预定义的值： “show”、“hide” 或 “toggle”，达到显示、隐藏功能。slow，fast已经被预定为某个具体的值（xx毫秒），用这些预定义的值和直接用数值实际是一样的。
  6、队列执行：同时使用多个animate()方法，jQuery会自动调用Queue队列的接口把他们放在队列中以此执行，Queue队列的接口是是内部专门为动画服务的。
  原因：JavaScript编程几乎总是伴随着异步操作：setTImeout，css3Transition/Animation,ajax,dom的绘制，postmessage，web Database 等等，队列允许一系列函数被异步地调用而不会阻塞程序，在异步中保持同步（进程锁）。
  7、深究动画的队列执行：

  • 通过多个 animate 方法形成动画链，那么这个动画链其实都是会加入到 queue 队列里面。
  • 在每一次 queue 方法中会把动画数据写到队列中，然后取出队列中的第一个序列通过 dequeue 方法执行。
  • 开始执行之前写一个进程锁“inprogress”到 queue 里面，代表这个动画还在执行中，防止同个序列的多个动画重复执行，这个就是异步执行同步收集的处理方案。
  • 此时动画开始了，这里注意动画是在异步执行的同步的代码，继续调用下一个 animate。
  • 执行同样的 animate 方法逻辑但是此时问题来了，动画可能还在执行可是后续的 animate 还在继续调用，所以这个时候后面的动画代码就需要等待了（进程锁）。
  • 队列头是有一把“inprogress”进程锁的，那么这时候动画只需要加入队列，但是可以通过 inprogress 是否存在来判断是否执行。
  • 所有的 animate 方法在加入队列都是按照以上的逻辑依次执行，动画执行完毕了就会有一个结束通知，然后从 queue 取出第一个队列继续执行了，如此循环。
    以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。

• 停止动画：stop()

  $(selector).stop(stopAll,goToEnd); —— 停止滑动、淡入淡出和自定义动画
  可选参数：
  stopAll —— 是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
  goToEnd —— 是否立即完成当前动画。默认是 false。
  细节：被立即停止的动画不会触发回调，被立即完成的动画会触发回调。

• jQuery - 链(Chaining)：在相同的元素上运行多条 jQuery 命令

  优点：浏览器就不必多次查找相同的元素
  eg：p1标签依次执行css样式变化、向上隐藏、向下显示

  	$("#p1").css("color","red").slideUp(2000).slideDown(2000);
  

全部效果事件参考 ☆

菜鸟教程 - 效果事件

杂学

1.jQuery维护： 如果网站包含许多页面，并且你希望你的 jQuery 函数易于维护，那么要把 jQuery 函数放到独立的 .js 文件中，通过src导入即可。
2.事件： 页面对不同访问者的响应叫做事件，jQuery 是为事件处理特别设计的。
3.事件处理： 程序指的是当 HTML 中发生某些事件时所调用的方法。
4. jQuery 动态生成元素： 对于由 jQuery 动态生成的元素，不能直接绑定常用的事件，如 click等。
eg：

$(".box ").click(function(){
    
    });

这样虽然产生了类box，但仍然没有点击事件，解决方案：

$(".box ").live('click', function(){
    
    });	// 不建议
// 或者：
$(".box ").on('click', function(){
    
    });	
// 另外 click, blur, keyup, change等方法，都可以这样解决。