课程回顾：
正则：匹配字符组合模式;
创建：var reg1 = new RegExp(/abc/); var reg2 = /abc/;
测试：reg1.test(‘abc’);
特殊字符：元字符
边界符：^，$
字符类：[多选一]
量词符：*，+，?，{n}，{n,}，{n,m}
修饰符：str.replace(/b/gi, ‘字符串’);
jQuery初步
今日基础目标
能够说出什么是 jQuery
能够说出 jQuery 的优点
能够简单使用 jQuery
能够说出 DOM 对象和 jQuery 对象的区别
jQuery 选择器
jQuery 样式操作
jQuery概念：
jQuery 是一个快速、简洁的 JavaScript 库
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。
学习jQuery本质： 就是学习调用这些函数（方法）。【对象.方法()】
简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。别人写好的JS库，我们拿过来用JavaScript 库
jQuery
Prototype
YUI
Dojo
Ext JS
l移动端的zepto
这些库都是
对原生 JavaScript 的封装，内部都是用JavaScript 实现的，我们主要学习的是 jQuery。
jQuery 的优点
轻量级。核心文件才几十kb，不会影响页面加载速度
链式编程、隐式迭代=
对事跨浏览器兼容。基本兼容了现在主流的浏览器
样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源
jQuery 的下载
官网地址： https://jquery.com/
版本：
1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的
其他版本：https://code.jquery.com/
jQuery 的使用步骤
- 下载jQuery
- 引入 jQuery 文件
- 使用即可
jQuery入门
jQuery 的入口函数
第一种：
$(function () { ... // 此处是页面 DOM 加载完成的入口}) ;
第二种：
$(document).ready(function(){... // 此处是页面DOM加载完成的入口
});
注意点：
等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
不同于原生 js 中的 load 事件是等页面文档、外部的js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。
jQuery 的基本使用
jQuery 的顶级对象 $
1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
jQuery 对象和 DOM 对象
$('div').css('属性', '值') 小知识点 js的对象只能用JS的属性和方法Jq的对象只能用JQ的属性和方法
目的：学会区分
用原生 JS 获取来的对象就是 DOM 对象【document.getElement等方法】
jQuery 方法获取的元素就是 jQuery 对象【$(‘div’)等】
jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）
特别注意
只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。
相互转换
DOM 对象与 jQuery 对象之间是可以相互转换的。
因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
DOM 对象转换为 jQuery 对象： $(DOM对象)
jQuery 对象转换为 DOM 对象（两种方式）
$(‘div’) [index] index 是索引号
$(‘div’) .get(index) index 是索引号
<div>123</div><script type="text/javascript">var div = document.querySelector('div');// div.style.background = 'red';// div.css('background', 'blue');// DOM元素不可以用jQuery的方法// 如果吧divDOM对象转成jQuery对象，就可以用jQuery的方法// $(div).css('background', 'blue');// $(DOM对象)==>jQuery对象// $(元素).css('属性名', '属性值');// $('div').css('background', 'yellow');// $('div').style.background = 'pink';// jQuery对象不可以用原生JS的方法// 如果吧jQuery对象转换称为DOM对象，就可以用style// console.log( $('div') );// [divDOM]\// $('div')[0].style.background = 'pink';$('div').get(0).style.background = 'orange';</script>
jQuery:JS库
入口函数：$(function () {})
jQuery对象和DOM对象转换
jQuery 常用API
目标
- jQuery 选择器
- jQuery 样式操作
- jQuery 效果
- jQuery 属性操作
- jQuery 文本属性值
- jQuery 元素操作
- jQuery 尺寸、位置操作
jQuery 选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准选择器：用来获取元素
$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号
$('#id')==》指定id元素$('*')==》所有元素$('.class')==》指定class元素$('div')==》根据标签获取元素$('div,p,li')==》获取多个$('li.class')==>交集获取$('ul>li')==>子代$('ul li')==>后代
隐式迭代
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
小练习：
给一组li修改样式
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><script type="text/javascript">// 因为：隐式迭代$('ul li').css('background','blue');// 原来// var lis = document.querySelectorAll('li');// for (var i = 0; i < lis.length; i++) {// lis[i].style.background = 'red';// }</script>
</body>
jQuery 筛选选择器
$(‘li:first’)：第一个元素
$(‘li:last’)：最后一个元素
$(‘li:eq(2)’)==》索引为2【查找指定索引的元素】
$(‘li:odd’)==》索引为奇数
$(‘li:even’)==》索引为偶数
注意：索引是从0开始的
jQuery 筛选方法（重点）
$(‘选择器’).方法()
$(‘li’).parent()父级
$(‘ul’).children(‘li’);子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】
$(‘ul’).find(‘li’)后代
$(‘li’).siblings(‘li’)兄弟
$(‘li’),nextAll();后面的
$(‘li’).prevAll();前面的
判断是否具有某个类名：$(‘div’).hasClass(‘aaa’)
$(‘div’).eq(index);指定索引方法【eq推荐用方法】
重点记住： parent() children() find() siblings() eq()小知识点：添加事件，show方法，hide方法，toggle方法
案例下拉菜单
上午回顾：
jQuery：javaScript库
入口函数：
第一种：$(function () {代码});
第二种：$(document).ready(function () {代码});
jQuery：jQuery对象==>$
jQuery对象：$(’元素‘)[索引值];
DOM对象：原生获取元素$(DOM对象)
jQuery选择器：$(‘选择器’);
筛选方法：parent，childrend，find，siblings，eq
添加知识： next() 下一个 prev()上一个
jQuery中的next()方法
next()方法，获取指定元素同辈的下一个元素
语法 $().next()
jQuery中的prev()方法
prev方法：获取指定元素同辈的上一个元素
语法 $().prev();
jQuery 里面的排他思想
案例：多个按钮点击改变当前按钮颜色，其他的不变
【index()获取索引值】
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);$(this).siblings(). css(“color”,””);
案例：淘宝服饰精品案例【index()获取索引值】
②需要得到当前小li 的索引号，就可以显示对应索引号的图片③jQuery 得到当前元素索引号 $(this).index() ⑤显示元素 show() 隐藏元素 hide()
链式编程
$(this).css(‘color’, ‘red’).sibling().css(‘color’, ‘’);
按钮案例
<script type="text/javascript">$('input').click(function () {// $(this).css('background', 'red');// $(this).siblings().css('background', '');$(this).css('background', 'yellow').siblings().css('background', '');});</script>
jQuery 样式操作
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
操作 css 方法
参数只写属性名，则是返回属性值【$(this).css(''color'');】参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号【$(this).css(''color'', ''red'');】参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，
【$(this).css({ "color":"white","font-size":"20px"});】$('input').click(function () {// console.log( $('div').css('width') );// $('div').css('width', '300px');// $('div').css('height', 300);// $('div').css('background','blue');// 如果，设置的属性多，那么直接传递对象既可$('div').css({// 属性名 ：属性值，width : 200,height : 200,background : 'yellow','font-size' : '60px',});});
设置类样式方法
作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点
添加类【$(“div”).addClass(''current'');】移除类【$(“div”).removeClass(''current'');】切换类【$(“div”).toggleClass(''current'');】原生 JS 中 className 会覆盖元素原先里面的类名。 jQuery 里面类操作只是对指定类进行操作，不影响原先的类名***案例：*tab栏切换
点击上部的li，当前li 添加current类，其余兄弟移除类。点击的同时，得到当前li 的索引号让下部里面相应索引号的item显示，其余的item隐藏<script>// 点击修改内容以及样式// 点击li添加类名current，其他li不准加这个类名// 并且对应的div要显示，其他的div要隐藏$('.tab_list li').click(function () {// 1、点击哪个li给哪个li添加类名，其他的移除类名$(this).addClass('current').siblings().removeClass('current');// 2、显示对应的div，其他div隐藏// 获取索引值var index = $(this).index();// 根据index查找对应div$('.tab_con div').eq(index).show().siblings().hide();});</script>
课程回顾：
jQuery：JavaScript库
1、入口函数：$(function () {});
2、jQuery对象和DOM对象转换
3、jQuery选择器：#id，.类名
筛选方法：parent (父级)，childrend（子集），find（后代），siblings（兄弟元素），eq（索引）
隐式迭代，链式编程
4、jQuery样式操作：$(元素).css(参数);
5、jQuery类名操作：addClass（添加类），removeClass（删除类），toggleClass（类名的切换）
其他知识点：给元素添加事件$(元素).click(function () {});
显示隐藏元素：show（显示），hide（隐藏），toggle（切换）
。...)
