适合初学者的一篇关于jQuery教程

$()方法

• 在 jQuery 中，只有一个全局变量 $ ，这是 jQuery 的一大特点，避免了全局变量的污染
• 最开始变量不叫做 $ ，叫做 jQuery() 方法，在库中这两个名字是并存的，都可以使用。
• 经典错误：$ 未定义

jQuery对象

• $() 方法获取到的内容叫做 jQuery 对象
• 内部封装了大量的属性和方法，比如 .css() 和 .html() 和 .animate() 等方法都是 jQuery 对象的方法
• 通过 $() 获取的元素是一组元素，进行操作时是批量操作

JQ对象和原生对象的转换

• jQuery 对象得到后，只能使用 jQuery 对象的方法，不能使用原生 js 元素对象的方法
• 原生 js 对象也不能使用 jQuery 的方法
• jQuery 对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的 jQuery 的方法和属性

jQuery 对象中原生 js 对象的个数

• $().length
• $().size

互相转换

• jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象
• 原生转 jQuery：将原生对象用 $() 方法包裹即可

jQuery选择器

CSS2.1 和 CSS3 选择器

• 参数：必须是字符串格式的选择器

筛选选择器

• 也叫过滤选择器，jQuery 中新增的自己的选择器
• 用法：在基础选择器后面增加一些筛选的单词，筛选出前面选择器的选中内容中一部分。或者可以作为高级选择器的一部分

html() 方法

html() 方法相当于原生 JS 中的 innerHTML 属性，用来获取或设置标签内部内容

方法可以传递一个参数，自定义的字符串内容

• 获取：文本和内部标签
  • 语法：jQuery对象.html();
• 设置：若设置标签时，标签会被渲染
  • 语法：jQuery对象.html("文本内容");

text() 方法

text() 方法相当于原生 JS 中的 innerText 属性，用来获取或设置标签内部文字

• 获取：仅仅是文本
  • 语法：jQuery对象.text();
• 设置：若设置标签时，标签会被当做普通文本
  • 语法：jQuery对象.text("文本内容");

val() 方法

val() 方法相当于原生 JS 中的 value 属性，用来获取或设置表单元素内容

• 获取：表单元素的 value
  • 语法：jQuery对象.val();
• 设置：表单元素的 value
  • 语法：jQuery对象.val("文本内容");

attr() 和 removeAttr() 方法

attr() 方法

attr：全称 attribute 属性的意思，用来获取或设置标签的属性值

• 设置标签的属性
  • 语法：jQuery对象.attr(name, value);
• 获取标签属性值
  • 语法：jQuery对象.attr(name);

removeAttr() 方法

• 作用：移除标签的熟悉
  • 语法：removeAttr(name);

prop() 方法

针对：selected、checked、disabled等表单元素的属性。此类属性的属性值与属性名相同

• 获取
  • 语法：$('input').prop('属性名')
• 设置
  • 语法：$('input').prop('属性名', 值)

css() 方法

• jQuery 对象有一个 css() 的方法，用于调用 css 属性值或者更改 css 属性值
• 语法： jQuery 对象.css(name, value);
• 参数1：字符串格式的 css 样式属性名
• 参数2：设置或更改的属性值

注意

• 一个参数：表示调用 css 属性的值，得到的是某个元素的计算后样式，值为字符串格式
• 两个参数：表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串
• css() 方法的第一个参数，复合属性的单一属性写法可以是驼峰命名法，也可以是横线写法
• 可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式，传给 css() 的参数

操作类名方法

• addClass() 添加类名
  • 语法：jQuery对象.addClass('类名');
  • 参数：字符串格式的类名
• removeClass() 移除类名
  • 删除指定的类名
  • 语法：jQuery对象.removeClass();
  • 参数：字符串格式的类名
  • 不传参数，表示删除所有的类名
• toggleClass() 类名切换
  • 若这个类名存在，则会移除该类名。否则添加该类名
  • 语法：jQuery对象.toggleClass('类名');
  • 参数：字符串格式的类名
  • 优点：三个方法只操作参数部分的类名，不影响原有的其他类名

类名判断方法 hasClass

• 语法：jQuery对象.hasClass('类名');
• 返回值：true 和 false

jQuery 常用事件方法

• jQuery 对象封装了一系列的事件方法
• 事件方法与原生 JS 事件方法名称类似，不需要写 on
• 事件方法需要 jQuery 对象打点调用，小括号内的参数是事件函数
• 例如点击事件：click()

mouseenter() 方法

• jQuery 中有自己的事件方法
• 鼠标进入一个元素触发的事件

mouseleave() 方法

