JavaScript入门语法

最新推荐文章于 2024-09-17 13:42:29 发布
最新推荐文章于 2024-09-17 13:42:29 发布
阅读量540 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jian_aidehua/article/details/118941414
版权

文章目录

1、什么是JavaScript

JavaScript 是一门世界上最流行的脚本语言

一个合格的后端人员，必须精通JavaScript

2、快速入门（忽略）

1. helloworld

js

// first.js
alert("hello world");
document.wirte("hello,world");

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first 网页</title>
    <!--常规写的地方在head 里面  或者 body的最下面 -->
    <!--    内部式-->
    <script>
        alert("hello1 world");
    </script>
    <!--    引入外部式-->
    <script src="first.js"></script>
</head>
<body>

</body>
</html>
2.浏览器使用须知

谷歌浏览器为例
在这里插入图片描述

3.变量的定义

任何的类型都用var 来声明变量

var a = 10;
alert(a);
var str = "abcdefg";
alert(str)
4.数据类型

此数据类型非彼数据类型

数据类型包括：数值，文本，图形，音频，视频…

number

js不区分小数和整数

  123      //整数
  123.1    // 浮点数
  1.12e10  // 科学计数法
  -100     // 负数
  NaN      // not a number 不是个数
  Infinity // 表示无穷大
比较运算符
	=    //赋值
  ==   //等于（值相等，类型可以不一样。1==‘1’结果为true
  ===  //绝对等于（值相等，类型也必须相等 1===‘1’ 结果为false  1===1 结果为true

注意：NaN == NaN 结果为false ，NaN与所有数值都不相等，包括自己

isNaN(NaN); 结果是true ，通过方法可以

浮点数问题：

console.log(1/3 == 1-(2/3));
> 结果为 ：false

常用解决方法：

console.log(Math.abs(1/3- (1-2/3))<0.000001)
> 结果为true
null 和 defined
  • null：空
  • defined：未定义
数组
var arr =[1,2,3,null,'afa',true]; 
console.log(arr)
结果： (6) [1, 2, 3, null, "afa", true]
console.log(arr[2])
结果： 3

在js里没有数据下标越界，如果越界了，提示undefined

对象
var person = {
   name:'吴彦祖',
    age:18,
    arr:[1,2,3,'彭于晏','谢霆锋',true,NaN]
}
console.log(person.name);
console.log(person.arr[3]);

java中：Person p = new Person(“吴彦祖”,18);

​ sout(p.name)

string

和java差不多，唯一的区别就是，js的单引号 和 双引号 都是指字符串。常常用于，外面用了双引号，里面就用单引号，或者反之。

boolean

和java一样

5.严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>严格检查模式</title>
    <script>
        'use strict'; // 严格检查模式，为了预防由于JavaScript的随意性出现的问题，必须写在第一行  局部变量建议使用 let
        let i = 10;
        console.log(i);
    </script>
</head>
<body>

</body>
</html>

3、数据类型（重要）

字符串
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板字符串</title>
    <script>
        'use strict';
        <!--        java中字符串拼接-->
        let str1 = 'hello';
        let i = 1;
        console.log(str1+'world今年'+i+'岁');

        <!-- js6.0 的新特性  模板字符串拼接-->
        let str2 = 'hello';
        let x = 2;
        let msg = `${str2} world , 今年${x}岁`
        console.log(str1+'world今年'+x+'岁');

    </script>
</head>
<body>

</body>
</html>

这里也可以使用方法 例如：subString(), indexof() 等等，基本上java中的在这里也能用

let student = 'student';
console.log(student.substring(1,2))      : t
数组

Array 可以包含任何类型的数据

var arr = [1,2,99.5,true,'abcd']
var arr2 = new array();

注意：js里数组长度可以发生改变，如果变长，则添加undefined 元素，如果变短，则已经赋值了元素就会丢失

变长：

var arr = [1,2,99.8,true,undefined,'abc',null,7];
arr.length = 10;
console.log(arr);
结果：[1, 2, 99.8, true, undefined, "abc", null, 7, empty × 2]

变短：

arr.length = 4;
arr; // 等价console.log(arr);
结果：[1, 2, 99.8, true]

