初识Jquery

github

https://github.com/SuYaru/Pre/tree/master/Jquery01

一、与JS 相比 Jquery 的优点

JS

1. 查找元素的方法太少，麻烦。

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

3. 有兼容性问题。

4. 想要实现简单的动画效果，也很麻烦

5. 代码冗余。

6. js 注册事件会被覆盖 （可以用addEventListener 弥补）

Jquery （JS 库）

1. 查找元素的方法多种多样，非常灵活

2. 拥有隐式迭代特性，因此不再需要手写for循环了。

3. 完全没有兼容性问题。

4. 实现动画非常简单，而且功能更加的强大。

5. 代码简单、粗暴。

 

Jquery 3.0 以后不支持 IE 6 7 8 ，私人用户主要是 Window 主流用 jquery 1.12.4 支持 window

.min 是js 的压缩版，与非压缩版的区别： 注释、换行、空格 全部去掉。目的：让文件尽可能的小适用于生产环境。

         自己或公司电脑 ：开发环境 （用非压缩版本）

         服务器 ：用于测试 ：测试环境

         服务器：对用户开放：生产环境 （使用Jquery 的压缩版本）

二、Jquery 入口函数（用尽可能少的代码，实现尽可能多的功能）

<script src="jquery-1.12.4"></script> 不引入时报错 $ is not defined

入口函数 一：

$(document).ready(function(){


});

入口函数二

$(function(){


});

与 window.load=function():

上述三者执行顺序： jquery 第一种、 jquery 第二种、JS

都要等页面加载完成后才执行，但jq 不会等图片加载（JS 会等图片加载完才执行）

     jq 使用三个步骤

            1、引入 Jq 文件

            2、写入口函数

            3、功能实现

三、Jq 对象与 DOM 对象的区别

DOM ： 使用JS 获取的对象

Jq 对象：var $li=$("li") $li.text(""); var $变量名（通常这么做，表示它是 jq 对象） 是js 对象的一个集合，伪数组，里面有一堆js 对象

js 与 jq 对象的区别的联系：

                   js 对象不能调用 jq 对象的方法：是两个不同的对象，需要把js 对象转换为jq对象

                  var $cloth=$(cloth);

                  jq 不能调用 js 对象： jq 转换为 js 对象----> 取出 DOM 对象 $li[0] $li.get(0)

                  jq 对象里 放了 js 对象

四、$ 实质是什么？

        是一个函数，使用时记得用 $()，$ 等同于 jquery

        参数不同，功能也不同

        一般有三种用法

                  1、参数是一个function ，----> 入口函数

                  2、$(dom 对象) 把 dom 对象转换为 jq 对象

                  3、参数是一个字符串 ： $("div ") $("#btn") 用来找对象

五、JQ 选择器+css 方法+层级选择  

         jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素

         选择器与 CSS 兼容：$("ul") 也可以 $("div ul ")，还有交集（AB）、并集（A，B）、子代（A>B）、后代选择器（A  B）

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

         过滤选择器：都带冒号 。常用 （：even   ：odd  :  eq   ：gt  大于  :  lt   小于）

         $("#ff").css("name",value);

         $("father>p ") 子代 $("father p") 后代选择 $("father,p") 并集 $("father.p") 交集

六、Jq 事件           

          mouseover ：指针穿过被选元素/ 子元素 都会触发（会一直触发）

          mouseout : 与mouseover 是一对

          mouseenter ：只有经过自己时，才会触发（子元素不触发：比over 更好，效率更高）

          mouseleave :与enter 一样，在元素内部不会被触发