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>