变短之后，数据就丢失了，再变回去，就会变成空的值了（undefined）

方法描述
indexof()通过元素获得下标索引
slice()相当于字符串中的subString，截取数组
push()压入尾部（往尾部添加数据） ex：arr.push(‘a’,‘b’);
pop()从尾部弹出（从末尾去掉一个数据）ex：arr.pop()
unshift()压入到头部
shift()从头部弹出
sort()排序
concat()连接一个数组，返回一个新数组，但不会改变原来的数组
join()字符串连接 arr.join("-"); “1-2-abc-true–3-defg-abcdefg”
reverse()元素反转，（逆序）
对象

若干个键值对

对象初始化
var 对象名 = {
  属性名:属性值,
  属性名:属性值,
  ...
  属性名:属性值
}

var person = {
  name:"张三",
  age:3,
  email:"123456@qq.com"
}

使用一个不存在的对象属性，它是不会报错的

ex ：person.id undefined

动态删减属性

，通过delete 删除对象的属性

delete person.email
> true

若这个对象没有email 属性,也不会报错

动态添加属性

直接给新的属性添加值即可

person.id = "123456789";
> "123456789"
判断属性值是否在这个对象中

所有的键都是字符串类型，值任意类型

'age' in person
true
// 继承 
'toString' in person
true

判断一个属性是否是这个对象自身拥有的

hasOwnProperty()

person.hasOwnProperty('name')
> true
person.hasOwnProperty('toString')
> false

toString() 方法是继承过来的，所以他不是这个对象本想拥有的

for循环
普通for循环

（和java一样）

for(let i = 0;i<100;i++){
  console.log(i);
}
forEach()循环
var arr = [12,46,1,464164,,46,415];
arr.forEach(function(value){
 console.log(value);
})
for/in循环

用于遍历元素，

var arr = [12,46,1,464164,,46,415];
for(var index in arr){
  console.log(arr[index])
}
map

和java也很类似

var map = new map(); // new 一个map

map.set('tom',18);   // 添加
map.set('jerry',5);

map.get('jerry')     // 根据键获取值

map.delete("tom")    // 删除 （根据键删）
map.clean()          // 删除全部
set

无序不重复的集合

var set = new Set();

set.add('1');
set.add(1);       // 添加 

set.delete(1);    // 删除

set.has('33')     // 是否有这个元素 返回Boolean
迭代器：iterator

es6 新特性 for of 直接取值

迭代数组
var arr = [12,45,'haha','xx'];
for(var v of arr){
  console.log(v)
}
迭代Map
var map = new Map();
map.set('tom',12);
map.set('jerry',13);
map.set('marry',14);
for(var v of map){
  console.log(v)
}
迭代Set
var set = new Set();
set.add(1);
set.add('2');
set.add('xx');
for(var v of set){
  console.log(v)
}

函数

定义函数

定义方式一

 // 定义一个绝对值函数
 // 和java的区别 参数，不用定义 
function abs(x){
  if(x>=0){
    return x;
  }else {
    return -x;
  }
}

定义方式二

var abs = function(x){
   if(x>=0){
    return x;
  }else {
    return -x;
  }
}

二者等价，看习惯

调用函数

abs(-10)      --> 10    //正常传值
abs()         -->NaN    // 少传
abs(-1,-2,0)  -->1      // 多传，依次匹配，就第一个有效

会发现，无论怎么传值都可以不会报错，但是这种随意性真是我们想要的吗？

下面手动去避免这种问题！

参数问题 --> 参数不存在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'; // 使用严格检查模式
        function abs(x){
            if (typeof x!=='number'){
                throw "参数传递错误"
            }
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }
    </script>
</head>
<body>

</body>
</html>

结果：

abs(-1)
--> 1
abs()
--> Uncaught 参数传递错误

参数问题 --> 参数过多 （接收所有参数）

参数过多用 arguments 接收

arguments 是一个js免费赠送的关键字；

代表，传递进来的所有的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'; // 使用严格检查模式
        function abc(a){
           for (let i = 0;i<arguments.length;i++){
               console.log( "argument = "+arguments[i]);
           }
        }
      abc(1,2,2,3,41,1);
    </script>