• jQuery 中有自己的事件方法
• 鼠标离开一个元素触发的事件

对比

注意：mouseenter 和 mouseleave 没有事件冒泡
在使用时替换 mouseover 和 mouseout 更加合适

hover() 方法

• hover 事件相当于将 注意：mouseenter 和 注意：mouseleave 事件进行了合写
• 参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行事件函数

节点关系查找方法1

$(this) 自己

• 在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可以使用 JQ 的方法

parent() 父级

• jQuery 对象都有一个 parent() 方法，得到的是自己的父亲级
• 父级得到的也是一个 jQuery 对象，直接继续打掉调用 JQ 方法和属性

children() 子级

• jQuery 对象内部有一个 children() 方法，可以得到自己的所有子级元素组成的 jQuery 对象
• 得到的子级组成的 jQuery 对象可以继续调用 JQ 方法和属性
• 获得子级时，不限制标签类型
• children() 可以传参数：参数是字符串格式的选择器，在选择中所有子级的情况下，保留满足选择器的部分，进行二次选择

siblings() 兄弟

• jQuery 对象通过调用 siblings() 方法可以的道出了自己以外的所有同级元素（兄弟）组成 jQuery 对象，找到的只能是亲的兄弟，不能是叔叔家的兄弟
• 得到 jQuery 对象可以继续使用 JQ 的方法和属性
• siblings() 方法得到的 jQuery 对象可以进行二次选择，通过给参数传递字符串格式的选择器

链式调用

• jQuery 对象调用任何方法（除了节点关系方法）执行完后，方法都会有一个返回值，返回值就是 jQuery 对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用 JQ 的方法和属性
• 可以使用 jQuery 对象进行连续打点调用

其他节点关系方法

find() 后代元素

• jQuery 对象可以利用 find() 方法，穿第一个参数，参数部分规定的选择器，查找范围是 jQuery 对象的所有后代
• 参数是字符串格式的选择器

兄弟元素

紧邻的兄弟元素方法

• next() 下一个兄弟
• prev() 前一个兄弟

多选方法

• nextAll() 后面所有兄弟
• prevAll() 前面所有兄弟
• 通过传递参数可以进行二次选择，参数是字符串格式的选择器，在前面或后面兄弟中选中符合选择器规定的部分

parents() 祖先级
通过该方法得到的是指定对象的包含 body 在内的所有祖先级元素组成的 jQuery 对象

• 通过传参进行二次选择，参数位置是字符串格式的选择器

eq() 大排序

• jQuery 中获得的对象，内部包含选择的一组与安生 JS 对象， 在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系
• eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标

index() 在兄弟中的排序

jQuery 对象调用 index() 方法时，得到的是它自己在 HTML 结构中的兄弟中的下标位置，与 jQuery 大排序没有关系

	var $ps = $("p");
	// index() 方法获取下标时，排序跟新生成的 jQuery 对象无关
	// 它依赖于自身元素在父级中同级元素之间的位置
	// 添加点击事件
	$ps.click(function () {
    
    
		// 点击输出自己的 index() 的值
		console.log($(this).index())
	})

排他思想、简易 tab 栏

Tab 栏特效中的排他

• 自己的级别的排他：给自己 this 添加 current 类名，让其他兄弟删除 current 类
• 对应的部分的排他：给对应位置的元素添加 current，其他的兄弟删除 current 类
• 找对应关系，使用的是自己的 index() 下标，让另一组中下标相同的项作为对应项
• 通过选中另一组的对应项利用 eq() 方法选择下标项

each() 遍历

• 参数是一个函数
• 作用：就是对 jQuery 对象中的元素每一个都执行函数内部的操作
• each 方法的基本原理就是 for 循环，从对象的下标为 0 的项一直遍历到最后一项，然后对每一项进行操作

优点

• each的函数内部，也有一个this，指向的是进来遍历的每一次的元素
• each的函数可以传一个参数i, i表示的是这一次的遍历对象在整体的jQuery对象大排队中的下标位置

    // 选择所有的 p 标签
		var $ps = $(".box p")
		// 添加点击事件
		// $ps.click(function () {
    
    
		// 	// 获取元素在自己的父级中 兄弟间的下标
		// 	console.log($(this).index())
		// })
		// 通过each 方法进行操作
		$ps.each(function (i) {
    
    
			// i 记录的是这一次遍历时当前元素在 jQuery 对象大排序中的位置
			$(this).click(function () {
    
    
				// 这个内部的this 就是事件源
				console.log(i);
				console.log($(this).index())
			})

		})

