jQuery 笔记

jQuery版本有很多，分为1.x 2.x 3.x

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

国内多数网站还在使用1.x的版本

- 查找元素的方法太少，麻烦。
- 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
- 有兼容性问题。
- 想要实现简单的动画效果，也很麻烦
- 代码冗余。

$(document).ready(function () {
  $('#btn1').click(function () {
    // 隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
    $('div').show(200);
  });

  $('#btn2').click(function () {
    $('div').text('我是内容');
  });
});

- 查找元素的方法多种多样，非常灵活
- 拥有隐式迭代特性，因此不再需要手写for循环了。
- 完全没有兼容性问题。
- 实现动画非常简单，而且功能更加的强大。
- 代码简单、粗暴。

// 第一种写法
$(document).ready(function () {});
// 第二种写法
$(function () {});

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。

jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

用原生JavaScript获取的DOM对象
    通过document.getElementById()  反馈的是元素(DOM对象)
通过document.getElementsByTagName()获取到的是什么？
    伪数组(集合)，集合中的每一个对象是DOM对象

jQuery对象用$()的方式获取的对象
jQuery对象又可以叫做包装集(包装的DOM对象的集合)

// DOM对象
var box = document.getElementById('box');
// 错误
box.text('hello');
// 正确
box.innerText = 'hello';

// jQuery对象，jQuery对象加前缀$，用以区分DOM对象
var $box = $('#box');
// 错误
$box.innerText = 'hello';
// 正确
$box.text('hello');

jQuery对象转换成DOM对象：
    jQuery对象.get(索引值);
    jQuery对象[索引值]
        jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式

DOM对象转换成jQuery对象：
    $(DOM对象) 只有这一种方法;

// name：需要设置的样式名称
// value：对应的样式值
$obj.css(name, value);
// 使用案例
$('#one').css('background', 'gray'); // 将背景色修改为灰色

// 参数是一个对象，对象中包含了需要设置的样式名和样式值
$obj.css(obj);
// 使用案例
$('#one').css({
  background: 'gray',
  width: '400px',
  height: '200px',
});

// name:需要获取的样式名称
$obj.css(name);
// 案例
$('div').css('background-color');

// name：需要添加的样式类名，注意参数不要带点.
$obj.addClass(name);
// 例子,给所有的div添加one的样式。
$('div').addClass('one');

// name:需要移除的样式类名
$obj.removeClass('name');
// 例子，移除div中one的样式类名
$('div').removeClass('one');

// name:用于判断的样式类名，返回值为true false
$obj.hasClass(name);
// 例子，判断第一个div是否有one的样式类
$('div').hasClass('one');

// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
$obj.toggleClass(name);
// 例子
$('div').toggleClass('one');

$obj.show([speed], [callback]);
// speed(可选)：动画的执行时间
// 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
// 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
// 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
// callback(可选):执行完动画后执行的回调函数

slideDown();
slideUp();
slideToggle(); // 同理
fadeIn();
fadeOut();
fadeToggle(); // 同理

