jQuery 的基本使用

jQuery 的入口函数

$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
 }) ;

• 相当于原生 js 中的 DOMContentLoaded。
• jQuery是等 DOM 结构渲染完毕即可执行内部代码，不管外部资源。
• 原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

jQuery 对象和 DOM 对象

区别

1. 用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
   注意： 只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

相互转换

1. DOM 对象转换为 jQuery 对象： $(DOM对象)
$('div')
2. jQuery 对象转换为 DOM 对象

• $('div') [index] index 是索引号
• $('div') .get(index) index 是索引号

$('video');// jQuery对象
var myvideo = document.querySelector('video'); // DOM对象

$(myvideo) // DOM对象转换为 jQuery对象
$('video')[0] // jQuery对象转换为DOM对象
$('video').get(0) // jQuery对象转换为DOM对象

jQuery 常用API

选择器

隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代
即给匹配到的所有元素进行循环遍历，执行相应的方法，不用我们循环，简化操作。

jQuery 设置样式 $('div').css('属性', '值')

// 1. 获取四个div元素 
$("div");
// 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color", "red");

筛选选择器

筛选方法

重点记住： parent() children() find() siblings() eq()

排他思想

 $(function() {
    // 1. 隐式迭代 给所有的按钮都绑定了点击事件
    $("button").click(function() {
    // 2. 当前的元素变化背景颜色
    $(this).css("background", "pink");
    // 3. 其余的兄弟去掉背景颜色 隐式迭代
    $(this).siblings("button").css("background", "");
    })
})

链式编程

// 链式编程
$(this).css("color", "red").siblings().css("color", "");

jQuery 样式操作

操作 css

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号

