jQuery-黑马笔记

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、jQuery介绍及常用API

1.jQuery的概述

简单来说，jQuery就是一个对原生dom进行再次封装的一个库(js文件)，通过封装，我们可以快速高效的使用这些被封装好的功能

2.jQuery的使用

在jQuery的官网上下载，复制jQuery代码到js文件中，在html页面中script引入js文件即可

3.jQuery的入口函数

1. 等着页面的dom加载完毕再去执行js代码

传统写法：	$(document).ready( function () {} )
现在流行： $( function(){} )
相当于原生JS中：	DOMcontentLoaded
`注意：$(”  “)  字符串尽量用双引号`

4.jQuery的顶级对象 $

1. $是jQuery的别称，在书写代码时，两个可以相互替代，实际中常用$
2. $是jQuery的顶级对象，相当于原生JavaScript的window，把元素利用$包装成jQuery对象就可以调用jQuery的方法了

5.jQuery对象和dom对象

1. 用原生js获取来的对象就是dom对象
2. 用jQuery获取的对象就是jQuery对象，jQuery对象是一个伪数组形式
3. jQuery对象的本质：利用$对DOM对象包装后产生的对象
4. 注意： jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript的属性和方法
5. dom对象和jQuery对象可以相互转换

dom转为jQuery对象： $(DOM对象)
jQuery转dom有两种方式：
	1.$(DOM对象)[索引号]
	2.$(DOM对象).get(索引号)

二、jQuery常用API

1.jQuery选择器

语法： $(‘选择器’)

2.jQuery样式操作

语法： $(‘选择器’).css(‘属性’，‘属性值’)

3.jQuery筛选选择器

语法：

• 筛选第一个或者最后一个用first/last：$(‘li:first’) ; $(‘li:last’);
• 筛选索引号为奇数odd，为偶数even:$(‘li:odd’); $(‘li:even’)
• 筛选指定索引号：$('li:eq(index)) ; index从0 开始

4.jQuery的筛选方法（重点）

• parent(): 找距离自己最近一级的父级元素 找亲爸爸
• children():找自己的亲儿子 不会找到孙子 类似于亲儿子选择器，参数：你要查找的亲儿子
• find():可以查找里面所有的后代元素 儿子孙子 类似于后代选择器
• siblings():找自己的亲兄弟元素
• nextAll():查找当前元素之后的所有同辈元素
• prevtAll();查找当前元素之前的所有同辈元素
• eq():参数：索引号
• hasClass():判断是否拥有该类名；参数：字符串类名 返回值：boolean

5.jquery的排他思想

排它思想：当前元素设置样式，其余的兄弟元素清除样式
得到当前元素的索引号方法：$(元素).index()

$(function(){
	$('button').click(function(){
	$(this).css('backgroundColor','red')
	$(this).siblings('button').css('backgroundColor',' ')
	})
})

三、jQuery链式编程及样式操作

1.用css方法操作样式

jQuery可以通过css方法来修改简单元素样式；也可以操作类、修改多个样式

• 参数致谢属性名，返回的是属性值；$(this).css(‘color’)
• 参数是：属性名，属性值；则是设置一组样式
• 参数可以是对象的形式，在对象中写入多组样式，多组样式之间用逗号分隔；键值对用冒号分隔，属性可以不加引号

2.设置类样式 方式 （开发常用）

对要设置的元素进行样式设置时，给她一个类写在css文件中，当该元素需要这个样式的时候，为这个元素添加类即可
注意区别：元素JS中的className会覆盖元素原先里面的类 ；jQuery的类操作只是对指定类进行操作，不会影响原先的类名

• 增加类addClass(‘类名’)
• 移除类removeClass(‘类名’)
• 切换类toggleClass(‘类名’)

四、jQuery动画

1.显示隐藏效果

注意：一般不加参数 直接显示或者隐藏

• show ( [ speed , [ easing ] , [ fn ] ] )
  三个参数都可以省略，无动画直接显示；
  speed:三种速度字符串选择（‘slow’；‘normal’； ‘fast’）或者填写表示动画时长的毫秒数
  easing：用来指定切换效果，默认是：’swing：由慢到快到慢‘；’linear：匀速的‘
  fn:回调函数，在动画完成时执行的函数，每个元素执行一次
• hide ( [ speed , [ easing ] , [ fn ] ] )
  三个参数都可以省略，无动画直接显示；
  speed:三种速度字符串选择（‘slow’；‘normal’； ‘fast’）或者填写表示动画时长的毫秒数
  easing：用来指定切换效果，默认是：’swing：由慢到快到慢‘；’linear：匀速的‘
  fn:回调函数，在动画完成时执行的函数，每个元素执行一次
• toggle ()
  三个参数都可以省略，无动画直接显示；
  speed:三种速度字符串选择（‘slow’；‘normal’； ‘fast’）或者填写表示动画时长的毫秒数
  easing：用来指定切换效果，默认是：’swing：由慢到快到慢‘；’linear：匀速的‘
  fn:回调函数，在动画完成时执行的函数，每个元素执行一次

2.滑动效果

注意：三个参数如上

• slideDown()
• slideUp()
• slideToggle()

3.淡入淡出效果

注意：三个参数如上

• fadeIn()：fade逐渐 in 进去 ；
• fadeOut()
• fadeToggle()
• fadeTo( [ [speed] , [ easing ] , opacity, [ fn ] ] )：修改透明度：渐进方式调整到指定的不透明度;opacity必须写，值：0-1之间

4.自定义动画

• animate( params , [ speed ] , [ easing ] ,[ fn ] )
• params:想要更改的样式属性，以对象的形式传递，必须写；复合属性采用驼峰命名

5.事件切换

hover( [over] out ) : $(‘div’).hover(function(){},function(){}) 鼠标 经过离开的复合写法

• over:鼠标移动到某个元素上要触发的函数 相当于mouseenter/mouseover
• out:鼠标移除元素要触发的函数( 相当于mouseleave )
• 如果只有一个函数：则鼠标经过和鼠标离开都会触发这个函数

6.动画队列及其停止排队方法

1.动画或效果队列：动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
2.停止队列
语法：stop()
作用：用于停止动画或者效果
注意：stop要写在动画的前面，相当于停止/结束上一次的动画

$(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });

