javaScript

最新推荐文章于 2022-06-11 14:12:34 发布

球球耶

最新推荐文章于 2022-06-11 14:12:34 发布

阅读量1.2k

点赞数

分类专栏： Java 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/zs_pnzzz/article/details/113972246

版权

Java 专栏收录该内容

30 篇文章

订阅专栏

基本使用

引入 JavaScript

1.内部标签

<script> 
//注释
</script>

2.外部引入

    <script src="../Javascript/JS01.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!-- sript 标签内些JS代码 -->
    <!--
    <script> alet('hello JS')</script>
    -->
    <!-- 外部引入JS-->
    <script src="../Javascript/JS01.js"></script>
    <!-- 不用写type默认-->
    <!-- <script type="text/javascript"></script> -->
    <script> alet('hello')
    //注释
    </script>
</head>
<body>

</body>
</html>

//alert 弹窗
alert('hello JS ');

浏览器控制台使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本语法</title>
</head>
<!-- JavaScript 严格遵循大小写 -->
<script>
    /*
    var alert 分号;Console控制台

    console.log(num) 在控制台打印变量

    */
 // 1.var 定义变量
 var num=1;
 var name='cc';
 // 2.条件控制 alert(num)弹窗
 if (num>0 &&num<60){
     alert("c");
 }else if(num>60 && num<80){
     alert("b");
 }else {
     alert("a");
 }
</script>
<body>
</body>
</html>

数据类型快速浏览

数值，文本，图形，音频，视频…
JavaScript 不区分小数和整数

1. 123// 整数123
2. 123.1// 浮点数123.1
3. 1.123e3 // 科学计数法
4. -99 // 复数
5. NaN // 不是一个数字
6. Infinity //表示无限大

字符串
‘abc’,“abc”
布尔值
true,false
逻辑运算
&& 与 || 或！非
比较运算符

1.=   赋值
2.==  等于(类型不一样，值一样，也会判断为 true)
3.=== 绝对等于(类型一样，值一样，结果为 true)
这是js的一个缺陷，不要用==比较

- NaN===NAN false 与所有值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数

- console.log(1/3)===(1-2/3) false
尽量避免使用浮点数进行运算，存在精度问题
+ Math.abs(1/3=(1-2/3))<0.0000001 true

null和undefind

null 空
undefind 未定义
数组
可不同类型混合

var arr=[1,2,3,'5',"hello",null,true]
越界 undefined

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

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

// Person person= new Person(1,2,3,4);
var person={
     name:"abc",
     age:3,
     tags:['js','web','...']
}

取对象的值

person.name
> "abc"
person.age
> 3

严格检查模式strict

'use strict'; //严格检查模式，预防JavaScript的随意性导致产生的问题 写在javascript第一行
let i =1; //局部变量 用let定义 es6语法

字符串类型讲解

数据类型

1.字符串

//正常字符串使用单引号，或者双引号包裹
//转义字符 \
\' \n \t \u4ead \u#### Unicode 字符
\x41 Asc11 字符

2.多行字符串

//反引号 tab键上面 esc键下面
<script>
'use strict';
var one={
`hello
world`
}
</script>

3.模板字符串

let name="abc";
let age=18;
let count=`hello,${name}`

4.字符串长度

console.log(str.length);

5.字符串的可变性不可变
6.大小写转换

//注意是方法 不是属性
str.toUpperCase()

7.识别第几位

str.indexOf('s')

8.截取多少位字符串

str.substring(1)//从第一到最后
str.substring(1,3)//[)包含第一个不包含第三个

数组类型讲解

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

var arr=[1,2,3,4,5];//通过下标值取值和赋值
arr[0]
aa[0]=1

1.长度
arr.length
注意：加入给arr.length赋值，数组大小发生变化，赋值过小元素丢失
2.indexOf,通过元素获得下标索引

arr.indexOf(2)
1

注意：字符串的"1" 和数字1是不同的