表格格列变色

    // 选中偶数的列，变色
    $("td:even").css("background","skyblue")

    // 可以将每一行作为单独操作单位，让每一行中的列进行隔列变色
    // 我们一提到对某个元素内部或内部的子元素进行一些操作，首先想到 each 方法
    var $tr = $("tr");
    $tr.each(function () {
    
    
      // 让子级所有的列隔列变色
      $(this).children(":odd").css("background","skyblue")
    })

    // 方法2
    $("td").each(function () {
    
    
      // 可以判断 当前这个 td 在父级中所处的位置
      // index() 
      if ($(this).index() % 2 === 0) {
    
    
        $(this).css("background","skyblue")
      }
    })

jQuery 入口函数

    // onload 事件在加载时，指的是页面中多有的资源【DOM树、音频、视频、图片等】加载完毕后，才能触发
    // 一个页面中只能出现一次
    window.onload = function () {
    
    
        console.log(1);
        var btn = document.getElementsByTagName("input")[0];
        console.log(btn);
       };

    // jQuery 中的入口函数
    // 仅仅需要等待页面中的 DOM 树加载完毕就可以执行了
    $(document).ready(function () {
    
    
        console.log(2);
        var btn = document.getElementsByTagName("input")[0];
        console.log(btn);
    })

    // 简化
    // 在一个页面中，可以书写多个 jQuery 的入口函数，执行顺序按照前后加载顺序执行
    $(function () {
    
    
        console.log(3);
        var btn = document.getElementsByTagName("input")[0];
        console.log(btn);
   })
    // $(function () {
    
    

    // })

show() 和 hide() 方法

• hide()：元素隐藏，隐藏的前提必须是元素 display:block;
• sgow()：元素显示，显示的前提必须是元素 display:none;
• toggle()：在元素隐藏和显示之间进行切换
• 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画

参数

• 如果不传参数：直接显示和隐藏，没有过渡动画
• 如果传递参数：
  • 单词格式：“slow”, “normal”, “fast”
  • 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
• 过度时间内，伴随着宽度和高度以及透明度的变化

    // 获取元素
    var $pic = $("#pic")
    var $btn1 = $("#btn1")
    var $btn2 = $("#btn2")
    var $btn3 = $("#btn3")

    // 添加点击事件，让图片实现显示和隐藏
    $btn1.click(function () {
    
    
        // $pic.hide("slow");
        $pic.hide(1000);
    })
    $btn2.click(function () {
    
    
        $pic.show("normal");
    })
    $btn3.click(function () {
    
    
        $pic.toggle("fast");
    })

slideDown() 和 slideUp() 方法

• slideDown()：滑动显示（方向不一定）
• slideUp()：滑动隐藏
• slideToggle()：滑动切换
• 让元素在 display 属性的 block 和 none 之间进行切换

参数

• 如果不传参数：默认的过渡时间为 400毫秒
• 如果传递参数：
  • 单词格式：“slow”, “normal”, “fast”
  • 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画

注意

• 如果元素没有设置过宽高就不会出现滑动的效果
• 如果元素设置了高度和宽度，会进行上下垂直方向的滑动
• 动画效果：高度属性在0到设置值之间的变化，没有透明度动画
• 如果元素设置了定位，偏移量方向如果是 bottom 参与了，滑动方向会发生变化

    // 获取元素
    var $pic = $("#pic")
    var $btn1 = $("#btn1")
    var $btn2 = $("#btn2")
    var $btn3 = $("#btn3")

    // 添加点击事件，让图片实现滑动显示和隐藏
    $btn1.click(function () {
    
    
      $pic.slideUp(1000)
    })
    $btn2.click(function () {
    
    
      $pic.slideDown(1000)
    })
    $btn3.click(function () {
    
    
      $pic.slideToggle(1000)
    })

fadeIn() 和 fadeOut() 方法

• fadeIn()：淡入，透明度逐渐增大最终显示
• fadeOut()：淡出，透明度逐渐降低最终隐藏
• fadeToggle()：切换效果
• fadeTo()：淡入货单出到某个指定的透明度
• 动画效果，执行的是透明度动画，也是在 display 属性的 block 和 none 之间切换

参数

• 如果不传参数：默认的过渡时间为 400 毫秒
• 如果传递参数：
  • 单词格式：“slow”, “normal”, “fast”
  • 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画

    // 获取元素
    var $pic = $("#pic")
    var $btn1 = $("#btn1")
    var $btn2 = $("#btn2")
    var $btn3 = $("#btn3")
    var $btn4 = $("#btn4")

    // 添加点击事件，让图片实现淡入显示和淡出隐藏
    $btn1.click(function () {
    
    
      $pic.fadeOut("slow")
    })
    $btn2.click(function () {
    
    
      $pic.fadeIn(1000)
    })
    $btn3.click(function () {
    
    
      $pic.fadeToggle()
    })
    $btn4.click(function () {
    
    
      $pic.fadeTo(500,0.5)
    })

