【前端】之jQuery基础知识

jQuery 简介

• 在项目中引入jQuery：
  • 去jQuery官网下载jQuery包：jquery-3.2.1.min.js
  • 将下载的jQuery包添加到项目目录中
  • 在标签下添加jQuery引用：<script src='jquery-3.2.1.min.js'></script>
• jQuery和$没有区别，具体体现在：
  • console.log($===jQuery)返回true
  • $('div')和jQuery('div')效果相同
• jQuery文件的差异：
  • jquery-xx.js：代码格式清晰，可读性高，参数命名规范，建议在开发时使用
  • jquery-xx.min.js：代码格式混乱，可读性差，参数命名不规范，但占空间小，建议发布上线时使用
• jQuery的特性：
  • 链式编程：jQuery中的不同方法可以在一条语句中相继进行
    • jQuery中的所有设置方法，最后都会return this;
    • jQuery中的所有获取方法，最后都会end();，返回匹配元素之前的状态
  • 隐式迭代：jQuery可以直接在数组对象上进行操作，而不需要遍历数组中的每一个元素

jQuery 基础语法

• 入口函数（写法1）：$(document).ready(function() { ...... });
• 入口函数（写法2）：$(function() { ...... });
• 页面加载完成后执行的方法：$(window).ready(function() { ...... });
• 获取元素：var jqdom = $('div/.box/#box01');
• 元素的点击事件：jqdom.click(function() { ...... });
• 显示元素：jqdom.show();
• 在1秒钟的动画之后显示元素：jqdom.show(1000);
• 隐藏元素：jqdom.hide();
• 在1秒钟的动画之后隐藏元素：jqdom.hide(1000);
• 设置innerHTML：jqdom.html('hahahaha');
• 为元素设置样式（JSON）：jqdom.css({"width":100,"background-color":"red"});
• each遍历：$('li').each(function(index, element){ ...... });

jQuery 和JS中DOM的区别

• 使用原生JS获取到的DOM就是DOM对象本身
• 使用jQuery获取到的DOM是一个数组，DOM对象仅仅是这个数组中的一部分
• 原生JS和jQuery中DOM的转换：
  • 原生JS对象转换成jQuery对象：jqdom = $(jsdom);
  • jQuery对象转换成原生JS对象：jsdom = jqdom[0];或者jsdom = jqdom.get(0);

jQuery 选择器

• 基本选择器：$("div")、$(".box")、$("#box01")
• 层级选择器：$("#box01 li")、#box01>ul>li
• 过滤选择器：$("li:eq(2)")、$("li:odd")、$("li:even")
• 筛选选择器：
  • $("#box01").find("li")：获取id为box01的盒子中的所有li标签（子子孙孙都算）
  • $("#box01").children()：获取id为box01的盒子的所有子元素（仅子元素）
  • $("#box01").children("ul")：获取id为box01的盒子的ul子元素（仅子元素）
  • $("#box01").children().eq(2)：获取id为box01的盒子下的第二个子元素（仅子元素）
  • $("#box01").siblings()：获取id为box01的盒子的所有兄弟元素
  • $("#box01").next()：获取id为box01的盒子的下一个兄弟元素
  • $("#box01").prev()：获取id为box01的盒子的上一个兄弟元素
  • $("#box01").parent()：获取id为box01的盒子的父元素

jQuery 样式操作

• 设置单个样式：$("#box01").css("color", "red");
• 设置多个样式：$("#box01").css({"color":"red", "width":100});
• 获取样式值：var width = $("box01").css("width");
• 添加类样式：$("#box01").addClass("myClass");
• 移除类样式：$("#box01").removeClass("myClass");
• 有无类样式：var flag = $("#box01").hasClass("myClass");
• 切换类样式：$("#box01").toggleClass("myClass");

jQuery 属性操作

• 添加属性：$("li").attr("aaa", 111);
• 获取属性：var aaa = $("li").attr("aaa");
• 移除属性：$("li").removeAttr("aaa");
• 当涉及到值为boolean类型的属性时，需要使用$("checkbox").prop("checked", true);
• 获取表单value属性的值：$("input").val();
• 设置表单value属性的值：$("input").val("XXXX");
• 获取表单中的文本：$("input").text();
• 设置表单中的文本：$("input").text("XXXXX");

jQuery 尺寸位置操作

• 获取宽度：var width = $("div").width();
• 设置宽度：$("div").width(200);
• 获取高度：var height = $("div").height();
• 设置高度：$("div").height(200);
• 上面方法获取到的宽度和高度与padding、margin、border均无关
• 获取距离网页顶端/左端的距离：var top/left = $("div").offset().top/left;
• 获取距离父盒子顶端/左端的距离：var top/left = $("div").position().top/left;，只与left、top属性有关，与margin、padding都无关
• offset和position只能获取，不能设置
• 获取页面被卷去的距离：var top/left = $(document).scrollTop()/scrollLeft();
• 设置页面被卷去的距离：$(document).scrollTop(100)/scrollLeft(100);

jQuery 动画

• 显示/隐藏动画：
  • 显示、隐藏的方法：show()、hide()、toggle()，可以有很多参数种类
  • $("#box01").show();：直接显示
  • $("#box01").show(1000);：通过一个1秒的动画显示出来
  • $("#box01").show("fast");：可以填入fast、normal和slow
  • $("#box01").show(XX, function() { ...... });：显示完成后回调函数
• 滑入/滑出动画：
  • 滑入、滑出的方法：slideDown()、slideUp()、slideToggle()
  • 滑入、滑出操作中的参数种类与显示、隐藏操作中的相同
