JQuery知识点汇总

前言

学习jquery的笔记整理。主要参考了书籍《锋利的jQuery(第二版)》以及官方文档和一些视频教程。适合于了解js的DOM对象的读者阅读。该文章主要以理论知识为主，案例较少。

一、jQuery概念

jQuery是什么

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

jQuery优点

  1. 轻量级。jQuery 非常轻巧，采用UglifyJS
  2. 强大的选择器。jQuery允许开发者使用从CSS 1到CSS 3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。
  3. 出色的DOM操作的封装
  4. 可靠的事件处理机制。在预留退路（graceful degradation）、循序渐进以及非入侵式（Unobtrusive）编程思想方面，jQuery也做得非常不错
  5. 完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
  6. 不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。
  7. 出色的浏览器兼容性。
  8. 链式操作方式。jQuery 中最有特色的莫过于它的链式操作方式—即对发生在同一个jQuery 对象上的一组动作，可以直接连写而无需重复获取对象。
  9. 隐性迭代特性。当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象集合，而不是单独的对象
  10. 行为层与结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。
  11. 丰富的插件支持。jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。
  12. 完善的文档、开源

jQuery版本问题

1.x版本：兼容IE678
2.x版本：不兼容IE678
3.x版本：不兼容IE678

jQuery 库类型说明

  • jquery.min.js ——压缩版本，适用于生产环境，去除了注释、换行、空格等，没有可读性
  • jquery.js ——未压缩版，适用于学习与开发环境。易阅读

相关网站

使用步骤

//1. 引入jquery文件。你可以直接引入也可以下载后引入本地文件
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>


//2. 写入口函数
<script>
//写法1
$(document).ready(function(){})

//写法2
$(function(){})

//写法3 把全局变量转化为局部变量
$(function($){})
</script>

这个时候你会发现上面的入口函数你可能没见过，下面对比下js与jq的入口函数你就会明白了：

  • jq的入口函数：$(function(){})
  • js的入口函数：window.onload=function()
    1. js必须等待网页中所有内容加载完毕后才执行（包括图片）；jq只需在DOM结构绘制完毕后就可以执行，可能DOM元素关联的东西并没有加载完
2. js不能同时编写多个；jq能同时编写多个

jq对象与DOM对象

  1. DOM对象：使用js的方式获取到的对象

  2. jq对象：通过jq包装DOM对象后产生的对象

    var obj=document.getElementById("div")
var obj=$("div")

  3. jq对象不能调用DOM对象的方法;DOM对象也不能使用jq里的方法

    $("#id").innerHTML//错
document.getElementById("id").html()//错

  4. DOM对象与jq对象可以相互转换

    jq对象转换为DOM对象
//方法1：通过[index]
var $obj=$("#div")//---jq对象
var obj=$obj[0]//---DOM对象
//方法2：通过get（index）
var $obj=$("#div")//---jq对象
var obj=$obj.get(0)//---DOM对象

    DOM对象转换为jq对象
//只需要用$()把DOM对象包装起来，就可以获得一个jq对象了
var obj=document.getElementById("div")//--DOM对象
var $obj=$(obj)//--jq对象

  5. jq对象其实是js对象的一个集合，是一个伪数组

    var li=$("li")
li.setAttribute("name","hehe")//不可以这样调用，因为jq对象是一个伪数组
li[0].setAttribute("name","hehe")//成功

$的实质

  1. 参数是一个function———入口函数
  2. 把dom对象转化为jq对象
  3. 参数是一个字符串，用来找对象

解决jQuery和其他库的冲突

在 jQuery 库中，几乎所有的插件都被限制在它的命名空间里。通常，全局对象都被很好地存储在jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）一起使用时，不会引起冲突。

  1. jQuery库在其他库之后导入
    在其他库和jQuery 库都被加载完毕后，可以在任何时候调用 jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。示例如下：
     <！一先引入其他库 一>
 <script src="lib/prototype.js"type="text/javascript"></script>
 <！一后引入jQuery 一>
 <script src="../../scripts/jquery.js"type="text/javascript"></script>

    <script>
    jQuery.noConflict()//将变量$的控制权移交给prototype.js
    //此后使用jq就不用$()而是jQuery();此时$()代表的则是prototype.js
</script>

     <script>
 //你也可以自定义
 $j=jQuery.noConflict()//此后这个$j()就相当于$()
 </script>
  2. jQuery库在其他库之前导入
    如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。无需调用jQuery.noConflict()函数。
     <！一先引入jQuery 一>
 <script src="../../scripts/jquery.js"type="text/javascript"></script>
 <！一后引入其他库 一>
 <script src="lib/prototype.js"type="text/javascript"></script>

    <script>
    jQuery(function(){可以直接使用JQuery了无需无需调用jQuery.noConflict()})
    //此时jq用jQuery();其他库就用$()
</script>

二、选择器

什么是选择器