3.slice()截取Array的一部分，返回一个新数组类似于String中的substring
4.push,pop

push:压入到尾部
pop:弹出尾部的一个元素

5.unshift(),shift() 头部

unshift：压入到头部
shift: 弹出头部的一个元素

6.排序sort()
7.元素翻转 reverse()
8.concat() 替换数组
9.连接符join
打印拼接数组，使用特定的字符串连接

["a","b","c"]
arr.join('-')
"a-b-c"

10.多维数组

arr= [[1,2],[3,4],["5","6"]];
arr[1][1]
4

对象类型讲解

若干个键值对 JS中所有的键都是字符串，值是任意对象

1.对象赋值

var 对象名={
		属性名: 属性值，
		属性名: 属性值，
		属性名: 属性值
}

2.使用一个不存在的对象属性，不会报错，undefind

 person.vv
 undefined

3.动态的删减属性

delete person.name
true
person

4.动态的添加,直接给新的属性添加值即可

person.haha="haha";
"haha"
person

5.判断属性值是否在这个对象中 xxx in xxx

'age' in person
true

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

person.hasOwnproperty('age')
true

分支和循环讲解

流程控制

// if 判断
var age=3;
if(age>3){
  alert("one");
}else if(age<3){
  alert("two");
}else{
  alert("three");
}
//循环
var i=80
while(i<100){
  i=i+1;
  console.log(i)
}
// for 循环
 for (let i = 0; i < 20; i++) {
        console.log(i);
    }
// forEach 循环
 var age=[1,2,3,4,5,6];
    age.forEach(function (value){
        console.log(value);
    })
// for..in
 var age=[1,2,3,4,5,6];
    for (var num in age){
        if (age.hasOwnProperty(num)){
            console.log("local");
            console.log(age[num])
        }
        console.log(num);//索引
    }

Map和Set讲解


var map =new Map([["one",2],["3",4],["4",6]]);
    var num=map.get("one");//通过key获得value
    var num1=map.set("two",3);
    map.delete("one");
    console.log(num1)

//set:无序不重复的集合
 var num2=new Set([1,2,3,3,3]);
    num3=num2.add(1);
    num2.add(4);
    num2.delete(3);
    console.log(num2);
	  console.log(set.has(4))//是否包含某个元素

iterable迭代

Es6 新特性

遍历数组

// 通过 for of  / for in 遍历下标
var arr=[1,2,3]
for(var x of arr){
console.log(x)
}

遍历Map

var map=new Map([["one",1],["two",2]])
for(let x of map){
  console.log(x)
}

遍历Set

var set=new Set([3,4,5]);
for(let x of set){
  console.log(x)
}

函数的定义和参数获取

定义函数~绝对值函数

function abs(x){
  if(x>=0){
    return x;
  }else{
    return -x;// 一旦执行到return代表函数结束，返回结果
  }      // 如果没有执行return 函数执行完也会返回结果undefined
}

2.前端定义~匿名函数

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

调用函数

abs(10)//10
abs(-10)//10
// javascript 可以传递任意个参数0~Nan

手动规避参数不存在的情况

var abs=function(x){
  // 手动抛出异常
  if (typeof x!='number'){
    throw 'Not a Number'
  }
  if(x>=0){
    return x;
  }else{
    return -x;}
}

arguments 是一个js免费赠送的关键字,代表传递进来的所有参数是一个数组

默认打印第一个数值

'user strict'
      var abs=function(x){
          console.log("x>="+x);
          for (var i=0;i<arguments.length;i++){
              console.log(arguments[i]);
          }if (arguments.length==2){
              console.log(2)
          }}

rest es6新特性,只能写在最后面打印除去已知参数数值后所有的数值

  function x(a,b,...rest) {
          console.log("a=>"+a);
    			console.log("b=>"+b);
          console.log(rest);
      }
x(4,5,6,7)
 a=>4 b=>4
 [ 6, 7]

变量的作用域，let，const

在JavaScript中，var定义变量是有作用域的

