JavaScript学习_20220703

1、函数

 （1）定义函数

不存在参数如何规避

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

存在多个参数如何规避

rest：ES6引入的新特性，获取除了已经定义的参数之外的所有参数  ...   

var qas = function (a,b,...rest) {
    console.log('a=>'+a);
    console.log('b=>'+b);
    console.log(rest);
}

qas(1,6) //a=>1  b=>6 []
qas(1,6,4,23,8)// a=>1 b=>6  (3) [4, 23, 8]

rest参数只能放在最后，必须用...标识 

（2）局部作用域let

function ab() {
    for (var i = 0; i < 10; i++) {
       console.log(i); // 0 1 2 3 4 5 6 7 8 9
    }
    console.log(i+1); //11
}

ES6 let关键字，解决局部作用域冲突的问题

function ab() {
    for (let i = 0; i < 10; i++) {
       console.log(i); // 0 1 2 3 4 5 6 7 8 9
    }
    console.log(i+1); //Uncaught ReferenceError
}

（3）常量关键字const

const PI = 3.13;
console.log(PI*2);
PI=2;   //定义失败

2. 方法

方法就是把函数放在对象的里面，对象（属性和方法）

var Student ={
        name: '张三',
        birthday: 1999,
        age: function () {
            var now = new Date().getFullYear();
            return now - this.birthday;
        }
    }

Student.name   //张三
Student.age()  //23  方法，一定要带()

//拆开

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birthday;
}
var Student ={
    name: '张三',
    birthday: 1999,
    age: getAge
}

Student.name   //张三
Student.age()  //23  方法，一定要带()
getAge() //NaN  

在Java中this是无法指向的，默认指向调用它的那个对象。
而在JavaScript中可以控制this的指向（apply）

getAge.apply(Student,[]);//this指向了Student对象，参数为空   23

3. 对象

JSON一种轻量级的数据交换格式。

JavaScript中任何js支持的类型都可以用JSON表示

• 对象、map都用 {}；
• 数组、list都用 []；
• 所有的键值对都用 key:value

<   script >
        var user={
            name:"张三",
            age:21,
            sex:"男"
        }
        var json = JSON.stringify(user);    //对象转化为json字符串
        var jsonuser = JSON.parse('{"name":"张三","age":21,"sex":"男"}');  //json字符串转化为对象

面向对象编程

（1）定义一个类，属性和方法

class Student {
    constructor(va) {
        this.va = va;
    }
    Happy( ){
        alert(this.va+" very happy!");
    }
}
var a = new Student("张三");
var b = new Student("李四");
//console
a  //Student {va: '张三'}
a.Happy() //张三 very happy!

（2）继承

class pupil extends Student{
    constructor(name,grade) {
        super(name);
        this.name = name;
        this.grade = grade;
    }
   Happy() {
       super.Happy();
   }
   Grade(){
        alert("我是小学生");
   }
}
var pu = new pupil("小红",2);

4. 操作BOM对象

BOM：浏览器对象模型

location：代表当前页面的url信息

1. host:"www.baidu.com"  //主机
2. href:"http://www.baidu.com/" //当前指向的位置
3. protocol:"https:"  //协议
4. reload:f reload()  //刷新网页
5.location.assign('https://weibo.com/')  //设置新的地址

 document：代表当前的页面。

获取dom节点

<div id ="fa">
    <h1>这是一个标题</h1>
    <p id="ax">P1</p>
    <p class='ew' id="bx">p2</p>
</div>
<script>
    var h = document.getElementsByTagName('h1');
    var l = document.getElementById('ax');
    var x = document.getElementById('bx');
    var q = document.getElementsByClassName('ew');
    var fa = document.getElementById('fa');
    var ch = fa.children; //获取父节点下所有的子节点
</script>

更新节点

l.innerText="原生代码"; //修改文本的值
x.innerHTML='<strong>我变粗了</strong>'; //可以解析html文本标签
l.style.color = 'red'; //操作js 

删除节点

var self = document.getElementById('ax');
var father = self.parentElement;
father.removeChild(self);
//
father.removeChild(father.children[0]);

插入节点

追加：x.appendChild(y);

p id = 'i'>java</p>
<div id ="fa">
    <h1>这是一个标题</h1>
    <p id="ax">P1</p>
    <p class='ew' id="bx">p2</p>
</div>
<script>
    var ui = document.getElementById('i');
    var fa = document.getElementById('fa');
    fa.appendChild(ui);
</script>

创建新节点

var sa = document.createElement('sa');
sa.id = 'sa';
sa.innerText='我是新来的';
fa.appendChild(sa);

创建一个标签节点（通过setAttribute()属性可以设置任意的值）

var myscript = document.createElement('Script');
myscript.setAttribute('type','text/javascript');
fa.appendChild(myscript);

插入 list.insertBefore(newNode,targetNode)；

5.操作表单（验证）

得到输入框的值：input_text.value

获取输入框的值：input_text.value='qwe'

md5加密

6.jQuery

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

引入jQuery

<script src="../lib/jquery-3.6.0.js"></script>

公式  ：$(selector).action() //$(选择器).事件

<div>
    <a href="" id="cl">点击</a>
</div>

<script>
    //选择器就是css中的选择器
    $('#cl').click(function () {
        alert("hello,jQuery!");
    })
</script>

//原生js
document.getElementsByTagName('div');
document.getElementById('id01');
document.getElementsByClassName('class01');
//jQuery 
$('div').click(); //标签选择器
$("#id01").click(); //id选择器
$('.class01').click();  //类选择器
//css中的选择器都可以使用
//  http://jquery.cuishifeng.cn/   查看选择器

 获取鼠标移动坐标

<!--获取鼠标当前的坐标-->
mouse:  <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>

 $("#id01").text()    //修改文本

$("#id01").html()    //修改html

 操作DOM

<ul id="test_ul">
    <li class="js">javascript</li>
    <li name = "python">python</li>
</ul>
<script>
    $('#test_ul li[name=python]').text(); //获取值
    $('#test_ul li[name=python]').text('C++'); //设置值
    $('#test_ul li[name=python]').css('color','red'); //操作css属性
    $('#test_ul li[name=python]').css({"color":"red","font-style":"oblique"});//多个CSS操作 
</script>
//$('#test_ul').html(); //节点操作
//$('#test_ul li[name=python]').show()//显示  hide()//显示  toggle()//显示和隐藏切换

 源码之家