Day20JavaScript的学习

于 2021-02-28 14:59:55 发布
阅读量276 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanlcj/article/details/114223923
版权

javascript

1.快速入门

引入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    在script标签写JavaScript代码  内部标签-->
<!--    <script>-->
<!--        alert('hello,world!');   弹窗-->
<!--    </script>-->
<!--    外部引入-->
    <script src="js/qj.js"></script>
</head>
<body>

</body>
</html>

基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        * 严格大小写*/
        // 定义变量
        var num=1;
        var name="wo de ";
        // alert(name);
        // 条件控制
        if (2>1){
            alert("true")
        }
        /*
            console.log(变量名)  在浏览器的控制台打印变量
         */

    </script>
</head>
<body>

</body>
</html>

数据类型

数值、文本、图像、音频、视频

number

js不区分小数和整数

NaN//not a Number
Infinity//表示无限大

比较运算符

=
== 等于（类型不一样，值一样，也会判断true）
===绝对等于（类型和值都相等，结果为true）

NaN===NaN，这个与所有的值都不想等，包括自己

只能通过方法isNaN（NaN）来判断这个数是NaN

浮点数

console.log((1/3)===(1-2/3))  结果flase

尽量避免使用浮点数进行运算比较，存在精度问题

Math.abs(1/3-(1-2/3))<0.00000000000000000001

null和undefined

  • null 空
  • undefined 未定义

数组

在Java数组中是一系列西昂同类型的对象，JS中可以是不同类型的

var arr=[1,3,45,6,null,true]

对象

对象是大括号 数组是中括号

每个属性之间用逗号隔开最后不需要添加逗号

var person={
    name:'asdkdf',
    age:3,
    tags:['ssd',1,65]
}

打印就是 person.name person.age……

严格检查格式

'use strict';//严格检查模式，预防JavaScript的随意性导致产生的问题  必须写在第一行

2.类型

字符串

  1. 正常字符串使用单引号或者双引号
  2. 注意转义字符 \
\' 
\n
\t
\u4e2d   Unicode字符
\x41  Ascll字符
  1. 多行字符串拼写
<script>
        'use strict'
        console.log('a')
        console.log(`sfjdanvjsn/* esc下面的引号可以实现字符串*/
        sdkfjsa
        as,dgmksvad;'
        asdgmkvasl;`)
    </script>
  1. 模板字符串
let name ="hello";
let age="world";
let msg=`你好${name}`
  1. 字符串长度
console.log(str.length)
  1. 字符串不可变
let str='sej'
console.log(str[0]) 可以得到字符's'
  1. 大小写转换
//注意这是方法不是属性
str.toUpperCase()//小写转大写的方法
str.toLowerCase()//大写转小写的方法
  1. student.indexOf(‘t’); 取字符t的下标
  2. substring
student.substring(1,2);取下标1-2的字符  含头不含尾
student.substring(1);取下标1到最后的

数组

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

var arr=[1,2,34,5,6]
console.log(arr)
VM563:1 (5) [1, 2, 34, 5, 6]


arr[0]
arr[0]=1
  1. 长度
arr.length

注意：加入给arr.length赋值，数组大小就会发生变化，如果元素过下就会丢失

  1. indexOf通过元素获取下标索引
arr.indexOf(2)  1

  1. slice（）截取Array的一部分，返回一个新的数组类似字符串中的sbstring

  2. push(),pop()

push;压入到尾部
pop:弹出尾部的第一个元素
  1. unshift(),shift()头部
var arr=[1,2,3,4,5,6,"1","2"]
undefined
arr
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.unshift('a','b')//压入到头部
10
arr
(10) ["a", "b", 1, 2, 3, 4, 5, 6, "1", "2"]
arr.shift()//弹出头部第一个元素
"a"
  1. sort()顺序排序
var arr=[3,2,1]
arr.sort()
(3) [1, 2, 3]
  1. reverse()元素反转
arr.reverse()
(3) [3, 2, 1]

8.concat()拼接数组

arr.concat([5,6,7,])
(6) [3, 2, 1, 5, 6, 7]//拼接数组后原来的数组没有被改变
arr
(3) [3, 2, 1]
  1. join()连接符
arr.join('-')//使用特定的字符打印拼接的数组
"3-2-1"
  1. 多维数组
var arr=[[1,2],[3,4],[5,6]]
undefined
arr[0][1]
2

对象

若干个键值对

var person={//固定格式
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
}

 var person={//定义了person对象，添加了四个属性
            name:"lv",
            age:20,
            email:1212212
        }
 
 