若在函数体中声明，则在函数体外不可以使用（闭包）

内部函数可以访问外部函数成员，反之不行

function cc(){
          var x=1;
          x+=1;
          console.log(x);
      }
      x=x+2;
// Uncaught ReferenceError: x is not defined

假设JavaScript中函数查找变量从自身函数开始。由内向外查找，假设内部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

      function aa(){
          var x=1;
      function cc(){
          var x="q";
          console.log(x);
      }
     console.log("outer"+x);
      cc()
      }
      aa()
outer1
q

结果xundefined

说明：js执行引擎，自动提升了y的声明

所以变量定义定义在头部

function aaa(){
          var x="x"+y;
          console.log(x);
          var y='y';
}
aaa()
function aaa(){
  				var y
					var x="x"+y;
          console.log(x);
          y='y';
}

全局对象 window

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

规范：如果不同js文件使用了相同全局变量window造成冲突设定全局变量

iQuery ~$

//唯一全局变量
var full={};
//定义全局变量
full.name='pp';
full.add=function(a,b){
  return a-b;
}

局部作用域 let es6新特性更严谨优先使用 let定义局部作用域

function bbb(){
    for (var i = 0; i < 10; i++) {
        console.log(i);//0~9 i=10退出循环
    }console.log(i+1);//10+1=11 var 外部扩大作用域
}
bbb();//0~9,11

function bbb(){
    for (let i = 0; i < 10; i++) {
        console.log(i);
    }console.log(i+1);//i最大值9
}
bbb();//0~9 Uncaught ReferenceError

常量 const

ES6之前只能用全部大写字母命名常量

ES6引入关键字 const


const CC='3.14';//只读变量
console.log(CC);
CC='2.14'//Uncaught TypeError: Assignment to constant variable.
console.log(CC);

方法的定义和调用，apply

定义方法

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

<script>
    'user strict'
    var pn={
        name:'球球',
        birth:2020,
        //方法()
        age:function (){
           //今年的年龄
           var now=new Date().getFullYear();
           return now-this.birth;
        }
    }
    //属性
    pn.name;
    //方法()
    pn.age();
</script>

this.代表默认指向调用它的那个对象

在js中可以控制this的指向

function getAge(){
           //今年的年龄
           var now=new Date().getFullYear();
           return now-this.birth;
        }
var pn={
        name:'球球',
        birth:2020,
        //方法()
        age:getAge
}
pn.age()//ok
getAge()//NaN
   getAge.apply(pn,[])//this 指向pn,参数为空

Date日期对象

1.标准对象

typeof 123
"number"
typeof "123"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

2.Date

var now=new Date();//now~console.log(now)Sun Feb 07 2021 10:29:52 GMT+0800 (中国标准时间)
    now.getFullYear();//年
    now.getMonth();//月 0~11月
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒
    now.getTime();//时间戳全世界统一 1970.1.1 0：00：00毫秒数
    console.log(new Date(1612665260931))

转换

console.log(new Date(1612665260931))
VM389:1 Sun Feb 07 2021 10:34:20 GMT+0800 (中国标准时间)
undefined
now=new Date(1612665260931)
Sun Feb 07 2021 10:34:20 GMT+0800 (中国标准时间)
now.toLocaleString//这是一个方法，不是一个属性
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2021/2/7 上午10:34:20"
now.toGMTString()
"Sun, 07 Feb 2021 02:34:20 GMT"

JSON对象

1.json是什么

 早期，所有数据传输习惯使用xml文件
  JSON 是一种轻量级别的数据交换格式
  简洁和清晰的层次结构使得 json 成为理想的数据交换语言
  便于人阅读和编写，同时也易于机器解析和生成，且有效地提升了网络传输效率

 在JavaScript一切皆为对象，任何js支持的类型都可以用json来表示
  对象都用{}
  数组都用[]
  所有的键值对都是用 key:value