jq选择器是jq为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。

基本选择器

  1. $("#id")——根据id匹配
  2. $(".className")——根据类名匹配
  3. $("element")——根据标签匹配
  4. $("#id,.className,tag.className")——并集与交集
  5. $("*")——匹配所有元素

层级选择器

  1. $("ancestor descendant")——获取ancestor里所有的descendant元素，后代选择器
  2. $("parent>child")——获取parent的子元素，自带选择器
  3. $("prev+next")——获取紧挨在prev元素后的next元素
  4. $("prev~siblings")——获取prev元素之后的所有siblings兄弟元素
    $("div span")//<div>里所以的<span>
$("div>span")//<div>里的子<span>
$("div+span")//<div>的下一个同级<span>
$("div~span")//<div>的所有同级<span>

过滤选择器

基本过滤选择器

  1. :first——选取第1个元素
  2. :last——选取最后1个元素
  3. :even——匹配索引值为偶数的元素
  4. :odd——匹配索引值为奇数的元素
  5. :eq(index)——获取指定索引值元素
  6. :gt(index)——获取大于索引值的元素
  7. :lt(index)——获取小于索引值的元素
  8. :header——获取所有标题元素
  9. :animated——获取当前正在执行动画的所有元素
  10. :focus——获取当前获取焦点的元素
    $("li:first")//<li>中的第一个元素
$("li:even")//选取索引值是偶数的<li>
$("li:eq(2)")//选取索引值是2的<li>
$(":focus")//选取当前获取焦点的元素

内容过滤选择器

  1. :contains(text)——选取文本含有"text"的元素
  2. :empty——选取不包含子元素或者空文本的空元素
  3. :has(selector)——选取含有某选择器的元素
  4. :parent——选取包含子元素或者文本的元素
    $("li:contains('我')")//选取文本含有“我”的<li>
$("div:empty")//选取<div>空元素
$("div:has(p)")//选取含有<p>的<div>元素
$("div:parent")//选取有子元素的<div>元素

可见过滤选择器

  1. :hidden——选取所有不可见的元素
  2. :visible——选取所有可见的元素
    $(":hidden")//选取所有不可见的元素
$("div:visible")//选取<div>中所有可见元素

属性过滤选择器

  1. [attribute]——选取含有attribute属性的元素
  2. [attribute=value]——选取属性值为value的元素
  3. [attribute!=value]——选取属性值不等于value的元素
  4. [attribute^=value]——选取属性值以value开始的元素
  5. [attribute$=value]——选取属性值以value结束的元素
  6. [attribute*=value]——选取属性值含有value的元素
  7. [attribute|=value]——选取属性值等于value或者以value为前缀的元素
  8. [attribute1][attribute2][attribute3]——获取满足多个条件的
    $("div[id]")//选取拥有id的<div>

子元素过滤选择器

  1. :nth-child——可以是:nth-child(index|even|odd|3n)
  2. :first-child——选父元素的第一个子元素
  3. :last-child——选父元素的最后一个子元素
  4. :only-child——如果父元素有唯一一个某个子元素，被匹配
    $("ul li:first-child")//<ul>中第一个子元素<li>
$("ul li:only-child")//<ul>中有唯一的子元素<li>

表单对象属性选择器

  1. $(":disabled")——匹配所有不可用元素
  2. $(":enabled")——匹配所有可用元素
  3. $(":checked")——匹配所有选中的被选中元素
  4. $(":selected")——匹配所有选中的option元素

表单选择器

  1. $(":input")——匹配所有 input, textarea, select 和 button 元素
  2. $(":text")——匹配所有的单行文本框
  3. $(":password")——匹配所有密码框
  4. $(":radio")——匹配所有单选按钮
  5. $(":checkbox")——匹配所有复选框
  6. $(":button")——匹配所有按钮

三、调试技巧

找对象：给获取元素的$()断点看是否能获得元素

四、jQuery中的DOM操作

DOM操作的分类

  1. DOM core

    DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。

    JavaScript 中的getElmentById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

    document.getElementById("id")

  2. HTML-DOM

    在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。它提供了一些更简明的记号来描述各种HTML元素的属性。

    HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档。

    document.src

  3. CSS-DOM

    CSS-DOM是针对 CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

    element.style.color="red"

jQuery中的DOM操作

节点相关内容可以在这里看或者在一些教程网站

1.查找节点

//以该html代码为例：
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
    <li title="苹果">苹果</li>
    <li title="西瓜">西瓜</li>
    <li title="橘子">橘子</li>
</ul>

查找元素节点

var li=$("ul li:eq(1)")     //获取<ul>中第二个<li>节点
var li_text=li.text()     //获取当前<li>节点的文本内容
console.log(li_text)    //西瓜

查找属性节点

var p=$("p")     //获取<p>节点
var p_text=p.attr("title")     //获取当前<p>节点的title属性值
console.log(p_text)    //选择你最喜欢的水果

2.创建节点

jQuery的工厂函数$()可以创建新节点$(html)

需求：创建两个<li>放进<ul>中

创建元素节点

var li_1=$("<li></li>");
var li_2=$("<li></li>");

$("ul").append(li_1);
$("ul").append(li_2);

//链式写法
$("ul").append(li_1).append(li_2);

创建文本节点

var li_1=$("<li>香蕉</li>");    
var li_2=$("<li>雪梨</li>");    //包括元素节点和文本节点
$("ul").append(li_1).append(li_2);

创建属性节点

var li_1=$("<li title="香蕉">香蕉</li>");    
var li_2=$("<li title="雪梨">雪梨</li>");    //包括元素节点和文本节点和属性节点
$("ul").append(li_1).append(li_2);

3.插入节点

其实前面已经使用到了一个插入节点的方法——append()。下面将会列举插入节点的方法

  • append()——给元素内部追加内容
  • appendTo——将内容追加到指定的元素中
    $("<span>你好</span>").appendTo("p")    //把<span>添加到<p>内
//结果：<p>一个p<span>你好</span></p>
  • prepend()——给元素内部前置内容
    $("p").prepend("<span>你好</span>")    
//结果：<p><span>你好</span>一个p</p>
  • prependTo()——将内容前置到指定元素中
    $("<span>你好</span>").prependTo("p")    
//结果：<p><span>你好</span>一个p</p>
  • after()——在元素之后插入内容
    $("p").after("<span>你好</span>")    
//结果：<p>一个p</p><span>你好</span>
  • insertAfter()——将内容添加在指定元素之后
    $("<span>你好</span>").insertAfter("p")    
//结果：<p>一个p</p><span>你好</span>
  • before()——在元素之前插入内容
    $("p").before("<span>你好</span>")    
//结果：<span>你好</span><p>一个p</p>
  • insertBefore()——将内容添加在指定元素之前
    $("<span>你好</span>").insertBefore("p")    
//结果：<span>你好</span><p>一个p</p>
    不仅可以做到新增元素，也可以交换元素的位置：
    var li_second=$("ul li:eq(1)")    //获取<ul>节点中的第二个<li>
var li_third=$("ul li:eq(2)")    //获取<ul>节点中的第三个<li>
li_third.insertBefore(li_second)    //移动

4.删除节点

  • remove()

    当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，可以理解为自我毁灭

    $("ul li:eq(1)").remove()   //获取<ul>节点中的第二个<li>后删除

    //通过传递参数来选择性地删除元素
$("ul li").remove("li[title!=西瓜]")   //删除title不为西瓜的<li>

  • detach()

    这个方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。与 remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

  • empty()

    严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中所有后代节点。

5.复制节点

  • clone()
    $("ul li").click(function(){
    $(this).clone().appendTo("ul")    //复制当前节点后追加到<ul>中
})
//当你点击苹果时，列表后会多一个苹果的<li>

    //以上的方法不会复制功能
//clone()方法中传递了一个参数true，若为true，复制元素的同时复制元素中所绑定的事件
  $(this).clone(true).appendTo("ul")  
//此时复制的<li>也有复制功能

6.替换节点

假设要把<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>替换成<strong>你最不喜欢的水果是？</strong>

  • replaceWith()
    $("p").replaceWith("<strong>你最不喜欢的水果是？</strong>")
  • replaceAll()
    $("<strong>你最不喜欢的水果是？</strong>").replaceAll("p")

    注意：替换后，原先绑定的事件将会与被替换的元素一起消失

7.包裹节点

  • wrap()

    $("strong").wrap("<b></b>")   //用<b>包裹<strong>
//结果：<b><strong>你最不喜欢的水果是？</strong></b>

  • wrapAll()

    它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。而它是包裹所有元素

    假设有：
<strong>你最不喜欢的水果是？</strong>
<strong>你最不喜欢的水果是？</strong>

    $("strong").wrapAll("<b></b>")
-------------------------------
<b>
<strong>你最不喜欢的水果是？</strong>
<strong>你最不喜欢的水果是？</strong>
</b>

  • wrapLnner()

    包裹元素的子内容

    $("strong").wrapInner("<b></b>")   //用<b>包裹<strong>中的内容
//结果：<strong><b>你最不喜欢的水果是？</b></strong>

8.属性操作

  • attr()

    //获取属性值
var p=$("p").attr("title")

    //设置属性值
$("p").attr("title","your title")

    //为同一个元素设置多个属性
$("p").attr({"title":"your title","name":"test"})

    jQuery 中的很多方法都是同一个函数实现获取（getter）和设置（setter）的，例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法。

  • removeAttr()

    //删除属性
$("p").removeAttr("title")

    注意：如果元素没有指定属性将会返回undefined，为了接受或者改变表单元素的属性如checked、selected或者disabled的属性值，需要用到prop()，即对于布尔类型的属性，最好选择用prop()

  • prop()和removeProp()

    用法与attr()相似，只需把方法名称替换一下即可

