jQuery

什么是jQuery?

jQuery是一个快速的、轻量的、功能丰富的js库。

jQuery的官网 http://jquery.com/

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）。

jquey和js的关系

1 就jq底层是计算，就是把js进行了封装。

2jq能够很方便获取节点，发送ajax。

为什么要学jQuery

使用JS操作DOM的时候，会遇到以下的一些缺点：

1.获取元素的方法太少且长，麻烦。

2.遍历伪数组很麻烦，通常要嵌套一大堆的for循环。

3.注册的事件会覆盖。

4.有兼容性问题。

5.实现动画很麻烦

伪数组：拥有length，可以通过下表获取元素，但是不能使用数组的方法。

使用jQuery的优点

1.获取元素的方式非常的简单，而且非常的丰富

2.jQuery的隐式迭代特性，不再需要书写for循环语句。

3.使用jQuery完全不用考虑兼容性问题。

4.jQuery提供了一系列动画相关的函数，使用非常方便。

版本介绍

官网下载地址：http://jquery.com/download/

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

大版本分类：

1.x版本：能够兼容IE678浏览器（最终版本1.12.4）

2.x版本：不兼容IE678浏览器（最终版本2.2.4）

//jQuery目前正在更新的版本

3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）,3.x版本只是在原来的基础上增加了一些新的特性。

关于压缩版和未压缩版

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

jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

Jquery的引入

引入本地jquery包

入口函数

入口函数的好处：

1.等待文档加载完成，保证能够获取到元素

2.形成了一个沙箱，防止全局变量污染。

两种写法：

//第一种写法

$(document).ready(function() {

});

//第二种写法

$(function() {

});

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

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

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

jQuery对象与DOM对象

基本概念：

1.DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。

2.jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象

3.jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））

jQuery对象与DOM对象的区别：

1.DOM对象与jQuery对象的方法不能混用。

2.DOM对象可以和jQuery对象相互转化

DOM对象转换成jQuery对象

// 将dom对象放入,$()中,既可以进行转化

var$obj=$(domObj);

// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var$li=$(“li”);

//第一种方法（推荐使用）

$li[0]

//第二种方法

$li.get(0)

准备:html代码

  

      

• 衣服1

      

• 衣服2

      

• 衣服3

      

• 衣服4

    

第一步: 使用js获取id,且修改背景颜色

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

    var cloth = document.getElementById("cloth");

    cloth.style.backgroundColor = "pink";

第二步:使用jquery获取li,使用text()修改文本内容

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

     var $li = $("li");

     console.log($li);

      $li.text("我改了内容");

第三步: 使用js对象调用jquery的text方法

   //js对象对象不能调用jq对象的方法

    var cloth = document.getElementById("cloth");

  cloth.text("呵呵");

第四步:jquery对象也不能直接调用js的方法:setAttribute()

var $li = $("li");

$li[0].setAttribute("name","hehe");

总结:

   DOM无法调用jQuery对象的方法：为什么：因为是两个不同对象

   DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。

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

第五步:将js对象转化为Jquery对象

var cloth = document.getElementById("cloth");

   //DOM对象就变成jQuery对象

$(cloth).text("呵呵");

第六步:将jquey对象转化为js

//jQuery对象怎么转换成DOM对象（取出来）

   var $li = $("li");

   $li[1].style.backgroundColor = "red";

   $li[2].style.backgroundColor = "yellow";

$的本质

$其实就是一个函数，以后用$的时候，记得跟小括号 $();

有三种用法:

  //$其实就是一个函数，以后用$的时候，记得跟小括号 $();

  //参数不同，功能就不同

  //3种用法

  //1. 参数是一个function, 入口函数

  $(function () {

  });

  console.log(typeof $);

  //2. $(domobj)  把dom对象转换成jquery对象

//  $(document).ready(function () {

//

//  });

  //3. 参数是一个字符串,用来找对象

  //$("div") $("div ul")   $(".current")

选择器

什么是jQuery选择器

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

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

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

css选择器

jQuery完全兼容css选择器

名称用法描述

ID选择器$(“#id”);获取指定ID的元素

类选择器$(“.class”);获取同一类class的元素

标签选择器$(“div”);获取同一类标签的所有元素

并集选择器$(“div,p,li”);使用逗号分隔，只要符合条件之一就可。

交集选择器$(“div.redClass”);获取class为redClass的div元素

子代选择器$(“ul>li”);使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素

后代选择器$(“ul li”);使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

跟CSS的选择器一模一样。

过滤选择器

这类选择器都带冒号:

名称用法描述

: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元素中，选择索引号为偶数的元素

:first$(“li:first”).css(“color”, ”red”);获取到的li元素中的第一个

:last$(“li:last”).css(“color”, ”red”);获取到的li元素中的最后一个

筛选选择器(方法)

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

名称用法描述

children(selector)$(“ul”).children(“li”)获取当前元素的所有子元素中的li元素

find(selector)$(“ul”).find(“li”);获取当前元素中的后代元素中的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()找上一次兄弟

   

       

       

       

            p{height:10px;}

            .top{width:100px;height:100px;}

            .one{background:red;}

       

   

   

       

       

        1

        2