当前位置: 首页 > 工具软件 > jquery-ahover > 使用案例 >

jQuery-黑马笔记

荣波
2023-12-01

系列文章目录

提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 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:回调函数;绑定在元素身上的监听函数
  1. 通过on()方法可以实现事件委托
    事件委托:把原来加给子元素身上的事件绑定在父元素身上,就是把事件委托给父元素
    eg: $('ul').on('click','li') 给li都绑定了事件;也用到了事件冒泡的原理
  2. 通过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提供了大量能使我们快速便捷地处理数据的函数和方法。

 类似资料: