携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

1. jQuery的下载即使用

1.1 下载和引入

新版本官网地址: https:/ljquery.com/新版本版本︰

1x︰兼容IE678等低版本浏览器，官网不再更新

2x :不兼容IE678等低版本浏览器，官网不再更新

3x:不兼容IE 678等低版本浏览器，是官方主要更新维护的版本

旧版本

各个版本的下载: code.jquery.com/

下载后可自行在项目中创建一个js文件然后将内容复制粘贴。然后通过script引入我们所需要的html页面中。

1.2 使用-简单的入口函数

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
相当于原生js 中的DOMContentLoaded。
不同于原生js 中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

为了方便我们将script的位置可以随便书写，我们使用入口函数

2. 顶级对象$

书写方式有两种

  $('div').hide();
  jQuery('div').hide();

3. DOM对象和jQuery对象

3.1 两者的区别

jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法

var myDiv = document.querySelector('div'); // myDiv 是DOM对象
var mySpan = document.querySelector('span'); // mySpan 是DOM对象


$('div'); // $('div')是一个jQuery 对象
$('span'); // $('span')是一个jQuery 对象

3.2 两者的相互转换使用

DOM对象与jQuery对象之间是可以相互转换的。

因为原生js 比jQuery更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM对象转换为jQuery对象︰$(DOM对象)
jQuery对象转换为DOM对象（两种方式)

3.2.1 Dom转换为jQuery对象

 var myvideo = document.querySelector('video');
 $(myvideo)

3.2.2 jQuery对象转换为Dom对象

myvideo.play();
$('video')[0].play()
$('video').get(0).play()

4. API解读（用法的学习）

4.1 选择器

4.1.1 基础选择器

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

注意括号里边的引号

4.1.2 层级选择器

4.1.3 筛选选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

</html>

4.2 样式操作

jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。

1.参数只写属性名，则是返回属性值

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，

jQuery的学习与实践