06-js-jQuery
""" jQuery 对象就是通过jQuery包装DOM对象后产生的对象。 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法 """
一、jquery初识
""" $就是jquery对象 $("div").css("color","red"); 等价于 jQuery("div").css("color","red");//选择器 操作 """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1" class="c1 xx oo"></div>
</body>
<script>
var d1 = $('#d1'); // jquery对象 jQuery.fn.init [div#d1]
var d = document.getElementById('d1'); // 原生dom对象 <div id='d1'></div>
// jquery对象和dom对象之前不能调用互相的方法
// jquery对象和dom对象可以互相转换
d1[0] //-- dom对象
$(d) //-- jquery对象
</script>
</html>
二、选择器
""" 基本选择器： $("*") $("#id") $(".class") $("element") $(".class,p,div") 层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div") 基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)") 属性选择器 $('[id="div1"]') $('["alex="sb"][id]') 表单选择器 $("[type='text]")------>$(":text") 只适用于input标签 : $("input:checked") """
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-3.4.1.js"></script> <div>hello</div> <a href="">click</a> <p id="p1" kxq="sb">ppp</p> <p id="p2" kxq="bb">ppp</p> <div class="outer">outer <div class="inner"> inner <p>inner p</p> </div>siblings <p>kxq</p> </div> <!--<p>xialv</p>--> <div class="outer2">outer1</div> <p>xialv</p> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <script> <!--$就是jquery对象--> // $("div").css("color","red"); // jQuery("div").css("color","red");//选择器 操作 // 基本选择器 $("*").css("color","red"); $("#p1").css("color","red"); $(".outer").css("color","red"); $(".inner,p,div").css("color","red"); // 层级选择器 //后代选择器 // $(".outer p").css("color","red"); //子代选择器 子代就是kxq inner p 是outer的孙子了 // $(".outer>p").css("color","red"); //毗邻 下面一个标签紧挨着的 // $(".outer+p").css("color","red"); //也是兄弟标签 兄弟不用紧挨着了 // $(".outer~p").css("color","red"); // 基本筛选器 li是多个 筛选出来一个 //第一个 // $("li:first").css("color","red"); //随意选择第几个 // $("li:eq(1)").css("color","red"); //奇偶 // $("li:odd").css("color","red"); //大于某个索引以后的全部变化 gt 2 从第三个以后都变红 不包括第三个 // $("li:gt(2)").css("color","red"); // 之前 // $("li:lt(2)").css("color","red"); // 属性选择器 // $("[kxq='sb'][id='p1']").css("color","red"); // //表单选择器 // $("[type='text']").css("width","200px"); // $(":text").css("width","400px"); </script> </body> </html>
<!--html代码--> <a href="">click</a> <p id="p1" kxq="sb">ppp</p> <p id="p2" kxq="bb">ppp</p> <div class="outer">outer <div class="inner"> inner <p>inner p</p> </div>siblings <p>kxq</p> </div> <!--<p>xialv</p>--> <div>hello</div> <div class="outer2">outer1</div> <p>xialv</p> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <!--jquery代码--> $("*").css("color","red"); $("#p1").css("color","red"); $(".outer").css("color","red"); $(".inner,p,div").css("color","red");
<!--html代码--> <div>hello</div> <a href="">click</a> <p id="p1" kxq="sb">ppp</p> <p id="p2" kxq="bb">ppp</p> <div class="outer">outer <div class="inner"> inner <p>inner p</p> </div>siblings <p>kxq</p> </div> <!--<p>xialv</p>--> <div class="outer2">outer1</div> <p>xialv</p> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <!--jquery代码--> <!--后代选择器--> $(".outer p").css("color","red"); <!--子代选择器 子代就是kxq inner p 是outer的孙子了--> $(".outer>p").css("color","red"); <!--毗邻 下面一个标签紧挨着的--> $(".outer+p").css("color","red"); <!--也是兄弟标签 兄弟不用紧挨着了--> $(".outer~p").css("color","red");
<!--html代码--> <div>hello</div> <a href="">click</a> <p id="p1" kxq="sb">ppp</p> <p id="p2" kxq="bb">ppp</p> <div class="outer">outer <div class="inner"> inner <p>inner p</p> </div>siblings <p>kxq</p> </div> <!--<p>xialv</p>--> <div class="outer2">outer1</div> <p>xialv</p> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <!--jquery代码--> <!--基本筛选器 li是多个 筛选出来一个--> <!--第一个--> $("li:first").css("color","red"); <!--随意选择第几个--> $("li:eq(1)").css("color","red"); <!--奇偶--> $("li:odd").css("color","red"); <!--大于某个索引以后的全部变化 gt 2 从第三个以后都变红 不包括第三个--> $("li:gt(2)").css("color","red"); <!--之前--> $("li:lt(2)").css("color","red");
<!--html代码--> <!--html代码--> <div>hello</div> <a href="">click</a> <p id="p1" kxq="sb">ppp</p> <p id="p2" kxq="bb">ppp</p> <div class="outer">outer <div class="inner"> inner <p>inner p</p> </div>siblings <p>kxq</p> </div> <!--<p>xialv</p>--> <div class="outer2">outer1</div> <p>xialv</p> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <!--jquery代码--> <!--属性选择器--> $("[kxq='sb'][id='p1']").css("color","red");
<!--html代码--> <div>hello</div> <a href="">click</a> <p id="p1" kxq="sb">ppp</p> <p id="p2" kxq="bb">ppp</p> <div class="outer">outer <div class="inner"> inner <p>inner p</p> </div>siblings <p>kxq</p> </div> <!--<p>xialv</p>--> <div class="outer2">outer1</div> <p>xialv</p> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <!--jquery代码--> <!--表单选择器--> $("[type='text']").css("width","200px"); $(":text").css("width","400px");
表单对象属性选择器 :checked 找到被选中的input标签和option标签 :selected 找被选中的select标签中的option标签 :disabled 不可操作的标签 :enabled 可操作的标签 html代码 <input type="text" id="username" disabled> <input type="radio" class="a1" name="sex" value="1" disabled>男 <input type="radio" class="a1" name="sex" value="2">女 <input type="checkbox" class="a2" name="hobby" value="1">抽烟 <input type="checkbox" class="a2" name="hobby" value="2">喝酒 <input type="checkbox" class="a2" name="hobby" value="3">烫头
三、过滤筛选器和查找筛选器的方法
1、过滤筛选器
# $("li").eq(2)
2、查找筛选器
<ul> <li>谢一峰</li> <li class="c1">王子宇</li> <li>孙波</li> <li class="c2">石淦</li> <li> <span>白雪冰</span> </li> <li>方伯仁</li> </ul>
2.1、parent()
""" var c = $('.c1'); c.parent(); c.parents(); 直系的祖先辈 c.parentsUntil('body'); 往上找,直到找到body标签为止,不包含body标签 """
2.2、children()
""" var u = $('ul'); u.children(); 找到所有儿子标签 u.children('.c1'); 找到符合.c1选择器的儿子标签 """
2.3、next()
""" var c = $('.c1'); c.next(); nextAll(); 下面所有兄弟 c.nextUntil('.c2'); 下面到某个兄弟为止,不包含那个兄弟 """
2.4、prev()
""" var c = $('.c1'); c.prev(); c.prevAll(); 上面所有兄弟,注意顺序都是反的 c.prevUntil('.c1'); 上面到某个兄弟为止,不包含那个兄弟,注意顺序都是反的 """
2.5、siblings()
""" c.siblings(); 找到不包含自己的所有兄弟 c.siblings('.c1'); 筛选兄弟中有class类值为c1的标签 """
2.6、find()
""" $('li').find('span'); 等同于css的 li span后代选择器 $('li span') """
2.7、first() 和 last() 和 eq(索引值)
""" $('li').first(); 找所有li标签中的第一个 $('li').last(); 找所有li标签中的最后一个 $('li').eq(0); 按照索引取对应的那个标签,索引从0开始 $('li').eq(-1); 最后一个 $('li')[ 索引 ] -- 原生dom对象 """
四、文本操作
# text()和html() 等同于innerText和innerHTML
""" 设置文本 $('#xiaolin').text('小林望明月'); $('#xiaolin').text('<a href="">小林望明月</a>'); $('#xiaolin').html('<a href="">小林望明月</a>'); 获取文本 $('#xiaolin').text(); $('#xiaolin').html(); """
五、class类值操作
""" 添加类值 $('.c1').addClass('c2'); 删除类值 $('.c1').removeClass('c2'); 切换：有就删除，没有就添加 $('.c1').toggleClass('c2'); """
六、css样式操作
""" <div class="c1"> </div> $('.c1').css({'background-color':'pink','width':'300px'}); """
七、值操作
示例：
示例: html代码: <input type="text" id="username"> <input type="radio" class="a1" name="sex" value="1">男 <input type="radio" class="a1" name="sex" value="2">女 <input type="checkbox" class="a2" name="hobby" value="1">抽烟 <input type="checkbox" class="a2" name="hobby" value="2">喝酒 <input type="checkbox" class="a2" name="hobby" value="3">烫头 <select name="city" id="s1"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> </select> <select name="lover" id="s2" multiple> <option value="1">波多</option> <option value="2">苍井</option> <option value="3">小泽</option> </select> jquery代码: 普通文本输入框： 获取值： $(':text').val(); 设置值： $(':text').val('xxx'); radio 获取值： $(':radio:checked').val(); 设置值： $(':radio').val(['2']); 将input,type='radio'的标签默认选中 checkbox 获取值 var s = $(':checkbox:checked'); for (var i=0;i<s.length;i++){ console.log(s.eq(i).val()); } 补充$.each循环 循环普通数组 var a = [11,22,33]; $.each(a,function(k,v){ console.log(k,v); }) 循环标签数组 var s = $(':checkbox:checked'); $.each(s,function(k,v){ console.log(k,v); }) 设置值 $(':checkbox').val(['1', '3']); $(':checkbox').val([2,3]); 单选下拉框 获取值 $('#s1').val(); 设置值 $('#s1').val(['2']); 多选下拉框 获取值 $('#s2').val(); 设置值 $('#s2').val(['1','2']);
八、form表单
<body> <form action=""> <input type="text" name="username"> <!-- <input type="button" value="xx">--> <input type="submit"> <button>确认</button> <!-- <button type="submit">确认</button> 默认是submit--> <!-- <button type="button">确认</button>--> </form> 放到form表单外面，是没有提交数据的效果的 <input type="submit"> <button>确认</button> </body>
九、操作
1、创建标签
""" js var a = document.createElement('a'); jquery: $('<a>',{ text:'这还是个链接', href:'http://www.baidu.com', class:'link', id:'baidu', name:'baidu' }) """
2、文档操作
""" 往标签内部的后面添加元素 append方法 示例： var a = $('<a>',{href:"",text:'百度'}); $('div').append(a); var s = '<a href="">xx</a>'; $('div').append(s); appendTo a.appendTo($('div')); 往标签内部的前面添加元素 prepend方法 示例 var a = $('<a>',{href:"",text:'xxx'}); $('div').prepend(a) prependTo方法 a.prependTo($('div')); 往标签外部的后面添加 after方法 示例 $('div').after('<a href="">xxxxx</a>'); insertAfter方法 a.insertAfter($('div')); 往标签外部的前面添加 before方法 示例 $('div').before('<a href="">xxxxx</a>'); a.insertBefore($('div')); """
3、清空标签
""" empty方法 $('div').text(''); $('div').html(''); $('div').empty(); """
4、删除标签
""" $('div').remove(); """
5、克隆
""" <div class="c1"> <button class="btn">屠龙宝刀，点击就送！</button> </div> js代码 $('.btn').click(function (){ // var btn = $(this).clone(); // 不克隆绑定的事件 var btn = $(this).clone(true); //克隆连带事件 $('.c1').append(btn); }) """
6、模板字符串
""" var a = '大海啊'; # 例如动态插入记录(标签) 值就可以这样写 var ss = `${a},全是水`; 和python的f字符串一样 name = 'xx' s = f'{name}你好呀' print(s) """
7、事件绑定
""" 方式1 点击事件 $('#btn').click(function (){ $('.shadow,.mode').removeClass('hide'); }) 方式2 $('.c1').on('click',function (){ $(this).addClass('c2'); }) """
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 100px; width: 100px; } .c2{ background-color: yellow; } </style> </head> <body> <div class="c1"></div> </body> <script src='jquery.js'></script> <script> // xx.onclick = function(){ // this // } // //方式1 // $('.c1').click(function (){ // // this//dom对象 // $(this).addClass('c2'); // // }) ; // 方式2 $('.c1').on('click',function (){ $(this).addClass('c2'); }) </script> </html>
8、事件冒泡（事件传播）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: green; height: 100px; width: 300px; } .c2{ background-color: red; height: 50px; width: 50px; } </style> </head> <body> <div class="c1"> <div class="c2"> </div> </div> </body> <script src='jquery.js'></script> <script> //事件冒泡：当父级或者祖先辈标签和子标签绑定了相同的事件时，比如点击事件，那么当点击子标签时，会一层层触发父级标签的点击事件 $('.c1').click(function (){ alert('这是父标签'); }); $('.c2').click(function (e){ alert('这是子标签'); return false; // 阻止了事件冒泡 // e.stopPropagation() 了解 }) </script> </html>
9、事件委托
""" <div class="c1"> <button class="btn">屠龙宝刀，点击就送！</button> </div> js代码部分 $('.c1').on('click','.btn',function (){ var btn = $(this).clone(); $('.c1').append(btn); }) """
10、属性操作
# prop方法 # 针对的是checked\selected\enabled\disabled """ $('#sex').prop('checked',true); //设置选中 $('#sex').prop('checked',false); // 取消选中 $('#uname').prop('disabled',true); //设置不可编辑 $('#uname').prop('disabled',false); //设置可以编辑 """ # attr方法 """ $('#d1').attr('id') // 获取属性对应的值 $('#d1').attr({'xx1':'oo1','xx2':'oo2'}); // 设置属性 """
11、逻辑运算符
""" and && or || 示例： if(a=1 || b=2){} not ! var a = true; !a -- false """
12、常用事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: #ff6700; height: 200px; width: 200px; } .c2{ background-image: url("meinv.png"); background-size: 100%; height: 350px; width: 400px; display: none; } </style> </head> <body> <input type="text" id="username"> <!--<div class="c1">--> <!--</div>--> <div class="c2"></div> </body> <script src='jquery.js'></script> <script> // 失去光标时触发的事件 // $('#username').blur(function (){ // $(this).css({'background-color':'yellow'}); // }); // // 获取光标时触发的事件 // $('#username').focus(function (){ // $(this).css({'background-color':'blue'}); // }); //change事件，域内容发生变化时触发的事件 ,如果是给input标签绑定的change事件， // 那么只有input标签中的内容发生变化，并且失去光标时才会触发 // $('#username').change(function (){ // console.log($(this).val()); // }); // 鼠标进入时触发的事件 // $('.c1').mouseenter(function (){ // $(this).css({'background-color':'red'}) // }) // // 鼠标离开时触发的事件 // $('.c1').mouseleave(function (){ // $(this).css({'background-color':'yellow'}) // }) // // 鼠标悬浮事件 // $('.c1').hover( // // 鼠标进入时触发事件 // function (){ // $(this).css({'background-color':'red'}) // }, // // 鼠标离开时触发事件 // function (){ // $(this).css({'background-color':'yellow'}) // } // ) ; // input事件：实时捕获输入内容的事件 // $('#username').on('input',function (){ // console.log($(this).val()); // }) </script> </html>
13、模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .shadow{ position: fixed; /* 固定定位，基于窗口的位置移动 */ top:0; left:0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); z-index: 9; } .mode{ position: fixed; height: 400px; width: 300px; background-color: #ffffff; z-index: 10; top:50% ; left:50% ; margin-top: -200px; margin-left: -150px; } .hide{ display: none; } </style> </head> <body> <h1>性感荷官、在线发牌</h1> <div> 还有一些广告词 </div> <button id="btn">登录</button> <div class="mode hide"> <h1>请登录会员</h1> <p> 用户名：<input type="text"> 密码：<input type="password"> </p> <p> <button id="confirm">确认</button> <button id="cancel">取消</button> </p> </div> <div class="shadow hide"></div> </body> <script src='jquery.js'></script> <script> $('#btn').click(function (){ $('.shadow,.mode').removeClass('hide'); }) $('#cancel').click(function (){ $('.shadow,.mode').addClass('hide'); }) </script> </html>
14、左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ height: 1000px; width: 100%; } .menu{ float: left; background-color: #396bb3; width: 30%; height: 500px; } .content{ float: left; background-color: gray; width: 70%; height: 500px; } .title{ background-color: aquamarine; line-height: 40px; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <!--左侧--> <div class="menu"> <!--那一部分--> <div class="item"> <!--哪一部分的内容--> <!--用this 找到点击的是哪个--> <div class="title" onclick="show(this)">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <!--哪一部分的内容--> <div class="title" onclick="show(this)">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <!--哪一部分的内容--> <div class="title" onclick="show(this)">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <!--右侧--> <div class="content"></div> </div> <script src="jquery-3.4.1.js"></script> <script> function show(self){ //找到 点击菜单二的下一个 con hide属性 移除hide属性 $(self).next().removeClass("hide"); // 隐藏一 三 $(self).parent().siblings().children(".con").addClass("hide"); } </script> </body> </html>
15、正反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--js jquery对象转换--> <!--var $variable = jQuery 对象--> <!--var variable = DOM 对象--> <!--$variable[0]:jquery对象转化为dom对象--> <!--("#msg").html(); $("#msg")[0].innerHTML--> <button onclick="selectAll()">全选</button> <button onclick="cancel()">取消</button> <button onclick="reverse()">反选</button> <hr> <table border="1px"> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> <td>333</td> <td>333</td> <td>333</td> </tr> </table> <script src="jquery-3.4.1.js"></script> <script> <!--全选--> function selectAll() { $(":checkbox").each(function () { $(this).prop("checked",true) }) } //取消 function cancel() { $(":checkbox").each(function () { $(this).prop("checked",false) }) } function reverse() { console.log($(this).prop("checked")); $(":checkbox").each(function () { if($(this).prop("checked")){ $(this).prop("checked",false) } else{ $(this).prop("checked",true) } }) } </script> </body> </html>
16、二级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="provinces"> <option value="">请选择省份</option> </select> <select id="citys"> <option value="">请选择城市</option> </select> <script> data={"河北省":["石家庄","廊坊"],"吉林":["长春","四平"],"陕西":["西安","延安"]}; console.log(data); console.log(typeof data); var pro_ele=document.getElementById("provinces"); var city_ele=document.getElementById("citys"); for (var i in data){ var ele=document.createElement("option"); ele.innerHTML=i; pro_ele.append(ele); } pro_ele.onchange=function () { //从0开始 第一个是请选择省份 //用户选择标签的索引 console.log(this.selectedIndex); // 1 // console.log(this.options); console.log(this.options[this.selectedIndex]); var citys=data[this.options[this.selectedIndex].innerHTML]; console.log(citys); //保留一个，因为每点击一次会把内容加到数组 city_ele.options.length=1; for (var i=0;i<citys.length;i++) { var ele=document.createElement("option"); ele.innerHTML=citys[i];//长春：四平加进去了 city_ele.append(ele); } } </script> </body> </html>
17、滚动事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } .div1,.div2{ width: 100%; height: 800px; } .div1{ background-color: antiquewhite; } .div2{ background-color: rebeccapurple; } .returnTop{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 50px; background-color: gray; color: white; text-align: center; line-height: 50; } .hide{ display: none; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="returnTop hide" onclick="returnTop()">返回顶部</div> <script src="jquery-3.4.1.js"></script> <!--绑定滚动事件 滑轮在滑动时要知道滑轮的距离--> <script> window.onscroll=function(){ if ($(window).scrollTop()>500) { $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } console.log($(window).scrollTop()); }; function returnTop() { $(window).scrollTop(0) } // $(".window").click(function () { // $(window).scrollTop(0) // }) </script> </body> </html>
18、动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.4.1.js"></script> <title>Title</title> </head> <body> <div>hello</div> <button onclick="f1()">显示</button> <button onclick="f2()">隐藏</button> <button onclick="f3()">切换</button> <script> function f1() { //回调函数 show完成后 执行function函数 $("div").show(1000,function () { alert("show"); }) } function f2() { $("div").hide(1000) } function f3() { $("div").toggle(1000) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.4.1.js"></script> <script> <!--加载--> $(document).ready(function () { $("#slideDown").click(function () { $("#content").slideDown(1000); }); $("#slideUp").click(function () { $("#content").slideUp(1000); }); $("#slideToggle").click(function () { $("#content").slideToggle(1000); }) }) </script> <style> #content{ text-align: center; background-color: lightblue; border: solid 1px red; /*display: none;*/ padding: 50px; } </style> </head> <body> <div id="slideDown">出现</div> <div id="slideUp">隐藏</div> <div id="slideToggle">toggle</div> <div id="content">hello world</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.4.1.js"></script> <script> $(document).ready(function () { $("#in").click(function(){ $("#id1").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }) }) </script> </head> <body> <button id="in">fadein</button> <button id="out">fadeout</button> <button id="toggle">fadetoggle</button> <button id="fadeto">fadeto</button> <div id="id1" style="display: none; width:80px;height:80px;background-color: blueviolet"></div> </body> </html>
