javaEE -19（9000 字 JavaScript入门 - 4）

2023-12-28 23:52
文章标签 java 入门 script ee 9000 19

本文主要是介绍javaEE -19（9000 字 JavaScript入门 - 4），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一： jQuery

jQuery是一个快速、小巧且功能丰富的JavaScript库。它旨在简化HTML文档遍历、事件处理、动画效果以及与后端服务器的交互等操作。通过使用jQuery，开发者可以以更简洁、更高效的方式来编写JavaScript代码。

jQuery提供了许多易于使用的方法和功能，可以大大简化开发过程。以下是jQuery的一些主要特点：

  1. 选择器：jQuery允许使用CSS选择器来选择页面上的元素。这使得查找和操作DOM元素变得非常容易。

  2. DOM操作：jQuery提供了一套简单而强大的API，用于创建、查找、添加、删除和修改HTML元素。这意味着您可以轻松地操纵页面上的元素，而无需编写繁琐的原生JavaScript代码。

  3. 事件处理：jQuery简化了处理事件的过程。您可以使用一些简单的方法来附加事件处理程序，例如点击、悬停或提交表单时触发的事件。

  4. 动画效果：jQuery提供了用于创建动态和交互性效果的方法。您可以轻松地添加淡入淡出、滑动、渐变、旋转等动画效果，使页面更加生动和吸引人。

1.1 jQuery 隐式迭代

在jQuery中，隐式迭代是指对一组元素进行操作或处理时，jQuery会自动迭代每个元素，并且在每个元素上执行相同的操作。这种隐式迭代使得对多个元素进行处理变得更加简便和高效。

举个例子：

HTML代码：

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

JavaScript代码：

$("li").addClass("highlight");

在上面的示例中，$("li")选择了所有的<li>元素，并返回一个jQuery对象。然后，我们调用了addClass("highlight")方法，将highlight类名添加到每个<li>元素上。这里的隐式迭代是jQuery自动迭代每个选中的<li>元素，并在每个元素上执行addClass操作。

最终的结果是，每个<li>元素都会添加highlight类名，从而实现了对多个元素的同一操作。

二： jQuery 常用API

2.1 jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号

在这里插入图片描述

2.1.1 jQuery 层级选择器

在这里插入图片描述

2.1.2 jQuery 筛选选择器

在这里插入图片描述

2.1.3 jQuery 筛选方法

在这里插入图片描述

2.1.4 链式编程

链式编程是为了节省代码量，看起来更优雅。

$(this).css('color', 'red').sibling().css('color', '');

代码解析：

  • $(this)：表示当前元素的jQuery对象。
  • .css('color', 'red')：将当前元素的文本颜色设置为红色。
  • .sibling()：选择当前元素的兄弟元素。
  • .css('color', '')：将所选择的兄弟元素的文本颜色设置为空字符串，即移除其文本颜色。

因此，这段代码的效果是将当前元素以及其兄弟元素的文本颜色进行了修改。

2.2 jQuery 样式操作

2.2.1 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

  1. 参数只写属性名，则是返回属性值
$(this).css(''color'');
  1. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
  1. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，
$(this).css({ "color":"white","font-size":"20px"});

2.2.2 设置类样式方法

  1. 添加类
$(“div”).addClass(''current'');
  1. 移除类
$(“div”).removeClass(''current'');
  1. 切换类
$(“div”).toggleClass(''current'');

注意：

  • 原生 JS 中 className 会覆盖元素原先里面的类名。
  • jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

2.3 jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：
在这里插入图片描述

2.3.1 显示隐藏效果

