javascript基本使用

2021/8/6 1:38:53

编程Tag： js javascript let 使用 name 节点 document 基本 P4

本文主要是介绍javascript基本使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. JavaScript的基本使用

javascript可以写在head标签中,也可以写在body中,只要在html标签中就行,注意 : 由于浏览器是从上往下解析,写在html代码的前面可能会使javascript代码失效(html代码里面的id还没加载,javascript获取不到)

引入javascript

  1. 内部引入(写在script中)
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script>
         alert("hello");
      </script>
   </head>
   <body>

   </body>
</html>
  1. 外部引入
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="js/js-01.js"></script>
   </head>
   <body>

   </body>
</html>

alert("hello");

注意 : script不可以自闭合,不然会出错

2. 浏览器调试功能

  • 查看源代码

在这里插入图片描述

  • 控制台输入语句调试

在这里插入图片描述

console.log(变量名)

  • 调试

在这里插入图片描述

3. 快速入门

3.1 语法

1.定义变量 let 变量名 = 变量值

let i =1;
if (i<60){
    alert("hello");
}

2.流程控制(java的一样)

变量

用let是局部变量

用var是全局变量

3.2 快速数据类型

number

js不区分小数和整数,Number

123 //整数
132.1 //浮点数
1.123e3 //科学计数法
-99 //负数
NaN // not a number
Infinity //极大的数
​```
1e10000
> Infinity
​```

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算

&&
||
!

比较运算符

= //赋值
== // 等于(类型不一样,值一样,也会被判为true)
=== // 绝对等于(类型和值都一样)

let a = '1'
let b = 1;
console.log(a==b)
>  true
console.log(a===b);
>  false

须知:

  1. NaN和所有数都不相等,包括自己.可以用函数isNaN(NaN)来判断是否是NaN;
  2. 浮点数有精度缺失问题,可以用>0.000001的方式来解决

null和undefined

  • null为空
  • undefined 未定义

数组

下标从0开始,有两种方法创建,且里面可以包含任何东西

let a = [1,2,3,4,null,NaN,'hello'];
let b = new Array(1,2,3,null,'hello');

取值可以用a[index]即可

若是index超过了数组长度,则取出的元素是undefined

对象

let person = {
    age : 1,
    name : 'yangGe',
    target : [1,2,3]
}

就是一个json格式,取值就是对象名.成员名

3.3 严格检查模式

javascript是一个不严谨的语言,可以使用严格检查模式来增强严谨性

把'use strict';写在js文件的第一行即可

'use strict';
let person = {
    age : 1,
    name : 'yangGe',
    target : [1,2,3]
};
let i = 10;

4. 数据类型和循环

4.1 字符串

  1. 正常字符串我们可以使用单引号,也可以使用双引号
  2. 转义字符
  3. 多行字符串编写,不仅可以使用java的+,也可以使用``
'use strict';
let student = `你好
java
javascript
沃日`;
  1. 模板化字符串(就是el表达式)
'use strict';
let temp = 'hello';
let student = `你好 ${temp}`;
  1. 字符串长度

console.log(student.length)

  1. 大小写转换

console.log(student.toUpperCase())转大写

console.log(student.toLowerCase())转小写

  1. indexOf 和 charAt 和java一样
  2. 字符串切割(和java一样)
[) //左闭右开
console.log(student.substring(1,3))//从下标为1的位置开始,到下边为2的位置结束

4.2 数组

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

  1. 长度
arr.length

注意 : 给arr.length赋值,数组长度就会发生变化,且数组后面未赋值的元素为undefined,如果赋值过小,元素会丢失

arr.length = 10
console.log(arr)
> [1, 2, 3, 4, 5, empty × 5]
console.log(arr[7]);
> undefined
  1. indexOf获取下标索引
arr.indexOf(1)
  1. slice() ,截取Array的一部分,返回新的数组(和string的subString()一样)
arr.slice(2,4);
> [3, 4]

注意,为左闭右开

  1. push和pop
