jQuery的入门实战教程（内含大量案例）jQuery从基础到高阶教程，包含Web常用功能，内置方法详细解读，涵盖选择器

示例预览

1.什么是jQuery

jQuery就是一个js库，里面封装了一大堆的方法方便我们的开发，使用jQuery的话，会比使用JavaScript更简单。

2.为什么要学习jQuery

在使用javaScript开发的过程中，有许多的缺点

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

而jQuery可以很好的解决上述问题，其具体优点如下

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

3.jQuery常用配套工具

大版本分类

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

关于压缩版和未压缩版

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有可阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

4.jQuery的入口函数

使用jQuery的三个步骤

引入jQuery文件
入口函数
功能实现

关于jQuery的入口函数：

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

});
//第二种写法
$(function() {
	
});

jQuery入口函数与js入口函数的对比

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

效果预览地址

5.jQuery对象与DOM对象的区别

什么是DOM对象(js对象): 使用js的方式获取到的元素就是js对象（DOM对象）

   var cloth = document.getElementById("cloth");
   cloth.style.backgroundColor = "pink";

什么是jq对象： 使用jq的方式获取到的元素就是jq对象

   var $li = $("li");
   console.log($li);
   $li.text("我改了内容");

jq对象与js对象的区别: js对象对象不能调用jq对象的方法

  var cloth = document.getElementById("cloth");
  cloth.text("呵呵");// 调用会报错

jq对象与js对象的联系： jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象（宏观上）

    // 创建一个id为app的节点元素
    <div id="app"></div>
    // 下面使用js和jq分别打印获取的对象

console.dir(document.getElementById("#app"))的打印结果

console.dir($("#app"))的打印结果

DOM对象转换成jQuery对象：

var $obj = $(domObj); // $其实就是一个函数
// 示例
$(document).ready(function(){}); //典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)

总结

DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
DOM对象与jQuery对象的方法不能混用。

6.选择器

什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器（跟CSS的选择器一模一样）

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

过滤选择器（这类选择器都带冒号:）

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

隔行变色案例

筛选选择器（筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法）

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

案例

7.操作样式

css操作

修改单个样式css(name, value)

    // name:样式名 value:样式值
    $("li")
      .css("backgroundColor", "pink")
      .css("color", "red")
      .css("fontSize", "32px");
    // 设置li标签的背景色，字体颜色，字体大小

修改多个样式css(obj)

    // obj把样式写成对象的形式
    $("li").css({
      backgroundColor:"pink",
      color: "red",
      fontSize:"32px",
      border: "1px solid black"
    });

获取样式css(name)

 //name:想要获取的样式
 $("li").css("fontSize")

设置操作的时候，会给jq内部的所有对象都设置上相同的值。获取的时候，只会返回第一个元素对应的值。俗称隐式迭代

class操作

添加类addClass(name)
移除类removeClass(name)
判断类hasClass(name)

// 检查当前的元素是否含有某个特定的类，如果有，则返回true。
 if($("li").hasClass("bigger")){
     console.log('li存在basic类')
 }else{
     console.log('lib不存在basic类')
 }

切换类toggleClass(name)

    //判断li有没有basic类，如果有，就移除，如果没有，添加
    $("li").toggleClass("basic")

属性操作（用法和css一样）

设置单个属性attr(name, value)

    $("img").attr("alt", "图破了");
    $("img").attr("title", "错错错错");

设置多个属性arrt(obj)

     $("img").attr({
       alt:"图破了",
       title:"错错错",
       aa:"bb"
     })

获取属性attr(name)

    $("img").attr("alt")

移除属性removeAttr(name)

对于布尔类型的属性，disabled，selected，checked，只能用prop，用法同attr

表格全选案例

8.动画

三组基本动画+自定义动画

动画展示案例

显示隐藏show hide

<body>
    <input type="button" value="显示">
    <input type="button" value="隐藏">
    <div></div>
</body>
<script>
$(function () {
    $("input").eq(0).click(function () {
      //show不传参数，没有动画效果
      //$("div").show();
      //show(speed)
      //speed:动画的持续时间  可以是毫秒值 还可以是固定字符串
      //fast:200ms   normal:400ms   slow:600
      //$("div").show("ddd");
      // show([speed], [callback])
      $("div").show(1000, function () {
        console.log("哈哈，动画执行完成啦");
      })
    });
    
    $("input").eq(1).click(function () {
      $("div").hide();
    })
    
  });
</script>

显示隐藏动画案例

滑入滑出切换slideDown slideUp slideToggle

<body>
    <input type="button" value="显示" />
    <input type="button" value="隐藏" />
    <input type="button" value="切换" />

    <div></div>