</head>
<body>

</body>
</html>

参数问题 --> 参数过多 （只接受过多的参数）

ES6 新特性 …rest

  • 获取除了已经定义的参数之外的所有参数
  • 必须写在最后，(和java 一样)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'; // 使用严格检查模式
        function sum(a,b,...rest){  // ab  两个正常的参数，过多的参数由rest来装
          if (rest.length==0){
              return a*b;  // 两个参数就相乘
          }else{
              let sum = a+b;
              for (let lengthKey of rest) {
                  sum+=lengthKey; // 多个参数就相加
              }
              return sum;
          }
        }
    </script>
</head>
<body>

</body>
</html>

变量的作用域

在js中，var 定义变量实际是有作用域的。

  • 局部变量 只能在局部使用；若嵌套了则使用就近原则，内部和外部同名变量，优先使用近的。

  • js会自动提升变量的作用域，，但不会提升变量的赋值。为了规范，所有的定义写在函数的头部（C语言的写法），不要乱放，便于代码维护。

  • 全局变量 全局函数 会绑定到window 对象上（多个js文件 的全局变量都会绑定到window上，还是会引起冲突，最好自己定义一个类似命名空间的东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict';
        var old = window.alert; // 将函数赋值
        window.alert("hh");
        window.alert = function (){

        }  //将函数重新定义
        alert("xx"); // 这个函数失效
        old(123);
      
      
        //  window 相当于就是一个命名空间，alert 在window 命名空间下。
        //  所以以后和别人一起写项目最好是自己也定一个命名空间
        // 定义全局变量，所有全局变量，全局函数都可以放在这里
        var xhb = {};
        xhb.name="xhb";


    </script>
</head>
<body>

</body>
</html>

常量

const PI = 3.14;

对象的方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

定义方法

    <script>
        'use strict';
        var person = {
            name:"xhb",
            birthday :2001,
            age:function (){
               return  new Date().getFullYear()-this.birthday;
            }
        }
       console.log( person.age());
    </script>

apply 可以指定对象

内部对象

标准对象

在这里插入图片描述

Date
 <script>
        let date = new Date();
        console.log(date.getFullYear()+"年"); // 年
        console.log(date.getMonth()+"月"); // 月  0-11
        console.log(date.getDate()+"日"); // 日
        console.log(date.getHours()+"时"); // 时
        console.log(date.getMinutes()+"分"); // 分
        console.log(date.getSeconds()+"秒"); // 秒
        console.log("星期"+date.getDay()); // 星期几
        console.log("时间戳"+date.getTime()); // 时间戳 1970--now ms
    </script>
Json

Json 是什么？

https://baike.baidu.com/item/JSON/2462549?fr=aladdin

别问，问就是百度百科的

在JavaScript 一切皆为对象、任何js支持的类型都可以用json来表示：

格式：

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对，都是key:value

js 对象与 Json 字符串 的相互转换

  <script>
        //js对象
        var xiaoming = {
            name:"xiaoming",
            age :18,
            sex:"男"
        }

        // js对象转换为 json字符串
        console.log(  JSON.stringify(xiaoming));

        // json 字符串转 js 对象
        var xm = JSON.parse('{"name":"xiaoming","age":18,"sex":"男"}');
        console.log(xm);
    </script>
Ajax
  • 原生的js写法 xhr 异步请求
  • jQuery 封装好的方法
  • axios 请求

面向对象编程

什么是面向对象？
  • 类：模板
  • 对象：具体的实例
类的定义

原型写法：

    // 定义一个对象 小明
        var xiaoming = {
            name:"小明",
            age:18,
            study:function (){
                console.log(this.name+"在学习");
            }
        };
        // 定义一个对象 小红
        var xiaohong = {
            name:"小红",
            age:19
        }

        // 小红的原型是小明  所以相当于继承的小明的属性和方法， 相同属性就会被重写，不同属性会继承
        xiaohong.__proto__ = xiaoming;
        console.log(xiaohong.study());

