jQuery

为什么要学jQuery

原因原生js的实现方法有以下缺点：

1.获取元素的方法太少且长，麻烦；

2.遍历为数组很麻烦，通常要嵌套一大堆的for循环

3.注册的事件会被覆盖

4.会出现兼容性问题

5.实现动画很麻烦

！而JQuery能够用更少的代码，更优的兼容性，实现更佳的效果。

jQuery初体验

jQuery优点：

1. 获取元素的方式非常的简单，而且非常的丰富

2. jQuery的隐式迭代特性，不再需要书写for循环语句。

3. 使用jQuery完全不用考虑兼容性问题

4. jQuery提供了一系列动画相关的函数，使用非常方便。

5. 代码简单、粗暴。

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

使用步骤：

1.引入 jQuery 文件

<script src="jquery-1.11.1.js"></script>

2.添加入口函数

$(document).ready(function () {
});

// 或者
$(function(){

});

3.在入口函数中调用封装好的API实现页面效果

$("#btnShowDiv").click(function () {
$(“div”).show(1000);
});

*入口函数*

两种写法：

第一种：

$(document).ready(function() {
});

第二种（常用）：

$(function() { }); 或 jQuery(function(){ })；

入口函数的必要性：

1. 等待文档加载完成，保证能够获取到元素。

2. 形成了一个沙箱，防止全局变量污染

   与window.onload的差异

   

*jQuery对象与DOM对象（重点）*

$是jQuery的别称，常用方式$(对象)：

1.添加入口函数

2.获取元素

3.dom元素转换JQuery对象

3.创建元素

jQuery对象与DOM对象的区别：

1. DOM对象与jQuery对象的方法不能混用。
2. DOM对象可以和jQuery对象相互转化

jQuery对象与DOM对象之间的转换：

1. DOM 对象转换为 jQuery 对象： $(DOM对象)

2. jQuery 对象转换为 DOM 对象（两种方式）

$(’jq对象‘)[索引号]例：$(‘div’) [index] ！常用

$('jq对象') .get(i索引号) 例：$('div') .get(index)    

3.DOM对象转换成jQuery对象：（花钱）：

$(document).ready(function(){}); 

*选择器*

css选择器：常用

jQuery完全兼容css选择器

过滤选择器

这类选择器都带冒号

筛选选择器(方法)

常用KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲frist').sibling…(“li”).eq(2)

index()方法返回的是当前元素在所有兄弟元素里面的索引。

*几个案例*

【案例：突出展示】

重点mouseover和mouseout是组事件，mouseenter和mouseleave是一组

mouseenter和mouseleave不会发生冒泡行为

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSPyq3sN-1617119849598)(C:\Users\城\Desktop\笔记\Snipaste_2021-03-23_20-17-26.png)]

【案例：手风琴】

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q5DiidrZ-1617119849607)(C:\Users\城\Desktop\笔记\Snipaste_2021-03-23_20-13-57.png)]

【案例：淘宝精品】

重点：注意左右的索引 +$(js对象).length

[外链图片转存中…(img-HSPyq3sN-1617119849598)]

【案例：手风琴】

[外链图片转存中…(img-Q5DiidrZ-1617119849607)]

【案例：淘宝精品】

重点：注意左右的索引 +$(js对象).length

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qYK8qAOP-1617119849611)(C:\Users\城\Desktop\笔记\Snipaste_2021-03-23_20-17-11.png)]