animate() 动画方法

• 作用：执行 CSS 属性集的自定义动画
• 语法：$(selector).animate(styles, speed, easing, callback);
• 参数1：css 的属性名和运动结束位置的属性值的集合
• 参数2：可选，规定动画的素的，默认的是"normal"。其他值：“slow”,“normal”,“fast”，数字格式，单位为毫秒
• 参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing 和 linear
• 参数4：可选，animate 函数执行完之后，要执行的函数

动画排队

• 同一个元素对象身上，如果定义了多个动画，动画会排队等待执行
• 如果是不同的元素对象都有动画，不会出现排队机制
• 如果是其他的非运动的代码，也不会等待运动完成
• 之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队
• 同一个元素身上的运动，可以简化成链式调用的方法

动画延迟 delay()

• delay：延迟的意思
• 将 delay() 设置在某个运动方法之前，表示后面的运动要在规定的时间之后在执行，有延迟运动的效果
• 参数：时间的数值，表示延迟的时间
• 除了 animate 方法之外，其他的运动方法也有延迟效果

stop() 停止动画

• stop()作用：设置元素对象身上的排队的动画以何种方式进行停止。
• 有两个参数，都是布尔值
• 参数1：设置是否清空后面的动画排队，如果是 true 表示清空，如果是 flase 表示不清空至停止当前的一个动画
• 参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位置，如果是 flase 表示不完成当前动画，立即停止在当前位置

    var $box1 = $(".box1");
    var during = 2000;
    // box1 有四个运动进行排队
    $box1.animate({
    
    "left" : 500},during);
    $box1.animate({
    
    "top" : 500},during);
    $box1.animate({
    
    "left" : 0},during);
    $box1.animate({
    
    "top" : 30},during);

    // 添加按钮点击事件
    // 清空动画，走到结尾
    $("#btn1").click(function () {
    
    
        $box1.stop(true,true)
    })

    // 清空动画，停在当前
    $("#btn2").click(function () {
    
    
        $box1.stop(true,false)
    })

    // 不清空后面的动画，当前运动立即走到结尾
    $("#btn3").click(function () {
    
    
        $box1.stop(false,true)
    })

    // 不清空后面的动画，当前运动立即停止在当前位置
    $("#btn4").click(function () {
    
    
        $box1.stop(false,false)
    })

    // 在实际工作中，一般要求会清空后面的动画，当前动画要停止在当前的位置
    // 更多时候使用 stop(true)

清空动画排队

• 如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队
• 需要去清除排队的动画，进行防骚扰操作

方法

• 利用stop()方法
  • 在每一个运动函数之前都增加一个 stop(true)，表示在运动执行之前，会讲前面排队的动画清空，然后停止在当前位置
• 利用函数节流，如果元素在运动，直接 reutrn，不要执行后面的运动代码
  • 每个 jQuery 对象，都能调用一个 is() 方法，作用是显示元素对象的某种状态。
  • 如果参数位置是 is(":animated") 返回值是布尔值，true表示正在运动，false表示没有运动

    var $box1 = $(".box1");
    var during = 1000;        

    // 将运动设置给事件，事件多次触发会积累动画出现动画排队
    // 清除动画排队方法1： 在每一次新的运动开始之前，去停止之前所有的动画排队
    // $box1.mouseenter(function () {
    
    
    //     $(this).children().stop(true).slideUp(during)
    // })
    // $box1.mouseleave(function () {
    
    
    //     $(this).children().stop(true).slideDown(during)
    // })

    // 清空动画排队方法2：使用函数节流方式
    $box1.mouseenter(function () {
    
    
        // 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
        if ($(this).children().is(":animated")) {
    
    
            return;
        }
        // 如果走到这里，说明元素没有在运动，就可以添加新运动
        $(this).children().stop(true).slideUp(during)
    })
    $box1.mouseleave(function () {
    
    
        // 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
        if ($(this).children().is(":animated")) {
    
    
            return;
        }
        $(this).children().stop(true).slideDown(during)
    })

jQuery 创建、追加元素方法

创建元素

语法：$('<li></li>')

追加元素1

• 向父元素最后追加
  • 语法：父元素JQ对象.append(新创建的JQ对象);
  • 语法：新创建JQ对象.appendTo('父元素选择器' 或 父元素JQ对象);