arr.pop();
arr.push(1);//参数为添加的元素

注意,push和pop为尾部操作,只能增加或删除尾部的元素

  1. unshift()和shift()
arr.unshift(100); //从头部插入一个元素
11
arr
(11) [100, 1, 2, 3, 4, 5, empty × 5]
arr.shift() //从头部删除一个元素
100
arr
(10) [1, 2, 3, 4, 5, empty × 5]
  1. 排序
let arr2 = ['B','C','A'];
undefined
arr2.sort();
(3) ["A", "B", "C"]
  1. 元素反转
arr2.reverse();
(3) ["C", "B", "A"]
  1. 连接符join
arr2.join('-');
"C-B-A"

将数组的元素以指定的符号连接起来输出

  1. 多维数组
let arr3 = [[1,2],[3,4],[5,6]];
console.log(arr3[1][1]);
> 4

4.3 对象

let 对象名 = {
    属性名 : 属性值,
    属性名 : 属性值,
    属性名 : 属性值
};

'use strict';
let person = {
  age : 3,
  name : "hejunyang",
  lesson : "math"
};

注意 : 属性名都是字符串,属性值都是对象

1, 对象赋值

person.name = 'yang'
"yang"
person.name
"yang"

2, 使用一个不存在的对象属性不会报错,只会 undefined

person.hah
undefined

3,动态删除属性,通过delete删除属性

person
> {age: 3, name: "yang", lesson: "math"}
delete person.lesson
> true
person
> {age: 3, name: "yang"}

4, 动态增加属性,直接给新的属性赋值就行

person.hehe = 'hello'
> "hello"
person
> {age: 3, name: "yang", hehe: "hello"}

5, 判断属性是否在该对象中(属性名是字符串)

'hehe' in person
> true
'name' in person
> true
'nono' in person
> false

6, 判断一个属性该对象是否拥有

person.hasOwnProperty('name'); //填入属性名
true

4.4 常用循环

普通for循环

'use strict';
let arr = [1,213,242,3,245,346,45,74,75];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

for of循环 ,获取的是值

'use strict';
let arr = [1,213,242,3,245,346,45,74,75];
for (let number of arr) {
    console.log(number);
}

for in循环 ,获取的是下标

'use strict';
let arr = [1,213,242,3,245,346,45,74,75];
for (let number in arr) {
    console.log(arr[number]);
}

注意for in会有漏洞,如

'use strict';
let arr = [1,2,3,4,'string',2,3];
arr.name = '111';
arr.push("1121112");
for (let arrKey in arr) {
    console.log(arrKey);
}

js-02.js:6 > 0
js-02.js:6 > 1
js-02.js:6 > 2
js-02.js:6 > 3
js-02.js:6 > 4
js-02.js:6 > 5
js-02.js:6 > 6
js-02.js:6 > 7
js-02.js:6 > name

下标不修复

4.5 Map和Set

Map的使用

'use strict';
let map = new Map([['tom',1],['jack',2]]);//初始化,用二维数组来初始化
let tom = map.get('tom');//获得值
map.set('hello','world');//修改或者新增键值对
map.delete('hello');//删除一个键值对

Set的使用

注意 : Set自动去重,和C++一样

let set = new Set([1,2,3,'string']);//初始化,用一维数组
set.add('你好'); //增加一个元素
console.log(set.has('string')); //输出是否有这个元素
set.delete('你好'); //删除一个元素

遍历Map对象

'use strict';
let map = new Map([['tom',1],['jack',2]]);
for (let mapElement of map) {
    console.log(mapElement);
}

遍历Set对象

'use strict';
let set = new Set([1,2,3,'string']);
for (const x of set) {
    console.log(x);
}

5. 函数

5.1 函数的定义

方法一:

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

如果没有执行return,会返回undefined

方法二:

'use strict';
let abs = function (x){
    if (x>=0) return x;
    else return -x;
}

5.2 参数问题

javascript的函数不限参数传入的个数,例如

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

abs(11,23,423)
> 11