/* 结果
person.name
"lv"
person.age
20
person.email
1212212*/

js中的对象，{……}表示一个对象，键值对描述属性xx:xxx,多个属性逗号隔开最后属性不添加逗号

js中所有的键值对都是字符串，值是任意对象

  1. 对象赋值
person.name="chao"
"chao"
person.name
"chao"
  1. 使用一个不存在的属性不会报错
person.haha
undefined

3.动态的删减属性 通过delete删除对象的属性

delete person.name
true
person
{age: 20, email: 1212212}
  1. 动态的添加属性
person.haha="hah"
"hah"
person
{age: 20, email: 1212212, haha: "hah"}
  1. 判断属性是否在对象中 xx in xx
person
{age: 20, email: 1212212, haha: "hah"}
age in person//通过键获取值 所有的的键age是字符串类型
VM514:1 Uncaught ReferenceError: age is not defined
    at <anonymous>:1:1
(anonymous) @ VM514:1
"age"in person
true

'tostring'in person//严格遵循大小写规则
false
'toString'in person//因为都继承了父类的方法
true
  1. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty（）
person.hasOwnProperty("haha")
true
person.hasOwnProperty('toString')
false

流程控制

if判断

var a=90;
        if (a>=80&&a<=100){
            alert(' very good')
        }else if (a<80&a>=60){
            alert('good')
        }else {
            alert('pool')
        }

while循环 同样避免死循环

while(a<100){
            a++;
            console.log(a)
        }

for循环

for (let i = 0; i < 10; i++) {
            console.log(i)
        }

forEach循环

var arr=[1,2,3,4,5,6,"1","2"]
arr.forEach(function (value){
    console.log(value)
})

for···in

for(var num in arr){
    if(arr.hasOwnProperty(num)){
        console.log(arr[num])
    }
}

for of

遍历数组

var arr=[3,4,5]
for(varr x of arr){
    console.log(x)
}

Map和Set

ES6的新特性

Map:

        'use strict'
        var map=new Map([['toni',100],['rose',90],['marry',95]]);
        var name=map.get('toni')//通过key获取value
        map.set('lv',100)
        console.log(name)

Set:无序不重复集合

var set=new Set([1,2,3,4,5,1,1,1,])//Set可以去掉重复的元素
        set.add(9)
        set.delete(9)
        console.log(set.has(3))//是否包含某个元素

遍历map和set只能使用for of

遍历map

var map=new Map([["tom",100],['lux',90],['marry',80])
                 for(var x of map){
    console.log(x)
}

遍历set

var set=new Set([5,6,7])
for(var x of set){
    console.log(x)
}

3.函数

定义函数

绝对值函数

定义方式一

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


function abs(x){
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}
console.log(abs(-1))

一旦执行到return代表函数结束，返回结果

如果没有执行return，函数执行完也会返回结果，结果是undefined

定义方式二

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

调用函数

abs(10)//10
abs(-10)//10

参数问题：js中可以传递任意参数，也可以不传递参数

参数进来是否存在问题？假设不存在问题，如何规避

function abs(x){
    if (typeof x!=="number"){
        throw '请输入数字'//手动抛出异常
    }
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }

若存在多个参数

arguments 是js赠送的关键字；代表传递进来的参数是一个数组

function abs(x){
   for(let i=0;i<arguments.length;i++){
       console.log(arguments[i])
   }
    }
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }

问题： 使用多个r参数时 arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有的参数~

rest

ES6引入的新特性获取,获取除了已经定义的参数外的所有参数~…rest

 'use strict'
        function aaa(a,b,...rest){
            console.log(a);
            console.log(b);
            console.log(rest)
        }
        /*
        aaa(1,5445,556,56,56,5,65,65,65,6)
        1
        5445
        [556, 56, 56, 5, 65, 65, 65, 6]
         */

rest参数只能写在最后面，必须使用…表示

变量的作用域

在js中var定义的变量时有作用域的

假设在函数体中声明，则在函数体外不可使用（如果一定要实现的话可以研究 闭包）

function a(){
            var x=1;
            x=x+1;
        }
        x=x+1;//  这里会报错 Uncaught ReferenceError: x is not defined

如果两个函数使用相同的变量名，在函数体中不冲突

假设在Js中，内部变量名和外部变量名相同,函数查找变量从自身开始,自动频闭外部的变量

 function a(){
            var x=1;
            function b(){
                var x=2;
                console.log('内部'+x)
            }
            b();//内部2
            console.log('外部'+x)//外部1
        }