9.样式操作

  • 获取样式和设置样式

    假设有：
<p class="myclass">你最喜欢的水果是？</p>

    //获取<p>的class
var p_class=$("p").attr("class")

    //切换class
$("p").attr("class","high")
//结果：<p class="high">你最喜欢的水果是？</p>

  • addClass——追加样式

    $("p").addClass("newclass")
//结果：<p class="high newclass">你最喜欢的水果是？</p>

    注意:如果有不同的class设定了同一样式属性，则后者覆盖前者

  • removeClass——移除样式

    //删除单个
$("p").removeClass("high")
//结果：<p class="newclass">你最喜欢的水果是？</p>

    //删除多个方式1
$("p").removeClass("high").removeClass("newClass")

    //删除多个方式2
$("p").removeClass("high newClass")

    //删除全部
$("p").removeClass()

  • toggleClass()()——切换样式

    如果类名存在则删除它，如果类名不存在则添加它。

    $("p").toggleClass("newclass")

    //切换前
<p class="high">你最喜欢的水果是？</p>  
//切换后
<p class="high newclass">你最喜欢的水果是？</p>  
//再次切换
<p class="high">你最喜欢的水果是？</p>

  • hasClass()()

    判断是否含有某个样式，如果有，则返回true，否则返回false。

10.设置和获取HTML

  • html()

    类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。

    假设有：
<p><strong>你最喜欢的水果是？</strong></p>

    //获取HTML内容
$("p").html()     //--><strong>你最喜欢的水果是？</strong>

    //设置HTML内容
$("p").html("<strong>你最喜欢的水果是？</strong>")

    注意：html()方法可以用于XHTML文档，但不能用于XML文档。

  • text()
    类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。

    假设有：
<p><strong>你最喜欢的水果是？</strong></p>

    //获取元素文本
$("p").text()    //-->你最喜欢的水果是？

    //设置元素文本
$("p").text("你最喜欢的水果是？")

    注意：（1）JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器。（2）text()方法对HTML文档和XML文档都有效。

  • val()

    类似于 JavaScript 中的value 属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

    假设有：
  <select id="single">
      <option>选择1</option>
      <option>选择2</option>
      <option>选择3</option>
  </select>

  <select id="multiple" multiple>
      <option selected>选择1</option>
      <option>选择2</option>
      <option selected>选择3</option>
  </select>

    //改变单选下拉框的默认值
  $("#single").val("选择2")   

    //改变多选下拉框的默认值
  $("#multiple").val(["选择2","选择1"]) 

    //也可以使用attr()方法来实现同样的功能。
  $("#single option:eq(1)").attr(["selected","true"])

11.遍历节点

DOM树遍历

  • children()

    获取元素的子元素集合。只考虑子元素而不考虑其他后代元素。

    $("ul").children("li")  
//获取ul下的子li，相当于$("ul>li")
//可以不传参数，相当于全部的子元素

  • find()

    获取元素的后代元素集合

    $("ul").find("li")
//获取ul下的所有li，相当于$("ul li")
//可以不传参数，相当于全部的后代元素

  • next()

    找下一个兄弟元素

    $("li").next()
//获取li后面的同级元素

  • nextAll()

    找后面的所有兄弟元素

    $("li").nextAll()
//获取li后面的所有同级元素

  • prev()

    找上一个兄弟元素

    $("li").prev()
//获取li前面的同级元素

  • siblings()

    找兄弟元素，不包括本身

    $("#li").siblings("li")
//找出id为li同级的所有li元素
//可以不传参数，相当于全部的同级元素

  • parent()

    查找父级元素，返回一个元素节点

  • parents()

    查找祖先元素，返回多个父节点

分类过滤

  • eq(index)

     $('li').eq(2)    //获取第三个<li>

  • filter(selector)

    $('li').filter(':even')   //获取索引值为偶数的<li>

  • first()

    $('li').first()   //返回li集合中的第一个<li>

  • has(selector)

    筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。

    $('li').has('ul')   //返回后代元素有ul的li

  • map(fn)

    通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象

    $(':checkbox').map(function() {
    return this.id;
  }).get()
//获取所有类型为checkbox的id，转化为dom对象

  • is(表达式|obj|element|fn)

    根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

    $("input[type='checkbox']").parent().is("form")
//判断复选框的父元素是否为form

遍历jq对象

  • each(fn(undex,element))

    遍历一个jQuery对象，为每个匹配元素执行一个函数

    //无参数
$( "li" ).each(function() {
  $(this).addClass( "foo" );
});

//索引参数
$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});

//两个参数的情况
$("li").each(function(index,element){
  $(element).css("opacity",(index+1)/10)
})

12.CSS-DOM操作

  • css()

    //获取元素的样式属性