类的定义

  // 定义一个类
        class Person {
            constructor(name){  //  构造方法
                this.name = name;
            }
            eat(){   // 方法
                alert(this.name + "在吃饭");
            }
        }

        // 实例化一个对象
        var xiaoming = new Person("小明");    

        xiaoming.eat();

类的继承

在ES6 引入的

        // 定义一个学生类  继承 Person 类
        class Student extends  Person{
            constructor(name,grade){  //  构造方法
                super(name);
                this.grade = grade;
            }
            study(){
                alert(this.name+"在学习,今年读"+this.grade);
            }
        }

        // 实例化一个对象
        var xiaohong = new Student("小红","大一")
        xiaohong.study();
        xiaohong.eat();

操作BOM 对象（重点）

BOM：浏览器对象模型**（Browser Object Model (BOM)）**

window

window 代表浏览器窗口

window.innerHeight
> 100
window.innerWidth
> 1255

window.outerHeight
> 100
window.outerWidth
> 1255

window.alert("hello world")

window.onload = function(){}; // 文档加载后的事件
方法名称说 明
prompt( )显示可提示用户输入的对话框
alert( )显示带有一个提示信息和一个确定按钮的警示框
confirm( )显示一个带有提示信息、确定和取消按钮的对话框
close( )关闭浏览器窗口
open( )打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )在指定的毫秒数后调用函数或计算表达式
setInterval( )按照指定的周期（以毫秒计）来调用函数或表达式
var interval = setInterval(function(){console.log(new Date())},1000); // 固定多久时间执行一次函数
 clearInterval(interval) //清除

Navigator（不建议使用）

Nacigator 封装了浏览器的信息

大多数时候，我们不会使用navigator对象， 因为会被人为修改！

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Mobile Safari/537.36"
navigator.platform
"Win32"
// 可以略过了，不太重要的亚子

screen

代表屏幕尺寸

screen.width
> 1255
screen.height
> 277
screen.height
> 186

location（重要）

location 代表当前页面的URL信息

location = "http://bilibili.com";
location.href = "http://bilibili.com";

hostname: "localhost"  // 主机名
href:"http://localhost:63342/JsStudy/com/xhb/testJs/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A12.html?_ijt=52liu50c9n8lrj4irsmitpnpiv" // 地址
protocol: "http:" // 协议
reload: ƒ reload() // 刷新
assign: ƒ assign() // 设置新的地址

document

document 代表当前的页面，HTML DOM文档树

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl id="haha">
    <dd >first</dd>
    <dd>second</dd>
    <dd>third</dd>
</dl>

<script>
    var d = document.getElementById('haha');
</script>
</body>
</html>

history（也不建议使用）

history ：浏览器的历史记录

history.back()  // 后退
history.forward();  // 前进
history.reload(); // 属性

操作DOM 对象（重点）

DOM：文档对象模型，

浏览器网页就是一个DOM 树形结构

  • 更新DOM节点
  • 遍历DOM节点：得到DOM节点
  • 删除DOM节点
  • 添加一个新的节点

要操作一个DOM节点，就必须先获得这个DOM节点

获取DOM节点

获取DOM节点

获取节点的常用方式：id ， 标签名，类名，选择器

  • var name = document.getElementById('name');// 返回ID为'name'的节点：

  • var row = document.getElementsByTagName('tr'); // 获取所有的tr ，

  • var row = document.getElementsByClassName('red') // 获取所有类名是red的节点

  • var q1 = document.querySelector('#q1 div');// 通过querySelector获取ID为q1的第一个div节点：

  • var q1 = document.querySelectorAll('#q1 div');// 通过querySelector获取ID为q1的所有div节点：

参考：https://www.liaoxuefeng.com/wiki/1022910821149312/1023022310122752

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--标签选择器-->
    <p> 这是一个段落</p>
<!--    id选择器-->
<div id="DIV" style="background-color:#f00;">
    <p> 这是<span style="color: yellow">一个</span>div1</p>
    <p> 这是一个div2</p>
    <p> 这是一个div3</p>
</div>
<!--类选择器-->
<div class="DIV2" style="background-color:#0f0;">
    <p> 这是一个div22</p>
</div>