• 向父元素最前面追加
  • 语法：父元素JQ对象.prepend(新创建的JQ对象);
  • 语法：新创建JQ对象.prependTo('父元素选择器' 或 父元素JQ对象);

追加元素2

• 向元素后面追加新的兄弟
  • 语法：JQ对象.after(新创建的JQ对象);
  • 语法：新创建JQ对象.insertAfter('选择器' 或 JQ对象);
• 向元素前面追加新的兄弟
  • 语法：JQ对象.before(新创建的JQ对象);
  • 语法：新创建JQ对象.insertBefore('选择器' 或 JQ对象)

jQuery 删除、清空元素

删除元素

• 语法：JQ对象.remove();
• 删除谁就让谁调用这个方法

清空元素

• 清空方式1：JQ对象.empty()；推荐使用，清空内部的所有元素及元素相关的事件
• 清空方式2：JQ对象.html(’’)；仅仅清空内部的元素，不清理内存中的元素的事件

jQuery 克隆元素

• 语法：JQ对象.clone(布尔值); 返回克隆好的元素;
• 参数：默认是false，表示仅仅克隆内容。true，克隆内容和事件

操作元素尺寸方法

width() 和 height() 方法

操作的大小仅仅是内容部分

• 设置：
  • 语法：jQuery 对象.width(数字);
• 获取：
  • 语法：jQuery 对象.width();

innerWidth() 和 innerHeight() 方法

操作的大小是内容部分 + padding

• 设置：
  • 语法：jQuery 对象.innerWidth(数字);
• 获取：
  • 语法：jQuery 对象.innerWidth();

outerWidth() 和 outerHeight() 方法

操作的大小是内容部分 + padding + border

• 设置：
  • 语法：jQuery 对象.outerWidth(数字);
• 获取：
  • 语法：jQuery 对象.outerWidth();

jQuery 操作元素的位置

获取元素距离文档的位置

• 语法：jQuery 对象.offset();
• 返回一个对象，对象中包含了元素的位置
• 注意：offset() 方法获取的元素的位置，永远参照文档，和定位没有关系

距离上级定位参考元素的位置

• 语法：jQuery 对象.position();
• 返回一个对象，对象中包含了元素的位置
• 注意：position() 方法获取的元素的位置，参照最近的定位元素（和定位有关系）

操作滚动条卷走的距离

• 设置：
  • 语法：jQuery 对象.scrollTop(数字);
• 获取：
  • 语法：jQuery 对象.scrollTop();

on 方法注册事件

• 注册简单事件语法：jQuery 对象.on('事件名', 事件处理程序);
• 事件委托的实现：jQuery 对象.on('事件名', 选择器, 事件处理程序);
  • 选择器：子孙选择器
• 注意：在事件处理程序中，this 代表的是子孙元素（所点最先出发的）

on 方法解除事件绑定

• 解除简单的事件：jQuery 对象.off('事件名', 事件处理程序名称);
• 解除事件委托注册的事件：jQuery 对象.off('事件名', 选择器, 事件处理程序名称);

tigger 方法触发事件

语法：jQuery 对象.trigger('事件名');

事件对象

• 事件处理的第一个形参 e

鼠标事件对象相关的属性

• 事件对象.clientX/Y 参照浏览器
• 事件对象.pageX/Y 参照文档
• 事件对象.offsetX/Y 参照元素

键盘事件对象相关的属性

• 事件对象.keyCode 返回建码数字
• 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值。检测是否按下（true）

公共的属性或方法

• 属性

  • 事件对象.target 最初触发事件的 DOM 元素
  • 事件对象.currentTarget 在事件冒泡阶段中的当前 DOM 元素

• 方法

  • 事件对象.preventDefault() 阻止默认行为
  • 事件对象.stopPropagation() 阻止事件冒泡

多库共存问题

关于 $ 冲突的问题

• 解决方案1：
  • jQuery 中不使用 $ 使用 jQuery
• 解决方法2：
  • jQuery 库释放 $ 符合的使用权，用其他简单的符号代替
  • jQuery.noConflict(); 释放 $ 把 $ 代表的函数返回给用户，用户可以用其他变量接受

jQuery 插件使用方法

如何获取插件

• 百度搜索、github搜索
• 看技术文章
• 跟别人交流
• jQuery 插件库之家：http://www.htmleaf.com

插件使用方法

• 找到并且下载插件
• 在项目外写一个 demo （先学会使用，然后再加入项目中）
• 看源码，看文档

注意

• 复制结构，保证结构关系是一致的。标签名不一致无所谓
• 样式，可以选择复制，也可以定义自己需要的样式
• 先引入 jQuery 文件，在引入插件库文件，再去使用
• 复制源代码或看文档使用