2.3.1.1 显示
show([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略， 无动画直接显示。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

举个例子：

show(1000, 'easeInOut', function() {console.log('动画完成');
});

第一个参数 speed 是动画的持续时间，这里设置为 1000 毫秒（1秒）。第二个参数 easing 是动画的缓动函数，这里设置为 ‘easeInOut’。最后一个参数 fn是动画完成后要执行的回调函数，这里我们输出一条消息到控制台。

2.3.1.2 隐藏
hide([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略， 无动画直接显示。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.1.3 显示和隐藏切换
toggle([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略， 无动画直接显示。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2.3.2 滑动效果

2.3.2.1 下滑
slideDown([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.2.2 上滑
slideUp([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.2.3 上滑和下滑切换
slideToggle([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2.3.3 事件切换

hover([over,]out)

参数解释：

  • over:鼠标移到元素上要触发的函数（相当于mouseenter）
  • out:鼠标移出元素要触发的函数（相当于mouseleave）
  • 如果只写一个函数，则鼠标经过和离开都会触发它

2.3.4 动画队列及其停止排队方法

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

我们可以通过这个方法停止排队：

stop()

注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

2.3.5 淡入淡出效果

2.3.5.1 淡入
fadeIn([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.5.2 淡出
fadeOut([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.5.3 淡入淡出切换
fadeToggle([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.5.4 渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])

参数解释：

  • opacity 透明度必须写，取值 0~1 之间。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or
    “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2.3.6 自定义动画 animate

animate(params,[speed],[easing],[fn])

参数解释：

  • params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

举个例子：
下面是使用 animate 函数的一个简单例子：

// 创建一个 DOM 元素
const box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
document.body.appendChild(box);// 定义动画参数
const params = {targets: box,translateX: 200,rotate: '1turn',backgroundColor: '#00ff00',
};// 执行动画
animate(params, 1000, 'easeInOutQuad', () => {console.log('动画结束');
});

2.4 jQuery 属性操作

2.4.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 < a > 元素里面的 href ，比如 < input > 元素里面的 type。

  1. 获取属性语法
prop(''属性'')
  1. 设置属性语法
prop(''属性'', ''属性值'')

2.4.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

  1. 获取属性语法
attr(''属性'') // 类似原生 getAttribute()
  1. 设置属性语法
attr(''属性'', ''属性值'') // 类似原生 setAttribute()

2.4.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

  1. 附加数据语法
data(''name'',''value'') // 向被选元素附加数据
  1. 获取数据语法
date(''name'') // 向被选元素获取数据

同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型

2.5 jQuery 文本属性值

主要针对元素的内容还有表单的值操作。

  1. 普通元素内容 html()（ 相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
  1. 普通元素文本内容 text() (相当与原生 innerText )
text() // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
  1. 表单的值 val()（ 相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值

2.6 jQuery 元素操作

2.6.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

$("div").each(function (index, domEle) { xxx; }）
  1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
  2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
  3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
// HTML结构
<div class="example">Element 1</div>
<div class="example">Element 2</div>
<div class="example">Element 3</div>// JavaScript代码
$(document).ready(function() {// 使用$.each()函数迭代所有class为.example的div元素$.each($(".example"), function(index, domEle) {$(this).text("Element " + (index + 1));console.log($(this).text());});
});

在$.each()函数中，index是迭代的当前元素的索引，domEle是迭代的当前元素本身。$.each()函数会自动给index赋上递增的数值，所以不需要手动定义变量index。index会自动递增。

当然还有另外一种形式：

$.each(object，function (index, element) { xxx; }）
  1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
  2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

2.6.2 创建元素

$(''<li></li>'');

动态的创建了一个 < li >

2.6.3 添加元素

2.6.3.1 内部添加
  1. 内部添加
element.append(''内容'')

把内容放入匹配元素内部最后面，类似原生 appendChild。

element.prepend(''内容'')

把内容放入匹配元素内部最前面。

2.6.3.2 外部添加
element.after(''内容'') // 把内容放入目标元素后面

element.before(''内容'') // 把内容放入目标元素前面
  • 内部添加元素，生成之后，它们是父子关系。
  • 外部添加元素，生成之后，他们是兄弟关系。

2.6.4 删除元素

element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
  • remove 删除元素本身。
  • empt() 和 html(‘’‘’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

2.7 jQuery 尺寸、位置操作

2.7.1 jQuery 尺寸

在这里插入图片描述

  • 以上参数为空，则是获取相应值，返回的是数字型。
  • 如果参数为数字，则是修改相应值。
  • 参数可以不必写单位。

2.7.2 jQuery 位置

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

offset() 设置或获取元素偏移

  • offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
  • 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left
    用于获取距离文档左侧的距离。
  • 可以设置元素的偏移：offset({ top: 10, left: 30 });

position() 获取元素偏移

  • position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
  • 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left
  • 用于获取距离定位父级左侧的距离。该方法只能获取。

scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

  • scrollTop() 方法设置或返回被选元素被卷去的头部。
  • 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

三： jQuery 事件

3.1 jQuery 事件注册

3.1.1 单个事件注册

element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })

其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

3.2 jQuery 事件处理

element.on(events,[selector],fn)
  1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
  2. selector: 元素的子元素选择器 。
  3. fn:回调函数 即绑定在元素身上的侦听函数。

on() 方法优势1：

可以绑定多个事件，多个处理事件处理程序。

$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});

如果事件处理程序相同

$(“div”).on(“mouseover mouseout”, function() {
$(this).toggleClass(“current”);
});

on() 方法优势2：

可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click', 'li', function() {
alert('hello world!');
});

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on() 方法优势3：

动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

$(“div").on("click",”p”, function(){
alert("俺可以给动态生成的元素绑定事件")
});

$("div").append($("<p>我是动态创建的p</p>"));

3.2.1 事件处理 off() 解绑事件

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

$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托

如果有的事件只想触发一次， 可以使用 one() 来绑定事件。

3.2.2 自动触发事件 trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click() // 第一种简写形式
element.trigger("type") // 第二种自动触发模式
element.triggerHandler(type) // 第三种自动触发模式

$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

3.3 jQuery 事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event) {})
  • 阻止默认行为：event.preventDefault() 或者 return false
  • 阻止冒泡： event.stopPropagation()

这篇关于javaEE -19（9000 字 JavaScript入门 - 4）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/547711。

相关文章

Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
Java中String字符串使用避坑指南

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下：1. 字符串的不可变性：每次修改都创建新对象2. 使用 == 比较字符串，陷阱满
阅读更多...
Java判断多个时间段是否重合的方法小结

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D
阅读更多...
IDEA编译报错“java: 常量字符串过长”的原因及解决方法

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①：StringBui
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
Java中ArrayList和LinkedList有什么区别举例详解

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》：本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程
阅读更多...
JavaScript中的reduce方法执行过程、使用场景及进阶用法

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》：本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...
Spring AI集成DeepSeek的详细步骤

Spring AI集成DeepSeek的详细步骤

《SpringAI集成DeepSeek的详细步骤》DeepSeek作为一款卓越的国产AI模型,越来越多的公司考虑在自己的应用中集成,对于Java应用来说,我们可以借助SpringAI集成DeepSe... 目录DeepSeek 介绍Spring AI 是什么？1、环境准备2、构建项目2.1、pom依赖2.2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2