养成规范所有的变量定义都放在头部

写在最外面的变量时全局变量，所有函数都可以使用

全局对象 window

var x='xxx';
alert(x);
alert(window.x)//默认所有的全局变量，都会自动绑定在window对象下

alert()这函数本身也是绑定在window对象下的

window.alert()//和alert()一样的

js实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，，如果在全局作用域没有找到，就会报RefrenceError

规范

由于我们所有的全局变量都会绑定到window下，如果不同的js文件使用了相同的全局变量，就会冲突，如何减少冲突

var lv={};
lv.name='ljajdnf '
lv.add=function (a,b){
    return a+b;
}

把自己的全部代码，放入自己定义的唯一空间名字中，将顶去哪句命名冲突

局部作用域let

function aa(){
    for(var i=0;i<100;i++){
        console.log(i)//结果打印出0-99
    }
    console.log(i+1)//结果打印出101 
}

这里i出了作用域也能使用 ，所以使用了let解决

function aa(){
    for(let i=0;i<100;i++){//使用let局部变量
        console.log(i)//结果打印出0-99
    }
    console.log(i+1)//这里无法使用，报错
}

常量const

在ES6之前 定义常量的方法时变量命名为全部大写，然后建议不要修改这个值，但是却可以修改

在ES6引入了关键字const

const PI=3.14//定义常量
//如果要修改PI 就会报错  
cosole.log(PI)

方法

定义方法：就是把函数放在对象里面

 var lv={
             name:"lv",//属性使用逗号隔开
            birthDay:2000,
            age:function(){
                var fullYear = new Date().getFullYear();
                return fullYear-this.birthDay;
        }
        }
        //方法必须带（）
        lv.age();
        // 属性
        lv.name;

4.内部对象

基本使用

 var now=new Date();
        now.getMonth();   ;月
        now.getDate() ;日
        now.getDay();星期
        now.getHours();时
        now.getMinutes();分
        now.getSeconds();秒
        now.getTime();//时间戳  全世界是统一 1970 1.1 0：00：00 毫秒数

        console.log(new Date(1614240861620))
        // Thu Feb 25 2021 16:14:21 GMT+0800 (中国标准时间)

转换

now.toLocaleString()//打印本地时间
"2021/2/25下午4:19:51"
now.toGMTString()
"Thu, 25 Feb 2021 08:23:55 GMT"

JSON

JSON是什么

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在js中一切皆为对象，任何js的类型都可以使用JSON来表示

格式：

  • 对象都用大括号{}
  • 数组都用中括号[]
  • 所有的键值对 都是用key：value
<script>
    var user={
        name:'lv',
        age:21,
        sex:'男'
    }
    var jsonUser=JSON.stringify(user)//对象转换为json字符串"{"name":"lv","age":21,"sex":"男"}"

    var obj=JSON.parse('{"name":"lv","age":21,"sex":"男"}')//json字符串转换为对象 {name: "lv", age: 21, sex: "男"}
 
</script>

5.面向对象

在js，java，c#……面向对象，js有些区别

  • 类：模板

  • 对象： 具体实例

    原型对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var Person={
        name:'lv',
        run:function (){
            console.log(this.name+'run');
        }
    }
    var xiaoming={
        name:'xiaoming'
    }
    var bird={
        name:'bird',
        fly:function(){
            console.log(this.name+'fly')
        }
    }
    //原型对象
    xiaoming.__proto__=Person;//bird
</script>
</body>
</html>

class关键字是子啊ES6引入的

1、定义一个类，属性，方法

class person{
        constructor(name) {
            this.name=name;
        }
        run (){
            alert('hello')
        }
    }

    var xiaoming = new person('xiaoming')
    xiaoming.run()

继承：

class student extends person{
        constructor(name,grad) {
            super(name);
            this.grad=grad;
        }
        mygrad(){
            alert('我是一名学生')
        }
    }
    var liming= new student('liming',1)
    liming.mygrad()

6.操作BOM对象（重点）

JS和浏览器的关系

js诞生为了能够在浏览器中运行

BOM:浏览器对象模型

  • IE
  • chrome
  • safari
  • firefox
  • opera

三方

  • QQ浏览器
  • 360浏览器

window

window代表浏览器窗口

window.alert()
window.innerHeight
window.inerWidth//内部窗口高度
window.outHeight
window.outWidth

Navigator