<script>
    // 刚好对应css 的选择器（标签选择器，id选择器，类选择器）
    console.log(document.getElementsByTagName("p"));
    console.log(document.getElementById("DIV"));
    console.log(document.getElementsByClassName("DIV2"));
     console.log(document.querySelectorAll("input[type=checkbox]")); // 选择器


    var father = document.getElementById("DIV");
    console.log(father.firstElementChild); // 第一个子节点
    console.log( father.lastElementChild);  // 最后一个子节点
    console.log( father.nextElementSibling); // 下一个同级节点（father的同级）
    console.log( father.firstElementChild.nextElementSibling); // 第二个子节点
</script>
</body>
</html>

这是原生代码，后面会用到jQuery

更新节点

更新节点

  • d1.innerText = "1"//更新内容
  • d1.innerHTML = "<a href='https:\\www.baidu.com'>百度</a> " //更新网页
  • d1.style.color='yellow'// 更新css
  • d1.style.fontSize='22px'// 更新css 注意：这里使用驼峰命名，不是css的 斜杠（font-size)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM更新节点</title>
</head>
<body>
<div id="div1" style="background-color:#0f0;">
    <p>这是一个段落1</p>
    <p>这是一个段落2</p>
    <p>这是一个段落3</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

<script>
    var d1 = document.getElementById("div1");
    // d1.innerText = "1"  //更新这个id选择器下的所有内容（覆盖）
    d1.innerHTML = "<a href='https:\\www.baidu.com'>百度</a> " //更新这个id选择器下的所有网页，css样式
</script>
</body>
</html>
删除节点

步骤：

  • 先获取父节点
  • 通过父节点删除自己
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "div1">
    <p id = "p1" >1</p>
    <p id = "p2">2</p>
    <p id = "p3">3</p>
</div>

<script>
    var self = document.getElementById("p1"); // 获取自己的节点
    var father = self.parentElement;  // 获取父节点
    father.removeChild(self);  // 通过父节点删除自己
    
   //遍历 删除所有节点 删除是动态删除的，删除一个长度减一，元素往前推
    var length = father.children.length;
    for (let i = 0; i < length; i++) {
        console.log(father.children[0] );
        father.removeChild(father.children[0]);
    }
</script>
</body>
</html>

注意：删除多个节点的时候，是动态删除的（下标会改变）

插入节点
  • 追加到最后面（append appendChild)
  • 在某个节点的前面插入（insertBefore）

如果某个DOM节点是空的，我们可以通过innerHTML就可以增加一个元素，如果不是空的，就会出现覆盖了，

追加到最后面

已存在的节点追加（移动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="outter">outter</p> // 已经存在的节点
<div id="div1">
    <p id="p1">1</p>
    <p id="p2">2</p>
    <p id="p3">3</p>
</div>

<script>
    var e = document.getElementById("outter");
    document.getElementById("div1").append(e); //追加到div下面，原来的会消失
</script>
</body>
</html>

在这里插入图片描述

不存在的节点追加（新建节点追加）

<script>
    // 插入标签
    var newp = document.createElement("p");
    newp.innerText = "haha";
    newp.id = 'p1';
    document.getElementById("div1").appendChild(newp);

    // 插入带属性的标签
   var newa = document.createElement('a');
   newa.innerText = "百度";
   newa.setAttribute("href","http://www.baidu.com");
   newa.setAttribute("target","_blank");
   document.getElementById("div1").appendChild(newa);
  
   // 在head 标签 插入style 标签 来改变css样式
   var head = document.getElementsByTagName('head');  // 获取head标签 （是个数组）
   var style = document.createElement('style'); // 创建style 标签
   head[0].appendChild(style); // head 里 添加子节点   类 、标签选择器都是返回数组（所以这里是head[0]，因为有多个，而id是唯一的，就是固定的值
   style.innerHTML = " body{ background-color :#0f0;} " // 给style标签写代码
  • 在某个节点的前面插入

insertBefore（newNode,targetNode)

<script>
    var newNode =  document.createElement('p'); // 新节点
    newNode.innerText = "isertbefore_newP";
    document.getElementById("div1").insertBefore(newNode,document.getElementById("p2"));