五、jQuery事件绑定和解绑

1. jQuery事件注册

2.jQuery事件处理 on()绑定事件（常用）

1. 介绍：on() 方法在匹配的元素上能够绑定一个或多个事件
2. 语法：元素A.on(events,[selector],fn)
   event:一个或者多个事件类型 ，多个事件通过对象以键值对的形式记录事件/多个事件还可以用空格隔开： ’‘ mouseenter mouseleave’’

			// 2. 事件处理on
            // (1) on可以绑定1个或者多个事件处理程序
             $("div").on({
                 mouseenter: function() {
                     $(this).css("background", "skyblue");
                 },
                 click: function() {
                     $(this).css("background", "purple");
                 },
                 mouseleave: function() {
                     $(this).css("background", "blue");
                 }
             });

selector：元素A的子元素选择器
fn:回调函数；绑定在元素身上的监听函数

3. 通过on()方法可以实现事件委托
   事件委托:把原来加给子元素身上的事件绑定在父元素身上，就是把事件委托给父元素
eg: $('ul').on('click','li') 给li都绑定了事件；也用到了事件冒泡的原理
4. 通过on()方法可以给动态生成的元素绑定事件

			 $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
            // (2) on可以实现事件委托（委派）
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            // (3) on可以给未来动态创建的元素绑定事件
            // $("ol li").click(function() {
            //     alert(11);
            // })
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);

3.jQuery事件 off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

• $(‘div’).off() :把div元素通过on绑定的事件全部移除
• $(‘div’).off(’click‘) ：只移除on绑定的click事件
• 解除事件委托

特别的 ： 元素.one() ：元素绑定的事件只触发一次

	 $('ul').on('click','li',function(){
		alert(123);
	}) 
	$('ul').off('click','li')

4.自动触发事件trigger（）

• 方法一：元素.事件()
• 方法二：元素.trigger（’‘事件名’‘）
• 方式三：元素.triggerHandler(‘’ 事件名 ‘’)
• 方式三：此方法不会触发元素的默认行为，比如用此方法给input的text类型绑定focus事件自动触发，触发之后光标不会在input表单里面闪烁，如果用方式二进行同样的操作，自动触发结束后，通过方式二的光标会在input表单内闪烁

5.jQuery事件对象

只要事件触发 ，就会由事件对象的产生
应用：
阻止默认行为：e.preventDefault()
阻止冒泡: e.stopPropagation()

六、jQuery其他方法

1.jQuery对象的拷贝方法

把某个对象拷贝给另外一个对象使用，此时使用$.extend()方法
语法：$.extend( [deep] , target ,  object1 ,  [objectN] ) 

`注意：当target自己也自带一些属性，如果object1中的属性和target的属性相同，则object1会覆盖target自身的相同属性`

• deep:如果设置为true则是深拷贝、默认是false浅拷贝
• target：要拷贝的目标对象
• object1：把object1拷贝给target

2.jQuery多库共存的两种方法

3.jQuery插件的使用

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。