$(selector).animate({ params }, [speed], [easing], [callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动）  可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）

// stop方法：停止动画效果
stop(clearQueue, jumpToEnd);
// 第一个参数：是否清除队列
// 第二个参数：是否跳转到最终效果

// $(htmlStr)
// htmlStr：html格式的字符串
$('<span-这是一个span元素</span-');

append  appendTo       // 在被选元素的结尾插入内容
prepend prependTo       // 在被选元素的开头插入内容
before              // 在被选元素之后插入内容
after               // 在被选元素之前插入内容

$('div').empty(); // 清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）
$('div').html(''); // 使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

$('div').remove();

// 复制$(selector)所匹配到的元素（深度复制）
// cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();

// 第一个参数：需要设置的属性名
// 第二个参数：对应的属性值
$obj.attr(name, value);
// 用法举例
$('img').attr('title', '哎哟，不错哦');
$('img').attr('alt', '哎哟，不错哦');

// 参数是一个对象，包含了需要设置的属性名和属性值
$obj.attr(obj);
// 用法举例
$('img').attr({
  title: '哎哟，不错哦',
  alt: '哎哟，不错哦',
  style: 'opacity:.5',
});

// 传需要获取的属性名称，返回对应的属性值
$obj.attr(name);
// 用法举例
var oTitle = $('img').attr('title');
alert(oTitle);

// 参数：需要移除的属性名，
$obj.removeAttr(name);
// 用法举例
$('img').removeAttr('title');

// 设置属性
$(':checked').prop('checked', true);
// 获取属性
$(':checked').prop('checked'); // 返回true或者false

$obj.val()        获取或者设置表单元素的value属性的值
$obj.html()     对应innerHTML
$obj.text()        对应innerText/textContent，处理了浏览器的兼容性

// 带参数表示设置高度
$('img').height(200);
// 不带参数获取高度
$('img').height();

// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();

innerWidth();
innerHeight(); // 方法返回元素的宽度/高度（包括内边距）。
outerWidth();
outerHeight(); // 方法返回元素的宽度/高度（包括内边距和边框）。
outerWidth(true);
outerHeight(true); // 方法返回元素的宽度/高度（包括内边距、边框和外边距）。

// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(window).scrollLeft();

// 获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
// 获取相对于其最近的有定位的父元素的位置。
$(selector).position();

click(handler); // 单击事件
mouseenter(handler); // 鼠标进入事件
mouseleave(handler); // 鼠标离开事件
// 缺点：不能同时注册多个事件

// 第一个参数：事件类型
// 第二个参数：事件处理程序
$('p').bind('click mouseenter', function () {
  // 事件响应方法
});
// 缺点：不支持动态事件绑定

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$('.parentBox').delegate('p', 'click', function () {
  // 为 .parentBox下面的所有的p标签绑定事件
});
// 缺点：只能注册委托事件，因此注册时间需要记得方法太多了

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on('click', function () {});

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on('click', 'span', function () {});

// 事件委托的原理
var ul = document.querySelector('#ul');
ul.onclick = function (e) {
  // console.log(e.target.tagName);
  if (e.target.tagName.toLowerCase() === 'li') {
    console.log(e.target);
  }
};

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

$(selector).unbind(); // 解绑所有的事件
$(selector).unbind('click'); // 解绑指定的事件

$(selector).undelegate(); // 解绑所有的delegate事件
$(selector).undelegate('click'); // 解绑所有的click事件

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off('click');

$(selector).click(); // 触发 click事件
$(selector).trigger('click');

screenX, screenY; // 对应屏幕最左上角的值
clientX, clientY; // 距离页面左上角的位置（忽视滚动条）
pageX, pageY; // 距离页面最顶部的左上角的位置（会计算滚动条的距离）

event.keyCode; // 按下的键盘代码
event.data; // 存储绑定事件时传递的附加数据

event.stopPropagation(); // 阻止事件冒泡行为
event.preventDefault(); // 阻止浏览器默认行为
return false; // 既能阻止事件冒泡，又能阻止浏览器默认行为。

end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function (index, element) {});

var c = $.noConflict(); // 释放$的控制权,并且把$的能力给了c

$.method = fn; // 静态方法
$.fn.method = fn; // 实例方法

(function ($) {
  $.add = function (a, b) {
    return a + b;
  };
})(jQuery);

$.add(5, 6);

(function ($) {
  // {tabMenu: '#aa'}
  $.tab = function (options) {
    // 默认参数
    var defaults = {
      tabMenu: '#tab',
      activeClass: 'active',
      tabMain: '#tab-main',
      tabMainSub: '.main',
      selectedClass: 'selected',
    };
    // 把options中的属性，把对应属性的值赋给defaults对应的属性
    // defaults.tabMenu = options.tabMenu || defaults.tabMenu;
    // for(var key in options) {
    //   defaults[key] = options[key];
    // }
    $.extend(defaults, options);

    $(defaults.tabMenu).on('click', 'li', function () {
      $(this).addClass(defaults.activeClass).siblings().removeClass(defaults.activeClass);

      //
      var index = $(this).index();
      //
      $(defaults.tabMain + ' ' + defaults.tabMainSub)
        .eq(index)
        .addClass(defaults.selectedClass)
        .siblings()
        .removeClass(defaults.selectedClass);
    });
  };
})(window.jQuery);

(function ($) {
  // 内部的变量，外部无法访问，防止变量名冲突
  var a = 0;
  // 给$增加了一个实例方法
  $.fn.table = function (header, data) {
    var array = [];
    array.push('<table>');
    array.push('<tr>');

    // 生成表头
    $.each(header, function () {
      array.push('<th>' + this + '</th>');
    });
    array.push('</tr>');

    // 生成数据行
    $.each(data, function (index) {
      // this是当前遍历到的数组中的每一个对象
      // 拼数据行
      array.push('<tr>');
      array.push('<td>' + (index + 1) + '</td>');

      // 遍历对象，拼表格
      for (var key in this) {
        array.push('<td>' + this[key] + '</td>');
      }

      array.push('</tr>');
    });
    array.push('</table>');

    this.append(array.oin(''));
  };
})(window.jQuery);