</script>

操作表单（重点）

获取表单内容。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    用户名：<input type="text" id ="userName" >
    密码：<input type="password" id ="pWord" >
    <br>
    <span>性别：</span>
    <input type="radio" name="sex" id="man">男
    <input type="radio" name="sex" id="woman">女
</form>

<script>

  var userName = document.getElementById('userName');
  var passWord = document.getElementById('pWord');

  var man = document.getElementById('man');
  var women = document.getElementById('woman');

</script>
</body>
</html>

在这里插入图片描述

提交表单（MD5 加密）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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" onsubmit=" return check()">
    <p>
        <span>用户名：</span> <input type='text' placeholder="123456" id="userName" name="username"><br>
    </p>
    <p>
        <span>密码：</span> <input type='password' id="passWord" >
        <input type="hidden" name = "password_md5" id = "password_md5">  <!--隐藏 -->
    </p>
    <input type="submit" >
</form>

</body>

<script>
function check(){
    var userName = document.getElementById("userName");
    var passWord = document.getElementById("passWord");
    var md5_password = document.getElementById("password_md5");// 获取隐藏框
    console.log("账号："+userName.value);
    console.log("密码："+passWord.value);
    md5_password.value = md5(passWord);   // 隐藏框的值 是密码框的MD5 加密之后的，然后提交 
  //优化了直接在密码框进行md5加密时一瞬间有很长的密码
  return true;
}
</script>
</html>

在这里插入图片描述

jQuery

获取jQuery
  • 官网（jQuery.com）下载
  • cdn 在线引入

在这里插入图片描述

cdn ：直接复制script 标签

在这里插入图片描述

jQuery 初体验