$("div").css({
  width: 400,
  height: 400,
  backgroundColor: "red"
  // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})

设置类样式

注意操作类里面的参数不要加点

1. 添加类 addClass()

$("div").click(function() {
   $(this).addClass("current");
});

2. 删除类 removeClass()

$("div").click(function() {
   $(this).removeClass("current");
});

3. 切换类 toggleClass()

$("div").click(function() {
   $(this).toggleClass("current");
});

jQuery 效果

显示隐藏

可以不带任何参数
显示：show([speed,[easing],[fn]])
隐藏：hide([speed,[easing],[fn]])

滑动

下滑：slideDown([speed,[easing],[fn]])
上滑：slideUp([speed,[easing],[fn]])
滑动切换：slideToggle([speed,[easing],[fn]])

时间切换

hover([over,]out)

1. over:鼠标移到元素上要触发的函数（相当于mouseenter）
2. out:鼠标移出元素要触发的函数（相当于mouseleave）
3. 如果只写一个函数，则鼠标经过和离开都会触发它

停止排队

stop()
写到动画或者效果的前面， 停止结束上一次的动画。

淡入淡出

淡入：fadeIn([speed,[easing],[fn]])
淡出：fadeOut([speed,[easing],[fn]])
切换：fadeToggle([speed,[easing],[fn]])
渐进方式调整到指定的不透明度：fadeTo([[speed],opacity,[easing],[fn]])\

1. opacity 透明度必须写，取值 0~1 之间。
2. speed：必须写，可选(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数。

$("button").eq(0).click(function() {
   // 淡入 fadeIn()
   $("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
   // 淡出 fadeOut()
   $("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
    // 淡入淡出切换 fadeToggle()
    $("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
  //  修改透明度 fadeTo() 这个速度和透明度要必须写
  $("div").fadeTo(1000, 0.5);
});

自定义动画 animate

animate(params,[speed],[easing],[fn])

$("button").click(function() {
   $("div").animate({
      left: 500,
      top: 300,
      opacity: .4,
      width: 500
   }, 500);
})

jQuery 属性操作

  // 1. 全选 全不选功能模块
  // 全选按钮状态（checkall）赋值给三个小按钮（j-checkbox）
  $(".checkall").change(function () {
    // console.log($(this).prop("checked")); // 拿到全选按钮的状态
    // $(".j-checkbox").prop("checked", true);
    $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
    if ($(this).prop("checked")) {
      // 让所有的商品添加 check-cart-item 类名
      $(".cart-item").addClass("check-cart-item");
    } else {
      // 让所有的商品移除 check-cart-item 类名
      $(".cart-item").removeClass("check-cart-item");
    }
  });

  // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
  $(".j-checkbox").change(function () {
    // console.log($(".j-checkbox:checked").length);
    //   $(".j-checkbox:checked").length为小复选框被选中的个数
    if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
      $(".checkall").prop("checked", true);
    } else {
      $(".checkall").prop("checked", false);
    }
  });

jQuery 内容文本值

1. 普通元素内容 html()（ 相当于原生inner HTML)

html()           // 获取元素的内容
html(''内容'')   // 设置元素的内容

2. 普通元素文本内容 text() (相当与原生 innerText)

text()               // 获取元素的文本内容
text(''文本内容'')   // 设置元素的文本内容

3. 表单的值 val()（ 相当于原生value)

val()           // 获取表单的值
val(''内容'')   // 设置表单的值

jQuery 元素操作

遍历元素

• 语法1：

$("div").each(function (index, domEle) { xxx; }）       

1. each() 方法遍历匹配的每一个元素。主要用DOM处理。
2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3. 要使用jquery方法，需要转换为jquery对象 $(domEle)

• 语法2：

$.each(object，function (index, element) { xxx; }）

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

创建、添加、删除元素操作

// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素

// (1) 内部添加
$("ul").append(li);  内部添加并且放到内容的最后面 
$("ul").prepend(li); // 内部添加并且放到内容的最前面

// (2) 外部添加
var div = $("<div>我是后妈生的</div>");
$(".test").after(div);
$(".test").before(div);

// 3. 删除元素
$("ul").remove(); 可以删除匹配的元素 自杀
$("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

jQuery 尺寸、位置操作

jQuery 尺寸

// 1. width() / height() 获取设置元素 width和height大小 
console.log($("div").width());
// $("div").width(300);

// 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
console.log($("div").innerWidth());

// 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
console.log($("div").outerWidth());

// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));

jQuery 位置

• offset()

1. 设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
2. 有offset().top 和 offset().left
3. 可以设置元素的偏移：offset({ top: 10, left: 30 });

• position()

1. 用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
2. 有position().top 和 position().left
3. 该方法只能获取

• scrollTop()

1. 设置或返回被选元素被卷去的头部。
2. 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

jQuery 事件

jQuery 事件处理

on()

on() 方法优势

1. 可以绑定多个事件，多个处理事件处理程序。

$(“div”).on({
  mouseover: function(){}, 
  mouseout: function(){},
  click: function(){}	
}); 

如果事件处理程序相同

$(“div”).on(“mouseover mouseout”, function() {
   $(this).toggleClass(“current”);
  }); 

2. 可以事件委派操作

$('ul').on('click', 'li', function() {
    alert('hello world!');
}); 
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

3. on() 可以给动态生成的元素绑定事件

$("ol").on("click", "li", function() {
   alert(11);
})
var li = $("<li>我是后来创建的</li>");
  $("ol").append(li);
})

off() 、one()

// 1. 事件解绑 off
// $("div").off();  // 解除div身上的所有事件
$("div").off("click"); // 解除div身上的点击事件
$("ul").off("click", "li"); // 解绑事件委托
// 2. one() 只能触发事件一次
$("p").one("click", function() {
    alert(11);
})

自动触发事件

// 1. 元素.事件()
// $("div").click();会触发元素的默认行为

// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");

// 3. 元素.triggerHandler("事件") 不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
    $(this).val("你好吗");
});

jQuery 事件对象

element.on(events,[selector],function(event) {})

• 阻止默认行为：event.preventDefault() 或者 return false
• 阻止冒泡： event.stopPropagation()

多库共存

jQuery 解决方案：

1. 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
2. jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();

jQuery 插件

jQuery 插件常用的网站：

1. jQuery 插件库 www.jq22.com/
2. jQuery 之家 www.htmleaf.com/
   jQuery 插件使用步骤：
3. 引入相关文件。（jQuery 文件 和 插件文件）
4. 复制相关html、css、js (调用插件)。

jQuery 插件演示：

1. 图片懒加载 使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）后面
2. 全屏滚动（fullpage.js）

• gitHub： github.com/alvarotrigo…
• 中文翻译网站： www.dowebok.com/demo/2014/7…

3. bootstrap JS 插件： bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用 ，也必须引入jQuery 文件。