锋利的jQuery笔记

发表于 | 分类于

锋利的jQuery

第一章 认识jQuery

  • jQuery简介优势，JavaScript的缺点

  • 程序中的$符号是jQuery的一个简写

  • window.onload与$(document).ready()的区别

  • jQuery代码风格

  • jQuery对象和DOM对象的介绍

    1.jQuery转换为DOM对象

    （1）jQuery是一个类数组对象，可以通过[index]的方法得到对应的DOM对象

    1
    2
    var $cr = $("#cr");
    var cr = $cr[0];

    （2）这种方法是jQuery本身提供的，通过get(index)方法得到对应的DOM对象

    1
    2
    var &cr = $("#cr");
    var cr = $cr.get(0);

    2.DOM对象转成jQuery对象

    对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了

    1
    2
    var cr = document.getElementById("cr");
    var $sr = $(cr);

    【注意】：DOM对象才能使用都DOM中的方法，jQuery对象不可以使用DOM中的方法。

  • 解决jQuery和其它库的冲突

    • jQuery.noConflict()方法
    • jQuery库在其它库之前导入
    • jQuery库在其它库之后导入

第二章 jQuery选择器

  • CSS的选择器

  • CSS选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为；jQuery的行为准则都必须在获取到元素之后才能生效。

  • jQuery选择器的优势（简洁的写法、支持CSS1到CSS3的选择器、完善的处理机制）

  • jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器

  • 基本选择器

    选择器 描述 返回
    #id 根据给定的id匹配一个元素 单个元素
    .class 根据给定的类名匹配元素 集合元素
    element 根据匹配的元素名匹配元素 集合元素
    * 匹配所有元素 集合元素
    selector1, selector2,… 将每一个选择器匹配到的元素合并后一起返回 集合元素

  • 层次选择器

    选择器 描述 返回
    $(“ancestor descendant”) 选取ancestor元素里的所有后代元素 集合元素
    $(“parent>child”) 选取parent元素下的子元素 集合元素
    $(“prev+next”) 选取紧接在perv元素后的next元素 集合元素
    $(“prev~siblings”) 选取prev元素之后的所有siblings元素 集合元素

  • 过滤选择器包括：基本过滤选择器，内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器

  • 基本过滤选

    选择器 描述 返回
    :first 选取第一个元素 单个元素
    :last 选取最后一个元素 单个元素
    :not(selector) 去除所有与给定选择器匹配的元素 集合元素
    :even 选取索引是偶数的元素 集合元素
    :odd 选取索引是奇数的元素 集合元素
    :eq(index) 选取索引等于index的元素 单个元素
    :gt(index) 选取索引大于index的元素 集合元素
    :lt(index) 选取索引小于index的元素 集合元素
    :header 选取所有的标题元素 集合元素
    :animated 选取当前正在执行动画的所有元素 集合元素
    :focus 选取当前获得焦点的元素 集合元素

  • 内容过滤选择器

    选择器 描述 返回
    :contains(text) 选取含有文本内容为“text”的元素 集合元素
    :empty 选取不包含子元素或者文本的空元素 集合元素
    :has(selector) 选取含有选择器所匹配的元素的元素 集合元素
    :parent 选取含有子元素或者文本的元素 集合元素

  • 可见性过滤选择器

    选择器 描述 返回
    :hidden 选取所有不可见的元素 集合元素
    :visible 选取所有可见的元素 集合元素

  • 属性过滤选择器

    选择器 描述 返回
    [attribute] 选取拥有此属性的元素 集合元素
    [attribute=value] 选取属性值为value的元素 集合元素
    [attribute!=value] 选取属性值不等于value的元素 集合元素
    [attribute^=value] 选取属性值以value开头的元素 集合元素
    [attribute$=value] value结尾 集合元素
    [attribute*=value] 含有value 集合元素
    [attribute|=value] 选取属性等于给定字符串或以该字符串为前缀 集合元素
    [attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素 集合元素
    [attribute1][attribute2][attributeN] 用属性选择器合并一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围 集合元素

  • 子元素过滤选择器

    选择器 描述 返回
    :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素（下标从1开始） 集合元素
    :first-child 选取每个父元素第一个子元素 集合元素
    :last-child 选取每个服元素最后一个子元素 集合元素
    :only-child 唯一元素 集合元素

  • 表单对象属性过滤选择器

    选择器 描述 返回
    :enabled 选取所有可用的元素 集合元素
    :disabled 选取所有不可用的元素 集合元素
    :checked 选取所有被选中的元素（单选复选框） 集合元素
    :selected 选取所有被选中的选项元素（下拉元素） 集合元素

  • 表单选择器

    选择器 描述 返回
    :input 选择所有的、 集合元素
    :text 选取所有的单行文本框 集合元素
    :passward 密码框 集合元素
    :radio 单选框 集合元素
    :checkbox 多选框 集合元素
    :submit 提交按钮 集合元素
    :image 图像按钮 集合元素
    :reset 重置按钮 集合元素
    :button 所有的按钮 集合元素
    :file 所有的上传域 集合元素
    :hidden 所有不可见元素 集合元素

  • 选择器中的一些注意事项

    • 选择器中含有“.”、“#”、“(”、或“[”等特殊字符
    • 选择器的@符号问题
    • 选择器中含有空格的注意事项

  • 其它选择器

第三章 jQuery中的DOM操作

  • DOM的分类（DOM Core、HTML-DOM、CSS-DOM)

  • 查找节点

    查找元素节点（通过选择器来完成）、查找属性节点（attr()方法来获取它的各种属性的值)

    1
    2
    var $li = $("ul :eq(1)); //获取<ul>里面的第二个<li>标签
    var text = $("para").attr("title"); //获取属性title

  • 创建节点

    创建元素节点（工厂模式$()）、创建文本节点、创建属性节点

    1
    2
    3
    var $li_1 = $("<li></li>") //创建了一个<li>元素
    var $li_2 = $("<li>香蕉<li>");  //创造了一个文本节点
    var $li_3 = $("<li title="香蕉">香蕉</li>")//创建了一个属性节点

  • 插入、移动节点

    append(),appendTo() ,prepend(),prependTo(),after(),insertAfter() ,before() ,insertBefore()

    方法 描述
    append() 向每个匹配元素内部追加内容
    appendTo() 颠倒了append()方法
    prepend() 向每个匹配元素内部前置内容
    prependTo() 颠倒了prepend()
    after() 在每个匹配元素之后插入内容
    insertAfter() 颠倒了after()
    before() 在每个元素之前插入内容
    insertBefore() 颠倒before()

  • 删除节点

    remove()方法、detach()方法、empty()方法

    remove()方法：当某个节点用remove()方法删除后，该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

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

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

  • 复制节点

    clone()方法（注意深复制和浅复制）

    clone(): 复制节点后，被复制的新元素并不具有任何行为。

    clone(true): 复制元素的同时复制元素中所绑定的事件。

  • 替换节点

    replaceWith()方法和replaceAll()方法

    replaceWith()方法的作用是将所匹配的元素都替换成指定的HTML或者DOM元素。

    replaceAll()是replaceWith()的颠倒方法。

    如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定新的事件。

  • 包裹节点

    wrap()方法、wrapAll()方法、wrapInner()方法

    将某个节点用其它标记包裹起来。

    1. wrap()
    1
    2
    $("strong").wrap("<b></b>"); //用<b>标签把<strong>元素包裹起来
    //结果：<b><strong>你好</strong></b>

    2.wrapAll()。该方法会将所有匹配的元素用一个元素包裹起来，不同于wrap()方法，wrap()方法是把所有的元素进行单独的包裹。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /*
    html代码：
    <strong>haha</strong>
    <strong>xixi</strong>
    */
    $("strong").wrap("<b></b>");
    //结果：
    //<b><strong>haha</strong></b>
    //<b><strong>xixi</strong></b>
    $("strong").wrapAll("<b></b>");
    //结果：
    //<b>
    //<strong>haha</strong>
    //<strong>xixi</strong>
    //</b>

    //如果被包裹的多个元素间有其他元素，其他元素会被放到包裹元素之后

    3.wrapInner()方法，该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

    1
    2
    $("strong").wrapInner("<b></b>");
    //<strong><b>哈哈</b></storng>

  • 属性操作

    获取和设置属性（attr()方法）、删除属性（removeAttr()方法）

    1
    2
    3
    4
    $("P").attr("title", "haha");
    $("P").atrr("title":"jaja", "name":"test");

    &("P").removeAttr("title");

  • 样式操作

    获取和设置样式（attr()方法）、追加样式（addClass()方法）【注意attr()和addClass()的区别】、移除样式（removeClass()方法）、切换样式（toggle()方法和toggleClass()方法）、判断是否含有某个样式（hasClass()方法）

    1
    2
    3
    $("p").addClass("another"); //给<p>元素追加“another”类
    $("p").removeClass("another"); //移除类；若不今添加参数，则将class的值全部清除
    $("p").hasClass("another");//判断元素中是否含有某个类，如果有则返回true
    1
    2
    3
    4
    5
    6
    7
    8
    $toggleBtn.toggle(function(){
         //显示元素    代码③
       },function(){
        //隐藏元素  代码④
    })
    /*toggle()方法在此处的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它；反之，显示*/

    $("p").toggleClass("another"); //重复切换类名“another"

  • 设置和获取HTML、文本和值

    html()方法、text()方法、val()方法

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

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

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

  • 遍历节点

    children()方法、next()方法，prev()方法，siblings()方法、closest()方法、parent(),parents(),closest()的区别

    children()：取得匹配元素的所有子元素集合。（只考虑子元素而不考虑其他后代元素）

    next()：取得匹配元素后面紧邻的同辈元素。

    prev()：取得匹配元素前面紧邻的同辈元素。

    siblings()：取得所匹配元素前后所有的同辈元素。

    closest()：取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素如果什么都没找到，则返回一个空的jQuery对象。

    parent()：获得集合中每个元素的父级元素。

    parents()：获得集合中每个元素的祖先元素。

  • CSS-DOM操作

    css()方法、height()方法、width()方法、offset()方法、position()方法、scrollTop()方法和scrollLeft()方法

    css() : 可以直接利用css()方法设置某个元素的单个样式，也可以同时设置多个样式属性。

    offset()：获取在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left。

    1
    2
    3
    var offset = $("p").offset();
    var left = offset.left;
    var top = offset.top;

position()：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，包含两个属性，即top和left。

scrollTop()和scrollLeft()方法：获取元素的滚动条距顶端的距离和距左端的距离。也可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。

第四章 jQuery的事件和动画

jQuery中的事件

  • $(document).ready()方法和window.onload方法的异同点

    • 执行时机
    • 多次使用
    • 间歇方式

  • load()方法（$(window).load(function(){ })）

  • 事件绑定

    • 在文档装载完成后，如果打算为元素绑定事件来完成某些操作，可以使用bind()方法来对匹配元素进行特定事件的绑定。
    • bind()方法的使用
    • 与ready()方法一样，bind()方法也可以多次调用。
    • is()方法
    • 简写绑定事件

  • 合成事件

    • hover()方法（jQuery自定义的方法，用于模拟光标悬停事件）的使用和注意事项。
    • toggle()方法（用于模拟鼠标连续单击事件）的作用和使用。

  • 事件冒泡

    • 什么是事件冒泡以及事件冒泡引发的问题
    • 事件对象（①jQuery进行了必要的扩展和封装，从而使得在任何浏览器中都能很轻松的获得事件对象以及事件对象的一些属性 ②在程序中使用事件对象只需要为函数添加一个参数③这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁）
    • stopPropagation()方法—阻止事件冒泡
    • preventDefault()方法—阻止元素的默认行为
    • 如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。
    • jQuery不支持事件捕获。

  • 事件对象的属性

    • event.type — 获取到事件的类型
    • event.stopPropagation()方法 — 阻止事件冒泡
    • event.preventDefault()方法 — 阻止默认行为
    • event.target — 获取到触发事件的元素
    • event.relatedTarget
    • event.pageX 和 event.pageY — 获取到光标相对于页面x坐标和y坐标
    • event.which — 在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键
    • event.metaKey — 在键盘事件中获取<ctrl>键

  • 移除事件

    • 不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。
    • unbind()方法的使用与说明
    • one()方法 — one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。

  • 模拟事件

    • trigger()方法

      ①可以完成模拟操作（常用模拟）

      ②不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义的事件（触发自定义事件）

      ③该方法有两个参数，第一个参数是要触发的时间类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。（传递数据）

      ④trigger()方法触发后，会执行浏览器默认操作。（执行默认操作）

      ⑤如果只想触发事件而不想执行浏览器的默认操作，可以使用triggerHandler()方法。

  • 其它用法

    前面已经介绍，bind()方法不仅能为元素绑定浏览器支持的具有相同名称的事件，也可以绑定自定义事件。

    • 绑定多个事件类型
    • 添加事件命名空间，便于管理
    • 相同事件名称，不同命名空间执行方法

jQuery中的动画

  • show()方法和hide()方法

    • 在不带参数的情况下，相当于css("display", "none/block/inline")
    • 【注意】：hide()方法在将“内容”的display属性值设为“none”之前，会记住原先的display属性值。当调用show()方法时，就会根据hide()方法记住的display属性值来显示元素。
    • 可以为hide()和show()方法指定一个参数，比如“slow”，“normal”，“fast”或数值。这样就会产生动画效果。
    • hide(600)方法会同时减少“内容”的高度、宽度和不透明度，直至这三个属性的值都为0，最后设置该元素的CSS规则为“display：none"；show(500)方法则会从上打下增加“内容”的高度，从左到右增加“内容”的宽度，同时增加“内容”的不透明度，直至内容完全显示。

  • fadeIn()方法和fadeOut()方法

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

  • slideUp()方法和slideDown()方法

    • 这两个方法会改变元素的高度
    • 如果一个元素的display属性值为“none”，当调用slideDown()方法时，这个元素将由上到下延伸显示。slideUp()与之想反。

  • 自定义动画方法animate()

    • animate()的语法
    • 自定义简单动画，累加、累减动画，多重动画（同时执行多个动画、按顺序执行多个动画），综合动画
    • animate()方法可以用来代替其他所有的动画方法

  • 动画回调函数

    • 如果想在最后一步切换元素的样式，可以使用回调函数
    • css()方法并不会加入到动画队列中，而是立即执行，可以使用回调函数（callback）对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可

  • 停止动画和判断是否处于动画状态

    • 停止元素的动画（stop()方法）

      ①语法：stop([clearQueue],[gotoEnd]); 参数都可选，均为布尔值。clearQueue代表是否清空未执行完的动画队列；gotoEnd代表是否直接将正在执行的动画跳转到末状态。

      ②直接使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。

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

      在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画积累。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

      1
      2
      3
      if(!$(element).is(":animated")){ //判断元素是否处于动画状态
          //如果当前没有进行动画，则添加新动画
      }

  • 延迟动画

    如果想对动画进行延迟操作，可以使用delay()方法

  • 其它动画方法

    • toggle()方法 — 可以切换元素的可见状态。
    • slideTaggle()方法 — 通过高度变化来切换匹配元素的可见性。
    • fadeTo()方法 — 可以把元素的不透明度以渐进的方式调整到指定的值。
    • fadeToggle()方法 — 通过不透明度变化来匹配元素的可见性。

  • 动画队列

    • 一组元素上的动画效果
      • 当在一个animate()方法中应用多个属性时，动画是同时发生的
      • 当以链式的写法应用动画方法时，动画是按照顺序发生的（除非queue选项值为false）
    • 多组元素上的动画效果
      • 默认情况下，动画都是同时发生的
      • 当以回调的形式应用动画方式的时（包括动画的回调函数和queue()方法的回调函数），动画是按照回调的顺序发生的。

第五章 jQuery对表单、表格的操作及更多应用

  • 表单应用

    • 表单的组成部分（表单标签、表单域、表单按钮）
    • 单行文本框的应用
    • 多行文本框的应用（高度变化、滚动条高度变化）
    • 复选框应用
    • 下拉框应用
    • 表单验证

  • 表格应用

    • 表格变色（普通的隔行变色、单选框控制表格行高亮、复选框控制表格行高亮）
    • 表格展开关闭
    • 表格内容筛选

  • 其他应用

    • 网页字体大小
    • 网页选项卡
    • 网页换肤

第六章 jQuery与Ajax的应用

part 1

  • Ajax的优势和不足
  • Ajax的XMLHttpRequest对象
  • ==原生JavaScript操作Ajax的步骤==

part 2 jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post方法，第3层是$.getScript()和$.getJSON()方法。

  1. load()方法

    • 载入HTML文档

      load()方法能载入远程HTML代码并插入DOM中。

      结构：load(url [,data] [, callback])

      url – 请求HTML页面的URL地址

      data（可选） — 发送至服务器的key/value数据

      callback（可选） — 请求完成时的回调函数，无论请求成功或失败

    • 筛选载入的HTML文档

      通过为URL参数指定选择符，load()方法的URL参数语法结构是“url selector”

    • 传递方式

      load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则会自动转换为POST方式。

    • 回调函数

      对于必须在加载完成后才能继续的操作，load()方法提供了回调函数（callback），该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象

  2. $.get()方法和$.post()方法

    load()方法通常用来从web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法.

    【注意】：$.get()方法和$.post()方法是jQuery中的全局函数，而在此之前讲的jQuery方法都是对jQuery对象进行操作的。

    • $.get()方法

      该方法使用GET方式来进行异步请求

      结构：$.get(url [, data] [, callback] [, type])

      url — 请求的HTML页的URL

      data（可选）— 发送至服务器的key/value数据会作为 QueryString附加到请求URL中

      callback（可选）— 载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法

      type（可选）— 服务器返回内容的格式，包括xml, html, script, json, text 和 _default

      该方法的回调函数只有两个参数。

    • $.post()方法

      $.post()和$.get()方法的结构和使用方式都相同，不过它们之间仍有一下区别：

      ①GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax请求中，这种区别对用户是不可见的。

      ②GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制）

      ③GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。

      ④GET方式和POST方式传递的数据在服务端的获取也不相同。在PHP中，GET方式可以用$_GET[]获取，而POST方式可以用$_POST[]获取。两种方式都可以通过$_REQUEST[]来获取

  3. $.getScript()方法和$.getJson()方法

    • $.getScript()`

    jQuery提供了$.getScript()方法来直接加载.js文件，与加载一个HTML片段一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行。 

    1
    2
    3
    4
    5
    $(function(){
      $("#send").click(function(){
          $.getScript("test.js");
      });
      })

与其他Ajax方法一样，$.getScript()方法也有回调函数，他会在 JavaScript文件成功载入后运行

  • $.getJSON()`

    ​ $.getJSON()方法用于加载JSON文件，与$.getScript()方法的使用方法相同。

    jQuery提供了回调函数，在回调函数里处理返回的数

  • $.each()`方法

    $.each()方法不同于jQuery对象的each()方法，它是一个全局函数，不操作jQuery对象，而是以一个数组或对象作为第一个参数，以一个回调函数作为第二个参数。回调函数拥有两个参数，第一个为对象的成员或数组的索引，第二个为对应变量或内容。

  1. $.ajax()方法

part 3 序列化元素

  1. serialize()方法
  2. serializeArray()方法
  3. $.param()方法

第九章 jQuery Mobile

  • HTML 5的简介

  • jQuery Mobile简介以及它的主要特性

  • jQuery的使用

    • 下载
    • 建议在页面中使用HTML 5标准的页面声明和标签，因为移动设备浏览器对HTML 5的支持程度要远远优于PC设备
    • 构建HTML模板，引入框架

  • data-role属性

  • data-inset属性

  • data-theme属性

  • 其他的框架

  • 例子：

    1
    2
    3
    4
    5
    <ul data-role="listview" data-inset="true" data-theme="e">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
    </ul>