前端学习之jQuery

jQuery

jQuery学习目标

• 能够说出什么是jQuery
• 能够说出jQuery的优点
• 能够简单使用jQuery
• 能够说出DOM对象和jQuery对象的区别

jQuery目录

• jQuery概述
• jQuery的基本使用

jQuery概述

javascript库

仓库：可以把很多东西放到这个仓库里面。找东西的时候只需要到仓库里面查找到就可以了。

JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show和获取元素等。

简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，然后存放到里面。这样我们就可以快速高效的使用这些封装好的功能了。

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）

常见的JavaScript库

• jQuery
• Prototype
• YUI
• Dojo
• 移动端的zepto

这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。我们主要学习的是jQuery

jQuery的概念

jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”，即提倡写更少的代码，做更多的事情。
jQuery中的j就是JavaScript，Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质：就是学习调用这些函数（方法）。
jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

优点：

• 轻量级。核心文件才几十kb，不会影响页面加载速度
• 跨浏览器兼容。基本兼容了现在主流的浏览器
• 链式编程，隐式迭代
• 对事件、样式、动画支持，大大简化了DOM操作
• 支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等
• 免费、开源

jQuery的基本使用

jQuery的下载

此文下载的是3.5.1

jQuery的使用步骤

1. 引入jQuery文件

<script src="jQuery.min.js"></script>

2. 观察是否引入成功
   输入：

<div>123</div>
<script>
    $('div').hide();
</script>
// 若成功，则该div中的123会消失

jQuery的入口函数

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

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

1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源全部加载完成，jQuery帮我们完成了封装
2. 以上两种方式相当于原生js中的DOMContentLoaded
3. 更推荐使用第一种方式

jQuery的顶级对象$

1. $ 是jQuery的别称，在代码中也可以使用jQuery这个单词来替代$ ，但一般为了方便通常都直接使用$。
2. $ 是jQuery的顶级对象，相当于原生JS中的window。把元素利用 $包装成jQuery对象，就可以调用jQuery的方法。

<script>
    // 1.$ 是jQuery的别称
    // $(function () {
    //     alert(11);
    // });
    jQuery(function () {
        // alert(11);
        $('div').hide();
        jQuery('div').hide();
    })
    // 2.$同时也是jQuery的顶级对象
</script>

jQuery的对象和DOM对象

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

<div></div>
<script>
    // 1.DOM对象：用原生js获取过来的对象就是DOM对象
    var myDiv = document.querySelector('div');
    console.dir(myDiv);
    // 2.jQuery对象：用jQuery的方式获取过来的对象是jQuery对象。本质：通过$把DOM元素进行包装
    $('div'); // $('div')是一个jQuery对象
    console.dir($('div')); // 结果是一个伪数组
    // 3.jQuery对象只能使用jQuery方法，DOM对象则使用原生的javascript属性和方法
    myDiv.style.display = 'none';
    // $('div').style.display = 'none'; // 错误 这个$('div')是一个jQuery对象，不能使用原生js属性和方法
    // myDiv.hide(); // 错误，myDiv是一个dom对象不能使用jQuery里面的hide方法
</script>

jQuery的对象和DOM对象转换

DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大，原生的某一些属性和方法在jQuery中没有封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

1.把DOM对象转换为jQuery对象：$(DOM对象）
$('div');

2.jQuery对象转换为DOM对象（两种方式）
$('div')[index]; 
$('div').get[index]; 
// 其中index是索引号

因为jQuery对象是一个伪数组，所以可以使用索引号。

<div>123</div>
<script>
    // 1.DOM 对象转换为jQuery对象
    // (1)我们直接获取div，得到的就是jQuery对象
    $('div');
    // (2)我们已经使用原生js 获取过来的DOM对象
    var mydiv = document.querySelector('div');
    $(mydiv);
    // $(myvideo).play(); 错误的，jquery里面没有play这个方法
    // 2.jQuery对象转换为DOM对象
    // myvideo.play();
    console.log($('div'));

    // 两种方法
    $('div')[0].addEventListener('mousemove', function () { console.log(123); })
    $('div').get(0).addEventListener('mousemove', function () { console.log(213); })

jQuery常用的API

学习目标

• 能够写出常用的jQuery选择器
• 能够操作jQuery样式
• 能够写出常用的jQuery动画
• 能够操作jQuery属性
• 能够操作jQuery元素
• 能够操作jQuery元素尺寸、位置

学习目录

• jQuery选择器
• jQuery样式操作
• jQuery效果
• jQuery属性操作
• jQuery文本属性值
• jQuery元素操作
• jQuery尺寸、位置操作

jQuery基础选择器

原生JS获取元素的方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使元素获取统一标准。

$ ("选择器")  // 里面的选择器直接写CSS选择器即可，但是要加引号

<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
    <li>我是ol 的</li>
    <li>我是ol 的</li>
    <li>我是ol 的</li>
    <li>我是ol 的</li>
</ol>
<ul>
    <li>我是ul 的</li>
    <li>我是ul 的</li>
    <li>我是ul 的</li>
    <li>我是ul 的</li>
</ul>
<script>
    $(function () {
        $('.nav');
        // 得到class=nav的元素
        console.log($('.nav'));
        // 得到ul里所有的li元素
        console.log($('ul li'));
    })
</script>

jQuery隐式迭代

jQuery隐式迭代：

$('div').css('属性','值')

<div>123456</div>
<div>123456</div>
<div>123456</div>
<div>123456</div>
<ul>
    <li>same operation</li>
    <li>same operation</li>
    <li>same operation</li>
</ul>
<script>
    // 1.获取四个div元素
    $('div');
    console.log($('div'));
    // 2.给四个div设置背景颜色为粉色 jquery不能使用style
    // for (var i = 0; i < $('div').length; i++) {
    //     $('div')[i].style.backgroundColor = 'pink';
    // }
    // 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css的这个方法
    $('div').css('backgroundColor', 'pink');
    $('ul li').css('color', 'red');
</script>

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再手动设置一个循环，这样可以简化操作，方便调用。

jQuery筛选选择器

<ul>
    <li>duogelimianshaixuanjige</li>
    <li>duogelimianshaixuanjige</li>
    <li>duogelimianshaixuanjige</li>
    <li>duogelimianshaixuanjige</li>
    <li>duogelimianshaixuanjige</li>
</ul>
<ol>
    <li>duogelimianshaixuanjige</li>
    <li>duogelimianshaixuanjige</li>
    <li>duogelimianshaixuanjige</li>
    <li>duogelimianshaixuanjige