Navigator,封装了浏览器的信息

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36"
navigator.platform
"Win32"
navigator.appName
"Netscape"

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

不建议使用这些属性来判断和编写代码

screen 代表屏幕尺寸

screen.height
864
screen.height
864
screen.width
1536
screen.height
864

location（重要）

location 代表当前页面的URL信息

location
host: "www.baidu.com"//主机
href: "https://www.baidu.com/"//指向的地址
protocol: "https:"//协议
reload: ƒ reload()//重新加载的方法  刷新网页
location.assign('https://uland.taobao.com/')设置一个新的地址

document

document当前页面信息 ，HTML DOM文档树

document
#document
document.title
"百度一下，你就知道"
document.title='沙雕网'
"沙雕网"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl id="app">
    <dt>JAVA</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
    var s=document.getElementById('app')//获取躯体的文档树节点
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rv8cn8ej-1614495562397)(C:\Users\lcj\AppData\Roaming\Typora\typora-user-images\image-20210225205709694.png)]

获得cookie

document.cookie//获取本地段
"BIDUPSID=984FAD896AEB34ED38CD0E05B43F255D; PSTM=1613871012; BAIDUID=984FAD896AEB34ED9F03EEC312AB946D:FG=1; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=33258_33272_31253_33594_33570_33584; H_PS_645EC=1439tlxS5V%2FUYNFvyA75mOKyyLc80AjNc%2BiRkKPMahl%2BRX34UZEggZYYpEg; BD_HOME=1; BA_HECTOR=8521050h2g0580a1su1g3f7p70q"

劫持cookie原理

www.taobao.com

<script src="aa.js"></script>//通过植入js.利用js中获取cookie的方法
<!--恶意人员；获得你的cookie上传到其他的服务器-->

服务器全可以设置cookie：httpOnly 只读

history（浏览器的历史纪录）（不建议使用）

history.back//访问前一个网页
ƒ forward() { [native code] }
history.forward()//访问后一个网页
undefined

7.操作DOM对象

DOM：文档对象模型，浏览器网页就是一个DOM树形结构

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

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

获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    document.getElementById('h1')
    document.getElementsByClassName('p2')
    document.getElementsByTagName('p2')
    document.getElementById('father')
    father.children//获取父节点下的所有子节点
    father.firstChild//第一个
    father.lastChild//最后一个
</script>
</body>
</html>

这是原生代码，之后尽量使用jQuery（）；

更新节点

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

</div>
<script>
     var l1=document.getElementById('id1')
     l1.innerText='nihao '//给标签添加文本
</script>
</body>
</html>	

l1.innerHTML='<strong>123</strong>'//修改html代码
l1.style.fontSize='20px'//修改js 注意驼峰命名
l1.style.color='blue'//修改js

删除节点

删除节点的步骤，先获取父节点的

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var p1=document.getElementById()//获取要删除的子类节点
    var father=p1.parentElement;//获取父类节点
    father.removeChild(p1)//然后通过父类节点删除子类节点
    
    father.removeChild(father.children[0])//注意这个是动态的当删除第一个是时候，第二个就会变成第一个要想删除第一所以只能是0
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

插入节点

我们获得了某个Dom节点，假设这个节点时空的，我们可以同福哦innerHTML就可以增加一个元素，但是如果已经有了元素，这个方法就会覆盖原来的元素，所以