但是参数表中是按顺序接受参数,若传入三个参数,且参数表只有一个形参,那么该形参就会被第一个传入的参数赋值

引入问题

问题一 : 若未传入参数,那么怎么判断参数是否传入

'use strict';
function abs(x){
    if (typeof x !=='number'){
        throw 'this not a number';
    }

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

可以增加一个一个判断,判断是否是一个基本类型

问题二 : 怎么获得所有参数

引入一个内置的对象arguments,可以用来获取所有的参数,包括超出参数表的参数

'use strict';
function abs(x){
    for (let i =0 ;i <arguments.length;i++){
        console.log(arguments[i]);
    }
}

abs(11,23,423)
js-03.js:4 > 11
js-03.js:4 > 23
js-03.js:4 > 423

但是注意,传入的形参是按顺序注入实参的,若超出参数表,则不进行操作

问题三 : 用argument获取多余的参数太麻烦了,有什么新的玩法

可以用可变参数

'use strict';
function abs(x,...rest){
    console.log("x=>"+x);
    console.log("rest=>"+rest);
}

使用方法是...参数名

5.3 变量的作用域和生命周期

let : 作用于块作用域,只能在{}中起作用,是局部变量,无法成为全局变量

const: 作用于块作用域,变量值一旦确定就无法更改,无法成为全局变量

var : 作用于全局作用域或者函数作用域,可以成为全局变量

注意 : 若引进多个js文件,使用var可以造成变量名冲突,而使用let则不会(一个js文件相当于一个块作用域,而多个js文件合起来才相当于一个全局作用域)

全局变量

'use strict';
var x = 14;
console.log(window.x);

var就可以成为全局变量,成为window的一个变量,而let和const不行

window对象

该对象存储了所有的全局变量,如alert,由于window是一个对象,其下所有的全局变量(包括函数)都可以被赋值,如

'use strict';
let hello = window.alert;
hello("hello world");

js所有的函数或者变量都可以看成一个变量进行赋值

自定义一个全局对象装载全局变量

由于js只有一个全局作用域window,所以所以的东西都绑定上去不现实,我们可以自定义一个对象作为全局对象存储所有的函数和变量,由于var存在全局冲突的可能,我们使用let来创建对象

'use strict';
let MyVariable = [];
MyVariable.abs = function (x){
    return x >=0 ? x :-x;
}

调用

MyVariable.abs(-10)
> 10

总结 :

1. js中函数也就是一个变量

2. 所有使用var的地方推荐使用let

3. 全局定义变量时（包括定义函数），var所定义的变量（以及function定义的函数）具有全局作用域，所以定义完毕以后就会添加入全局对象（在浏览器中即window全局对象）。window全局对象中的变量，可以通过window.xxx来访问到。由于const let定义的变量是块级作用域，因此即使是const let全局定义的变量也不能通过window.xxx访问到（报错）。我们可以联想有一个包裹着全局代码的大括号（块级作用域）；这样一来，全局定义的const，let在这个最外层的块级作用域中；显然window不能访问；但是没有块级作用域的全局变量即使在这个大括号内也属于全局作用域，window自然可以理所当然的访问到。

5.4 方法

方法指在对象内的函数

5.4.1 创建方法

方法一:

'use strict';
let person = {
    name : '骏扬',
    birth : 2002,
    age : function (){
        let nowAge = new Date().getFullYear();
        return nowAge - this.birth;
    }
}

调用 : person.age();

方法二:

'use strict';
let getAge = function (){
    let nowAge = new Date().getFullYear();
    return nowAge - this.birth;
}

let person = {
    name : '骏扬',
    birth : 2002,
    age : getAge
}

注意 : this指的是调用其的对象,在方法二中,如果直接调用getAge,this指的是window对象,会报错,但如果是person调用的getAge,则可以正确输出.

5.4.2 apply方法

该方法被所有函数拥有

可以指定一个对象来调用该方法,即指定this

getAge.apply(person,[]);

其中第一个参数是对象名,第二个参数是函数的形参表

6. 基本对象

6.1 typeof

typeof 123
"number"
typeof '123'
"string"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof window.alert
"function"

6.2 Data

'use strict';
let now = new Date();
now.getFullYear(); //获取年份
now.getMonth(); //获取月份
now.getDate(); //获取日
now.getDate(); //获取星期几
now.getHours(); //获取第几小时
now.getMinutes(); //获取分钟
now.getSeconds(); //获取秒

now.toDateString(); //通用时间 "Wed Aug 04 2021"
now.toLocaleString(); //当地时间 "2021/8/4 下午5:10:36"

6.3 JSON

'use strict';
let person = {
    name : '骏扬',
    age : 18,
    id : '3'
}

//把一个对象转换成字符串
let json1 = JSON.stringify(person); //'{"name":"骏扬","age":18,"id":"3"}'

//把一个json字符串转换成对象
let json2 = JSON.parse(json1); //{name: "骏扬", age: 18, id: "3"}

7. 面向对象

7.1 指定一个对象的原型

let person = {
    name : '骏扬',
    age : 18,
    id : '3',
    run : function (){
        console.log('person run');
    }
}

let xiaoming = {
    name: '小明'
}
xiaoming.__proto__ = person;

这样xioaming这个对象就有了person的方法和属性了

7.2 构造函数

js中的函数,如果不加new就是函数调用,加了new就当做为一个构造方法

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}

