python_fullstack前端(五)-jQuery

前端初识

五、前端初识——jQuery

1、jQuery初识

①介绍

• jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
• jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

②优势

• 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
• 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
• 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
• 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
• Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
• 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
• 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

③内容

• 选择器
• 筛选器
• 样式操作
• 文本操作
• 属性操作
• 文档处理
• 事件
• 动画效果
• 插件
• each、data、Ajax
• jQuery官网地址链接：https://jquery.com/
• ★ jQuery API中文文档地址链接：http://jquery.cuishifeng.cn/

④版本

• 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
• 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
• 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
• 维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

⑤对象

• Query对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法
• 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理DOM对象也没不能使用jQuery里的方法。
• 重点：一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$
• 示例

var $variable = jQuery对像
var variable = DOM对象
$variable[0] //jQuery对象转成DOM对象
// jQuery对象和DOM对象的使用
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

2、jQuery语法—查找标签

①选择器

• id选择器
  $('#id')
• 标签选择器
  $('tagName')
• class选择器
  $('.className')
• 配合使用选择器

// 找到有c1样式类的div标签
$('div.c1')

• 所有元素选择器
  $('*')
• 组合选择器
  $("#id, .className, tagName")
• 层级选择器

// x和y可以是任意选择器
$("x y");// x的所有后代y
$("x>y");// x的所有儿子y
$("x+y")// 找到所有紧挨在x后面的y
$("x~y")// x之后所有的兄弟y

• 基本筛选器

:first          // 第一个
:last           // 最后一个
:eq(index)      // 索引等于index的那个元素
:even           // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd            // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)      // 匹配所有大于给定索引值的元素
:lt(index)      // 匹配所有小于给定索引值的元素
:not(元素选择器)  // 移除所有满足not条件的标签
:has(元素选择器)  // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
:header         // 返回h1 - h6标签
:animated       // 返回正在执行动画的元素
:contains(text) // 获取包含有给定字符串的元素
:empty          // 返回没有子元素或者没有文本的元素

// 示例
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

• 属性选择器

[attribute]
[attribute=value]   // 属性等于
[attribute!=value]  // 属性不等于

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");    // 取到checkbox类型的input标签
$("input[type!='text']");       // 取到类型不是text的input标签

• 表单常用筛选

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

// 示例
$(":checkbox")  // 找到所有的checkbox

• 表单对象属性

:enabled
:disabled
:checked
:selected

// 示例
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>
$("input:enabled")  // 找到可用的input标签

//示例
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

• 子元素选择器

:nth-child      // 返回指定序号的孩子元素，序号从1开始
:first-child    // 返回jquery对象中第一个孩子元素
:last-child     // 返回jquery对象中最后一个孩子元素
:only-child     // 当元素中只且仅有一个子元素的时候，返回这个子元素

②筛选器

• 下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

• 上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

• 父亲元素

$("#id").parent()
$("#id").parents()      // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

• 儿子和兄弟元素

$("#id").children();    // 儿子们
$("#id").siblings();    // 兄弟们

• 查找元素

$("#id").find(); // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

3、jQuery语法—操作标签

①样式操作

// 样式类操作 
·addClass();     // 添加指定的CSS类名。
·removeClass();  // 移除指定的CSS类名。
·hasClass();     // 判断样式存不存在
·toggleClass();  // 切换CSS类名，如果有就移除，如果没有就添加。

//修改样式
·原生DOM  .style.color="green"
·$("div").css("color", "green")
·修改多个样式时,传入键值对

// 位置
·offset()       // 获取匹配元素在当前窗口的相对偏移或设置元素位置
·position()     // 获取匹配元素相对父元素的偏移
·scrollTop()    // 获取匹配元素相对滚动条顶部的偏移
·scrollLeft()   // 获取匹配元素相对滚动条左侧的偏移
·//.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

// 尺寸
·height()           // 内容
·width()            // 内容
·innerHeight()      // 内容 + padding
·innerWidth()       // 内容 + padding
·outerHeight()      // 内容 + padding + border
·outerWidth()       // 内容 + padding + border
·outerHeight(true)  // 内容 + padding + border + margin
·outerWidth(true)   // 内容 + padding + border + margin

②文本操作

//操作HTML：类似于 innerHTML
·html()      // 取得第一个匹配元素的html内容
·html(val)   // 设置所有匹配元素的html内容

//操作text：类似于 innerText
·text()      // 取得所有匹配元素的内容
·text(val)   // 设置所有匹配元素的内容

//值
·val()               // 取得第一个匹配元素的当前值
·val(val)            // 设置所有匹配元素的值
·val([val1, val2])   // 设置checkbox、select的值

//示例
//获取被选中的checkbox或radio的值
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

//可以使用
$("input[name='gender']:checked").val()