$("p").css("color")   //获取<p>元素的color值

    无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都可以获取到属性style里的其他属性的值。

    //设置元素的样式属性
$("p").css("color","red")   //获取<p>元素的color值为red

    //设置多个样式属性
$("p").css({"color":"red","fontSize":"30px"})   //获取<p>元素的color值为red

    注意：（1）如果值是数字，将会被自动转化为像素值。（2）在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法

  • height()

    $("p").height()   //获取<p>元素的高度值
$("p").height(100)   //获取<p>元素的高度值位100px

    width()同理

  • offset()

    获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

    $("p").offset().left  //获取左偏移
$("p").offset().top   //获取上偏移

  • position()

    获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与 offset()一样，它返回的对象也包括两个属性，即 top和left

  • scrollTop()和scrollLeft()

    获取元素的滚动条距顶端的距离和距左侧的距离

    //获取值
$("p").scrollTop()
$("p").scrollLeft()

    //设置值
$("p").scrollTop(300)     //元素垂直滚动条到指定位置的距离为300px
$("p").scrollLeft(300)

五、jQuery中的事件

事件绑定

  • bind('事件类型',fn)

    为一个元素绑定一个事件处理程序。

    $('#btn').bind('click', function() {});   //给一个id为btn的元素绑定点击事件

    //绑定多个事件
$('#btn').bind('mouseenter mouseleave', function() {});

    //在jq1.4中，你可以这样绑定多个事件
$('#btn').bind({
click: function() {},
mouseenter: function() {}
});

    //把事件当做参数传递
$('#btn').bind('click', function(event) {
  alert('The mouse cursor is at ('
    + event.pageX + ', ' + event.pageY + ')');
});
//会返回鼠标相对于文档左边和顶部的位置

    更多的事件对象请看这里

    //简写
$('#btn').click(function(){})

委托代理事件

  • delegate(selector,eventType,fn)

    把自身的事件委托给所有匹配选择器的元素执行，即点击自己不执行。这里执行函数的this是委托的对象

    $("table").delegate("td", "click", function() {//table不由自己执行而是由td执行
  $(this).toggleClass("chosen");
});

  • on(eventType,[selector],[data],fn)

    在选定的元素上绑定一个或多个事件处理函数

    $("p").on("click", function(event){});

    //委托事件,把div的事件交给p处理
$("div").on("click", "p",function(event){});

合成事件

  1. hover()

    当光标移动到元素上时，会触发指定的第1个函数（enter）；当光标移出这个元素时，会触发指定的第2个函数（leave）。

     $("#btn").hover(
 function () {$(this).addClass("hover")},
 function () {$(this).removeClass("hover")}
 );

    hover()方法准确来说是替代jQuery中的bind("mouseenter")和bind ("mouseleave")，而不是替代bind ("mouseover")和bind ("mouseout")。

  2. toggle()

    用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数（fn1）；当再次单击同一元素时，则触发指定的第2个函数（fn2）；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

     $('#target').toggle(
   function() {alert('第一次点击')},
    function() {alert('第二次点击')}
 );

事件对象的属性和方法

  • event.type

    获取到事件的类型

     $('a').click(function(event){
   console.log(event.type)  //"click" //获取事件类型
   return false    //阻止链接跳转
 })

  • event.preventDefault()

    阻止默认的事件行为

  • event.stopPropagation()

    阻止事件的冒泡

  • event.target

    event.target的作用是获取到触发事件的元素

    $("#target").click(function(event) {
   console.log(event.target.id); //target
});

  • event.relatedTarget

    事件中涉及的其它任何DOM元素

    $("a").mouseout(function(event) {
  alert(event.relatedTarget.nodeName); // "DIV"
});

  • event.pageX和event.pageY

    获取到光标相对于页面的x坐标和y坐标。如果页面上有滚动条，则还要加上滚动条的宽度或高度。

  • event.which

    鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键

    $("a").mousedown(function(e){
  alert(e.which)  //1--鼠标左键；2--鼠标中键；3--鼠标右键
})

  • event.metaKey

    针对不同浏览器对键盘中的按键解释不同，jQuery也进行了封装，并规定event.metaKey为键盘事件中获取按键。

节流阀

按下键盘的时候触发，若键盘没弹起，则不让触发下一次键盘按下事件

//在触发函数外定义一个全局变量
var flag=true

//在keydown键盘事件中
if(flag){
  flag=false;
  //你要执行的事件全部放在里边
}
//这样，每次键盘点击之后就进入了if条件语句，进来之后flag就变成了false，关闭进入通道，

//在keyup键盘事件中，只需把flag改回来即可
flag=true

移除事件

  • unbind([type],[data])

    第1个参数是事件类型，第2个参数是将要移除的函数；如果没有参数，则删除所有绑定的事件；如果提供了事件类型作为参数，则只删除该类型的绑定事件；如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

    $("#btn").unbind()//删除元素的所有事件

    $("#btn").unbind("click")//删除元素的所有click事件

    //已有的点击事件