var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this，也就是说，不需要在最后写return this;。

通过这个特性,我们可以动态地创建一个方法,把它当成一个构造方法来创建一个类,最后通过这个类的原型来动态地增加属性和方法,如

//定义一个函数,可以当成一个构造函数
function Cat(name) {
    this.name = name;
}
//通过这个函数的原型来给里面增加一个方法
Cat.prototype.say = function (){
   return `Hello, ${this.name}!`;
}

let cat = new Cat('hello');
console.log(cat.say()); // Hello, hello!

不可以写成

function Cat(name) {
    this.name=name;
    this.say = function(){
        return `Hello, ${this.name}!`;
    }
}

let cat1 = new Cat('junyang');
let cat2 = new Cat('gege');

因为cat1和cat2的__proto__是Cat.prototype,如果这样写,其原型里面没有say这个函数,cat1.say !== cat2.say

7.3 class继承

class Student{
    //其构造方法,new的时候调用该方法
    constructor(name) {
        //给该对象增添一个name属性
        this.name = name;
    }
	//增添一个hello的方法
    hello(){
        console.log(`${this.name}`);
    }
}
let student = new Student('王八蛋');
student.hello();

可以使一个类继承Student类

class Student{
    constructor(name) {
        this.name = name;
    }

    hello(){
        console.log(`${this.name}`);
    }
}

class minStudent extends Student{
    constructor(name,age) {
        super(name);
        this.age = age;
    }
    play(){
        console.log('play');
    }
}

let d1 = new minStudent('王哥','16');
d1.play();

7.4 注意点

1.new关键字 : 函数被调用，然后新创建一个对象，并且成了函数的上下文（也就是此时函数内部的this是指向该新创建的对象，这意味

着我们可以在构造器函数内部通过this参数初始化值），最后返回该新对象的引用

也就是说,原来的函数创建了一个新的对象给我们,原函数的作用就是一个构造函数,可以在里面初始化新的对象,在原函数中,this指向新的对象

2.__proto__和constructor属性是对象所独有的;prototype属性是函数所独有的。但是由于JS中函数也是一种对象，所以函数也拥有__proto__和constructor属性

3**.用构造方法创建出来的对象的原型和构造方法所在的类同级,如果是class继承就和class的类同级**

student1.__proto__ === Student.prototype //true其中student1是Student的一个对象

4.constructor指向的是创建它的构造函数,且该属性只有对象有

5.__proto__和prototype指向的都是其原型

8. 操作BOM对象

window

window代表的是浏览器窗口

window.innerHeight
> 383
window.innerWidth
> 1496
window.outerHeight
> 728
window.outerWidth
> 1496

