js和jquery

最新推荐文章于 2024-05-30 11:27:58 发布

Maple！

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量90

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_44870321/article/details/119614150

版权

一、js概述

javaScript十世界上最流行的脚本语言

二、js入门

在这里插入图片描述

三、js变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义变量：var 变量名=值 js里面没有数据类型 全部用var
        var num=1;
        var name="ddddd";
        //控制结构：if else  和java一样 也可以嵌套
        if(num>0){
            alert("大于0");
        }else{
            alert("小于0")
        }

    </script>
</head>
<body>

</body>
</html>

js调试方法：

四、基本数据类型入门

Number:js中不区分小数和整数都是number

123 //整数
123.3//小数
NaN //not a number
infinity //表示无限大
-100 //负数
1.123e3 //科学计数法

字符串

'abc' "abc"

布尔值

true false

逻辑运算符

&& 与
|| 或
! 非

比较运算符

= 赋值运算符
== 等于（类型不一致 数值一致 就相等）
=== 绝对等于类（型数值都一致 才想等）
//这是js的一个缺陷 坚持不要用==比较

NaN===NaN 结果是false NaN与所有的都不想等包括自己
只能通过isNaN(NaN)来判断这个数是不是NaN

在这里插入图片描述

五、严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        * 严格检查模式：前提要设置成es 6
        * 在开始加上'use strict';
        * 局部变量建议使用let 定义 当然使用var 也是对的
        * */
        'use strict'
        let i=1;
    </script>
</head>
<body>

</body>
</html>

六、字符串类型

字符串用单引号或者双引号包裹起来
注意转义字符\
多行字符串编写

 <script>
        //多行字符串编写用tab键上面的``包裹
        'use strict';
        let msg=`
        你好呀！
        我叫某某某，
        你叫什么名字呀
        `
    </script>

在这里插入图片描述

字符串模板

 let name="dy";
        let age=20;
        //两种模板字符串  第一种是tab上面的`` 第二种是用+
        let str=`你好！${name}`;
        let msg="哈哈哈哈"+name;

在这里插入图片描述

字符串长度
js中字符串是不可变的
大小写转换
获取指定元素下标
分割字符串

s.substring(1):获取从第一个开始之后的所有
s.substring(1,4)：获取从第一个开始到第四个（包头不包尾）
s.substring(0):获取所有

七、数组

在这里插入图片描述

八、对象类型

在这里插入图片描述

九、分支和循环

在这里插入图片描述

十、Map和Set

在这里插入图片描述

十、Iterator迭代

在这里插入图片描述

十一、函数

11.1 定义函数
11.2 作用域

在这里插入图片描述

11.3 方法的调用以及Apply

十二、Date日期对象

在这里插入图片描述

十三、JSON

在这里插入图片描述

十四、面向对象原型继承

在这里插入图片描述

class继承

十五、操作BOM对象

在这里插入图片描述

在这里插入图片描述
注：服务器可以设置cookie为httpOnly

十六、操作Dom对象

在这里插入图片描述

更新Dom节点
删除Dom节点
创建和插入节点

十七、获得和操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>
        <span>姓名：</span><input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" value="boy" name="sex" id="boy">男
        <input type="radio" value="girl" name="sex" id="girl">女
    </p>
</form>
<script>
    //锁定姓名框
    var username= document.getElementById('username');
    //获取姓名框中的值
    username.value;
    //修改姓名框中的值
    username.value='scsd';

    //锁定性别框
    var boy=document.getElementById('boy');
    var girl=document.getElementById('girl');
    //单选框和多选框只能获得当前的值 而要想获得选定的值 
    // 需要用boy.checked 若为true 则表明选中，
    // 同时也可为其赋值 girl.checked=true 使其选中
</script>

</body>
</html>

在这里插入图片描述

十八、提交表单验证和MD5加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="" method="post">
    <p>
        <span>姓名：</span><input type="text" id="username" name="username">
    </p>
    <p>
       <span>密码：</span><input type="password" id="password" name="password">
    </p>
<!--为提交按钮绑定事件οnclick="aaa()" -->
    <button type="button" onclick="aaa()">提交</button>
</form>
<script>
    function aaa() {
    var username=document.getElementById('username');
    var password=document.getElementById('password');
    password.value=md5( password.value);//抓包后密码会加密 而不是直接显示 更具有安全性
    }
</script>
</body>
</html>

十九、jQuery

jQuery库里面封装了许多js函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 导入jQuery-->
    <script src="jQuery/lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test">点我</a>
<script>
    //jQuery公式：$（选择器）.事件（）
    //选择器就是css选择器
    $('#test').click(function () {
        alert(1);
    })
</script>
</body>
</html>

在这里插入图片描述

文档：https://jquery.cuishifeng.cn/element.html

Maple！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js和jquery

一、js概述javaScript十世界上最流行的脚本语言二、js入门三、js基本语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> //定义变量：var 变量名=值 js里面没有数据类型全部用var var num=1
复制链接

扫一扫