网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
需要这份系统化资料的朋友，可以戳这里获取
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
click(handler) //单击事件
mouseenter(handler) //鼠标进入事件
mouseleave(handler) //鼠标离开事件
缺点：不能同时注册多个事件
>
> bind方式注册事件
>
>
>
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});
缺点：不支持动态事件绑定
>
> delegate注册委托事件
>
>
>
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
缺点：只能注册委托事件，因此注册时间需要记得方法太多了
>
> on注册事件
>
>
>
#### on注册事件(重点)
>
> jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
>
>
> 最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
>
>
>
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",'span', function() {});
on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events,[selector],[data],handler);
#### 事件解绑
>
> unbind方式（不用）
>
>
>
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
>
> undelegate方式（不用）
>
>
>
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( 'click' ); //解绑所有的click事件
>
> off方式（推荐）
>
>
>
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
#### 触发事件
$(selector).click(); //触发 click事件
$(selector).trigger("click");
#### jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
//screenX和screenY 对应屏幕最左上角的值
//clientX和clientY 距离页面左上角的位置（忽视滚动条）
//pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
//event.keyCode 按下的键盘代码
//event.data 存储绑定事件时传递的附加数据
//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
### jQuery补充知识点
#### 链式编程
>
> 通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
>
>
>
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
【案例：五角星评分案例.html】
#### each方法
>
> jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
>
>
>
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
【案例：不同的透明度.html】
#### 多库共存
>
> jQuery使用
>
>
>
>
> 作
>
>
> 为
>
>
> 标
>
>
> 示
>
>
> 符
>
>
> ，
>
>
> 但
>
>
> 是
>
>
> 如
>
>
> 果
>
>
> 与
>
>
> 其
>
>
> 他
>
>
> 框
>
>
> 架
>
>
> 中
>
>
> 的
>
>
>
> 作为标示符，但是如果与其他框架中的
>
>
> 作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权.
>
>
>
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c
### 插件
#### 常用插件
>
> 插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
>
>
> jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
>
>
>
1. jquery.color.js
>
> animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
>
>
>
使用插件的步骤
//1. 引入jQuery文件
//2. 引入插件（如果有用到css的话，需要引入css）
//3. 使用插件
2. jquery.lazyload.js
懒加载插件
#### jquery.ui.js插件
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：<http://api.jqueryui.com/category/all/>
其他教程：[jQueryUI教程](https://bbs.csdn.net/topics/618545628)
基本使用:
//1. 引入jQueryUI的样式文件
//2. 引入jQuery
//3. 引入jQueryUI的js文件
//4. 使用jQueryUI功能
使用jquery.ui.js手风琴菜单
### 制作jquery插件
>
> 原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。
>
>
>
//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};
### 案例代码
##### 【案例：下拉菜单】
- 一级菜单1
- 二级菜单1
- 二级菜单2
- 二级菜单3
- 一级菜单1
- 二级菜单1
- 二级菜单2
- 二级菜单3
- 一级菜单1
- 二级菜单1
- 二级菜单2
- 二级菜单3
});
##### 【案例：突出展示】
});
##### 【案例：手风琴】
<li class="menuGroup"> <span class="groupTitle">标题2</span> <div>我是弹出来的div2</div> </li> <li class="menuGroup"> <span class="groupTitle">标题3</span> <div>我是弹出来的div3</div> </li> <li class="menuGroup"> <span class="groupTitle">标题4</span> <div>我是弹出来的div4</div> </li> </ul>
##### 【案例：淘宝精品】
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a></li>
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男靴</a></li>
</ul>
##### 案例-《tab切换》
- 国际大牌◆
- 国妆名牌◆
- 清洁用品◆
- 男士精品
##### 案例-《下拉菜单2》
- 一级菜单1
- 二级菜单1
- 二级菜单2
- 二级菜单3
- 一级菜单1
- 二级菜单1
- 二级菜单2
- 二级菜单3
- 一级菜单1
- 二级菜单1
- 二级菜单2
- 二级菜单3
});
##### 案例-《360开关机动画》
});
##### 案例-《淡入淡出》
});
##### 案例-《表格删除》
| 课程名称 | 所属学院 | 操作 |
|---|---|---|
| JavaScript | 传智播客-前端与移动开发学院 | DELETE |
| css | 传智播客-前端与移动开发学院 | DELETE |
| html | 传智播客-前端与移动开发学院 | DELETE |
| jQuery | 传智播客-前端与移动开发学院 | DELETE |
##### 案例-《美女相册》
美女画廊
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
需要这份系统化资料的朋友，可以戳这里获取
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
美女画廊
[外链图片转存中…(img-2uomt2kv-1715107142567)]
[外链图片转存中…(img-Ym5EsgfH-1715107142568)]
[外链图片转存中…(img-TeoZ34x7-1715107142568)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
需要这份系统化资料的朋友，可以戳这里获取