在这里插入图片描述

navigator

封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3870.400 QQBrowser/10.8.4405.400"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3870.400 QQBrowser/10.8.4405.400"

screen

获取屏幕的信息

screen.height
864
screen.width
1536

location

location封装了当前页面的url信息

在这里插入图片描述

可以用其assign方法实现网页跳转,reload实现网页刷新

location.assign('https://www.bilibili.com/'); //跳转bilibili
location.reload(); //刷新网页

document(DOM对象)

document代表当前页面,可以操作html的内容

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

   </head>
   <body>
      <div id="app">
         <a href="">hello</a><br>
         <a href="">username</a>
      </div>
   </body>
   <script src="js/js-04.js"></script>
</html>

let elementById = document.getElementById('app');

在这里插入图片描述

获取cookie

document.cookie

history

history.back(); //网页后退
history.forward(); //网页前进

9. 操作DOM对象

9.1 DOM节点的获取

通过id获取节点

document.getElementById()

通过标签名获取节点

document.getElementsByTagName()

通过类名获取节点

document.getElementsByClassName()

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点,document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

获取一个节点的父节点

test.parentNode;

获取一个节点下的所有子节点(test是一个节点,返回的是一个数组)

test.children;

获取节点test下第一个、最后一个子节点

var first = test.firstElementChild;
var last = test.lastElementChild;

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body>
      <div id="test-div">
         <div class="c-red">
            <p id="test-p">JavaScript</p>
            <p>Java</p>
         </div>
         <div class="c-red c-green">
            <p>Python</p>
            <p>Ruby</p>
            <p>Swift</p>
         </div>
         <div class="c-green">
            <p>Scheme</p>
            <p>Haskell</p>
         </div>
      </div>
   </body>
   <script src="js/js-04.js"></script>
</html>

'use strict';
// 选择<p>JavaScript</p>:
//返回一个节点对象
let js = document.getElementById('test-p');

// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
//返回一个节点数组
let arr = document.getElementsByClassName('c-red c-green')[0].children;

// 选择<p>Haskell</p>:
let haskell = document.getElementsByClassName('c-green')[1].lastElementChild;

//获取所有的div标签
let elementsByTagName = document.getElementsByTagName('div');

这个还可以链式编程,类似于css的层次选择器

document.getElementById('test-table').getElementsByTagName('tr');

9.2 DOM节点的更新

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
      <div id="div1">
         <strong>21231</strong>
      </div>
   </body>
   <script src="js/js-04.js"></script>
</html>

'use strict';
let div1 = document.getElementById('div1');

操作文本

//都是往该节点里面添加文本
div1.innerText = '123'; //这个直接加入文本
div1.innerHTML = '<strong>21231</strong>'; //这个会解析里面的标签

操作css

div1.style.color = 'red'; //改变颜色
div1.style.fontSize = '30px'; //改变字体,注意这里是驼峰命名法,因为不支持 '-'
div1.style.textAlign = 'center'; //改变文本样式

9.3 DOM节点的删除

删除节点的步骤 : 首先获取父节点,再删除子节点

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body>
      <div id="father">
         <p id="p1">p1</p>
         <p id="p2">p2</p>
         <p id="p3">p3</p>
      </div>
   </body>
   <script>
      let father = document.getElementById('father');
      let p1 = document.getElementById('p1');
      let p2 = document.getElementById('p2');
      let p3 = document.getElementById('p3');
   </script>
</html>

删除p1(参数是一个节点的对象)

father.removeChild(p1);

或者用子节点在不知道父节点的情况下删除父节点

p1.parentNode.removeChild(p1.parentElement.children[0]);

这也可

p1.parentNode.removeChild(p1);

注意 : parentnode和parentelement的区别

parentNode跟parentElement除了前者是w3c标准，后者只ie支持

当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null

一般情况parentNode可以取代parentElement的所有功能

parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。element是包含在node里的，它的nodeType是1

9.4 DOM对象的创建和插入