$("#btn").bind("click",myfun1=function(){}).bind("click",myfun2=function(){})

//删除指定一个
$("#btn2").click(function(){
  $("#btn").unbind("click",mufun1)  //删除绑定事件mufun1
})

  • one()

    触发一次后立即解除绑定

  • off()

    移除一个事件处理函数

    $("p").off()  //移除p元素上的所有事件

    $("p").off("click")  //移除p元素上的所有click事件

    $("p").off("click","**")  //移除p元素上的所有代理事件

操作模拟

  1. 常用模拟

    有时，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。

    $("#btn2").trigger("click")
//简化
$("#btn2").click()

  2. 触发自定义事件

    //自定义的事件
$("#btn").bind("myClick",function(){})
//触发自定义事件
$("#btn").trigger("myClick")

  3. 传递数据

    trigger(type,[data])方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。

     $("#btn").bind("myClick",function(e,msg1,msg2){})
 $("#btn").trigger("myClick",["我的自定义","事件"])

其他用法

  • 添加事件命名空间
    event.namespace

    //可以把为元素绑定的多个事件类型用命名空间规范起来
//在所绑定的事件类型后面添加命名空间，
//这样在删除事件时只需要指定命名空间即可。
$("p").bind("click.plugin", function() {});
$("p").bind("mouseover.plugin", function() {});
$("p").bind("dblclick", function() {});

$("#btn").bind("click", function() {
  $("p").unbind(".plugin")  //删除
});

  • 相同事件名称，不同命名空间执行方法

    //当单击<p>元素后，会同时触发click事件和click.plugin事件。
$("p").bind("click.plugin", function() {});
$("p").bind("click", function() {});

$("#btn").bind("click", function() {
  $("p").trigger("click!")  //注意有感叹号
});

//如果只是单击<button>元素，则只触发 click 事件，而不触发 click.plugin 事件。注意，trigger("click!")后面的感叹号的作用是匹配所有不包含在命名空间中的click方法。

六、jQuery中的动画

show()和hide()

hide()会将该元素的display样式改为“none”。show()将元素的display样式设置为先前的显示状态（“block”或“inline”或其他除了“none”之外的值）

//隐藏
$("div").hide()
//与该方法效果相同
$("div").css("display","none")

//显示
$("div").show()

如果希望在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数，例如，指定一个速度关键字“slow”。运行该代码后，元素将在600毫秒内慢慢地显示出来。其他的速度关键字还有“normal”和“fast”（长度分别是400毫秒和200毫秒）不仅如此，还可以为显示速度指定一个数字，单位是毫秒。

$("div").show("slow")
$("div").show(1000)

fadeIn()和fadeOut()

与show()方法不相同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（“display: none”）。fadeIn()方法则相反。

$("div").fadeIn()
$("div").fadeOut()

slideUp()和slideDown()

slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display 属性值为“none”，当调用 slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反。

$("div").slideUp()
$("div").slideDown()

自定义动画方法animate()

语法结构：animate(params,speed,callback)

（1）params：一个包含样式属性及值的映射，比如{property1:“value1”，property2: “value2”,...}
（2）speed：速度参数，可选。可以是"swing"摇摆效果；可以是"linear"线性匀速效果
（3）callback：在动画完成时执行的函数，可选。

自定义简单动画

假设给div一个样式：
div{
  position:relative;
  width:100px;
  height:100px;
  border:1px silid #ccc;
  background:green;
}

注意:在使用 animate()方法之前，为了能影响该元素的“top”、“left”、“bottom”和“right”样式属性，必须先把元素的position样式设置为“relative”或者“absolute”。

//添加jq代码
$("div").click(function(){
  $(this).animate({left:"500px"},3000)
  //使元素在3秒内，向右移动500像素。
})

累加、累减动画

$("div").click(function(){
  $(this).animate({left:"+=500px"},3000)
  //与上面不同的是，上面点击一次就不会再动
  //而这个累加可以点击一次就移动一次
})

同时执行多个动画

$("div").click(function(){
  $(this).animate({left:"500px",height:"200px"},3000)
})

按顺序执行多个动画

$("div").click(function(){
  $(this).animate({left:"500px"},3000)
  $(this).animate({height:"200px"},3000)
})

综合动画

$("div").css("opacity","0.5")//设置不透明度
$("div").click(function(){
    $(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px"},3000).fadeOut("slow")
})

动画回调函数

在上例中，如果想在最后一步切换元素的CSS样式，而不是隐藏元素。如果只是按照常规的方式，将fadeOut ("slow") 改为css("border","5px solid blue")，实际的效果是，刚开始执行动画的时候，css()方法就被执行了。这时候需要用到回调函数

$("div").css("opacity","0.5")//设置不透明度
$("div").click(function(){
    $(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px"},3000,function(){
      $(this).css("border","5px solid blue")
    })
})

