js和jQuery知识点总结(一)

简介: js和jQuery知识点总结

一.jQuery知识点梳理

1.jQuery入门&选择器

  1. 3W1H
  2. 选择器

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>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</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. 1.$.each $.trim $.type $.isArray $.isFunction $.parseJSON
  2. 2.attr() prop()  addClass() removeAttr() removeClass() val() text() html()
  3. 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>

三.筛选&过滤&位置

  1. 查  first() last() eq() prevAll() nextAll() siblings() find() children() filter() has() not()
  2. 增 append()/appendTo() prepend()/prependTo()  after()/before()
  3. 删  empty() remove()
  4. 改 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/>

四.事件&效果

  1. 事件 .on/bind("事件名",callback)  .事件名(callback)  one() off/unbind解绑事件
  2. 合成事件:hover(function(){移上},function(){移出})   toggle()点击切换合成事件
  3. 效果 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种弹框?

  1. number string boolean null undefined object array
  2. /只做除法 不做取整 除得尽就是整数 除不尽就是小数
  3. alert(消息) confirm(询问) prompt(输入)
  4. console.log/info() F12 开发者模式输出  typeof()返回数据类型
  5. document.write() 类似于sout

二.函数和window对象

1、函数

  1. 常用系统函数  parseInt 将字符串--->整数  parseFloat 将字符串--->小数  isNaN 判断是否是非数字 数字:false 非数字:true
  2. 自定义函数  

        2.1.如何带参?   a,b,c

        2.2.返回  return

     3.匿名函数  window.οnlοad=function(){}

2、window对象

  1. 属性  location  href/reload            history   back/forward/go()
  2. 方法   open      close       setInterval       setTimeout
  3. 事件  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>


相关文章
|
5天前
|
JSON JavaScript 前端开发
JS服务端技术—Node.js知识点
JS服务端技术—Node.js知识点
37 0
|
5天前
|
JavaScript 前端开发 Java
[javascript]知识点
如果文中阐述不全或不对的,多多交流。
63 0
[javascript]知识点
|
22天前
|
JavaScript
总结vue3 的一些知识点:Vue.js 安装(下)
选取 Runoob,输出效果如下所示:
|
22天前
|
JavaScript 前端开发 CDN
总结vue3 的一些知识点:Vue.js 安装
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
|
22天前
|
JavaScript 前端开发
总结vue3 的一些知识点:​Vue.js 条件语句
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
|
22天前
|
JavaScript 前端开发 CDN
总结 vue3 的一些知识点:Vue.js 安装
总结 vue3 的一些知识点:Vue.js 安装
|
22天前
|
JavaScript
总结 vue3 的一些知识点:​Vue.js 条件语句​
总结 vue3 的一些知识点:​Vue.js 条件语句​
|
1月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
14 0
|
1月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
1月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
13 0

相关产品

  • 云迁移中心