对空节点操作

我们获取某个空节点的话,可以通过innerHTML的方式增加一个元素,但是如果这个节点存在元素,就会产生覆盖

插入一个节点

我们可以把网页上的一个节点插入一个父节点里面

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body>
      <p id="p4">p4</p>
      <div id="div1">
         <p id="p1">p1</p>
         <p id="p2">p2</p>
         <p id="p3">p3</p>
      </div>
   </body>
   <script>
      //把p4插入到div1的后面
      let p4 = document.getElementById('p4');
      let div1 = document.getElementById('div1');
      div1.appendChild(p4);
   </script>
</html>

把一个元素插入父元素中

div1.appendChild(p4);

新建一个节点插入

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body>
      <div id="div1">
         <p id="p1">p1</p>
         <p id="p2">p2</p>
         <p id="p3">p3</p>
      </div>
   </body>
   <script>
      //新建一个p4插入到div1的后面
      let div1 = document.getElementById('div1');
      let p4 = document.createElement('p'); //创建一个p标签
      p4.innerHTML= 'p4'; //增加文本内容
      p4.id = 'p4'; //设置id
      p4.style.textAlign = 'center'; //加css效果
      div1.appendChild(p4);
   </script>
</html>

增加一个节点的属性不经可以直接用.的方法创建,也可以这样

<script>
   //新建一个p4插入到div1的后面
   let div1 = document.getElementById('div1');
   let p4 = document.createElement('p'); //创建一个p标签
   p4.innerHTML= 'p4'; //增加文本内容
   p4.setAttribute('id','p4');
   p4.setAttribute('style','text-align:center');
   div1.appendChild(p4);
</script>

设置一个节点(标签)的属性

p4.setAttribute('id','p4');

创建一个节点

let p4 = document.createElement('p');

把一个节点插入到指定位置

parentElement.insertBefore(newElement, referenceElement);

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body>
      <div id="div1">
         <p id="p1">p1</p>
         <p id="p2">p2</p>
         <p id="p3">p3</p>
      </div>
   </body>
   <script>
      //新建一个p4插入到div1的后面
      let div1 = document.getElementById('div1');
      let p4 = document.createElement('p'); //创建一个p标签
      p4.innerHTML= 'p4'; //增加文本内容
      p4.setAttribute('id','p4');
      let p2 = document.getElementById('p2');
      //参数1 : 新的节点 ,参数2 : 被插入的参照物,插入这个节点的前面
      div1.insertBefore(p4,p2);
   </script>
</html>

插入到一个节点前

div1.insertBefore(p4,p2);

10. 操作表单

10.1 操作输入框和单选框/多选框

输入框

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body>
      <form action="#">
         <span>用户名 :</span><input type="text" id="username">
         <input type="radio" name="sex" value="man">
         <input type="radio" name="sex" value="woman">
         <input type="radio" name="sex" value="futa">
      </form>
   </body>
   <script>
      //获取输入框的值
      let username = document.getElementById('username');
      username.value;
      //修改
      username.value = '哈哈';
   </script>
</html>

输入框直接用其属性即可操作(value默认为其输入框的值)

单选框/多选框

通过其属性checked来判断是否被选中

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body>
      <form action="#">
         <span>用户名 :</span><input type="text" id="username">
         <input type="radio" name="sex" value="man">
         <input type="radio" name="sex" value="woman">
         <input type="radio" name="sex" value="futa">
      </form>
   </body>
   <script>
      //获取每个radio节点
      let radio1 = document.getElementsByTagName('form')[0].children[2];
      let radio2 = document.getElementsByTagName('form')[0].children[3];
      let radio3 = document.getElementsByTagName('form')[0].children[4];

   </script>
</html>

radio1.checked
> false
radio2.checked
> true