注意：callback回调函数适用于jQuery所有的动画效果方法，例如slideDown()方法的回调函数

停止动画

停止元素的动画

语法：stop([clearQueue],[gotoEnd])

参数clearQueue和gotoEnd都是可选的参数，为Boolean值（ture或flase）。
clearQueue代表是否要清空未执行完的动画队列，
gotoEnd代表是否直接将正在执行的动画跳转到末状态。

stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。

$("div").hover(function(){
    $(this).stop().animate({height:"150",width:"300"},1000),
    function(){$(this).stop().animate({height:"22",width:"60"},1000)}
    //这里hovor是个合成事件
})

如果遇到组合动画。此时只用一个不带参数的stop()方法就显得力不从心了。因为stop()方法只会停止正在进行的动画，如果动画正执行在第1阶段，只会停止当前的动画，并继续进行下面的animate。

这种情况下stop()方法的第1个参数就发挥作用了，可以把第1个参数（clearQueue）设置为true，此时程序会把当前元素接下来尚未执行完的动画队列都清空。但会保持在最后一帧的状态

$("div").hover(function(){
    $(this).stop(true).animate({height:"150"},200).animate({width:"300"},200),
    function(){$(this).stop(true).animate({height:"22"},200)}.animate({width:"60"},300)}
})

第2个参数（gotoEnd）可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过 stop(false,true)这种方式来让当前动画直接到达末状态。

当然也可以两者结合起来使用 stop(true,true)，即停止当前动画并直接到达当前动画的末状态，并清空动画队列。注意，jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法

判断元素是否处于动画状态

为了避免动画积累而导致的动画与用户的行为不一致。就要判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

if(!$(element).is(":animated")){
  //如果当前没有进行动画，则添加新动画
}

延迟动画

delay()

$(this).animate({left:"400px",height:"200px"},300).delay(1000).animate({top:"200px",width:"200px"}).delay(2000).fadeOut("slow")

其他动画方法

  • toggle(speed, [callback])

    可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。

    $("li").click(function(){
  $(this).next().toggle()
})

  • slideToggle( speed, [easing ], [callback] )

    通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。相当于slideUp()和slideDown()

    $("li").click(function(){
  $(this).next().slideToggle()
})

  • fadeTo(speed, opacity, [callback])

    可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度

    $("li").click(function(){
  $(this).next().fadeTo(600,0.2)
})

  • fadeToggle(speed, [ easing ], [callback])

    通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度

    $("li").click(function(){
  $(this).next().fadeToggle()
})

七、jQuery Mobile

jQuery Mobile简介

jQuery Mobile则是用来填补 jQuery在移动设备应用上的缺憾的一个新项目。它基于jQuery框架并使用了HTML 5和CSS 3这些新的技术，除了能提供很多基础的移动页面元素开发功能外，框架自身还提供了很多可供扩展的API

jQuery Mobile主要特性

jQuery Mobile提供了非常友好的UI组件集和一个强有力的AJAX的导航系统，以支持动画页面转换。它的策略可以简单地总结为：创建一个在常见智能手机/平板电脑浏览器领域内能统一用户界面的顶级JavaScript库

  • 基于jQuery构建

  • 兼容绝大部分手机平台

  • 轻量级的库

  • 模块化结构

  • HTML 5标记驱动的配置

  • 渐进增强原则

  • 响应设计

    通过灵敏的技术设计和工具，使得相同的基础代码库可以在不同屏幕大小中自动缩放。

  • 强大的Ajax的导航系统

  • 支持触摸和鼠标事件

  • 统一的UI组件

  • 强大的主题化框架

jQuery Mobile的使用

首先去官方下载最新的jQuery Mobile版本。其次，建议在页面中使用HTML 5标准的页面声明和标签，因为移动设备浏览器对HTML 5标准的支持程度要远远优于PC设备

  1. 引入

    CDN

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

    下载

    <link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>

  2. 构建html框架

    <div data-role="page">
    <div data-role="header">
        <h1>my title<h1>
    </div>
    <div data-role="content">
        <p>hello world</p>
    </div>
    <div data-role="footer">
        <h1>footer content<h1>
  </div>
</div>

    user-scalable=no设置宽度为设备的最大宽度，禁止用户放大和缩小。

     <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" >

data-role属性

  • button——设置为button类型——data-role="button"
  • collapsible——设置元素为一个包裹标题和内容的容器——data-role="collapsible"
  • collapsible-set——设置元素为一个包裹collapsible的容器——data-role="collapsible-set"
  • content——设置元素为内容容器——data-role="content"
  • dialog——设置元素为对话框——data-rel="dialog"
  • field container——设置元素为一个区域包裹容器——data-role="fieldcontain"
  • header——页面标题容器——data-role="header"
  • footer——页面标题容器——data-role="footer"
  • listview——设置元素为一个列表视图——data-role="listview"
  • navbar——设置元素为导航栏——data-role="navbar"
  • page——设置元素为页面容器——data-role="page"
  • radio button——设置元素为单选框——type="radio"
  • checkbox——设置复选框类型——type="checkbox"
  • select——设置元素为下拉框——<select></select>
  • slider——设置元素为有范围值的文本框——data-role="slider"