• 淡入/淡出动画：
  • 淡入、淡出的方法：fadeIn()、fadeOut()、fadeToggle()
  • 淡入、淡出操作中的参数种类与显示、隐藏操作中的相同
  • 这里可以支持设置淡入/淡出的透明度，方法：fadeTo(XX, 0.5, function() { ... })
• 自定义动画：
  • 语法：JQ对象.animate(参数JSON串, 毫秒值, 回调函数);
  • 当前jQuery版本支持的参数见这个网页
• 停止动画：
  • 停止动画的方法：stop()，可以有两个参数，如果不写，则默认都是false
  • 第一个参数：后续动画是否不再执行
  • 第二个参数：是否要执行完当前动画

jQuery 节点操作

• 创建节点：
  • 方法1：var node = $("<li>哈哈哈</li>");
  • 方法2：var node = $("ul").html("<li>嘻嘻嘻</li>");
• 添加节点：
  • 方法1：$("ul").append(newLi);，将新元素添加到容器最后面
  • 方法2：newLi.appendTo($("ul"));
  • 方法3：$("ul").prepend(newLi);，将新元素添加到容器最前面
  • 方法4：newLi.prependTo($("ul"));
  • 方法5：$("oldLi").after(newLi);，将newLi添加到oldLi之后
  • 方法6：$("oldLi").before(newLi);，将newLi添加到oldLi之前
• 清空节点：
  • 方法1：$("ul").html("");
  • 方法2：$("ul").empty();
  • 方法3：$("li").remove();，这种方法用于自己清除自己
• 复制节点：var newNode = oldNode.clone();

jQuery 事件机制

• 事件绑定：
  • 简单事件绑定：与JS中的方法相同，去掉on，改成方法，如onclick -> click()
  • bind方式绑定事件：$('.box').bind('click mouseenter', function() { ...... });
  • delegate方式绑定事件：$(document).delegate('.box', 'click mouseenter', function() { ...... });
  • on方式绑定事件：
    • 语法：$(父容器).on('事件', '子元素', JSON串, function(event) {})，代码如下：

      $(document).on('click mouseenter', '.box', {'name': 111}, function(e) {
          alert(e.data.name); // 通过event.data可以获取JSON串中传递的参数
      });
      

    • 子元素参数可以不写，如果不写，则视为父容器触发事件
    • JSON串参数可以不写，如果不写，则视为没有传递参数
• 事件解绑：
  • unbind方式解绑事件：$('.box').unbind('mouseenter');
  • undelegate方式解绑事件：$(document).undelegate('.box', 'mouseenter');
  • off方式解绑事件：$('document').off('mouseenter', '.box');
  • 一般情况下，bind与unbind、delegate与undelegate、on与off是一一对应的
• 事件触发：
  • 事件触发：当达到某种要求之后触发事件
  • 语法1：$('.box').click();，这种方法只能触发系统方法，如click等
  • 语法2：$('.box').trigger('myevent');，这种方法可以触发自定义方法，代码如下：

    var num = 0;
    var timer = null;
    $(document).ready(function() {
    	$('div').on('myevent', function() {
    		alert('number reached 30...');
    	});
    	timer = setInterval(function() {
    		console.log(1);
    		num++;
    		if(num === 30) {
    			$('div').trigger('myevent');
    		}else if(num > 30) {
    			clearInterval(timer);
    		}
    	}, 100);
    });
    

  • 语法3：$('.box').triggerHandler('focus');，同trigger，但不会触发浏览器默认事件
  • 以上三种触发方法中，第一、第二种会触发浏览器事件，第三种不会触发浏览器事件
  • 触发浏览器事件：例如语法3中的focus，当用前两种方法触发后，会执行focus方法获取焦点，而使用第三种方法触发后，不会执行focus方法获取焦点
• jQuery事件对象：
  • $(document).on('click', '.box', {}, function(e) {});，一些事件对象如下
  • e.data：传入事件的参数
  • e.currentTarget：触发事件的元素，jQuery的DOM对象
  • e.target：触发事件的元素，javascript的DOM对象
  • e.pageX和e.pageY：发生事件时鼠标距离文档顶部和左部的距离
  • e.type：事件类型，click、mouseenter等
  • e.which：鼠标按键类型，左键1，中键2，右键3
  • e.keyCode：按下键盘的键值，如果没有按键盘则返回undefined

jQuery 多库共存

• 多库共存：当多个库中的类型或方法发生冲突时，需要用到多库共存
• 例如：当项目中有多个jQuery版本时，版本之间会发生覆盖（通常是最后定义的版本覆盖之前的所有版本），如果想要使用之前版本的特性，则需要设置当前版本放弃某个类型或方法的使用权
• 多库共存的解决方案代码（本例中设置对$的使用权）：

  var my$ = $.noConflict(true); 
  // 让当前版本放弃$符的使用权，同时将当前版本的$符号重定义为my$
  // 以后如果想用当前版本的$功能，则可以使用my$代替，如：my$(document)
  

• 补充：查看某方法或类型的版本（如$）：console.log($.fn.jquery);

jQuery 插件

• 可以去这个网站搜索、下载搜许插件
• 例如：原生jQuery不支持颜色变换动画，因此，我们需要使用插件来实现这个功能
• 在网站搜索框中输入颜色动画，点击搜索，即可看到所有颜色动画插件
• 每个插件中都有演示按钮，点击可以查看插件效果
• 点击立即下载即可下载插件
• 下载后解压，用Sublime等工具打开index.html文件，查看插件用法