一.jQuery知识点梳理
1.jQuery入门&选择器
- 3W1H
- 选择器
2.1.基本选择器：#id .class 元素 *通配符
2.2.层次选择器：逗号, 空格 大于> 波浪~ 加号+
2.3.过滤选择器: :first :last :eq :gt :lt :even :odd
2.4.表单选择器: :radio :checkbox :checked :selected
案例1 表格隔行换色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隔行换色</title> <style> .aa{ background-color: aqua; } .bb{ background-color: deeppink; } </style> </head> <body> <table border="1px" width="400px"> <tr> <td> </td> <td> </td> </tr> <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> </body> <script src="jquery-3.6.4.js"></script> <script> //隔行换色 $("table tr:even").addClass("aa"); $("table tr:odd").addClass("bb"); </script> </html>
二.$工具方法&属性&CSS
- 1.$.each $.trim $.type $.isArray $.isFunction $.parseJSON
- 2.attr() prop() addClass() removeAttr() removeClass() val() text() html()
- 3.css("属性","属性值") css({"属性":"属性值","属性":"属性值"})
案例2：实现全选功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选</title> </head> <body> <input type="checkbox" id="qx"/>全选 <input type="checkbox" class="bb" />打小灰灰 <input type="checkbox" class="bb" />SB小辉辉 <input type="checkbox" class="bb"/>听歌 <input type="checkbox" class="bb"/>看电视 </body> <script src="jquery-3.6.4.js"></script> <script> $(function(){ $("#qx").click(function(){ $(".bb").prop("checked",$(this).prop("checked")); }) }) $(".bb").click(function(){ let f = true; $(".bb").each(function(i,pp){ if(pp.checked==false){ f=false; } }) $("#qx").prop("checked",f); }) </script> </html>
三.筛选&过滤&位置
- 查 first() last() eq() prevAll() nextAll() siblings() find() children() filter() has() not()
- 增 append()/appendTo() prepend()/prependTo() after()/before()
- 删 empty() remove()
- 改 replaceWith()
案例3.实现返回顶部功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>$工具方法&&jQuery属性&CSS</title> <!-- 引入外部js --> <script src="jquery-3.6.4.js"></script> <!-- 另起一个script块 --> <script> $(function（）{ // 获取滚动条位置 返回顶部案例 $("#btn").click(function () { //设置值 返回顶部 $("body,html").scrollTop(0); }) }) <script/> <head/> <body> <input type="button" value="返回顶部" id="btn" /> <body/>
四.事件&效果
- 事件 .on/bind("事件名",callback) .事件名(callback) one() off/unbind解绑事件
- 合成事件：hover(function(){移上},function(){移出}) toggle()点击切换合成事件
- 效果 show(时间,callback) hide() toggle() slideDown/slideUp slideToggle fadeIn/fadeOut/fadeToggle xx.animat({属性:属性值,....},time)
案例4.合成事件控制显示和隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示和隐藏</title> </head> <body> <a href="#">显示</a><br/> <img src="img/3.jpg" width="200px" id="oo"/> </body> <script src="jquery-3.6.4.js"></script> <script> //显示和隐藏 $(function(){ $("a").hover(function(){ $("#oo").show();//显示 },function(){ $("#oo").hide();//隐藏 }) }) </script> </html>
二.JavaScript知识点梳理
一.js核心语法
变量的声明? 数据类型? 运算符? 3种弹框?
- number string boolean null undefined object array
- /只做除法 不做取整 除得尽就是整数 除不尽就是小数
- alert(消息) confirm(询问) prompt(输入)
- console.log/info() F12 开发者模式输出 typeof()返回数据类型
- document.write() 类似于sout
二.函数和window对象
1、函数
- 常用系统函数 parseInt 将字符串--->整数 parseFloat 将字符串--->小数 isNaN 判断是否是非数字 数字:false 非数字:true
- 自定义函数
2.1.如何带参? a,b,c
2.2.返回 return
3.匿名函数 window.οnlοad=function(){}
2、window对象
- 属性 location href/reload history back/forward/go()
- 方法 open close setInterval setTimeout
- 事件 onclick onmouseover onmouseout onload onchange onscroll
案例①图片自动切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>案例一:图片自动切换</title> <script> let i=5; function mya(){ //获取图片id let myy=document.getElementById("aa"); //获取图片路径 myy.src="img/"+i+".jpg"; i++; if(i==6){ i=1; } } //页面载入 window.onload=function(){ setInterval(() => { mya(); }, 1000); } </script> </head> <body> <img src="img/1.jpg" width="200px" id="aa"/> </body> </html>
案例②时钟特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时钟特效</title> <script> function myf( ){ //拿到系统的当前时间 let d = new Date( ); //如果要赋值 d.setye //单独拿年月日时分秒 let y = d.getFullYear( ); let m = d.getMonth( )+1; // let r = d.getDay( );//day是星期数 let r = d.getDate( );//日 let h = d.getHours( ); let f = d.getMinutes( ); let s = d.getSeconds( ); let str = y+"年"+m+"月"+r+"日"+" "+h+":"+f+":"+s; //给div赋值 document.getElementById("time").innerHTML=str; // 方法二: //调用自己的方法 递归 setTimeout("myf( )",1000); } // 方法一:定时器 // function mys( ){ // //每隔1s调用一次myf( ) 单位: 毫秒 // //setInterval("myf( )",1000); //方法二:递归 // //1s后调用一次myf( ) // setTimeout( "myf( )",1000); // } //方法一: //在body内容加载完毕后自动调用mys( ) // window.onload=mys; //方法二: window.onload=myf; </script> </head> <body> <div id="time"></div> </body> </html>
