jQuery : 是一种广泛使用的JavaScript库 , 它简化了处理HTML文档 , 处理事件 , 执行动画以及使用AJAX等任务的编程 .
jQuery通过提供简洁的API , 使开发者可以更快地编写JavaScript代码 , 并且具有跨浏览器兼容性 .
它提供了许多便利的功能和方法 , 使处理DOM元素 , 处理事件 , 创建动画和发送AJAX请求更加方便 .
jQuery减少了开发工作量 , 并提供了更加直观和简洁的代码编写方式 .
jQuery作为一个流行的JavaScript库 , 具有以下一些优势 :
* 1. 简洁的语法 : jQuery提供了简洁易懂的语法 , 使得开发人员能够更快速地编写JavaScript代码 , 减少了冗余和繁琐的操作 .
* 2. DOM操作简化 : jQuery提供了强大的DOM操作功能 .
通过简单的方法和选择器 , 可以轻松地查找 , 遍历和操作DOM元素 , 实现动态的页面效果和交互行为 .
* 3. 丰富的插件库 : jQuery拥有庞大的插件生态系统 , 提供了大量的第三方插件 , 涵盖了各种常见的功能和效果 , 如表单验证 , 图表绘制 , 轮播图等 .
这些插件能够快速且可靠地扩展网页的功能 .
* 4. 轻量级 : 相对于其他JavaScript库或框架 , jQuery的文件大小较小 , 加载速度快 , 这对于优化网页性能和提升用户体验非常重要 .
* 5. 跨浏览器兼容性 : jQuery致力于解决浏览器兼容性问题 , 能够在主流的浏览器上稳定运行 ,
并提供了统一的API , 使得开发人员不需要考虑底层的浏览器差异 .
* 6. AJAX支持 : jQuery提供了简洁易用的AJAX方法 , 使得与服务器端进行异步通信变得更加方便 .
开发人员可以使用jQuery轻松地发送AJAX请求 , 并处理返回的数据 .
* 7. 动画和效果 : jQuery提供了丰富的动画和效果操作 , 可以通过一行代码实现元素的淡入淡出 , 滑动 , 缩放等动态效果 , 使页面更加生动有趣 .
* 8. 社区支持和文档丰富 : jQuery拥有庞大的活跃开发社区 , 提供了大量的教程 , 文档和示例 , 开发人员可以轻松地找到解决问题的方法和资源 .
总的来说 . jQuery能够为开发人员提供一个更加简洁和高效的编程环境 ,
简化了常见的JavaScript操作 , 并且提供了丰富的插件和工具 , 使得开发网页和应用程序变得更加便捷和灵活 .
jQuery目前有三个主要版本 : jQuery 1. x , jQuery 2. x和jQuery 3. x .
以下是对它们的简要介绍 :
* 1. jQuery 1. x : jQuery 1. x系列版本是最早发布的版本 , 主要关注于向后兼容性 .
这些版本支持旧版的浏览器 ( 如IE 6 / 7 / 8 ) , 并且能够在这些浏览器中提供相同的功能和特性 .
* 2. jQuery 2. x : jQuery 2. x系列版本是在 1. x基础上进行的改进 , 主要采用了更加现代的Web标准 .
与 1. x系列不同 , 2. x系列版本放弃了对旧版IE浏览器的支持 ( 最低要求为IE 9 ) , 这使得 2. x系列的文件大小更小 , 加载速度更快 .
* 3. jQuery 3. x：jQuery 3. x系列版本是目前最新的版本 , 也是推荐使用的版本 .
它是在 2. x系列的基础上进行改进和优化的 , 保留了对现代浏览器的支持 ,
对于那些在 2. x系列中升级到 3. x系列的用户来说 , 几乎没有任何的破坏性变化 .
jQuery 3. x系列也提供了一些新的功能和改进 , 同时继续保持着快速 , 稳定和兼容性的优势 .
jQuery对象是通过选择器选择DOM元素后返回的特殊对象 .
它是一个包装了一组匹配的DOM元素的容器 , 可以直接操作这些DOM元素 .
jQuery对象提供了丰富的方法来操作DOM元素 , 例如修改元素的属性 , 样式 , 内容 , 绑定事件 , 执行动画等等 .
可以通过链式调用方法 , 便捷地对一组DOM元素进行操作 .
要声明一个jQuery对象 , 可以使用$ ( ) 或jQuery ( ) 函数并传入一个选择器字符串 , DOM元素 , HTML代码片段或一个函数作为参数 .
常见的声明方式 ( 约定 , 在声明一个jQuery对象变量的时候在变量名前面加上$ ) :
* 1. 通过选择器字符串选择元素 : var $element = $ ( "#myElement" ) ;
* 2. 通过DOM元素创建jQuery对象 : var $element = $ ( document . getElementById ( "myElement" ) ) ;
* 3. 通过HTML代码片段创建jQuery对象 : var $element = $ ( "<div class='myClass'>Hello jQuery!</div>" ) ;
* 4. 通过函数创建jQuery对象 : var $element = $ ( function ( ) { / / 在这里可以编写初始化逻辑 } ) ;
在网页中引入jQuery , 可以按照以下步骤进行操作 :
* 1. jQuery的官方网站 ( https : / / jquery . com / ) 下载jQuery库的最新版本 .
* 2. 选择下载压缩版本 ( . min . js文件 ) , 它是经过精简和压缩的 , 文件大小较小 , 在生产环境中使用较为常见 .
* 3. 在网页中右击选择 '另存为(Ctrl + s)' , 会弹出一个保存对话框 .
* 4. 在保存对话框中 , 选择您要保存文件的位置和名称 .
* 1. 将下载好的jQuery文件放置在你的项目目录中 , 通常是放在一个名为 "js" 或 "scripts" 的文件夹中 .
* 2. 在HTML文件中 , 可以在 < head > 标签中或 < body > 标签的底部引入jQuery .
以下是两种常见的引入方式 ( 将下面的 "path/to/jquery .min.js" 替换为你实际放置jQuery文件的路径 . )
< head> < scriptsrc = " path/to/jquery .min.js" > </ script> </ head> < body> < scriptsrc = " path/to/jquery .min.js" > </ script> </ body> * 3. 一旦jQuery被成功引入到的网页中 , 就可以开始使用jQuery的功能和方法了 .
可以在其他 < script > 标签中编写jQuery代码 , 并使用$符号来表示jQuery对象 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < divid = " d0" > </ div> </ body> < script>
let $variable = $ ( '#d0' ) ;
console. log ( $variable. text ( ) ) ;
</ script> </ html>
CDN ( 内容分发网络 ) : 是一个由多个服务器分布在不同地理位置的网络系统 , 旨在提供高效的内容分发服务 .
通常 , 网站的内容 ( 包括静态文件 , 图像 , 音频 , 视频等 ) 会存储在一个或多个服务器上 , 并由用户从服务器上请求访问 .
jQuery的CDN地址 : https : / / code . jquery . com / jquery -3.6 .0 . min . js .
通过将 < script > 标签的src属性设置为这个URL , 浏览器将会从该CDN加载jQuery库文件 .
使用CDN引用jQuery的方式确实需要依赖网络连接来加载jQuery文件 .
如果网络不稳定或无法访问CDN , 可能会导致加载jQuery文件失败从而报错 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " https://code.jquery .com/jquery -3.6.0.min.js" > </ script> </ head> < body> < divid = " d0" > </ div> </ body> < script>
let $variable = $ ( '#d0' ) ;
console. log ( $variable. text ( ) ) ;
</ script> </ html>
jQuery对象是jQuery库特有的对象 , 它封装了一组DOM元素 , 并提供了一系列jQuery方法用于操作这些DOM元素 .
这些方法是jQuery库自身提供的 , 而原生的DOM对象并没有这些方法 .
因此 , jQuery对象可以使用jQuery提供的方法来操作这些DOM元素 , 但是无法直接使用DOM对象的方法 .
如果需要获取原生的DOM对象 , 可以使用 [ index ] 或者 . get ( index ) 方法 .
var $button = $ ( '.my-button' ) ;
var buttonElement = $button[ 0 ] ;
var buttonElement = $button. get ( 0 ) ;
同样地 , 原生的DOM对象只拥有原生的DOM方法和属性 , 无法直接使用jQuery库中的方法 .
如果要对DOM对象使用jQuery的方法 , 需要先将DOM对象转换为jQuery对象 , 可以通过$ ( domObject ) 或者jQuery ( domObject ) 来实现 .
var windowObject = window;
var $window = $ ( windowObject) ;
使用jQuery选择器来查找符合条件的元素 .
以下是一些常用的标签查找方法 :
* 1. id选择器 : 使用$ ( '#id' ) 可以根据给定的id查找元素 .
例如 , $ ( '#my-element' ) 可以找到id为 "my-element" 的元素 .
* 2. 标签选择器 : 使用$ ( 'tagName' ) 可以根据给定的标签名查找元素 .
例如 , $ ( 'div' ) 可以找到所有的 < div > 元素 .
* 3. 类选择器 : 使用$ ( '.className' ) 可以根据给定的类名查找元素 .
例如 , $ ( '.my-class' ) 可以找到所有具有 "my-class" 类的元素 .
* 4. 配合使用 : 通过组合id选择器 , 类选择器和标签选择器进行更复杂的查找 .
例如 , $ ( 'div.c1' ) 可以查找所有在 < div > 元素中具有 "c1" 类的元素 .
* 5. 组合选择器 : 使用逗号将多个选择器组合起来 , 以选择符合其中任意一个选择器的元素 .
例如 , $ ( '#id' , '.className' , 'tagName' ) 可以同时根据id , 类名和标签名进行查找 .
* 6. 通配选择器 : 使用$ ( '*' ) 可以选择所有的元素 .
* 7. 层级选择器 : 使用空格 , ">" , "+" 和 "~" 来定义层级关系 :
$ ( 'x y' ) 表示选取x元素的后代中的所有y元素 .
$ ( 'x > y' ) 表示选取x元素的直接子元素中的所有y元素 .
$ ( 'x + y' ) 表示选取x元素后的同级紧邻的y元素 .
$ ( 'x ~ y' ) 表示选取x元素后的所有同级的y元素 .
jQuery中用于进一步筛选元素的一些选择器 :
: first 匹配第一个元素 .
: last 匹配最后一个元素 .
: eq ( index ) 匹配索引等于index的元素 , 索引从 0 开始计数 . 例如 , : eq ( 2 ) 将匹配第三个元素 .
: even 匹配所有索引值为偶数的元素，索引从 0 开始计数 .
: odd 匹配所有索引值为奇数的元素，索引从 0 开始计数 .
: gt ( index ) 匹配所有大于给定索引值index的元素 .
: lt ( index ) 匹配所有小于给定索引值index的元素 .
: not ( selector ) 移除所有后代中包含selector中指定的标签的元素 . 例如 , : not ( p ) 将移除所有包含 < p > 标签的元素 .
: has ( selector ) 选中所有后代中含有selector中指定的标签的元素 . 例如 , : has ( span ) 将选中所有包含 < span > 标签的元素 .
<! DOCTYPE html > < html> < head> < title> </ title> < scriptsrc = " https://code.jquery .com/jquery -3.6.0.min.js" > </ script> < style>
div, p, ul, li, table, tr {
margin : 10px;
padding : 10px;
}
</ style> </ head> < body> < divclass = " c1" > </ div> < divclass = " c2" > </ div> < divclass = " c3" > </ div> < div> < p> </ p> </ div> < p> </ p> < p> </ p> < p> </ p> < ul> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < table> < tr> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> </ tr> </ table> < script>
$ ( 'div:first' ) . css ( 'color' , 'red' ) ;
$ ( 'p:last' ) . css ( 'color' , 'blue' ) ;
$ ( 'ul li:eq(2)' ) . css ( 'font-weight' , 'bold' ) ;
$ ( 'table tr:even' ) . css ( 'background-color' , '#f2f2f2' ) ;
$ ( 'table tr:odd' ) . css ( 'background-color' , '#ddd' ) ;
$ ( 'ul li:gt(3)' ) . css ( 'text-decoration' , 'line-through' ) ;
$ ( 'ul li:lt(2)' ) . css ( 'font-style' , 'italic' ) ;
$ ( 'div:not(.c1)' ) . css ( 'border' , '1px solid black' ) ;
$ ( 'div:has(p)' ) . css ( 'background-color' , '#e6f0ff' ) ;
</ script> </ body> </ html>
表单筛选器是CSS中用于选择表单元素的特定状态或属性的筛选器 .
: text : 文本类型 , 用于输入普通文本 .
: password : 密文类型 , 用于输入密码或其他敏感信息 .
: radio : 单选框 , 用于从多个选项中选择一个 .
: checkbox : 多选框 , 用于从多个选项中选择多个 .
: checked : 选择被选中的单选框和复选框 .
: select : 选择所有的下拉列表 .
: selected : 选择所有被选中的选项 .
: autocomplete : 选择所有具有自动完成功能的输入框 .
: file : 文件类型 , 用于上传文件 .
: enabled : 选择可用的表单元素 .
: disabled : 选择禁用的表单元素 .
: submit : 提交按钮 , 用于提交表单数据 .
: reset : 重置按钮 , 用于重置表单数据 .
: button : 文字按钮 , 用于触发自定义事件或功能 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < formaction = " " > < labelfor = " text-input" > </ label> < inputtype = " text" id = " text-input" > < br> < labelfor = " password-input" > </ label> < inputtype = " password" id = " password-input" > < br> < labelfor = " file-input" > </ label> < inputtype = " file" id = " file-input" > < br> < labelfor = " textarea-input" > </ label> < textareaid = " textarea-input" rows = " 4" cols = " 50" > </ textarea> < br> < label> </ label> < inputtype = " radio" id = " gender-male" name = " gender" value = " male" > < labelfor = " gender-male" > </ label> < inputtype = " radio" id = " gender-female" name = " gender" value = " female" > < labelfor = " gender-female" > </ label> < br> < label> </ label> < inputtype = " checkbox" id = " hobby-reading" name = " hobby-reading" value = " reading" > < labelfor = " hobby-reading" > </ label> < inputtype = " checkbox" id = " hobby-painting" name = " hobby-painting" value = " painting" > < labelfor = " hobby-painting" > </ label> < inputtype = " checkbox" id = " hobby-sports" name = " hobby-sports" value = " sports" > < labelfor = " hobby-sports" > </ label> < br> < buttontype = " button" > </ button> </ form> < script>
$ ( ':button' ) . click ( function ( ) {
let username = $ ( ':text' ) . val ( ) ;
console. log ( username) ;
let password = $ ( ':password' ) . val ( ) ;
console. log ( password) ;
let file = $ ( ':file' ) [ 0 ] . files[ 0 ] ;
console. log ( file) ;
let textarea = $ ( 'textarea' ) . val ( ) ;
console. log ( textarea) ;
let radio = $ ( ':radio:checked' ) . val ( ) ;
console. log ( radio) ;
let checkbox = $ ( ':checkbox:checked' )
checkbox. each ( function ( ) {
console. log ( $ ( this ) . val ( ) )
} )
} )
</ script> </ body> </ html>
下一个元素 :
$ ( "#id" ) . next ( ) : 获取指定元素的下一个同级元素 .
$ ( "#id" ) . nextAll ( ) : 获取指定元素后面的所有同级元素 .
$ ( "#id" ) . nextUntil ( "#i2" ) : 获取指定元素后面直到遇到匹配选择器的元素为止的所有同级元素 .
上一个元素 :
$ ( "#id" ) . prev ( ) : 获取指定元素的上一个同级元素 .
$ ( "#id" ) . prevAll ( ) : 获取指定元素前面的所有同级元素 .
$ ( "#id" ) . prevUntil ( "#i2" ) : 获取指定元素前面直到遇到匹配选择器的元素为止的所有同级元素 .
父元素 :
$ ( "#id" ) . parent ( ) : 获取指定元素的直接父元素 .
$ ( "#id" ) . parents ( ) : 获取指定元素的所有父元素 .
$ ( "#id" ) . parentsUntil ( ) : 获取指定元素的所有父元素，直到遇到匹配选择器的元素为止 .
子元素和兄弟元素 :
$ ( "#id" ) . children ( ) : 获取指定元素的所有直接子元素 .
$ ( "#id" ) . siblings ( ) : 获取指定元素的所有兄弟元素 .
查找和筛选 :
$ ( "div" ) . find ( "p" ) : 在所有的div元素中查找拥有p标签的后代元素 , 等价于$ ( "div p" ) .
$ ( "div" ) . filter ( ".c1" ) : 从结果集中筛选出具有c1样式类的标签 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < div> < pid = " d0" > </ p> < pid = " d1" > </ p> < pid = " d2" > < span> </ span> </ p> < pid = " d3" > </ p> < pclass = " c1" > </ p> </ div> < buttonid = " btnNext" > </ button> < buttonid = " btnPrev" > </ button> < buttonid = " btnParent" > </ button> < buttonid = " btnChildren" > </ button> < buttonid = " btnFind" > </ button> < buttonid = " btnFilter" > </ button> </ body> < script>
$ ( "#btnNext" ) . click ( function ( ) {
$ ( "#d0" ) . next ( ) . css ( "color" , "red" ) ;
} ) ;
$ ( "#btnPrev" ) . click ( function ( ) {
$ ( "#d1" ) . prev ( ) . css ( "color" , "aqua" ) ;
} ) ;
$ ( "#btnParent" ) . click ( function ( ) {
$ ( "p" ) . parent ( ) . css ( "border" , "1px solid blue" ) ;
} ) ;
$ ( "#btnChildren" ) . click ( function ( ) {
$ ( "#d2" ) . children ( ) . css ( "font-weight" , "bold" ) ;
} ) ;
$ ( "#btnFind" ) . click ( function ( ) {
$ ( "div" ) . find ( "p" ) . css ( "text-decoration" , "underline" ) ;
} ) ;
$ ( "#btnFilter" ) . click ( function ( ) {
$ ( "p" ) . filter ( ".c1" ) . css ( 'color' , 'blue' ) ;
} ) ;
</ script> </ html>
attr ( ) : 方法用于获取或设置元素的HTML属性 .
removeAttr ( ) : 方法用于移除指定元素的HTML属性 .
单个属性的设置 : attr ( 'attribute' , 'value' ) 可以用于设置一个HTML元素的属性 .
多个属性的设置 : attr ( { key1 : value1 , key2 : value2 } ) 可以用于同时设置多个属性 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < labelfor = " d0" > </ label> < inputid = ' d0' type = " text" value = " Hello, World!" > < buttonid = " Button0" > </ button> < buttonid = " Button1" > </ button> < buttonid = " Button2" > </ button> < script>
$ ( "#Button0" ) . click ( function ( ) {
let value = $ ( "#d0" ) . attr ( "value" ) ;
console. log ( value) ;
} ) ;
$ ( "#Button1" ) . click ( function ( ) {
$ ( "#d0" ) . attr ( "value" , "new value" ) ;
} ) ;
$ ( "#Button2" ) . click ( function ( ) {
$ ( "#d0" ) . removeAttr ( "value" ) ;
} ) ;
</ script> </ body> </ html>
以下些法可以用于动态修改元素的样式 :
addClass ( ) : 用于添加指定的CSS类名到元素 .
removeClass ( ) : 用于移除指定的CSS类名 .
hasClass ( ) : 用于判断元素是否具有指定的CSS类名 .
toggleClass ( ) : 用于切换元素的CSS类名 , 如果元素已经具有该类名 , 则移除它 , 如果元素没有该类名 , 则添加它 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
.highlight {
color : red;
font-weight : bold;
}
</ style> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < h1id = " heading" > </ h1> < buttonid = " addBtn" > </ button> < buttonid = " removeBtn" > </ button> < buttonid = " toggleBtn" > </ button> < buttonid = " checkBtn" > </ button> < script>
$ ( document) . ready ( function ( ) {
$ ( "#addBtn" ) . click ( function ( ) {
$ ( "#heading" ) . addClass ( "highlight" ) ;
} ) ;
$ ( "#removeBtn" ) . click ( function ( ) {
$ ( "#heading" ) . removeClass ( "highlight" ) ;
} ) ;
$ ( "#toggleBtn" ) . click ( function ( ) {
$ ( "#heading" ) . toggleClass ( "highlight" ) ;
} ) ;
$ ( "#checkBtn" ) . click ( function ( ) {
if ( $ ( "#heading" ) . hasClass ( "highlight" ) ) {
alert ( "标题元素具有样式类名 highlight" ) ;
} else {
alert ( "标题元素没有样式类名 highlight" ) ;
}
} ) ;
} ) ;
</ script> </ body> </ html>
. css ( ) : 用于获取或设置元素的CSS样式属性 .
. css ( "property" , "" ) 方法设置指定样式属性的值为空字符串 , 这将清空该属性的样式 .
. removeAttr ( "style" ) 方法将移除元素的全部样式 , 包括行内样式和通过CSS类等应用的样式 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < divid = " d0" > </ div> < buttonid = " button0" > </ button> < buttonid = " button1" > </ button> < script>
$ ( '#button0' ) . click ( function ( ) {
$ ( '#d0' ) . css ( 'color' , 'aqua' ) ;
} ) ;
$ ( '#button1' ) . click ( function ( ) {
$ ( '#d0' ) . css ( 'color' , '' ) ;
} ) ;
</ script> </ body> </ html>
登入模态框 : 在用户点击登入的时候 , 弹出登入模块框 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
.hide {
display : none;
}
.modal-overlay {
background-color : gray;
position : fixed;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 0;
pointer-events : none;
}
.modal-content {
background-color : aqua;
height : 110px;
width : 300px;
text-align : center;
position : fixed;
top : 50%;
left : 50%;
transform : translate ( -50%, -50%) ;
z-index : 1;
}
input, button {
margin-top : 10px;
}
</ style> </ head> < bodyclass = " modal" > < buttonid = " login_id0" > </ button> < divclass = " modal-overlay hide" > </ div> < divclass = " modal-content hide" > < labelfor = " d0" > </ label> < inputid = ' d0' type = " text" > < br> < labelfor = " d1" > </ label> < inputid = ' d1' type = " text" > < br> < buttonid = " login_id1" > </ button> </ div> < script>
$ ( '#login_id0' ) . click ( function ( ) {
$ ( '.modal-overlay' ) . removeClass ( 'hide' ) ;
$ ( '.modal-content' ) . removeClass ( 'hide' ) ;
} ) ;
$ ( '#login_id1' ) . click ( function ( ) {
$ ( '.modal-overlay' ) . addClass ( 'hide' ) ;
$ ( '.modal-content' ) . addClass ( 'hide' ) ;
} ) ;
</ script> </ body> </ html>
每次点击一个菜单选择则显示一个对应的菜单列表 , 如果有其它菜单列表以打来则隐藏 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
.right {
width : 80%;
height : 100%;
}
.left {
width : 20%;
height : 100%;
background-color : rgb ( 43, 43, 45) ;
position : fixed;
top : 0;
left : 0;
border : #352c2c inset 1px;
}
.group {
margin : 10px;
border : red inset 1px;
}
.title {
text-align : center;
margin : 10px 0;
color : aqua;
}
.item {
background-color : rgba ( 0, 0, 0, 0.2) ;
border-top : #1beb00 inset 1px;
}
.content {
text-align : center;
padding : 5px;
color : #7fbce1;
border : dimgray inset 1px;
}
.hied {
display : none;
}
</ style> </ head> < body> < div> < divclass = " left" > < divclass = " group" > < divclass = " title" > </ div> < divclass = " item hied" > < divclass = " content" > </ div> < divclass = " content" > </ div> < divclass = " content" > </ div> </ div> </ div> < divclass = " group" > < divclass = " title" > 前端 </ div> < divclass = " item hied" > < divclass = " content" > </ div> < divclass = " content" > </ div> < divclass = " content" > </ div> </ div> </ div> < divclass = " group" > < divclass = " title" > </ div> < divclass = " item hied" > < divclass = " content" > </ div> < divclass = " content" > </ div> < divclass = " content" > </ div> </ div> </ div> </ div> < divclass = " right" > </ div> </ div> < script>
$ ( '.title' ) . click ( function ( ) {
$ ( this ) . next ( ) . removeClass ( 'hied' ) . parent ( ) . siblings ( ) . find ( '.item' ) . addClass ( 'hied' )
} )
</ script> </ body> </ html>
以下方法是用于获取和设置元素的位置 :
* 1. offset ( ) : 获取或设置匹配元素相对于当前窗口的偏移值 .
如果调用时不传递参数 , 则返回第一个匹配元素的偏移值 ( 包括top和left属性 ) .
如果传递了参数 , 则将所有匹配元素的偏移值设置为指定的值 .
例如 , offset ( { 'top' : 100 , 'left' : 200 } ) ; 它将会设置一个偏移量 , 将元素在页面上向下移动 100 个像素 , 向右移动 200 个像素 .
* 2. position ( ) : 返回偏移值包括top和left属性 .
返回的偏移量对象中的位置信息取决于元素的定位属性 , 以下是两种情况的示例 :
1. 参考对象是窗口 ( position : fixed ) .
2. 参考对象是父元素 ( position : relative / absolute ) .
* 3. scroll ( ) : 获取或设置匹配元素相对于滚动条顶部的偏移值 .
如果调用时不传递参数 , 则返回第一个匹配元素的滚动条顶部偏移值 .
如果传递了参数 , 则将所有匹配元素的滚动条顶部偏移值设置为指定的值 .
例如 , scroll ( 0 ) ; 将页面滚动位置设置为顶部 ; scroll ( function ( ) { } ) ; 滚动条移动的时候执行内部的函数 .
* 4. scrollTop ( ) : 获取或设置匹配元素相对于滚动条顶部的偏移值 .
如果调用时不传递参数 , 则返回第一个匹配元素的滚动条顶部偏移值 .
如果传递了参数 , 则将所有匹配元素的滚动条顶部偏移值设置为指定的值 .
* 5. scrollLeft ( ) : 获取或设置元素的水平滚动位置 .
类似于scrollTop ( ) 方法 , 可以用于获取和设置元素的水平滚动位置 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
.box-0 {
height : 100px;
width : 100px;
background-color : aqua;
}
.box-height {
height : 100px;
background-color : #7fbce1;
border : #352c2c inset 1px;
}
.box-1 {
height : 25px;
width : 70px;
background-color : #1beb00;
border : black inset 1px;
position : fixed;
bottom : 20px;
right : 20px;
}
.hidden {
display : none;
}
</ style> </ head> < body> < div> < divclass = " box-0" > </ div> < buttonid = " move-button" > </ button> < buttonid = " offset-button" > </ button> </ div> < div> < divclass = " box-height" > </ div> < divclass = " box-height" > </ div> < divclass = " box-height" > </ div> < divclass = " box-height" > </ div> < divclass = " box-height" > </ div> < divclass = " box-height" > </ div> < divclass = " box-height" > </ div> < divclass = " box-height" > </ div> < divclass = " box-height" > </ div> < divclass = " box-height" > </ div> < divid = ' scroll-to-top' class = " box-1 hidden" > </ div> </ div> < script>
$ ( '#move-button' ) . click ( function ( ) {
$ ( '.box-0' ) . offset ( { 'left' : 200 } ) ;
} ) ;
$ ( '#offset-button' ) . click ( function ( ) {
let position = $ ( '.box-0' ) . position ( ) ;
let message = 'Top: ' + position. top + '\nLeft: ' + position. left;
alert ( message) ;
} ) ;
let $window = $ ( window) ;
$window. scroll ( function ( ) {
if ( $window. scrollTop ( ) > 100 ) {
$ ( '#scroll-to-top' ) . removeClass ( 'hidden' ) ;
} else {
$ ( '#scroll-to-top' ) . addClass ( 'hidden' ) ;
}
} ) ;
$ ( '#scroll-to-top' ) . click ( function ( ) {
$window. scrollTop ( 0 ) ;
} ) ;
</ script> </ body> </ html>
以下方法是用于获取和设置元素的尺寸 :
* 1. width ( ) : 获取或设置元素的宽度 .
可以使用参数来设置宽度的数值 , 也可以不带参数来获取当前的宽度值 .
* 2. height ( ) : 获取或设置元素的高度 .
可以使用参数来设置高度的数值 , 也可以不带参数来获取当前的高度值 .
* 3. innerWidth ( ) : 返回元素的宽度 , 包括元素的内容区域和内边距 ( padding ) 的宽度 .
* 4. innerHeight ( ) : 返回元素的高度 , 包括元素的内容区域和内边距 ( padding ) 的高度 .
* 5. outerHeight ( ) , 返回元素的高度 , 包括元素的内容区域 , 内边距 ( padding ) 和边框 ( border ) 的高度 .
如果需要获取包括外边距在内的高度 , 可以使用 : outerHeight ( true ) .
* 6. outerWidth ( ) : 返回元素的宽度 , 包括元素的内容区域 , 内边距 ( padding ) 和边框 ( border ) 的宽度 .
如果需要获取包括外边距在内的宽度 , 可以使用 : outerWidth ( true ) .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
.box0 {
height : 100px;
width : 100px;
border : aqua inset 1px;
}
</ style> </ head> < body> < divid = " d0" class = " box0" > </ div> < buttonid = " button_0" > </ button> < buttonid = " button_1" > </ button> < script>
let $divEle = $ ( '#d0' )
$ ( '#button_0' ) . click ( function ( ) {
let message = 'Height: ' + $divEle. width ( ) + '\nWidth: ' + $divEle. height ( ) ;
alert ( message) ;
} ) ;
$ ( '#button_1' ) . click ( function ( ) {
$divEle. width ( 50 ) ;
$divEle. height ( 50 ) ;
} )
</ script> </ body> </ html>
text ( ) 方法 : 用于获取或设置元素的纯文本内容 .
html ( ) 方法 : 用于获取或设置元素的HTML内容 .
区别 :
html方法获取和操作的是元素的HTML内容 , 包括标签 , 样式和文本 .
text方法获取和操作的是元素的纯文本内容 , 即只有文本 , 不包含任何HTML标签或样式 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
div {
border : aqua inset 1px;
}
span {
color : red;
}
</ style> </ head> < body> < divid = " d0" > < span> </ span> </ div> < br> < divid = " d1" > </ div> < br> < divid = " d2" > </ div> </ body> < script>
$ ( '#d1' ) . text ( $ ( '#d0' ) . text ( ) ) ;
$ ( '#d2' ) . html ( $ ( '#d0' ) . html ( ) ) ;
</ script> </ html>
val ( ) 方法 : 用于获取或设置表单元素的值 .
val ( ) 不包参数时它会返回第一个匹配元素的当前值 .
比如 : $ ( '#myInput' ) . val ( ) 将返回 id 为 'myInput' 的输入框的当前值 .
val ( ) 包含一个参数时 , 它会设置所有匹配元素的值 .
比如 : $ ( '#myInput' ) . val ( 'Hello' ) 将把 id 为 'myInput' 的输入框的值设置为 'Hello' .
val ( ) 包含一个数组参数时 , 它会设置单选框radio , 多选框select或多选的select元素的值 .
数组中的值对应于选项的value属性 .
比如 : $ ( '#myCheckbox' ) . val ( [ 'option1' , 'option2' ] ) 将选中值为 'option1' 和 'option2' 的复选框 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < formaction = " " > < p> < labelfor = " username" > </ label> < inputtype = " text" id = " username" > </ p> < p> < labelfor = " password" > </ label> < inputtype = " password" id = " password" > </ p> < p> < labelfor = " gender_0" > </ label> < inputid = ' gender_0' type = " radio" name = " gender" value = " male" > < labelfor = " gender_1" > </ label> < inputid = ' gender_1' type = " radio" name = " gender" value = " female" > < labelfor = " gender_2" > </ label> < inputid = ' gender_2' type = " radio" name = " gender" value = " other" checked = " checked" > </ p> < p> < inputtype = " checkbox" name = ' course' value = " Python" > < inputtype = " checkbox" name = ' course' value = " Linux" > < inputtype = " checkbox" name = ' course' value = " Go" > </ p> < p> < labelfor = " select_id" > </ label> < selectname = " hobby" multiple id = " select_id" > < optionvalue = " singing" > </ option> < optionvalue = " dancing" > </ option> < optionvalue = " rap" > </ option> < optionvalue = " playing basketball" > </ option> </ select> </ p> </ form> < script>
let $username = $ ( '#username' ) . val ( 'kid' ) ;
console. log ( $username. val ( ) ) ;
let $password = $ ( '#password' ) . val ( '123' ) ;
console. log ( $password. val ( ) ) ;
let $gender = $ ( ':radio' ) . val ( [ 'female' ] ) ;
console. log ( $gender. val ( ) ) ;
$ ( ':checkbox' ) . val ( [ 'Python' , 'Go' ] ) ;
$ ( ':checkbox:checked' ) . each ( function ( ) {
console. log ( $ ( this ) . val ( ) ) ;
} ) ;
let $select = $ ( '#select_id' ) . val ( [ 'singing' , 'dancing' ] ) ;
$select. val ( ) . forEach ( function ( val ) {
console. log ( val) ;
} ) ;
</ script> </ body> </ html>
单选框radio与多选宽select被选中后 , 会将checked的值设置为 true , 而不是在html标签中添加checked = 'checked' 属性 .
检查用户输入的信息 , 在输入框失去焦点的时候检查输入是否为空 , 为空则给出提示 , 获取焦点时取消提示 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
span {
color : red;
}
</ style> </ head> < body> < formaction = " " > < p> < labelfor = " username" > </ label> < inputtype = " text" id = " username" > < spanid = " span_0" > </ span> </ p> < p> < labelfor = " password" > </ label> < inputtype = " password" id = " password" > < spanid = " span_1" > </ span> </ p> </ form> < script>
let $username = $ ( '#username' ) ;
let $password = $ ( '#password' ) ;
let $span0 = $ ( '#span_0' ) ;
let $span1 = $ ( '#span_1' ) ;
$username. blur ( function ( ) {
if ( ! $username. val ( ) ) {
$span0. text ( '用户名称不能为空!' ) ;
}
} )
$password. blur ( function ( ) {
if ( ! $username. val ( ) ) {
$span1. text ( '用户密码不能为空!' ) ;
}
} )
$username. focus ( function ( ) {
if ( ! $username. val ( ) ) {
$span0. text ( '' ) ;
}
} )
$password. focus ( function ( ) {
if ( ! $password. val ( ) ) {
$span1. text ( '' ) ;
}
} )
</ script> </ body> </ html>
HTML标签属性 : 是定义在HTML标签上的属性 .
它们用于提供关于元素的附加信息 , 以及与元素相关的行为和样式
例如 , 在 < input > 元素中 , type , value和placeholder都是HTML标签属性 .
< input type = "text" value = "Hello" placeholder = "Enter your name" >
DOM属性 : 通过JavaScript的DOM操作接口来访问和操作的属性 .
DOM属性表示HTML元素在JavaScript中的表示形式 , 通过DOM接口可以以编程方式读取和修改元素的属性值 .
当处理复选框 ( checkbox ) , 单选框 ( radio ) 和选项 ( option ) 时 ,
使用特定的prop ( ) 和removeProp ( ) 方法更为合适 , 而不是使用attr ( ) 和 removeAttr ( ) .
以下是更具体的说明 :
* prop ( ) 方法 : 用于获取或设置元素的DOM属性 ( property ) .
对于复选框 , 单选框和选项框 , 使用prop ( ) 方法可以获得或设置它们的特定属性 , 例如是否被选中 .
此外 , 该方法还可以用于修改其他DOM属性 ( 意思就是attr能做的它也能做 ) .
* 2. removeProp ( ) 方法 : 用于从元素中移除指定的DOM属性 .
对于复选框 , 单选框和选项选择框 , 一般不需要使用removeProp ( ) 方法 .
如果需要取消选中复选框或清除单选框的选择 , 可以通过prop ( ) 方法将其对应的属性设置为 false 或空 .
当涉及到操作复选框 , 单选框和选项框的特定属性时 , 推荐使用prop ( ) 方法 .
而使用attr ( ) 与removeAttr ( ) 则更适合处理HTML标签属性和自定义属性 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < p> < inputtype = " checkbox" name = ' gender' value = " male" > < inputtype = " checkbox" name = ' gender' value = " female" > < inputtype = " checkbox" name = ' gender' value = " other" > </ p> < script>
$ ( ':checkbox[name="gender"][value="male"]' ) . prop ( 'checked' , true ) ;
$ ( ':checkbox[name="gender"][value="female"]' ) . prop ( 'checked' , true ) ;
$ ( ':checkbox[name="gender"]' ) . each ( function ( ) {
console. log ( $ ( this ) . val ( ) + ': ' + $ ( this ) . prop ( 'checked' ) ) ;
} ) ;
</ script> </ body> </ html>
添加指定元素到指定元素内部 .
* 1. $ ( A ) . append ( B ) : 把元素B追加到元素A内部的末尾 .
* 2. $ ( A ) . prepend ( B ) : 把元素B前置到元素A内部的前面 .
* 3. $ ( A ) . appendTo ( B ) : 把元素A追加到元素B内部的末尾 .
* 4. $ ( A ) . prependTo ( B ) : 把元素A前置到元素B内部的前面 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < divid = " d0" > < p> </ p> </ div> < script>
let $divEle0 = $ ( '#d0' ) ;
let $peLE0 = $ ( '<p>' ) . text ( '1' ) ;
let $peLE1 = $ ( '<p>' ) . text ( '3' ) ;
$divEle0. prepend ( $peLE0) ;
$divEle0. append ( $peLE1) ;
</ script> </ body> </ html>
添加指定元素到元素的前后 :
* 1. $ ( A ) . after ( B ) : 将元素B插入到元素A之后 .
* 2. $ ( A ) . before ( B ) : 将元素B插入到元素A之前 .
* 3. $ ( A ) . insertAfter ( B ) : 将元素A插入到元素B之后 .
* 4. $ ( A ) . insertBefore ( B ) : 将元素A插入到元素B之前 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < div> < pid = " p0" > </ p> </ div> < script>
let $pEle = $ ( '#p0' ) ;
let pEle0 = $ ( '<p>' ) . text ( '1' ) ;
let pEle1 = $ ( '<p>' ) . text ( '3' ) ;
$pEle. before ( pEle0) ;
$pEle. after ( pEle1) ;
</ script> </ body> </ html>
删除元素 :
* 1. $ ( A ) . remove ( ) : 从DOM中删除所有匹配的元素及其子元素 .
* 2. $ ( A ) . empty ( ) : 删除匹配的元素集合中所有的子节点 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
div {
border : aqua inset 1px;
height : 120px;
width : 100px;
}
</ style> </ head> < body> < divid = " d0" > < p> </ p> < p> </ p> < p> </ p> </ div> < hr> < divid = " d1" > < p> </ p> < p> </ p> < p> </ p> </ div> < buttonid = " button0" > </ button> < buttonid = " button1" > </ button> < script>
$ ( '#button0' ) . click ( function ( ) {
$ ( '#d0' ) . remove ( ) ;
} ) ;
$ ( '#button1' ) . click ( function ( ) {
$ ( '#d1' ) . empty ( ) ;
} ) ;
</ script> </ body> </ html>
替换元素 :
* 1. $ ( A ) . replaceWith ( '新的文本内容' ) : 将被选中的元素替换为新的文本内容 .
$ ( A ) . replaceWith ( '<div>新的 HTML 元素</div>' ) : 将被选中的元素替换为新的HTML元素 .
* 2. $ ( '<div>新的 HTML 元素</div>' ) . replaceAll ( A ) : 将被选中的元素替换为新的HTML元素 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
span {
color : red;
}
</ style> </ head> < body> < divid = " d0" > </ div> < divid = " d1" > </ div> < divid = " d2" > </ div> </ body> < script>
$ ( '#d0' ) . replaceWith ( 'hao 123' ) ;
$ ( '#d1' ) . replaceWith ( '<div>新的 <span>HTML</span> 元素</div>' ) ;
$ ( '<div>新的 <span>HTML</span> 元素</div>' ) . replaceAll ( $ ( '#d2' ) )
</ script> </ html> clone ( ) 方法 : 用于创建被选元素的副本 .
它能够复制一个元素 ( 包括元素的所有子元素 , 文本内容和属性 ) 并返回一个新的jQuery对象 , 这个对象包含了复制的元素 .
clone ( ) 方法默认情况下不会复制事件处理程序 , 如果需要复制元素的事件处理程序 , 可以将clone ( ) 方法的参数设置为 true , 即clone ( true ) .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < buttonid = " button0" > </ button> < hr> < buttonid = " button1" > </ button> < script>
let $btnEle0 = $ ( '#button0' ) ;
$btnEle0. click ( function ( ) {
$btnEle0. clone ( ) . insertAfter ( $ ( this ) )
} )
let $btnEle1 = $ ( '#button1' ) ;
$btnEle1. click ( function ( ) {
$btnEle1. clone ( true ) . insertAfter ( $ ( this ) )
} )
</ script> </ body> </ html>
事件的绑定与移除方式 :
* 1. $ ( 'p' ) . 事件名称 ( ) : 典型的jQuery对象方法调用方式 , 某些事件没有提供对应的方法则不能使用 .
* 2. . on ( events [ , selector ] , function ( ) { } ) : 用于将事件处理函数绑定到匹配选择器的元素上 .
events是一个或多个事件类型 , 包括空格分隔的多个事件类型 ,
selector是一个可选的选择器 , 用于过滤目标元素 , function是事件处理函数 .
* 3 . off ( events [ , selector ] [ , function ( ) { } ) : 用于移除通过 . on ( ) 方法绑定的事件处理函数 .
events是一个或多个事件类型 , 包括空格分隔的多个事件类型 ,
selector是一个可选的选择器 , 用于过滤目标元素 , function是要移除的特定事件处理函数 .
常用的事件绑定方法 :
* 1. click ( function ( ) { } ) : 当元素被点击时触发的事件 .
* 2. hover ( function ( ) { } ) : 当鼠标悬停在元素上时触发的事件 . 这是jQuery提供的封装方法 , 原生JavaScript中没有类似的事件 .
* 3. focus ( function ( ) { } ) : 当元素获得焦点 ( 例如输入框被选中 ) 时触发的事件 , 通常用于处理用户输入 .
* 4. blur ( function ( ) { } ) : 当元素失去焦点时触发的事件 , 与focus相对应 .
* 5. change ( function ( ) { } ) : 当元素的内容发生变化时触发的事件 , 常用于处理输入框或下拉选择框的改变 .
* 6. keyup ( function ( e ) { } ) : 当键盘的按键被抬起时触发的事件 , 可以获取键盘事件对象 'e;, 通过' e . keyCode ' 可以获取按下的键的码值 .
* 7. keydown ( function ( e ) { } ) : 当键盘的按键被按下时触发的事件 .
* 8. mouseover ( function ( e ) { } ) : 当鼠标移动到元素上方时触发的事件 .
* 9. mouseenter ( function ( e ) { } ) : 当鼠标进入元素时触发的事件 .
* 10. input ( function ( e ) { } ) : 当监听输入框的内容实时变化时触发的事件 , 只能绑定到输入框元素上才能生效 .
. hover ( ) 方法可以同时绑定鼠标悬停事件的进入和离开两个处理函数。
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < p> </ p> < script>
$ ( 'p' ) . hover (
function ( ) {
$ ( this ) . css ( 'color' , 'red' ) ;
} ,
function ( ) {
$ ( this ) . css ( 'color' , '' ) ;
}
) ;
</ script> </ body> </ html>
. input事件 : 用于在用户修改textarea , input : text , input : password和input : search等元素内容时立即触发 .
当用户对这些元素的值进行修改时 , input事件会立即被触发 , 而不需要等到元素失去焦点 .
这与onchange事件不同 , 后者需要在元素失去焦点时才会触发 .
jQuery并没有直接提供 . input ( ) 方法来绑定input事件 , 正确的方法是使用 . on ( ) 方法来绑定input事件 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < formaction = " " > < p> < inputtype = " text" id = " d0" > </ p> < p> < inputtype = " text" id = " d1" > </ p> </ form> < script>
$ ( '#d0' ) . on ( 'input' , function ( ) {
$ ( '#d1' ) . val ( $ ( '#d0' ) . val ( ) )
} )
</ script> </ body> </ html>
在编写网页或应用程序时 , 经常会遇到需要处理用户交互的情况 , 比如点击按钮 , 提交表单 , 拖拽元素等等 .
通过事件 , 可以在特定的交互操作发生时执行相应的代码逻辑 .
然而 , 并非所有的交互事件都需要它执行默认行为 , 而是需要阻止事件的默认行为 , 只执行自定义函数中的功能 .
阻止事件的默认行方式 :
* 1. return false ; 在事件末尾添加 , 常用的用于阻止事件继续执行的方法 , 通常用于阻止表单提交等操作 .
* 2. e . preventDefault ( ) ; 通过事件对象e调用preventDefault ( ) 方法可以阻止事件的默认行为或默认动作的执行 .
常用于阻止超链接的跳转或表单的提交行为 .
< input type = "submit" > 元素被用于创建提交按钮 , 用于表单的提交 .
当用户点击这个按钮时 , 会触发表单的提交操作 , 并刷新页面或加载新的页面 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " https://code.jquery .com/jquery -3.6.0.js" > </ script> </ head> < body> < formaction = " " > < inputtype = " text" value = " 123" > < inputtype = " submit" id = " i1" > </ form> < script>
$ ( "#i1" ) . click ( function ( e ) {
alert ( 123 ) ;
e. preventDefault ( ) ;
} ) ;
</ script> </ body> </ html>
事件冒泡 ( Event Bubbling ) 是指在DOM树中的事件传播过程中 ,
事件首先在触发事件的元素上触发 , 然后沿着父元素逐级向上冒泡 , 直到达到DOM树的根节点 ( 通常是document对象 ) .
具体来说 , 当一个DOM元素触发了某个事件 ( 例如点击事件 ) , 该事件会首先在该元素上触发 , 然后逐级向上触发同类型的事件 , 直到DOM树的根节点 .
这意味着如果一个父元素和一个子元素都具有相同类型的事件监听器 , 点击子元素也会触发父元素上的事件处理函数 .
div > p > span ; 三个标签都绑定了事件 .
点击span的时候 , 先触发span的事件 , 接下来会依次触发p , div的事件 .
在执行的事件后面写上e . stopPropagation ( ) ; 阻止后续事件的触发 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
div {
height : 100px;
width : 100px;
background-color : #aaff00;
}
p {
background-color : #657477;
}
span {
background-color : red;
}
</ style> </ head> < body> < div> < p> < span> </ span> </ p> </ div> < script>
$ ( "span" ) . click ( function ( e ) {
alert ( "span" ) ;
} ) ;
$ ( "p" ) . click ( function ( ) {
alert ( "p" ) ;
} ) ;
$ ( "div" ) . click ( function ( ) {
alert ( "div" ) ;
} )
</ script> </ body> </ html>
e. stopPropagation ( ) ;
事件委托 : 将事件的处理交给父元素或祖先元素来处理 , 而不是直接处理事件的元素本身 .
当某个元素触发事件时 , 事件将沿着DOM树向上传播 , 直到找到一个绑定了相应事件处理程序的元素 .
这样可以实现事件的统一管理和更高效的事件处理 .
事件委托常用于动态添加元素或减少监听器的数量 , 提高性能 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
table {
width : 100%;
table-layout : fixed;
border-collapse : collapse;
}
th, td {
padding : 8px;
text-align : left;
border : aqua inset 1px;
}
.edit, .delete {
cursor : pointer;
}
</ style> </ head> < body> < table> < thead> < tr> < th> </ th> < th> </ th> < th> </ th> </ tr> </ thead> < tbody> < tr> < td> </ td> < td> </ td> < td> < spanclass = " edit" > ✎ </ span> < spanclass = " delete" > 🗑 </ span> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> < spanclass = " edit" > ✎ </ span> < spanclass = " delete" > 🗑 </ span> </ td> </ tr> </ tbody> </ table> < script>
$ ( document) . ready ( function ( ) {
$ ( "table" ) . on ( "click" , ".delete" , function ( ) {
let row = $ ( this ) . closest ( "tr" ) ;
row. remove ( ) ;
} ) ;
} ) ;
</ script> </ body> </ html>
window . onload事件 : 在整个网页 ( 包括资源如图片 , 样式表等 ) 都加载完成后触发 .
这意味着 , 当页面上所有资源都已加载完成后 , 才会执行相应的JavaScript代码 .
ready ( ) : 是jQuery提供的一个函数 , 用于处理DOM就绪事件 .
在DOM结构准备完毕后立即执行 , 而不需要等待网页上所有资源的加载完成 .
它通常用于在页面就绪后执行一些与DOM相关的操作或事件绑定 .
写法 :
$ ( document ) . ready ( function ( ) {
/ / 在这里编写在 DOM 就绪后执行的 jQuery 代码 .
} )
简写 :
$ ( function ( ) {
/ / 在这里编写在 DOM 就绪后执行的 jQuery 代码 .
} )
* 在需要操作DOM元素或绑定事件的情况下 , 通常会使用$ ( function ( ) { } ) .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
.error_mes {
color : red;
}
</ style> </ head> < body> < formaction = " " > < p> < labelfor = " username_id" > </ label> < inputtype = " text" id = " username_id" autocomplete = " off" > < spanclass = " error_mes" > </ span> </ p> < p> < labelfor = " password_id" > </ label> < inputtype = " password" id = ' password_id' autocomplete = " off" > < spanclass = " error_mes" > </ span> </ p> < p> < inputtype = " submit" id = " submit_id" value = " 登录" > </ p> </ form> </ body> < script>
$ ( function ( ) {
$ ( '#submit_id' ) . click ( function ( e ) {
$formEle = $ ( 'form' ) ;
let $inputs = $formEle. find ( ':text, :password' ) ;
$inputs. each ( function ( ) {
let value = $ ( this ) . val ( ) ;
if ( value. length === 0 ) {
let error_msg = $ ( this ) . prev ( ) . text ( ) + '不能为空!' ;
$ ( this ) . next ( '.error_mes' ) . text ( error_msg) ;
e. preventDefault ( ) ;
}
} ) ;
$inputs. focus ( function ( ) {
$ ( this ) . next ( '.error_mes' ) . text ( '' ) ;
} ) ;
} ) ;
} ) ;
</ script> </ html> 代码主要实现的功能是当用户点击登录提交按钮时 , 检查输入框中的内容是否为空 , 如果为空则显示相应的错误信息 .
代码说明 :
* 1. 给提交按钮 # submit_id绑定了一个点击事件处理程序 .
* 2. 在事件处理程序中 , 使用$formEle . find ( ':text, :password' ) 获取所有的文本输入框和密码输入框 .
* 3. 使用 . each ( ) 方法遍历每个输入框 .
* 4. 对于每个输入框 , 使用$ ( this ) . val ( ) 获取其值 .
* 5. 如果输入框的值为空 ( 长度为 0 ) , 则创建错误信息 ( error_msg ) 提示 .
* 6. 将错误信息显示在当前输入框后面的 . error_mes元素中 .
* 7. 使用e . preventDefault ( ) 取消表单的默认提交行为 .
* 8. 最后 , 为所有的文本输入框和密码输入框绑定一个focus事件处理程序 , 在获取焦点时取消错误信息提示 .
jQuery . each ( ) 方法 : 是jQuery提供的一个通用的迭代函数 , 用于无缝迭代对象和数组 .
它接受两个参数 : collection和callback .
collection : 是要迭代的对象或数组 .
callback : 是在每次迭代中要执行的函数 .
在每次迭代中 , callback函数会被调用 , 并传递两个参数 : indexInArray和valueOfElement .
indexInArray : 表示迭代元素在集合中的索引 .
valueOfElement : 则表示当前迭代的具体元素 .
通过这种方式 , 可以在callback函数中访问和操作集合中的每个元素 , 无论是对象的属性还是数组的元素 .
* jQuery . each ( ) 方法中的callback函数可以使用return false 来提前终止迭代过程 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < script>
let l = [ 10 , 20 , 30 , 40 ] ;
$. each ( l, function ( indexInArray, valueOfElement ) {
console. log ( indexInArray, valueOfElement) ;
} )
</ script> </ body> </ html>
$ . each ( ) 方法常用于迭代jQuery对象中的每个DOM元素 .
在每次迭代中 , 回调函数都会被调用 , 并传递两个参数 : 当前循环次数 ( 从 0 开始计数 ) 和对应的DOM元素 .
而且 , 回调函数中的关键字this总是指向当前迭代的DOM元素 , 因此可以在回调函数中使用this来操作和访问当前元素的属性和方法 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
.color {
color : red;
}
</ style> </ head> < body> < ulid = " ul_id" > < li> </ li> < li> </ li> < li> </ li> </ ul> </ body> < script>
$ ( function ( ) {
$ ( '#ul_id>li' ) . each ( function ( ) {
$ ( this ) . addClass ( 'color' )
} )
} )
</ script> </ html>
隐式迭代 : 在jQuery中 , 很多方法会自动对集合中的每个元素进行迭代处理 , 而无需显式地调用 . each ( ) 方法 .
当使用某些方法 ( 如 : . addClass ( ) , . removeClass ( ) , . toggleClass ( ) , . css ( ) 等 ) 作用于jQuery对象时 ,
jQuery会自动遍历集合中的每个元素 , 并对它们进行相同的操作 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < style>
.color {
color : red;
}
</ style> </ head> < body> < ulid = " ul_id" > < li> </ li> < li> </ li> < li> </ li> </ ul> </ body> < script>
$ ( function ( ) {
$ ( '#ul_id>li' ) . addClass ( 'color' ) ;
} )
</ script> </ html>
. data ( name , value ) 方法 : 用于在元素上存储或获取数据 , 并通过指定名称来存储或获取特定的数据 .
当使用 . data ( ) 方法时 , 它会在所有匹配的元素上存储一个带有指定名称和值的数据 .
这些数据将与元素相关联 , 并可以稍后通过 . data ( name ) 方法来获取 .
如果没有指定值 , 则 . data ( ) 方法获取匹配元素集合中第一个元素存储的所有数据对象 .
需要注意的是 , 当使用 . data ( ) 方法存储数据时 , jQuery会将数据存储在元素的缓存中 , 而不是直接修改元素的属性 .
这样可以避免属性污染的问题 , 并且可以在不同的元素之间共享数据 .
. removeData ( key ) 方法 : 用于移除存放在元素上的数据 .
当使用 . removeData ( key ) 方法时 , 它会移除指定名称的数据 . 如果没有指定key参数 , 则会移除所有保存的数据 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> </ head> < body> < divid = " d0" > </ div> < divid = " d1" > </ div> < divid = " d2" > </ div> < divid = ' d3' data-color = " blue" data-size = " large" > </ div> < divid = " d4" > </ div> < divid = " d5" > </ div> </ body> < script>
let $divEle0 = $ ( '#d0' ) ;
$divEle0. data ( { 'name' : 'kid' } ) ;
$divEle0. data ( { 'age' : 18 } ) ;
$ ( '#d1' ) . text ( $divEle0. data ( 'name' ) ) ;
$ ( '#d2' ) . text ( $divEle0. data ( 'age' ) ) ;
let $divEle3 = $ ( '#d3' ) ;
$ ( '#d4' ) . text ( $divEle3. data ( 'color' ) ) ;
$ ( '#d5' ) . text ( $divEle3. data ( 'size' ) ) ;
</ script> </ html>
常见的动画效果函数 , 可以用于在网页中实现动态的元素展示和隐藏 :
* 1. show ( [ s, [ e ] , [ fn ] ] ) : 显示元素 , 并可设置显示动画的速度 .
* 2. hide ( [ s, [ e ] , [ fn ] ] ) : 隐藏元素 , 并可设置隐藏动画的速度 .
* 3. toggle ( [ s ] , [ e ] , [ fn ] ) : 切换元素的显示和隐藏状态 , 并可设置切换动画的速度 .
* 4. slideDown ( [ s ] , [ e ] , [ fn ] ) : 向下滑动展示元素 , 并可设置展示动画的速度 .
* 5. slideUp ( [ s, [ e ] , [ fn ] ] ) : 向上滑动隐藏元素 , 并可设置隐藏动画的速度 .
* 6. slideToggle ( [ s ] , [ e ] , [ fn ] ) : 切换元素的向下滑动和向上滑动状态 , 并可设置切换动画的速度 .
* 7. fadeIn ( [ s ] , [ e ] , [ fn ] ) : 淡入显示元素 , 并可设置淡入动画的速度 .
* 8. fadeOut ( [ s ] , [ e ] , [ fn ] ) : 淡出隐藏元素 , 并可设置淡出动画的速度 .
* 9. fadeTo ( [ [ s ] , o , [ e ] , [ fn ] ] ) : 改变元素的透明度到指定值 , 并可设置透明度变化动画的速度 .
* 10. fadeToggle ( [ s, [ e ] , [ fn ] ] ) : 切换元素的淡入和淡出状态 , 并可设置切换动画的速度 .
* 11. animate ( p , [ s ] , [ e ] , [ fn ] ) : 自定义动画效果 , 可以指定元素的CSS属性进行动画变化 .
参数说明 :
- s : 动画的速度 , 可以是 "slow" , "normal" , "fast" , 或者是毫秒数值 , 默认为 "normal" .
- e : 动画效果的缓动函数 , 可选参数 , 默认为 "swing" .
- fn : 动画完成后的回调函数 , 可选参数 .
- p : 一个包含CSS属性和值的对象 , 用于定义自定义动画效果的目标属性值 .
- o : 透明度的目标值 , 取值范围为 0 到 1 之间 .
. hide ( ) : 隐藏元素 .
. show ( ) : 显示元素 .
. toggle ( ) : 切换元素的显示和隐藏状态 .
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " https://code.jquery .com/jquery -3.6.0.js" > </ script> < title> </ title> </ head> < body> < div> < buttonid = " hide" > </ button> < buttonid = " show" > </ button> < p> </ p> </ div> < script>
$ ( "#hide" ) . click ( function ( ) {
$ ( "p" ) . hide ( ) ;
} ) ;
$ ( "#show" ) . click ( function ( ) {
$ ( "p" ) . show ( ) ;
} ) ;
</ script> </ body> </ html>
. fadeIn ( ) 方法 : 用于将已隐藏的元素以淡入的效果显示出来 .
. fadeOut ( ) 方法 : 用于将可见的元素以淡出的效果隐藏起来 .
. fadeToggle ( ) 方法 : 根据当前元素的可见性 , 切换为淡入或淡出的效果 .
如果动画正在运行中 , 调用 . fadeToggle ( ) 方法会停止当前动画并立即开始另一个动画 .
语法 :
$ ( selector ) . fadeIn ( speed , easing , callback ) ;
$ ( selector ) . fadeOut ( speed , easing , callback ) ;
$ ( selector ) . fadeToggle ( speed , easing , callback ) ;
参数说明 :
speed ( 可选 ) : 淡入动画的速度 , 可以是毫秒数 , 也可以是 'slow' , 'fast' , 默认为 'normal' 即 400 毫秒 .
easing ( 可选 ) : 淡入动画的缓动效果 , 常见的有 'swing' 和 'linear' , 默认为 "swing" .
callback ( 可选 ) : 淡入动画完成后的回调函数 .
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < title> </ title> < style>
div {
width : 100px;
height : 100px;
display : none;
}
#d0 {
background-color : aqua;
}
#d1 {
background-color : greenyellow;
}
</ style> </ head> < body> < p> < buttonid = " btn0" > </ button> < buttonid = " btn1" > </ button> < buttonid = " btn2" > </ button> </ p> < divid = " d0" > </ div> < divid = " d1" > </ div> < script>
$ ( "#btn0" ) . click ( function ( ) {
$ ( "#d0" ) . fadeIn ( ) ;
$ ( "#d1" ) . fadeIn ( 3000 , function ( ) {
alert ( '我来了' )
} ) ;
} ) ;
$ ( "#btn1" ) . click ( function ( ) {
$ ( "#d0" ) . fadeOut ( ) ;
$ ( "#d1" ) . fadeOut ( 3000 , function ( ) {
alert ( '我走了' )
} ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( "#d0" ) . fadeToggle ( ) ;
$ ( "#d1" ) . fadeToggle ( 3000 ) ;
} ) ;
</ script> </ body> </ html> 元素淡入 , display属性值 none-- > block , opacity属性的值 0 -- > 1.
元素淡出 , display属性值 block-- > none , opacity属性的值 1 -- > 0.
fadeTo ( ) 方法 : 用于改变元素透明度的方法 .
它可以通过指定目标透明度值和可选的动画时长来实现渐变效果 .
语法 : $ ( selector ) . fadeTo ( duration , opacity , callback ) ;
参数说明 :
- duration : 可选参数 , 表示动画的时长 , 可以是字符串 ( 如 : 'slow' , 'fast' ) 或数字 ( 以毫秒为单位 )
默认为 'normal' 即 400 毫秒 .
- opacity : 目标透明度值 , 取值范围为 0 到 1 , 0 表示完全透明 , 1 表示完全不透明 .
- callback : 可选的回调函数 , 在动画完成后执行 .
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " https://code.jquery .com/jquery -3.6.0.js" > </ script> < title> </ title> < style>
div {
width : 100px;
height : 100px;
}
#d0 {
background-color : aqua;
}
#d1 {
background-color : greenyellow;
}
</ style> </ head> < body> < p> < buttonid = " btn0" > </ button> < buttonid = " btn1" > </ button> </ p> < divid = " d0" > </ div> < divid = " d1" > </ div> < script>
$ ( "#btn0" ) . click ( function ( ) {
$ ( "#d0" ) . fadeTo ( 'slow' , 0.3 ) ;
$ ( "#d1" ) . fadeTo ( 3000 , 0.3 ) ;
} ) ;
$ ( "#btn1" ) . click ( function ( ) {
$ ( "#d0" ) . fadeTo ( 'slow' , 1 ) ;
$ ( "#d1" ) . fadeTo ( 3000 , 1 ) ;
} ) ;
</ script> </ body> </ html> 元素透明 , opacity属性的值 1 -- > x .
元素鲜明 , opacity属性的值 x -- > 1.
slideDown ( ) 方法 : 用于将选中的元素向下滑动展开 .
slideUp ( ) 方法 : 用于将选中的元素向上滑动收起 .
slideToggle ( ) 方法 : 根据当前元素的可见性 , 切换为展开或收起的效果 .
如果动画正在运行中 , 调用 . slideToggle ( ) 方法会停止当前动画并立即开始另一个动画 .
语法 :
$ ( selector ) . slideDown ( speed , [ callback ] ) ;
$ ( selector ) . slideUp ( speed , [ callback ] ) ;
$ ( selector ) . slideToggle ( speed , easing , callback ) ;
参数说明 :
- speed : 可选参数 , 表示动画的时长 , 可以是字符串 ( 如 : "slow" , "fast" ) 或数字 ( 以毫秒为单位 ) .
默认为 "normal" , 即 400 毫秒 .
- callback : 可选的回调函数 , 在动画完成后执行 .
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < title> </ title> < style>
div {
width : 100px;
height : 100px;
display : none;
}
#d0 {
background-color : #00c1ea;
}
</ style> </ head> < body> < p> < buttonid = " btn0" > </ button> < buttonid = " btn1" > </ button> </ p> < divid = " d0" > </ div> < script>
$ ( "#btn0" ) . click ( function ( ) {
$ ( "#d0" ) . slideDown ( 'slow' , function ( ) {
alert ( "元素已展开" ) ;
} ) ;
} ) ;
$ ( "#btn1" ) . click ( function ( ) {
$ ( "#d0" ) . slideUp ( 3000 , function ( ) {
alert ( "元素已收起" ) ;
} ) ;
} ) ;
</ script> </ body> </ html>
animate ( ) 方法 : 方法用于创建自定义动画 .
语法 : $ ( selector ) . animate ( { params } , speed , callback ) ;
参数说明 :
- params : 必需参数 , 定义形成动画的CSS属性 .
- speed : 可选参数 , 规定效果的时长 .
- callback : 可选的回调函数 , 在动画完成后执行 .
默认情况下 , 所有HTML元素都有一个静态位置 , 且无法移动 .
如需对位置进行操作 , 要记得首先把元素的CSS position属性设置为relative , fixed或absolute！
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < title> </ title> < style>
div {
position : relative;
display : inline-block;
}
i {
display : inline-block;
color : red;
position : absolute;
right : -16px;
top : -5px;
opacity : 1;
}
</ style> </ head> < body> < divid = " d1" > </ div> < script>
$ ( "#d1" ) . on ( "click" , function ( ) {
let $iEle = $ ( "<i>" ) . text ( "+1" ) ;
$iEle. animate ( { opacity : 0 } , 1000 ) ;
$ ( this ) . append ( $iEle) ;
} )
</ script> </ body> </ html>
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < title> </ title> < style>
#d0 {
width : 350px;
height : 350px;
border : #352c2c inset 1px;
}
#d1 {
width : 100px;
height : 100px;
background-color : #00c1ea;
position : relative;
}
</ style> </ head> < body> < p> < buttonid = " btn0" > </ button> < buttonid = " btn1" > </ button> < buttonid = " btn2" > </ button> < buttonid = " btn3" > </ button> </ p> < divid = " d0" > < divid = " d1" > </ div> </ div> < script>
let $divEle = $ ( "#d1" )
$ ( "#btn0" ) . click ( function ( ) {
$divEle. animate ( { left : '250px' } ) ;
} ) ;
$ ( "#btn1" ) . click ( function ( ) {
$divEle. animate ( { left : '0px' } ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$divEle. animate ( { top : '250px' } ) ;
} ) ;
$ ( "#btn3" ) . click ( function ( ) {
$divEle. animate ( { top : '0px' } ) ;
} ) ;
</ script> </ body> </ html>
生成动画时 , 可以同时使用多个属性来控制元素的动画效果 .
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < title> </ title> < style>
#d0 {
width : 30px;
height : 30px;
background-color : #00c1ea;
position : relative;
}
</ style> </ head> < body> < p> < buttonid = " btn0" > </ button> < buttonid = " btn1" > </ button> </ p> < div> < divid = " d0" > </ div> </ div> < script>
$ ( "#btn0" ) . click ( function ( ) {
$ ( "#d0" ) . animate ( {
left : '250px' ,
opacity : '0.5' ,
height : '150px' ,
width : '150px'
} ) ;
} ) ;
$ ( "#btn1" ) . click ( function ( ) {
$ ( "#d0" ) . animate ( {
left : '0px' ,
opacity : '1' ,
height : '30px' ,
width : '30px'
} ) ;
} ) ;
</ script> </ body> </ html>
通过 '+=' 或 '-=' 来定义相对值 , 可以基于元素当前的属性值进行动态调整 , 实现更加灵活和自适应的动画效果 .
请注意 , 在使用这种方式时 , 确保元素当前值是一个能够进行增减运算的属性 , 比如长度 , 尺寸等 , 避免在不支持增减运算的属性上使用相对值 .
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < title> </ title> < style>
#d0 {
width : 30px;
height : 30px;
background-color : #00c1ea;
position : relative;
}
</ style> </ head> < body> < p> < buttonid = " btn0" > </ button> < buttonid = " btn1" > </ button> < buttonid = " btn2" > </ button> </ p> < div> < divid = " d0" > </ div> </ div> < script>
$ ( "#btn0" ) . click ( function ( ) {
$ ( "#d0" ) . animate ( {
left : '250px' ,
opacity : '0.5' ,
height : '+=150px' ,
width : '+=150px'
} ) ;
} ) ;
$ ( "#btn1" ) . click ( function ( ) {
$ ( "#d0" ) . animate ( {
left : '250px' ,
opacity : '0.5' ,
height : '-=150px' ,
width : '-=150px'
} ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( "#d0" ) . animate ( {
left : '0px' ,
opacity : '1' ,
height : '30px' ,
width : '30px'
} ) ;
} ) ;
</ script> </ body> </ html>
可以将属性的动画值设置为预定义的值 , 这些值有助于在动画期间定义属性的起点和终点 .
预定义值 :
'show' : 将属性从隐藏状态过渡到显示状态 .
'hide' : 将属性从显示状态过渡到隐藏状态 .
'toggle' : 根据属性的当前状态 , 在显示和隐藏之间切换 . 示例代码如下：
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < title> </ title> < style>
#d0 {
width : 100px;
height : 100px;
background-color : #00c1ea;
position : fixed;
}
</ style> </ head> < body> < p> < button> </ button> </ p> < divid = " d0" > </ div> < script>
$ ( "button" ) . click ( function ( ) {
$ ( "#d0" ) . animate ( {
right : 'toggle' ,
opacity : "toggle" ,
} ) ;
} ) ;
</ script> </ body> </ html>
jQuery提供了动画队列功能 , 这意味着如果按顺序编写多个animate ( ) 方法调用 , jQuery会创建一个内部队列 , 逐一运行这些动画调用 .
当连续调用多个animate ( ) 方法时 , jQuery会将这些调用按照它们出现的顺序添加到内部队列中 .
然后 , jQuery会逐一处理队列中的动画调用 , 确保它们按顺序执行 .
< htmllang = " zh-CN" > < head> < metacharset = " UTF-8" > < scriptsrc = " js/code.jquery .com_jquery -3.7.1.min.js" > </ script> < title> </ title> < style>
#d0 {
width : 100px;
height : 100px;
background-color : #00c1ea;
position : fixed;
}
</ style> </ head> < body> < p> < button> </ button> </ p> < divid = " d0" > </ div> < script>
$ ( "button" ) . click ( function ( ) {
let $divEle = $ ( "#d0" ) ;
$divEle. animate (
{ height : '300px' , opacity : '0.4' }
) . animate (
{ width : '300px' , opacity : '0.8' }
) . animate (
{ height : '100px' , opacity : '0.4' }
) . animate (
{ width : '100px' , opacity : '0.8' }
) ;
} ) ;
</ script> </ body> </ html>