添加内容

<ul data-role="listview">
    <li><a href="#">我</a></li>
    <li><a href="#">来</a></li>
    <li><a href="#">了</a></li>
    <li><a href="#">啊</a></li>
</ul>

如果不喜欢100宽度，可以给<ul>设置data-inset="true"

样式切换

<ul data-role="listview" data-inset="true" data-theme="e">
    <li><a href="#">我</a></li>
    <li><a href="#">来</a></li>
    <li><a href="#">了</a></li>
    <li><a href="#">啊</a></li>
</ul>

其他框架

移动框架

在移动框架方面，除了jQuery Mobile之外，还有很多移动框架可选。

  • jqMobi (http://jqmobi.com)
    适应于iOS和Android等移动设备的JavaScript框架，它含有 jQuery Mobile的大部分功能，但是 jqMobi体积更小，速度更快，兼容性也有所不同。

    jqMobi由三个组件组成：查询库、jqUi和jqPlugin。查询库库提供了60多个API调用，包括Ajax调用、针对webkit的系统选择器调用等

  • Sencha Touch (http://sencha.com)
    Sencha Touch是专门为移动设备开发应用的JavaScript框架。通过Sencha Touch你可以创建一个非常像native app的web app，用户界面组件和数据管理全部基于HTML 5和CSS3的Web标准，兼容Android和iOS

    Sencha Touch是一个重量级的框架，组件封装较多，在各平台交互表现统一，但入门门槛较高。

  • Zepto.js (http://zeptojs.com/)
    Zepto.js是一个专为Mobile WebKit浏览器而开发的一个JavaScript框架。它能够帮助开发人员简单、快速地完成开发任务。更重要的是这个JavaScript框架，是超轻量级的，只有5KB。Zepto.js的语法借鉴并兼容jQuery。

PhoneGap

PhoneGap是一个开源的开发框架，使用HTML、CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone、Android、Palm、Symbian、Blackberry、Windows Phone和Beda智能手机的核心功能—包括地理定位、加速器、联系人、声音和振动等。同时借助PhoneGap， Web开发者还可以把已有的Web应用打包成移动平台上的本地应用或者应用商店里的App，让用户直接下载安装。PhoneGap的特性包括：将 HTML/JavaScript 代码打包成本地 App，帮助开发者部署到各种平台上，并提供了访问移动应用本地特性的接口，同时支持多语言混合的插件机制。

八、插件

jq不可能包含所有功能，我们可以通过插件扩展jq的功能，使用这些插件能给jq提供一些额外的功能,你可以去官网查看全部插件

插件使用步骤：

1. 引入jquery文件
2. 引入插件
3. 使用插件

常用插件

jquery.color.js

animate不支持颜色简便，但是这个插件安装了之后就可以支持颜色渐变

jquery.lazyload.js

懒加载插件,延迟长页面中图片的加载，只加载在可视范围内的图片

//引入插件
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>

//使用插件，把图片地址的属性改成data-src，你也可以加上一个src放占位符
<img class="lazyload" data-src="img/example.jpg" width="765" height="574" />

//如果前面没有加任何element，它将加载全部
lazyload();

//你也可以加个类，例如给每个需要懒加载的图片加上lazyload类
$(".lazyload").lazyload()

//另一种写法
let images = document.querySelectorAll(".lazyload");
lazyload(images);

jquery.validation.js

表单验证插件

jquery.ui.js

制作插件

原理：给jquery对象添加一个方法

制作一个简易插件:改变背景颜色的方法

//原始
$("div").css("backgroundColor","red")

//添加原型 $.fn表示原型
//我们添加一个bgColor，使可以直接用这个方法更改背景颜色
//注意 方法名称不要和已有的重复，否则会覆盖
$.fn.bgColor=function(color){
  //这里的this是jquery对象，即谁调用这个方法谁就是this
  this.css("backgroundColor",color)

  //jq的链式编程特点，返回对象，这样，后面就能继续使用其他方法了
  return this;
}

//使用
$("div").bgColor("red")

如果可以实现效果，我们就可以将其封装成一个插件了

  • 创建一个文件命名为jquery.bcColor.js
  • 将方法放进去
    $.fn.bgColor=function(color){
  this.css("backgroundColor",color)
  return this;
}
  • 引入插件
    <script scr="jquery.bcColor.js"></script>

    注意：前提是本身就引入了jq插件

posted @ 2020-08-31 17:35  sanhuamao  阅读(299)  评论(0)  编辑  收藏  举报