</body>
<script>
$(function () {
        $("input")
          .eq(0)
          .click(function () {
            //show不传参数，没有动画效果
            //$("div").show();

            //show(speed)
            //speed:动画的持续时间  可以是毫秒值 还可以是固定字符串
            //fast:200ms   normal:400ms   slow:600
            //$("div").show("ddd");

            // show([speed], [callback])
            $("div").show(1000, function () {
              console.log("动画执行完成了");
            });
          });

        $("input")
          .eq(1)
          .click(function () {
            $("div").hide();
          });
          
        $("input").eq(2).click(function () {
          //如果是滑入状态，就执行滑出的动画，
          $('div').slideToggle();
        })
      });
</script>

滑入滑出动画案例

淡入淡出切换fadeIn fadeOut fadeToggle

<body>
    <input type="button" value="显示" />
    <input type="button" value="隐藏" />
    <input type="button" value="切换" />

    <div></div>
</body>

<script>
 $(function () {
        //淡入：淡入：fadeIn  淡出：fadeOut    切换：fadeToggle
        $("input")
          .eq(0)
          .click(function () {
            $("div").fadeIn(2000);
          });

        $("input")
          .eq(1)
          .click(function () {
            $("div").fadeOut(1000);
          });

        $("input")
          .eq(2)
          .click(function () {
            //如果是滑入状态，就执行滑出的动画，
            $("div").fadeToggle();
          });
 });
</script>

淡入淡出动画案例

自定义动画animate(prop, [speed], [swing/linear], [callback])

<body>
    <input type="button" value="开始" />
    <input type="button" value="结束" />
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
<script>
 $(function () {
    $("input").eq(0).click(function () {
      //第一个参数：对象，里面可以传需要动画的样式
      //第二个参数：speed 动画的执行时间
      //第三个参数：动画的执行效果
      //第四个参数：回调函数
      $("#box1").animate({left:800}, 8000);
      
      //swing:秋千 摇摆
      $("#box2").animate({left:800}, 8000, "swing");
      
      //linear:线性 匀速
      $("#box3").animate({left:800}, 8000, "linear", function () {
        console.log("hahaha");
      });
    })
  });
</script>

自定义动画案例

停止动画stop clearQueue jumpToEnd

<body>
    <input type="button" value="开始" />
    <input type="button" value="结束" />
<div></div>
</body>
<script>
$(function () {
    $("input").eq(0).click(function () {
      $("div").slideDown(4000).slideUp(4000);
    });
    
    $("input").eq(1).click(function () {
      //stop:停止当前正在执行的动画
      //clearQueue:是否清除动画队列 true  false
      //jumpToEnd:是否跳转到当前动画的最终效果 true false
      
      //.stop().animate();
      $("div").stop(true, true);
    })
  });
</script>

停止动画案例

综合运用

9. 操作节点

创建节点$("<span></span>")
添加节点append appendTo prepend prependTo after before

//创建jq对象
var $li = $('<a href="http://web.itcast.cn" target="_blank">a标签</a>');
console.log($li);
   
$("div").append('<a href="http://web.itcast.cn" target="_blank">a标签</a>');
    
// 添加到子元素的最后面
$("div").append($("p"));
$("p").appendTo($("div"));
    
$("div").prepend($("p"));
$("p").prependTo($("div"));
    
$('div').after($("p"));
$('div').before($("p"));

清空内容empty
删除节点remove
克隆节点clone(false|true) false不传参数也是深度复制,不会复制事件|true深度复制，会复制事件

案例

10.jQuery特殊属性操作

val方法val方法用于设置和获取表单元素的值，例如input、textarea的值

//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();

html方法与text方法html方法相当于innerHTML text方法相当于innerText

//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()

//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()

html方法会识别html标签，text方法会拿内容直接当成字符串，并不会识别html标签。

width方法与height方法设置或者获取高度

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

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

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

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

案例

11. jQuery事件机制

jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

jQuery事件发展历程

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

// 简单事件注册
click(handler)			单击事件
mouseenter(handler)		鼠标进入事件
mouseleave(handler)		鼠标离开事件

缺点：不能同时注册多个事件

// bind方式注册事件
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});

缺点：不支持动态事件绑定

// delegate注册委托事件
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

缺点：只能注册委托事件，因此注册事件需要记得方法太多了

on注册事件

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

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

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

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

事件解绑

// unbind方式（不推荐）
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

// undelegate方式（不用）
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

// off方式（推荐）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

触发事件

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

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。


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

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

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

12. 扩展

链式编程

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

    //设置性操作：可以链式编程
    //获取性操作，不能链式，因为获取性操作，数值，字符串，
    //返回值是不是一个jq对象。
    console.log($("div").width(200).height(200).css("backgroundColor", "pink").width());

五星评分案例

each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

// 遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

多库共存

jQuery使用 $作为标识符,但是如果与其他框架中的$ 冲突时,jQuery可以释放$符的控制权

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