jquery 基础概念

学习目标

//1 什么是jQuery
//2 它的优点
//3 jQuery对象和DOM对象的区别

一 jQuery概述

1）概念

//1 jQuery是一个JavaScript库
//2 可以快捷方便的操作DOM 里面基本都是函数(方法)
//3 给我们封装了常用功能 优化了DOM操作 事件处理 动画设计 Ajax交互
//4 学习jQuery就是学习调用这些函数

2）jQuery的优点

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

3）常见的JavaScript库

// jQuery Prototype YUI Dojo Ext JS  
移动端 zepto

二 jQuery的基本使用

1）下载地址

https://jquery.com/
版本区别
1x 兼容IE 678 官网不再更新
2x 不兼容IE 678 官网不再更新
3x 不兼容IE 678 官方主要跟新维护的版本

2）入口函数

//语法1 
$(document).ready(function () {
    //页面DOM加载完成的入口
});

//语法2 简洁写法
$(function(){
    $('div').hide();
});

//1  等着DOM结构渲染完毕即可执行内部代码 不必等到所有外部资源加载完成 jQuery帮我们完成了封装
//2  = 原生的 DOMContentLoaded 事件

3）jQuery顶级对象

//1 $符号是jQuery的别称,在代码中可以用jQuery替代$符号,通常直接使用$符号

//2 $符号是jQuery的顶级对象, 相当于原生的window对象

//3 把元素用$符号包装成jQuery对象，就可以调用jQuery的方法了

4）jQuery对象和DOM对象

//1 用原生语法获取来的对象 就是DOM对象
var myDiv = document.querySelector('div');// myDiv 就是一个DOM对象
console.dir(myDiv);

//2 用jQuery方式获取来的对象 就是jQuery对象
$('div');// $('div') 就是一个jQuery对象
console.dir($('div'));//打印结果：w.fn.init(1)

//3 jQuery对象只能使用 jQuery方法  DOM对象则使用原生的JavaScript属性和方法

//jQuery对象的本质：利用$对DOM对象包装后产生的对象(伪数组形式存储)

5）jQuery对象和DOM对象之间转换

5.1）为什么需要转换

因为jQuery封装了常用的方法 如果需要使用原生的方法和属性 就需要转换

5.2）转换方式

DOM -> jQuery：
$(DOM对象); //

jQuery -> DOM
$('div')[index]     index是索引号
$('div').get(index) index是索引号

二隐式迭代 [ 重点 ]

1）概念

// 遍历 内部DOM元素 的过程 称之为隐式迭代

白话理解：就是把匹配的所有元素内部进行循环遍历 让每一个元素都执行某一个方法

2）代码范例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>隐式迭代</title>
    <script SRC="jquery.min.js"></script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    //需求：给每个li修改背景色为红色

    //原生实现 需要for循环
    var lis = document.querySelectorAll('li');
    for (var i = 0; i <lis.length; i++) {
        lis[i].style.backgroundColor = 'red';
    }

    //jQuery实现 内部已经隐秘的作了处理
    $('ul > li').css('background','red');
</script>
</body>
</html>