01 - 动画效果
show 显示
概念: 显示隐藏的匹配元素 语法: show(speed,callback) 参数:
speed: 三种预定速度之一的字符串 ('slow','normal','fast') 或表示动画时长的毫秒值(如: 1000 毫秒 ==1 秒)
callback: 在动画完成时执行的函数, 每个元素执行一次
方式一:
$("div").show();
解释: 无参数, 表示让指定的元素直接显示出来. 其实这个方法的底层就是通过 display: block; 实现的.
方式二:
$('div').show(3000);
解释: 通过控制元素的宽高, 透明度, display 属性, 逐渐显示, 2 秒后显示完毕.
方式三:
$("div").show("slow");
方式四:
- //show(毫秒值, 回调函数;
- $("div").show(5000,function () {
- alert("动画执行完毕!");
- });
hide 隐藏
hide(speed,callback)跟 show 使用方法类似, 表示隐藏显示的元素.
可以通过 show()和 hide()方法, 来动态控制元素的显示隐藏.
- $(selector).hide();
- $(selector).hide(1000);
- $(selector).hide("slow");
- $(selector).hide(1000, function(){});
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- #box{
- width: 200px;
- height: 200px;
- background-color: green;
- border: 1px solid red;
- display: none;
- }
- </style>
- </head>
- <body>
- <div id="box">
- </div>
- <button id="btn">隐藏</button>
- </body>
- <script src="jquery-3.3.1.js"></script>
- <script type="text/javascript">
- //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
- var isShow = true;
- $('#btn').click(function(){
- if(isShow){
- $('#box').show('slow',function(){
- $(this).text('盒子出来了');
- $('#btn').text('显示');
- isShow = false;
- })
- }else{
- $('#box').hide(2000,function(){
- $(this).text('');
- $('#btn').text('隐藏');
- isShow = true;
- })
- }
- })
- </script>
- </html>
显示隐藏切换
toggle 开关式显示隐藏
如果元素是可见的, 切换为隐藏的; 如果元素是隐藏的, 切换为可见的.
显示和隐藏的来回切换采用的是 toggle()方法: 就是先执行 show(), 再执行 hide().
代码如下:
- $('#btn').click(function(){
- $('#box').toggle(3000,function(){
- $(this).text('盒子出来了');
- if ($('#btn').text()=='隐藏') {
- $('#btn').text('显示');
- }else{
- $('#btn').text('隐藏');
- }
- });
- })
slideDown 滑入
概念: 通过高度变化 (向下增大) 来到动态地显示所有匹配的元素, 在显示完成后触发一个回调函数
用法和参数跟上面类似
$(selector).slideDown(speed, 回调函数);
slideUp 滑出
通过高度变化 (向上减小) 来动态地隐藏所有匹配的元素, 在隐藏完成后可选地触发一个回调函数.
用法和参数跟上面类似
$(selector).slideUp(speed, 回调函数);
slideToggle 滑入和滑出的切换效果
概念: 通过高度变化来切换所有匹配元素的可见性, 并在切换完成后可选地触发一个回调函数
跟 toggle 用法类似
$(selector).slideToggle(speed, 回调函数);
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style>
- div {
- width: 300px;
- height: 300px;
- display: none;
- background-color: green;
- }
- </style>
- <script src="jquery-3.3.1.js"></script>
- <script>
- $(function () {
- // 点击按钮后产生动画
- $("button:eq(0)").click(function () {
- // 滑入动画: slideDown(毫秒值, 回调函数[显示完毕执行什么]);
- $("div").slideDown(2000, function () {
- alert("动画执行完毕!");
- });
- })
- // 滑出动画
- $("button:eq(1)").click(function () {
- // 滑出动画: slideUp(毫秒值, 回调函数[显示完毕后执行什么]);
- $("div").slideUp(2000, function () {
- alert("动画执行完毕!");
- });
- })
- $("button:eq(2)").click(function () {
- // 滑入滑出切换(同样有四种用法)
- $("div").slideToggle(1000);
- })
- })
- </script>
- </head>
- <body>
- <button > 滑入</button>
- <button > 滑出</button>
- <button > 切换</button>
- <div></div>
- </body>
- </html>
滑入滑出
fadeIn 淡入
概念: 通过不透明度的变化来实现所有匹配元素的淡入效果, 并在动画完成后可选地触发一个回调函数.
这个动画只调整元素的不透明度, 也就是说所有匹配的元素的高度和宽度不会发生变化.
$(selector).fadeIn(speed, callback);
作用: 让元素以淡淡的进入视线的方式展示出来.
fadeOut 淡出
概念: 通过不透明度的变化来实现所有匹配元素的淡出效果, 并在动画完成后可选地触发一个回调函数.
这个动画只调整元素的不透明度, 也就是说所有匹配的元素的高度和宽度不会发生变化.
$(selector).fadeOut(1000);
作用: 让元素以渐渐消失的方式隐藏起来
fadeTo 调整透明度
概念: 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度, 并在动画完成后可选地触发一个回调函数.
这个动画只调整元素的不透明度, 也就是说所有匹配的元素的高度和宽度不会发生变化.
fadeToggle 淡入淡出的切换
概念: 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果, 并在动画完成后可选地触发一个回调函数.
这个动画只调整元素的不透明度, 也就是说所有匹配的元素的高度和宽度不会发生变化.
实现淡入淡出的效果就是使用此方法
$(selector).fadeToggle('fast', callback);
作用: 通过改变透明度, 切换匹配元素的显示或隐藏状态.
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style>
- div {
- width: 300px;
- height: 300px;
- display: none;
- /* 透明度 */
- opacity: 0.5;
- background-color: red;
- }
- </style>
- <script src="jquery-3.3.1.js"></script>
- <script>
- $(function () {
- // 点击按钮后产生动画
- $("button:eq(0)").click(function () {
- //// 淡入动画用法 1: fadeIn(); 不加参数
- $("div").fadeIn();
- //// 淡入动画用法 2: fadeIn(2000); 毫秒值
- // $("div").fadeIn(2000);
- //// 通过控制 透明度和 display
- // 淡入动画用法 3: fadeIn(字符串); slow 慢: 600ms normal 正常: 400ms fast 快: 200ms
- // $("div").fadeIn("slow");
- // $("div").fadeIn("fast");
- // $("div").fadeIn("normal");
- // 淡入动画用法 4: fadeIn(毫秒值, 回调函数[显示完毕执行什么]);
- // $("div").fadeIn(5000,function () {
- // alert("动画执行完毕!");
- // });
- })
- // 滑出动画
- $("button:eq(1)").click(function () {
- //// 滑出动画用法 1: fadeOut(); 不加参数
- $("div").fadeOut();
- //// 滑出动画用法 2: fadeOut(2000); 毫秒值
- // $("div").fadeOut(2000); // 通过这个方法实现的: display: none;
- //// 通过控制 透明度和 display
- // 滑出动画用法 3: fadeOut(字符串); slow 慢: 600ms normal 正常: 400ms fast 快: 200ms
- // $("div").fadeOut("slow");
- // $("div").fadeOut("fast");
- // $("div").fadeOut("normal");
- // 滑出动画用法 1: fadeOut(毫秒值, 回调函数[显示完毕执行什么]);
- // $("div").fadeOut(2000,function () {
- // alert("动画执行完毕!");
- // });
- })
- $("button:eq(2)").click(function () {
- // 滑入滑出切换
- // 同样有四种用法
- $("div").fadeToggle(1000);
- })
- $("button:eq(3)").click(function () {
- // 改透明度
- // 同样有四种用法
- $("div").fadeTo(1000, 0.5, function () {
- alert(1);
- });
- })
- })
- </script>
- </head>
- <body>
- <button > 淡入</button>
- <button > 淡出</button>
- <button > 切换</button>
- <button > 改透明度为 0.5</button>
- <div></div>
- </body>
- </html>
示例
animate 自定义动画
概念: 用于创建自定义动画的函数
语法: animate({params}, [speed], [fn])
参数:
params: 一组包含作为动画属性和终值的样式属性和及其值的集合(要执行的动画 CSS 属性)(必选)
speed: 三种预定速度之一的字符串 ("slow","normal", or "fast") 或表示动画时长的毫秒数值(如: 1000)
fn: 在动画完成时执行的回调函数, 每个元素执行一次.
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style>
- div {
- position: absolute;
- left: 20px;
- top: 30px;
- width: 100px;
- height: 100px;
- background-color: green;
- }
- </style>
- <script src="jquery-3.3.1.js"></script>
- <script>
- jQuery(function () {
- $("button").click(function () {
- var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
- var json2 = {
- "width": 100,
- "height": 100,
- "left": 100,
- "top": 100,
- "border-radius": 100,
- "background-color": "red"
- };
- // 自定义动画
- $("div").animate(json, 1000, function () {
- $("div").animate(json2, 1000, function () {
- alert("动画执行完毕!");
- });
- });
- })
- })
- </script>
- </head>
- <body>
- <button > 自定义动画</button>
- <div></div>
- </body>
- </html>
示例
stop 停止
概念: 停止所有在指定元素上正在运行的动画
语法: stop([clearQueue],[jumpToEnd])
参数:
clearQueue: 如果设置成 true, 则清空队列. 可以立即结束动画.
gotoEnd: 让当前正在执行的动画立即完成, 并且重设 show 和 hide 的原始样式, 调用回调函数等.
$(selector).stop(true, false);
第一个参数:
true: 后续动画不执行.
false: 后续动画会执行.
第二个参数:
true: 立即执行完成当前动画.
false: 立即停止当前动画.
PS: 参数如果都不写, 默认两个都是 false. 实际工作中, 直接写 stop()用的多.
delay 延时
概念: 用来做延迟的操作
语法: delay(1000), 一秒之后做后面的操作
案例一: 鼠标悬停时, 弹出下拉菜单
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- ul {
- list-style: none;
- }
- .wrap {
- width: 330px;
- height: 30px;
- margin: 100px auto 0;
- padding-left: 10px;
- background-color: pink;
- }
- .wrap li {
- background-color: green;
- }
- .wrap> ul> li {
- float: left;
- margin-right: 10px;
- position: relative;
- }
- .wrap a {
- display: block;
- height: 30px;
- width: 100px;
- text-decoration: none;
- color: #000;
- line-height: 30px;
- text-align: center;
- }
- .wrap li ul {
- position: absolute;
- top: 30px;
- display: none;
- }
- </style>
- <script src="jquery-3.3.1.js"></script>
- <script>
- // 入口函数
- $(document).ready(function () {
- // 需求: 鼠标放入一级 li 中, 让他里面的 ul 显示. 移开隐藏.
- var jqli = $(".wrap>ul>li");
- // 绑定事件
- jqli.mouseenter(function () {
- $(this).children("ul").stop().slideDown(1000);
- });
- // 绑定事件(移开隐藏)
- jqli.mouseleave(function () {
- $(this).children("ul").stop().slideUp(1000);
- });
- });
- </script>
- </head>
- <body>
- <div class="wrap">
- <ul>
- <li>
- <a href="javascript:void(0);">一级菜单 1</a>
- <ul>
- <li><a href="javascript:void(0);">二级菜单 2</a></li>
- <li><a href="javascript:void(0);">二级菜单 3</a></li>
- <li><a href="javascript:void(0);">二级菜单 4</a></li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);">二级菜单 1</a>
- <ul>
- <li><a href="javascript:void(0);">二级菜单 2</a></li>
- <li><a href="javascript:void(0);">二级菜单 3</a></li>
- <li><a href="javascript:void(0);">二级菜单 4</a></li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);">三级菜单 1</a>
- <ul>
- <li><a href="javascript:void(0);">三级菜单 2</a></li>
- <li><a href="javascript:void(0);">三级菜单 3</a></li>
- <li><a href="javascript:void(0);">三级菜单 4</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </body>
- </html>
- View Code
上方代码中, 关键的地方在于, 用了 stop 函数, 再执行动画前, 先停掉之前的动画.
注意: javascript:void(0); // 跟 javascript:; 效果一样.
案例二: 右下角弹出小广告
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- </style>
- </head>
- <body>
- <div id="box" style="width: 330px;height: 480px;position: absolute;right: 10px;bottom: 0;display: none;">
- <img src="广告. png" style="width: 100%;height: 100%;"/>
- </div>
- </body>
- <script src="jquery-3.3.1.js"></script>
- <script type="text/javascript">
- $(function(){
- $('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function(){
- $(this).fadeOut(1000);
- })
- })
- </script>
- </html>
02 - 属性操作
jQuery 的属性操作模块分为四个部分: HTML 属性操作, DOM 属性操作, 类样式操作 和 值操作.
html 属性操作: 是对 html 文档中的属性进行读取, 设置和移除操作. 比如 attr(),removeAttr()
DOM 属性操作: 对 DOM 元素的属性进行读取, 设置和移除操作. 比如 prop(),removeProp()
类样式操作: 是指对 DOM 属性 className 进行添加, 移除操作. 比如 addClass(),removeClass(),toggleClass()
值操作: 是对 DOM 属性 value 进行读取和设置操作. 比如 html(),text(),val()
attr()
设置属性值 或者 返回被选元素的属性值.
- // 获取值: attr()设置一个属性值的时候 只是获取值
- var id = $('div').attr('id')
- console.log(id)
- var cla = $('div').attr('class')
- console.log(cla)
- // 设置值
- //1. 设置一个值 设置 div 的 class 为 box
- $('div').attr('class','box')
- //2. 设置多个值, 参数为对象, 键值对存储
- $('div').attr({name:'hahaha',class:'happy'})
- removeAttr()
移除属性
- // 删除单个属性
- $('#box').removeAttr('name');
- $('#box').removeAttr('class');
- // 删除多个属性
- $('#box').removeAttr('name class');
- prop()
设置或返回被选中元素的属性和值.
当该方法用于返回属性值时, 则返回第一个匹配元素的值.
当该方法用于设置属性值时, 则为匹配元素集合设置一个或多个属性 / 值对.
语法:
返回属性的值:
$(selector).prop(property)
设置属性和值:
$(selector).prop(property,value)
设置多个属性和值:
$(selector).prop({property:value, property:value,...})
关于 attr()和 prop()的区别
根据官方的建议: 具有 true 和 false 两个属性的属性, 如 checked, selected 或者 disabled 使用 prop(), 其他的使用 attr(), 具体见下表:
addClass 添加多个类名
为每个匹配的元素添加指定的类名.
$('div').addClass("box");// 追加一个类名到原有的类名
还可以为匹配的元素添加多个类名
- $('div').addClass("box box2");// 追加多个类名
- removeClass
从所有匹配的元素中删除全部或者指定的类.
移除指定的类(一个或多个)
$('div').removeClass('box');
移除全部的类
$('div').removeClass();
可以通过添加删除类名, 来实现元素的显示隐藏.
- var tag = false;
- $('span').click(function(){
- if(tag){
- $('span').removeClass('active')
- tag=false;
- }else{
- $('span').addClass('active')
- tag=true;
- }
- })
示例
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- .active{
- color: red;
- }
- </style>
- </head>
- <body>
- <ul>
- <li class="item">张三</li>
- <li class="item">李四</li>
- <li class="item">王五</li>
- </ul>
- <script type="text/javascript" src="jquery-3.3.1.js"></script>
- <script type="text/javascript">
- $(function(){
- $('ul li').click(function(){
- // this 指的是当前点击的 DOM 对象 , 使用 $(this)转化 jquery 对象
- $(this).addClass('active').siblings('li').removeClass('active');
- })
- })
- </script>
- </body>
- </html>
案例
toggleClass
如果存在这个类, 就删除这个类; 如果不存在这个类, 就添加这个类.
- $('span').click(function(){
- // 动态的切换 class 类名为 active
- $(this).toggleClass('active')
- })
html 获取值
html() 是获取选中标签元素中所有的内容
$('#box').html();
设置值: 设置该元素的所有内容 会替换掉 标签中原来的内容
- $('#box').html('<a href="https://www.baidu.com">百度一下</a>');
- text
获取值:
text() 获取匹配元素包含的文本内容.
语法:
$('#box').text();
设置值: 设置该所有的文本内容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
注意: 值为标签的时候 , 不会被渲染为标签元素, 只会被当做值渲染到浏览器中.
val
获取值:
val() 用于表单控件中获取值, 比如 input textarea select 等等
设置值:
$('input').val('设置了表单控件中的值');
03 - 文档操作
插入操作
知识点 1:
语法:
父元素. append(子元素)
解释: 追加某元素, 在父元素中添加新的子元素. 子元素可以为: stirng | element(js 对象) | jquery 元素.
代码如下:
- var oli = document.createElement('li');
- oli.innerHTML = '哈哈哈';
- $('ul').append('<li>1233</li>');
- $('ul').append(oli);
- $('ul').append($('#app'));
PS: 如果追加的是 jquery 对象那么这些元素将从原位置上消失. 简言之, 就是一个移动操作.
知识点 2:
语法:
子元素. appendTo(父元素)
解释: 追加到某元素 , 子元素添加到父元素
$('<li > 天王盖地虎</li>').appendTo($('ul')).addClass('active')
PS: 要添加的元素同样既可以是 stirng ,element(js 对象) , jquery 元素.
知识点 3:
语法:
父元素. prepend(子元素);
解释: 前置添加, 添加到父元素的第一个位置.
$('ul').prepend('<li > 我是第一个</li>')
知识点 4:
语法:
子元素. prependTo(父元素);
解释: 前置添加, 添加到父元素的第一个位置
$('<a href="#">标签</a>').prependTo('ul')
知识点 5:
语法:
兄弟元素. after(要插入的兄弟元素);
要插入的兄弟元素. inserAfter(兄弟元素);
解释: 在匹配的元素之后插入内容
- $('ul').after('<h4 > 我是一个 h3 标题</h4>')
- $('<h5 > 我是一个 h2 标题</h5>').insertAfter('ul')
知识点 6:
语法:
兄弟元素. before(要插入的兄弟元素);
要插入的兄弟元素. inserBefore(兄弟元素);
解释: 在匹配的元素之后插入内容
- $('ul').before('<h3 > 我是一个 h3 标题</h3>')
- $('<h2 > 我是一个 h2 标题</h2>').insertBefore('ul')
克隆操作
语法:
$(选择器).clone();
解释: 克隆匹配的 DOM 元素.
- $('button').click(function() {
- // 1.clone(): 克隆匹配的 DOM 元素
- // 2.clone(true): 元素以及其所有的事件处理并且选中这些克隆的副本(简言之, 副本具有与真身一样的事件处理能力)
- $(this).clone(true).insertAfter(this);
- })
修改操作
知识点 1:
语法:
$(selector).replaceWith(content);
将所有匹配的元素替换成指定的 string,js 对象, jquery 对象.
- // 将所有的 h5 标题替换为 a 标签
- $('h5').replaceWith('<a href="#">hello world</a>')
- // 将所有 h5 标题标签替换成 id 为 app 的 dom 元素
- $('h5').replaceWith($('#app'));
知识点 2:
语法:
$('<p > 哈哈哈</p>')replaceAll('h2');
解释: 替换所有. 将所有的 h2 标签替换成 p 标签.
$('<br/><hr/><button > 按钮</button>').replaceAll('h4')
删除操作
知识点 1:
语法:
$(selector).remove();
解释: 删除节点后, 事件也会删除(简言之, 删除了整个标签)
$('ul').remove();
知识点 2:
语法:
$(selector).detach();
解释: 删除节点后, 事件会保留.
- var $btn = $('button').detach()
- // 此时按钮能追加到 ul 中
- $('ul').append($btn)
知识点 3:
语法:
$(selector).empty();
解释: 清空选中元素中的所有后代节点, 保留元素.
- // 清空掉 ul 中的子元素, 保留 ul
- $('ul').empty()
04 - 使用 jQuery 操作 input 的 value 值
- <script type="text/javascript" src="jquery-3.3.1.js"></script>
- <script type="text/javascript">
- $(function(){
- // 一, 获取值
- //1. 获取单选框被选中的 value 值
- console.log($('input[type=radio]:checked').val())
- //2. 复选框被选中的 value, 获取的是第一个被选中的值
- console.log($('input[type=checkbox]:checked').val())
- //3. 下拉列表被选中的值
- var obj = $("#timespan option:selected");
- // 获取被选中的值
- var time = obj.val();
- console.log(time);
- // 获取文本
- var time_text = obj.text();
- console.log("val:"+time+"text"+ time_text );
- //4. 获取文本框的 value 值
- console.log($("input[type=text]").val())// 获取文本框中的值
- // 二. 设置值
- //1. 设置单选按钮和多选按钮被选中项
- $('input[type=radio]').val(['112']);
- $('input[type=checkbox]').val(['a','b']);
- //2. 设置下拉列表框的选中值, 必须使用 select
- /* 因为 option 只能设置单个值, 当给 select 标签设置 multiple.
- 那么我们设置多个值, 就没有办法了, 但是使用 select 设置单个值和多个值都可以
- */
- $('select').val(['3','2'])
- //3. 设置文本框的 value 值
- $('input[type=text]').val('试试就试试')
- })
- </script>
来源: http://www.bubuko.com/infodetail-2749494.html