10.2 表单提交和md5加密

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="js/jquery.md5.js"></script>
   </head>
   <body>
      <form action="#" method="post" onsubmit="return check()">
         <span>用户名 :</span><input type="text" id="username" name="username">
         <span>密码 :</span><input type="text" id="password" name="password">
         <input type="submit">
      </form>
   </body>
   <script>
      function check(){
         let username = document.getElementById('username');
         let password = document.getElementById('password');
          //加密
         password.value = md5(password.value);
         return true;
      }
   </script>
</html>

onsubmit事件 : 点击submit按钮后触发

11 jQuery

11.1 jQuery的引入

方法一

用cdn引入(网络上的资源)

<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

方法二

直接下载再引入

<script src="js/jquery-3.3.1.js"></script>

11.2 基本使用

其核心公式为 $('selecter').action(function(){})

文档 : https://jquery.cuishifeng.cn/attributeEquals.html

例:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="js/jquery-3.3.1.js"></script>
   </head>
   <body>
      <a href="#" id="helleJquery">hello</a>
   </body>
   <script>
      //绑定一个点击事件
      $('#helleJquery').click(function (){
         alert("hello JQuery");
      });
   </script>
</html>

11.3 选择器

按照公式$('selecter').action(function(){}),selecter为选择器

例如属性选择器

$('a[id=helleJquery]').click(function (){
   alert("hello JQuery");
});

标签选择器等等

//绑定一个点击事件
$('a').click(function (){
   alert("hello JQuery");
});

和css完全等价,css怎么写,这个外面加个''或者""即可

11.4 事件

详情见 https://jquery.cuishifeng.cn/attributeEquals.html

页面加载事件

$(document).ready(function(){
  // 在这里写你的代码...
});

可以简写为

$(function() {
  // 你可以在这里继续使用$作为别名...
});

鼠标移动事件

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="js/jquery-3.3.1.js"></script>
      <style>
         #div{
            height: 500px;
            width: 500px;
            border: 1px solid red;
            text-align: center;
            line-height: 500px;
            margin: 0;
            padding: 0;
         }
      </style>
   </head>
   <body>
      <span id="span"></span>
      <div id="div">鼠标移动触发事件</div>
   </body>
   <script>
      $(function (){
         //传入一个参数,可以得到其鼠标位置
         $('#div').mousemove(function (e){
            $('#span').text('x:'+e.pageX+'y:'+e.pageY);
         });
      });
   </script>
</html>

11.5 操作DOM元素

1.一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上,即就算获得一个数组,也可以作用于数组的每个元素上

2.jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。

如$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

改变或者得到文本

$('#span').text();//得到文本
$('#span').text('hello');//覆盖文本
$('#span').html(); //得到文本
$('#span').html('hello'); //覆盖文本,不过可以解析里面的标签

增添css

$("p").css({ "color": "#ff0011", "background": "blue" });
//也可以这样链式编程
$("p").css("color","#ff0011").css("background","blue");

动态增加类名

var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

显示和隐藏DOM

方法一 : 设置css中的display : none

方法二 :

$('#span').hide();//显示
$('#span').show();//隐藏

获取DOM信息

jQuery可以直接获得BOM对象

// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效

设置DOM节点的属性

attr(),获得或者设置属性

prop(),和attr()用法相似,但有区别,如

var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true

removeAttr()删除一个属性

// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined

操作表单

val(),得到或者设置表单value属性

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="js/jquery-3.3.1.js"></script>
   </head>
   <body>
      <form action="#">
         <input type="text" id="input1">
      </form>
   </body>
   <script>
      $(function (){
         $('#input1').val('hello');

      });
   </script>
</html>

追加节点

$('#span').append('<strong>hello</strong>');

append()还可以传入原始的DOM对象，jQuery对象和函数对象：

// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象:
ul.append($('#scheme'));

// 添加函数对象:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

删除节点

要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery对象包含若干DOM节点，实际上可以一次删除多个DOM节点：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="js/jquery-3.3.1.js"></script>
   </head>
   <body>
      <form action="#">
         <input type="text" id="input1">
      </form>
   </body>
   <script>
      $(function (){
         $('#input1').remove();
      });
   </script>
</html>


这篇关于javascript基本使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程