JSON字符串和js对象的转化

    var user={
        name:"cc",
        age:4
    }
    //对象转化为json字符串
    var jsonUser=JSON.stringify(user);
    //json 字符串转化为对象 参数为json 字符串
    var obj=JSON.parse('{"name":"cc","age":4}');

json和js对象的区别

var obj={a:'hello',b:'obj'};
var json='{'a':'hello','b':'json'}';//字符串

Ajax

原生的 js 写法，xhr 异步请求
jQuery 封装好的方法 $("#name").ajax("")
axios 请求

面向对象原型继承

1.java 面向对象~ 类：模板，原型对象 对象：具体的实例
2.JavaScript 原型：

var user={
        name:"cc",
        age:3
}
var obj={//原型
        sex:"girl",
    run:function (){
            console.log(this.name+"\t"+"beautidul"+"\t"+this.sex);
    }
}  ;
  //user的原型是obj 下划线共四个
  user.__proto__=obj;

user.run()
cc	beautidul	girl
user.sex
"girl"

面向对象class继承

class 继承

class 关键字是在ES6 引入的

//根据对象找原型
    function  Student(name){
        this.name=name;
    }
//给student新增一个方法
    Student.prototype.hello=function (){
        alert("hello")
    };

//es6 之后
//定义一个学生类
class Student{
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert("hello")
    }
}
var cc=new Student("cc")
cc.hello()
cc.name
"cc"

继承

//constructor 构造器
class minStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    MyGrade(){
        alert("grade="+this.grade);
    }
}
    var dd =new minStudent("dd",66)
dd.grade
66
dd.MyGrad
/*
minStudent的原型对象是Studennt
console.log(dd)
minStudent {name: "dd", grade: 66}
 grade: 66
 name: "dd"
__proto__: Student
 MyGrade: ƒ MyGrade()
 constructor: class minStudent
 __proto__: Object
 **/

本质：查看对象原型 原型链无限循环

操作BOM对象

BOM：浏览器对象模型

JavaScript：为了在浏览器中运行

Window 代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
798
window.innerWidth
1059
window.outerHeight
877
window.outerWidth
1614

Navigator 封装了浏览器的信息

不建议使用navigator对象会被认为修改

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36 Edg/88.0.705.56"
navigator.userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36 Edg/88.0.705.56"
navigator.platform
"MacIntel"

svreen 屏幕尺寸

screen.width
2560
screen.height
1440

location(重要) 代表当前页面的URL信息

location
hash: ""
host: "vip.iqiyi.com"
hostname: "vip.iqiyi.com"
href: "https://vip.iqiyi.com/?fv=zz_57b2d4c27f403-127683176-224842"
origin: "https://vip.iqiyi.com"
pathname: "/"
port: ""
protocol: "https:"
// 设置新的地址
location.assign('https://www.baidu.com/')

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

document.title
"新建标签页"
document.title='初五'
"初五"
document.title
"初五"

获取具体的文档树节点


    <dl id="表格标签">
        <dt>列表标题</dt>
        <dd>列表内容</dd>
        <dd>列表内容</dd>
    </dl>
    <script>
        val d1=document.getElementById('表格标签');
    </script>

获取 cookie

document.cookie
"__tins__19571051=%7B%22sid%22%3A%201613431607180%2C%20%22vd%22%3A%201%2C%20%22expires%22%3A%201613433407180%7D; __51cke__=; __51laig__=1;

同一浏览器，若登录淘宝则会劫持 cookie 无验证登录天猫

服务器端可以设置 cookie: httpOnly

history 浏览器历史记录

history.back()//后退
history.forward()//前进

获得DOM节点

核心

浏览器网页就是一个DOM树形结构
1.更新：更新Dom节点
2.遍历dom节点：得到Dom节点
3.删除：删除一个Dom节点
4.添加：添加一个Dom节点
要操作一个Dom节点，就要先获得一个Dom节点