③属性操作

// 用于ID等或自定义属性
·attr(attrName)// 返回第一个匹配元素的属性值
·attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
·attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
·removeAttr()// 从每一个匹配的元素中删除一个属性

// 用于checkbox和radio
·prop() // 获取属性
·removeProp() // 移除属性
·在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

④文档处理

// 添加到指定元素内部的后面
·$(A).append(B)     // 把B追加到A
·$(A).appendTo(B)   // 把A追加到B

// 添加到指定元素内部的前面
·$(A).prepend(B)    // 把B前置到A
·$(A).prependTo(B)  // 把A前置到B

//添加到指定元素外部的后面
·$(A).after(B)          // 把B放到A的后面
·$(A).insertAfter(B)    // 把A放到B的后面

//添加到指定元素外部的前面
·$(A).before(B)         // 把B放到A的前面
·$(A).insertBefore(B)   // 把A放到B的前面

//移除和清空元素
·remove()   // 从DOM中删除所有匹配的元素。
·empty()    // 删除匹配的元素集合中所有的子节点。

//替换
·replaceWith()
·replaceAll()

//克隆
·clone()// 参数

4、jQuery语法—事件

①常用事件

click(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

②事件绑定

• 在标签里面写 οnclick=foo(this);
• 原生DOM的JS绑定 DOM对象.οnclick=function(){…}

• jQuery版的绑定事件 jQuery对象.click(function(){…})

• .on( events [, selector ],function(){})

  • events： 事件
  • selector: 选择器（可选）
  • function: 事件处理函数

③移除事件

• .off(event [,selector ],function(){})
  
  • events：事件
  • selevtor：选择器（可选）
  • funciton：事件处理函数

④阻止后续事件执行

• return false // 常见阻止表单提交等

• 注意：

  • 像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。
  • 想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

  $('ul').on('mouseenter', 'li', function() { //绑定鼠标进入事件
      $(this).addClass('hover');
  });
  $('ul').on('mouseleave', 'li', function() { //绑定鼠标划出事件
      $(this).removeClass('hover');
  });

⑤页面载入

• 为了防止在调用jQuery之后页面的DOM树结构才生成，通常会在DOM树完全生成后才调用jQuery内容

$(document).ready(function(){
    // jQuery代码
})

$(function(){
    //jQuery代码
})

⑥事件委托

• 利用事件冒泡原理，利用父标签捕获字标签事件

//示例
$("table").on("click",".delete",funciton(){
    //删除按钮事件
})

5、jQuery语法—动画效果

①基本

• show([speed,[easing],[fn]]) // 显示隐藏的匹配元素。
  
  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn:在动画完成时执行的函数，每个元素执行一次。
• hide([speed,[easing],[fn]]) // 隐藏显示的元素
  
  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn:在动画完成时执行的函数，每个元素执行一次。
• toggle([speed],[easing],[fn]) //用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
  
  • speed: 隐藏/显示 效果的速度。默认是 “0”毫秒。可能的值：slow，normal，fast。”
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn:在动画完成时执行的函数，每个元素执行一次。

②滑动

• slideDown([speed],[easing],[fn]) // 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
  
  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn在动画完成时执行的函数，每个元素执行一次。
• slideUp([speed,[easing],[fn]]) //通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
  
  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn:在动画完成时执行的函数，每个元素执行一次。
• slideToggle([speed],[easing],[fn]) //通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
  
  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn:在动画完成时执行的函数，每个元素执行一次。

③淡入淡出

• fadeIn([speed],[easing],[fn]) //通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn:在动画完成时执行的函数，每个元素执行一次。

• fadeOut([speed],[easing],[fn]) //通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn:在动画完成时执行的函数，每个元素执行一次。

• fadeTo([[speed],opacity,[easing],[fn]]) //把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • opacity:一个0至1之间表示透明度的数字。
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn:在动画完成时执行的函数，每个元素执行一次。

• fadeToggle([speed,[easing],[fn]]) //通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
  • fn:在动画完成时执行的函数，每个元素执行一次。

④自定义

• animate(params,[speed],[easing],[fn]) //用于创建自定义动画的函数。
  
  • params:一组包含作为动画属性和终值的样式属性和及其值的集合
  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
  • fn:在动画完成时执行的函数，每个元素执行一次。

6、jQuery语法—补充

①each

• jQuery.each(collection, callback(indexInArray, valueOfElement))：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。

• .each(function(index, Element))：描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

②.data()

• 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
• .data(key, value):描述：在匹配的元素上存储任意相关数据。
• .data(key):描述：返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
• .removeData(key):描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

③插件

• jQuery.extend(object)：jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
• jQuery.fn.extend(object)：一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法
• 单独写在文件中的扩展：

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);