追加apand

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="js">javascript</p>
    <div id="list">
        <p id="se">javase</p>
        <p id="me">javame</p>
        <p id="ee">javaee</p>
    </div>
    <script>
        var js=document.getElementById('js')
        var list=document.getElementById('list')
        list.appendChild(js)//这里是放入已存在的节点
        //创建一个新的节点
        
        
        
        
        var newP=document.createElement('p')//创建一个p标签
        newP.id='newP'/给标签一个id
        newP.innerText='我是学生'//添加文字
        list.appendChirld('newp")//将新的节点添加进去
                          
         //创建一个带共能的标签
                          
    </script>
</body>
</html>

insertBefore

var me=document.getElementById('me')
   var js=document.getElementById('js')
   var list=document.getElementById('list')
   list.insertBefore(js,me)	//在me节点前添加一个js节点，必须要先获取父类节点，然后通过父类节点操作子类节点

8.操作表单

  • 文本框
  • 密码框
  • 下拉框
  • 多，单选框
  • 隐藏域

表单的目的；提交信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <span>用户名</span><input type="text" id="username">
    <span>性别</span><input type="radio" name="sex" id="boy">男
    <span>性别</span><input type="radio" name="sex" id="girl">女
</form>
<script>
    var input_text=document.getElementById('username')
    // input_text.value//得到输入的值
    // input_text.value='123456'//修改输入的值
    var boy=document.getElementById('boy')
    var girl=document.getElementById('girl')
    boy.checked//如果被选中返回true 否则false
    boy.checked=true//选中boy

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

提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="md5/md5.js"></script>//这里导入加密算法
</head>
<body>
<!--第三中表单提交-->
<form action="# " method="post" onsubmit="return aaa()">
    <p>
        <span>用户名</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密&nbsp码</span><input type="password" id="input_password">
    </p>
    <input type="hidden"id="md5_password" name="password">
    <span>性别</span>
    <input type="radio" name="sex" id="boy">男
    <input type="radio" name="sex" id="girl">女
<!--    //第一种提交表单-->
    <input type="submit">
    <p>
<!--        //绑定事件，通过onclick 被点击    //第一种提交表单-->
<!--        <button type="button" οnclick="aaa()">登录</button>-->

    </p>

</form>
<script>
    // var input_text=document.getElementById('username')
    // // input_text.value//得到输入的值
    // // input_text.value='123456'//修改输入的值
    // var boy=document.getElementById('boy')
    // var girl=document.getElementById('girl')
    // boy.checked//如果被选中返回true 否则false
    // boy.checked=true//选中boy

    function  aaa(){
        // alert('登录成功')
        var username=document.getElementById('username')
        var password=document.getElementById('input_password')
        var md5pwd=document.getElementById('md5_password')

        console.log(username.value)
        console.log(md5pwd.value)
        md5pwd.value=hex_md5(password.value)//使用加密算法 将算出的值赋给password


        return true;//可以控制表单的提交  true可以提交 false不可以提交
    }

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

9.jQuery

jquery里面存在大量的JavaScript的函数

获取jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    //使用在线的jQuery   搜索CDNjQuery
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    本地-->
    <script src="jQuery/jquery-3.5.0.js"></script>
<!--    在线-->
<!--    <script crossorigin="anonymous" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>-->
</head>
<body>
<!--   jQuery使用公式-->
<!--     $(选择器).action()-->
<div>
    <p id="jQuery1">点我</p>
</div>
<script>
    $('#jQuery1').click(function () {//通过jQuery绑定事件
        alert('hello ')
    })
</script>
</body>
</html>

演示事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jquery-3.5.0.js"></script>
    <style>
        #jQuery{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
mouse: <span id="jQuery2"></span>
<div id="jQuery">在这里移动鼠标试试</div>
<script>
    //当网页完成加载之后才会加载事件
    $(function () {//这里是表示当页面加载完成后，的事件
        $('#jQuery').mousemove(function (e) {//鼠标移动事件
            $('#jQuery2').text('当前X坐标：'+e.pageX+'当前X坐标：'+e.pageY)//在这里输出鼠标的x,y轴坐标
        })
    })
</script>
</body>
</html>

操作Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jquery-3.5.0.js"></script>
</head>
<body>
<ul id="ul1">
    <li id="li1">java</li>
    <li id="li2">python</li>
</ul>

<script>
    $('#ul1 li[id=li1]').text('hello')//  使用了属性选择器 给节点添加或者修改值。开始没有值的时候是添加，有值的时候是修改
    $('#ul1 li[id=li1]').css('color','red')//给节点添加css样式
    $('#ul1 li[id=li1]').show()//显示
    $('#ul1 li[id=li1]').hide()//隐藏
</script>
</body>
</html>
yuanlcj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript Day_03
03-24
javascript学习第三天笔记
JavaScript Day_01
03-24
javascript学习第一天笔记
给小日本写的javascript文档的1/4
热门推荐
William Lin 的专栏
02-13 9万+
/**Schedule控制*制作者:William*作用:*开始时间:2006-11-29*完成时间:*修改者:*修改时间:*完成时间:*//*********************************************************************************************************************************
typescript和javascrpt代码检查的未来
weixin_30411239的博客
07-02 159
背景 TypeScript是一个非常棒的JavaScript代码静态代码分析器，它在底层JavaScript语言之上提供了一些额外的语法。 在后台，它使用一个解析器将源代码转换成一种称为抽象语法树(AST)的数据格式。然后，插件使用这种数据格式来创建名为lint规则的断言，该断言围绕着代码的外观或行为。 ESLint是一个很棒的javascript代码检查工具。 在后台，它使用...
jsvascript总结
cocacola81的专栏
04-17 386
----获得列表框的值-------------------------------------------------------------------- &lt;script language="javascript"&gt;function topage(item){var thisValue=1;  //if(item.selectedIndex!=0) 这句加上则选第一个时不会有值 ...
使用javascript实现对于chineseocr的API调用
CHYabc123456hh的博客
06-16 9万+
ChineseOCR在线API 网页地址 界面 提供多种接口调用方式，比如在线调用、Javascript api调用、curl api调用和python api调用四种方式，本次使用javascript api调用的方式进行OCR识别 在线Javascript工具 在线工具网页链接 在线Base64 转化工具 在线工具网页链接 代码修改 新增一个变量fill_with_base64_image接收图片的base64编码的字符串 将input内的<fill_with_base6.
1javascript语法
小飞虫
06-09 6231
分享自己的经验
vito的Web前端学习_JavaScript_Day1
03-04
理解原型链和继承机制也是JavaScript学习的重点，这有助于我们更好地理解和使用面向对象编程。 事件和DOM操作是前端开发中不可或缺的部分。JavaScript可以直接操作文档对象模型（DOM），改变网页内容，响应用户交互...
day1_javascript_
09-30
"day1_javascript_"这个标题可能指的是一个学习序列的开始，聚焦于JavaScript的基础知识。描述中提到的"javaweb的编程资料"表明这组资料不仅限于JavaScript，可能还涉及到将JavaScript应用于JavaWeb开发的场景。 ...
day09_JavaScript基础1
08-08
学习JavaScript的基础，主要包括以下几个方面： 1. **基本语法**：JavaScript的语法与Java有相似之处，但也存在差异。例如，注释可以使用单行注释`//`或多行注释`/* ... */`。在数据类型上，JavaScript有五种原始...
JScript与JavaScirpt的区别
生活在爪洼岛上
06-03 841
在网上经常看到JScript和JavaScript两个词，自己也只对JavaScript有了解，不这两有和异同，今天就搜罗了一下相关资料，以下是相关解释：解释一：1.JavaScript语言的前身叫作LiveScript。自从Sun公司推出著名的Java语言之后， Netscape公司引进了Sun公司有关Java的程序设计概念，将自己原有的LiveScript重新进行设计,并更名为JavaSc
javascropt学习笔记1
碎梦道
05-10 1025
《javascript捷径教程》 针对已有javascript经验基础 1.代码装载和解析，要调用的函数必须放在前面，第三方脚本尽量放在底部以减少等待时间。 Ch2 2.Web开发三层论，HTML负责结构，CSS负责样式，Javascript负责行为。 3.Javascript提供两种方式来访问对象的属性，点号和方括号，方括号的好处是可以通过变量来执行函数， 4.值传递和引用传递，对象作
兼容IE8及以上的换肤控件
simon_wong
03-31 1054
写了一个兼容到IE8的简单换肤控件（只支持换颜色~），实现换肤功能代码实现 changeSkin.js/* * 基于jquery的换肤功能 * 在有业务需要进行换肤的情况下使用 * * @param option 参数 * */function ChangeSkin(option) { var _default = { tarDom: null,
JavaScript-JavaScript概述及简单使用
小工匠
09-22 1万+
什么是 JavaScript 的特点 JavaScript 的核心 使用 创建一张 HTML 页面 Script标签解析 JS 代码嵌入的一些问题 完整实例什么是JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为它不需要在一个语言环境下运 行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据
javascriptJavaScript 经典代码大全
程序人生
06-24 3万+
http://www.cnblogs.com/yoyebina/archive/2006/12/26/604203.html
JavaScropt简介
Unfortunatelyif的博客
12-08 814
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设...
0729信息技术服务知识12.pdf
07-30
0729信息技术服务知识12.pdf
2024贵州省河流水系矢量图层shp数据最新版下载-带python代码
最新发布
07-30
2024贵州省河流水系矢量图层shp数据下载-包含水系线和水系面数据，几千上万条数据，非常细化，附带shp转geojson的python代码
【SCI顶级】鱼鹰算法OOA-CNN-LSTM-Multihead-Attention温度预测【含源码 5769期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
"Day10_JavaScript高级1：DOM的功能与控制HTML文档
本节课主要学习了JavaScript高级的内容，包括BOM对象和DOM对象的使用以及四个案例的实践。下面对每个部分进行详细总结： 1. BOM对象：BOM对象是JavaScript的浏览器对象模型，通过BOM可以控制浏览器的行为和属性。本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值