<div id="f">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
    </div>
    <script>
        //对应css选择器
        var h1=document.getElementsByTagName('h1');
        var p1=document.getElementById('p1');
        var p2=document.getElementsByClassName('h1');
        var f=document.getElementById('f');
        var c=f.children;//获取父节点下的所有子节点
    </script>

更新DOM节点


<div id="id1">
</div>
<script>
    var id1=document.getElementById('id1');
    id1.innerText='abc';
</script>

==Id1.innerText=‘123’==修改文本的值

 id1.style.color='red';//属性使用 字符串 包裹
"red"

Id1.innerHTML=‘123’ 可以解析HTML文本标签

操作css

id1.style.fontSize='30px'//驼峰命名问题
"30px"
id1.style.padding='2em'
"2em

删除DOM节点

    <div id="f">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
    </div><script>
      var h1=document.getElementsByTagName('h1');
        var p1=document.getElementById('p1');
        var p2=document.getElementsByClassName('h1');
        var f=document.getElementById('f');
        var c=f.children;//获取父节点下的所有子节点
var self=document.getElementById('p1');
        var father=p1.parentElement;
        father.removeChild(self)
</script>

f.children
HTMLCollection(3) [h1, p#p1, p.p2, p1: p#p1]0: h1accessKey: ""align: ""ariaAtomic: n
father.removeChild(f.children[0])
<h1>标题1</h1>
father.removeChild(f.children[1])
<p class="p2">p2</p>
father.removeChild(f.children[2])
VM446:1 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 
father.removeChild(f.children[0])
 <p id="p1">p1</p>

注意：删除多个节点的时候，children是在时刻变化，删除节点的时候一定要注意

创建和插入DOM节点

插入节点

获得某个Dom节点，若是为空，通过innerhtml 增添一个元素，若已存在便覆盖

追加

p id="js">javaScript</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

<script>
    var id1=document.getElementById('id1');
    id1.innerText='abc';
    //添加
    var  js=document.getElementById('js');
         list=document.getElementById('list');
</script>
         //list.appendChild(js)
    <p id="js">javaScript</p>

创建一个新的标签，实现插入

//通过js创建一个新的节点
    var newP=document.createElement('p');//创建p标签
    newP.id='newP';
    newP.innerText='hello DOM';
    list.appendChild(newP);

//创建style 标签
    var myStyle=document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{background-color: chartreuse;}';
    //document.getElementsByTagName('head')[0].appendChild(myStyle);
    //body 标签设置背景颜色，TagName返回数组
    var body=document.getElementsByTagName('body');
    body[0].setAttribute('style','background-color: wheat;');
    //document.getElementsByTagName('body')
    //HTMLCollection [body]0: bodylength: 1__proto__: HTMLCo

insertBefore插入目标节点之前

listr.insertBefore(newNode,targetNode);

获得和设置表单的值

表单 form

文本框 text 下拉框 <select>
单选框 radio 多选框 checkbox
隐藏域 hidden 密码框 password 等
表单的目的：提交信息

获得要提交的信息

<form action="#">
  <p>  <span>用户名：</span><input type="text" id="username"></p>
<!--value定义好-->
<p>
    <span>性别：</span>
    <input type="radio" name="sex" value="man" id="boy">男
    <input type="radio" name="sex" value="women" id="girl">女
</p>
</form>
<script>
    var username=document.getElementById('username');
    var boy=document.getElementById('boy');
    var girl=document.getElementById('girl');
    //得到输入框的值
    username.value
    //修改输入框的值
    username.value='123';
    //boy.value 对于单选框多选框的value值只能取到当前的值
    //boy.checked 查看返回结果是否为true被选中
    boy.checked=true //赋值
</script>

表单提交验证及前端密码MD5加密

提交表单信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
    <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"required></p>
    <!--required 属性是一个布尔属性。 required 属性规定必需在提交表单之前填写输入字段。-->
    <p>  <span>密码：</span><input type="text" id="password" name="password" required></p>
<!--<input type="submit">-->
  <!--绑定事件 onclik被点击-->
    <button type="button" onclick="ss()">提交</button>
</form>
<script>
    function ss(){
        var uname=document.getElementById('username');
        var pwd=document.getElementById('password');
        console.log(uname.value);
        console.log(pwd.value);
        //MD5算法
        pwd.value=md5(pwd.value);
        console.log(pwd.value);
    }
</script>
</body>
</html>

MD5 加密2

<!--表单绑定标签
onsubmit=绑定一个提交检测的函数 true false
将这个结果返回给表单，使用onsubmit接收

-->
<form action="https://www.baidu.com/" method="post" onsubmit="return sss()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
<p>
    <span>密码：</span><input type="text" id="input-password" >
</p>
    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件 onclik被点击-->
    <button type="submit" >提交</button>
</form>
<script>
    function sss(){
        alert(1);
        var uname=document.getElementById('username');
        var pwd=document.getElementById('input-password');
        var md5pwd=document.getElementById('md5-password');
        //MD5算法
        md5pwd.value=md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false，阻止提交

        return true;
    }
</script><!--表单绑定标签
onsubmit=绑定一个提交检测的函数 true false
将这个结果返回给表单，使用onsubmit接收

-->
<form action="https://www.baidu.com/" method="post" onsubmit="return sss()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
<p>
    <span>密码：</span><input type="text" id="input-password" >
</p>
    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件 onclik被点击-->
    <button type="submit" >提交</button>
</form>
<script>
    function sss(){
        alert(1);
        var uname=document.getElementById('username');
        var pwd=document.getElementById('input-password');
        var md5pwd=document.getElementById('md5-password');
        //MD5算法
        md5pwd.value=md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false，阻止提交

        return true;
    }
</script>

初识jQuery及公式

jQuery库，里面存在大量的javaScript函数

获取jQuery

//官网下载或CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
//导入
<script src="路径"></script>
<!-- $(selector).action()-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
    </script>
</head>
<body>
<!-- $(selector).action()-->
<a href="" id="test-jQuery">ok</a>
<script>
    document.getElementById('id')
    //选择器与css的选择器相似
    $('#test-jQuery').click(function(){
        alert('hello');
    })
</script>
</body>
</html>

jQuery选择器

css常用选择器

<!--.class	   .intro	选择所有class="intro"的元素	1
#id	       #firstname	选择所有id="firstname"的元素	1
*	         *	选择所有元素  -->
<style>
*
{
background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

jQueryAPI

选择器

<script>
    document.getElementById('id')
    //选择器css的选择器
    $('#test-jQuery').click(function(){
        alert('hello');
    })
 //原生js选择器
    //标签
    document.getElementsByTagName();
    //ID
    document.getElementById();
    //类
    document.getElementsByClassName();
    //jQuery css中的选择器都能用
    $('p').click();//标签选择器
    $('#id').click();//id
    $('.class').click()//class
</script>

jQuery事件

鼠标事件

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
    </script>
    <style>
        #divMove{
            width:500px;
            height:500px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<!--cmd+/注释快捷键-->
mose:<span id="mouseMove"></span>
<div id="divMove">
    移动鼠标
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    //$(document).ready(function (){})
    $(function () {
        $('#divMove').mousemove(function (e) {
          $('#mouseMove').text('x'+e.pageX+'y'+e.pageY)
        })
    });
</script>

jQuery操作Dom元素

操作DOM

节点文本操作

<ul id="ul1">
    <li class="ja">java</li>
    <li name="js">javaScript</li>
</ul>
<script>
    // document.getElementById()
    $('#ul1 li[name=js]').text();//获得值
    $('#ul1 li[name=js]').text('设置值');//设置值
    $('#ul1').html();//获得值
</script>

css操作

 $('#ul1 li[name=js]').css("color","red");

元素的显示和隐藏：本质 display:none

    $('#ul1 li[name=ja]').show()
    $('#ul1 li[name=ja]').hide()

测试

$(window).width()
$(window).height()

前端小结

源码之家