AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js和jQuery知识点总结（一）

2023-10-09 88
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>


文章标签：
JavaScript
前端开发
Go
开发者
关键词：
js jQuery
JavaScript jquery
jQuery js
JavaScript知识点
JavaScript jquery知识点
瑶大头*^_^*
目录
相关文章
恩爸编程
|
2月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术，无需游戏框架支持。通过下载项目文件至本地，双击index.html即可启动贪吃蛇游戏。游戏界面简洁，支持方向键控制蛇移动，空格键实现游戏暂停与恢复功能。
恩爸编程
69 14
廖小凡
|
2月前
|
自然语言处理 JavaScript 前端开发
[JS]知识点
本文介绍了JavaScript中的多个重要知识点，包括ES6、严格模式、类与对象、解构、跨域问题及入口函数等。文章通过详细示例和推荐的外部资源，帮助读者更好地理解和应用这些概念。内容持续更新中，适合初学者和进阶开发者参考。
廖小凡
23 2
[JS]知识点
哈你真皮
|
2月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件，可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
哈你真皮
43 5
廖小凡
|
2月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块，包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念，还推荐了相关博文供深入学习。特别强调了express模块的使用，包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案，并总结了一些通用设置。适合Node.js初学者参考学习。
廖小凡
50 1
CamilleKing
|
2月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点，ES6 还带来了许多其他的特性和改进，这些特性使得 JavaScript 更加现代化和强大，为开发者提供了更多的便利和灵活性。
CamilleKing
32 3
神明木佑
|
3月前
|
JavaScript 前端开发 开发者
jQuery：JavaScript库的瑰宝
jQuery：JavaScript库的瑰宝
神明木佑
72 3
神明木佑
|
3月前
|
存储 JSON JavaScript
JS知识点
JS知识点
神明木佑
33 3
小强在此
|
3月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
33 5
疯狂的猿
|
2月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图，默认左侧是页面主要内容，minimap.js的好处就是在它的右侧形成一个快速定位通道，产生一个缩小版的页面，即预览效果，可以点击并快速定位到页面的某个位置。简单实用，欢迎下载！
疯狂的猿
39 0
Star时光
|
3月前
|
JavaScript 前端开发 API
深入了解jQuery：快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery：快速、高效的JavaScript库
Star时光
38 0

热门文章

最新文章

  • 1
    Node.js 的事件驱动机制
  • 2
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 3
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 4
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 5
    在 golang 中执行 javascript 代码的方案详解
  • 6
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 7
    Node.js 的性能
  • 8
    基于SVG的js圆形菜单插件
  • 9
    如何使用内存快照分析工具来分析Node.js应用的内存问题？
  • 10
    Next.js 实战 (四)：i18n 国际化的最优方案实践
  • 1
    jquery获取子元素的一些方法
    41
  • 2
    jquery选择器有哪些
    39
  • 3
    jquery的一些方法
    65
  • 4
    【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
    303
  • 5
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    112
  • 6
    【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
    244
  • 7
    【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
    178
  • 8
    【Web 前端】jQuery 库中的 $() 是什么？
    423
  • 9
    jquery获取子元素的一些方法
    68
  • 10
    JQuery的定义
    65

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • jQuery开发教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月