公式：$(选择器).事件(事件函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <script src="lib/jquery-3.6.0.js"></script>
    
<!--    cdn的方式-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->

</head>
<body>
<a href="#" id="a1">点我</a>
<script>
    $('#a1').click(function (){
        alert("h");
    });
</script>
</body>
</html>

文档工具站：https://jquery.cuishifeng.cn/index.html

jQuery ready() 与 onload() 区别
$(function(){alert('hh')});
$(document).ready( function (){alert("xx")});
window.onload = function(){ alert("hehe")};//在实现效果上差不多

在这里插入图片描述

选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <script src="lib/jquery-3.6.0.js"></script>

<!--    cdn的方式-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->

</head>
<body>
<a href="#" id="a1">点我</a>
<p id="p1" name="p1">1</p>
<p class="p2" name="p2">2</p>
<p  name="p3">3</p>
<script>
    $('#a1').click(function (){
        alert("h");
    });

    // 原生js
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var p3 = document.getElementsByTagName('p');

    // jQuery
    $('#p1').click(show);
    $('.p2').click(show);
    $('p').click(show);

    function show(){
        alert("hh"+this.name);
    }
</script>
</body>
</html>
事件

https://www.w3school.com.cn/jsref/dom_obj_event.asp ：DOM 事件全集

鼠标事件，键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "lib/jquery-3.6.0.js"></script>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<span id="showMousePosition"></span>
<div id ="mouseArea">

</div>

<script>
    $('#mouseArea').mousemove(function (e){
        $('#showMousePosition').text("x:"+e.pageX+"y:"+e.pageY);
    });
</script>
</body>
</html>
jian_aidehua
关注
JavaScript 基本入门语法(详细讲解)
m0_65725031的博客
02-26 7328
大家有想学JavaScript或者感兴趣的可以点个关注，跟着我一起来学习我们的JavaScript,会不定期的更新我们的JavaScript,如果有搞不懂的地方可以私信我噢。 什么是JavaScript？ JS是一门弱类型的语言，用于给我html页面上面添加动态效果与互相操作。 JavaScript基本语法 1.JavaScript编写代码必须在 script标签中 列如：<script>在这中间编写我们的代码</script> 2.console.log
Javascript入门——语法基础汇总
m0_67316947的博客
04-04 1759
Javascript基础语法，包括Javascript的由来，JS的嵌入方式、注释方式、输出方式，以及变量、循环、分支等基础知识。
JavaScript基础语法入门
trong_ 的烂笔头
02-28 3559
介绍JavaScript的基础语法, 包含变量, 运算符, 数据类型, 数组, 函数,对象等内容, 主要是基于Java/C基础进行的扫盲学习.
JavaScript 快速入门手册
热门推荐
Java.慈祥
08-17 1万+
JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);
JavaScript入门
nameofcsdn的博客
10-05 1346
JavaScript 简称 JS，是一门很灵活的脚本语言。 目录 一，代码块——script标签 二，函数 三，js文件 四，内联代码 五，语法特点 一，代码块——script标签 JS代码块放在script标签中，标签可以放在网页中任何位置（无论head还是body中） <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
JavaScript基础入门——语法
Zhanganliu的博客
07-08 1891
一：简介 JavaScript是一种解释性程序设计语言、不需要编译器、只需要解释器。Web浏览器负责完成有关的解释和执行工作。 编译JavaScript不需要任何特殊工具（有则更加、比如jetbrainswebstorm，Sublime Text等神器）。 页面中使用JavaScript：1、在页面中任何位置添加<script> //body…</s...
JavaScript入门基础语法学习和使用
Hello, New World!
05-08 725
JavaScript入门基础语法学习和使用1. JS 概述2. JS 输出3. JS 基础语法3.1 js 使用3.2 js 注释3.3 js 类型3.4 js 变量3.5 js 运算符4. JS 引用类型 - 对象4.1 String 字符串对象4.2 Array 数组对象4.3 Date 日期对象4.4 RegExp 正则对象4.6 Functions 全局函数 JS学习资料来源：W3scho...
Javascript入门学习笔记
weixin_61370021的博客
04-27 4644
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript的基础语法
Sy_origami的博客
04-14 1159
JavaScript的基础语法 文章目录JavaScript的基础语法前言一、JavaScript的基础语法二、JavaScript中的变量1.构造变量名称 前言 大部分前端初学者对于JavaScript的基础语法了解并不充分，我帮助整理了一些入门学习可能会使用到的语法。 ` 一、JavaScript的基础语法 1.在JavaScript中输入数值的时候有无小数点均可。 2.字符串作为文本，由双引号 " " 或者单引号 ’ ’ 包围。 3.JS程序员倾向于使用以小写字母开头的驼峰大小写 例如：first
JavaScript基本语法
weixin_52937170的博客
09-09 1221
JavaScript入门教程；JS的基本使用；JS的基本语法；开始入门JS
JavaScript基本入门语法集合第1/3页
10-30
这只是JavaScript入门语法的一部分，实际上JavaScript还有许多其他重要的概念，如条件语句（if...else）、循环（for, while）、数组、对象、函数、事件处理等。继续深入学习，你将能够创建更复杂的交互式网页和应用...
javascript入门-基础语法笔记整理.md
12-14
一个周前自己较系统地学完 javascript，但老感觉自己对基础语法部分的掌握不够扎实，javascript 的基础语法内容实在是丰富灵活，但这部分是进大厂必不可缺的知识，于是花了不少时间耐心整理了这篇笔记，以此夯实基础...
JavaScript语言入门篇-JavaScript 的基本语法介绍
05-23
### JavaScript语言入门篇—JavaScript的基本语法介绍 #### 一、语句 JavaScript程序的基本执行单元是语句。通常，每行代码代表一个语句。语句是用来完成特定任务的操作，例如赋值语句： ```javascript var a = 1...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 919
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 669
【代码】【JavaScript】LeetCode：707设计链表。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 584
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
基于python+django+vue的旅游网站系统
最新发布
计算机学姐的博客
09-17 1722
【2025最新】基于协同过滤+python+django+vue+MySQL的旅游网站系统，前后端分离。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 333
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 306
js中严格区分大小写。
JavaScript语法入门与函数方法详解
"这是一本关于JavaScript语法的手册，适合初学者学习，涵盖了JavaScript的基本语法和函数、方法的使用。" 在JavaScript编程中，掌握基本的语法是至关重要的。JavaScript是一种广泛应用于网页和网络应用的解释型编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值