JavaScript和JQuery

JavaScript

JS中函数定义方式

JS中函数的定义方式有两种,分别是function 函数名(形参列表){#}以及var 变量名 = function(形参列表){#}

代码示例如下:

//基于方式(1)定义函数 打印指定两个参数之间是3的倍数的元素个数
    function printCount(a, b) {
        var count = 0;
        //在函数中虽然不明确a和b的实际类型(按照自己的预期类型编写)
        for (var i = a; i <= b; i++) {
            if (i % 3 === 0) {
                count++;
            }
        }
        console.log(a + "到" + b + "之间3的倍数的个数是:" + count + "个!")
    }

    //调用和Java一致 方法名(实际参数);
    printCount(1, 100);

    //基于方式(2)定义函数 返回大于参数的最小偶数
    var getMax = function (p) {
        return p % 2 === 0 ? p + 2 : p + 1;
    }
    console.log(getMax(10));
    console.log(getMax(11));

JS中Array对象定义方式

也是有两种定义的格式,分别是var 数组名 = new Array(元素1,元素2,…)以及var 数组名 = [元素1,元素2,…]

代码示例如下:

//var 数组名 = new Array(元素列表);
    var nameArray = new Array("张二狗", "李狗蛋", "刘铁柱");

    //var 数组名 = [元素列表];
    var ageArray = [22, 23, 22, 21];

    //可以基于数组名.length获取数组中元素个数
    console.log("nameArray中的元素个数是:" + nameArray.length);

    //可以基于forEach方法传递消费元素逻辑进行遍历
    nameArray.forEach((value, index) => {
        //value就是每次遍历到的元素,index就是本次元素的索引
        console.log(index + " 索引的元素是 " + value);
    });

    //可以基于push方法添加多个元素
    nameArray.push("王小花", "张美丽");
    for (var i = 0; i < nameArray.length; i++) {
        console.log(i + "索引的元素是" + nameArray[i]);
    }

    //可以基于splice方法删除数组元素 传递一个参数(从指定索引开始全部删除) 传递两个参数(从指定索引开始删除指定个)
    nameArray.splice(2);
    console.log(nameArray);

JS中String对象的定义方式

也有两种定义的方式,分别是var 变量名 = new String(字符串)以及var 变量名 = String(字符串)

代码示例如下:

//声明String对象有new String("字符串") / 字符串常量赋值
    var name1 = new String("张二狗");
    var name2 = new String(" 李狗蛋  ");
    var name3 = String("刘铁柱");

    //准备一个数组,将名称保存到数组中 打印每一个名称的姓氏和名字 (张)(二狗)
    var nameArray = [name1, name2, name3];
    nameArray.forEach(value => {
        //去除元素中的空格 打印名称的第一个字(姓氏)
        let name = value.trim();
        let firstName = name.charAt(0);
        let lastName = name.substring(1);
        console.log("这个人的形式为 : " + firstName + " 名字是 : " + lastName);
    });

JS中自定义对象的定义方式

与java中自定义对象的形式不同,相比java中更加简单

代码示例如下:

var weather = {
        location: "北京市",
        temperature: 24,
        info: "多云 东北风2级",
        airQuality: "39 优",
        go: function (temperature) {
            if (temperature >= 0 && temperature <= 16) {
                console.log("这个天气适合在家吃火锅,吃完了睡觉!");
            } else if (temperature >= 17 && temperature <= 26) {
                console.log("这个天气适合出去吃火锅,吃完了回家睡觉!");
            } else if (temperature < 0 || temperature >= 27) {
                console.log("这个天气直接睡觉!");
            }
        }
    }

    //对象可以基于 => 对象名.属性名 来获取属性或者给属性赋值
    console.log("今天" + weather.location + "的温度是:" + weather.temperature);
    weather.go(10);

JS中JSON的使用方式

JSON可以理解为一个集合,可以存放数组,键值对,表示一一对应的关系

代码示例如下:

//基于JSON表示一个对象的信息
    var userJSON = '{"name":"张二狗","age":23,"girlfriend":null,"married":false,"phone":{"brand":"小米","price":4999}}';

    //基于JSON表示一个数组的信息
    var numberJSON = '[100,200,300]';

    //实际的JSON可以基于以上两种方式互相嵌套 对象中有数组 / 数组有对象 / 对象中有对象 / 数组中有数组 谨记:KEY一定是一个字符串 / 数组元素没有名字
    //基于JSON表示一个对象的信息
    var userJSON2 = '{"name":"张二狗","age":23,"girlfriend":null,"married":false,"phone":{"brand":"小米","price":4999},"hobbies":["唱","跳","Rap","篮球"]}';

JS中JSON的解析方式

可以将JSON字符串转换成JS对象,也可以把JS对象转换成JSON字符串

代码示例如下:

//方案:JSON转换为Js对象
    var userJSON = '{"name":"张二狗","age":23,"girlfriend":null,"married":false,"phone":{"brand":"小米","price":4999}}';
    //假如说userJSON就是后台向前台响应的数据(接收完毕) 目标:获取JSON字符串中的内容 将JSON字符串转换为一个JavaScript对象
    let user = JSON.parse(userJSON);
    console.log("用户名 : " + user.name);
    console.log("年龄 : " + user.age);
    console.log("女朋友 : " + user.girlfriend);
    console.log("是否结婚 : " + user.married);
    console.log("手机品牌 : " + user.phone.brand);
    console.log("手机价格 : " + user.phone.price);

    //方案:Js对象转换为JSON
    var weather = {
        location: "北京市",
        temperature: 24,
        info: "多云 东北风2级",
        airQuality: "39 优"
    }
    //将weather中的数据发送给后台 将Js对象基于JavaScript提供的功能转换为JSON字符串
    let weatherJSON = JSON.stringify(weather);
    console.log(weatherJSON);

JS的BOM编程-window对象

调用window对象中的一些方法,实现页面交互

代码示例如下:

//window核心功能:获取其他的BOM对象 window.BOM对象名称 => 省略 window.可以省略
    let l = window.location; //获取地址栏对象
    let h = window.history; //获取历史记录对象
    console.log(l);
    console.log(h);
    //window核心功能:弹框
    window.alert("本网站未满18岁禁止访问"); //警告框(点确定) 没有返回值

    let flag = window.confirm("您是否已满18岁?"); //确认框(点确认/点取消) 可以基于接收方法的返回值明确点击的内容
    console.log(flag);

    let info = window.prompt("您已满18岁,请校验 1 + 1 = ?"); //数据收集框(输入信息点确定/点取消) 可以基于接收方法的返回值明确输入的内容
    console.log(info);

    //window核心功能:定时器 声明一个每隔指定毫秒值自动执行的函数 / 声明一个指定时间后执行一次的函数
    window.setTimeout(function () {
        console.log("window的一次性定时器执行了!");
    }, 2000); //一次性定时器

    window.setInterval(function () {
        console.log("window的循环定时器执行了!");
    },100); //循环定时器

JS的BOM编程-location对象

基于location对象,可以修改地址栏中的地址

代码示例如下:

//location对象可以修改地址栏的地址(自动发起访问) location:href
window.alert("本网站未满18岁禁止访问");
let flag = window.confirm("您是否年满18岁?");
if (flag) {
    let result = window.prompt("验证您是否年满18岁,请答题:1+1在什么情况等于3?");
    if (result === "算错的情况下") {
        window.alert("2秒后即将跳转到刺激的网站!");
        window.setTimeout(function () {
            window.location.href = "https://www.jiaoyumao.com/gaozhong/shuxue/755195.html";
        }, 2000);
    }
} else {
    window.alert("2秒后即将跳转到符合您审美观念的刺激新网站!");
    window.setTimeout(function () {
        window.location.href = "https://www.ixigua.com/6785717598664262151?utm_source=baidu_lvideo";
    }, 2000)
}

JS的DOM编程-获取元素的方式

可以通过DOM编程获取到页面中的元素,进而对这些元素进行操作

代码示例如下:

//想要获取页面中的表示对应元素的Element对象就需要基于表示整个文档的Document对象进行获取

//★1.基于元素的Id进行元素获取 特点:由于Id当前页唯一 所以返回的对象也是单独的对象
let divElement = document.getElementById("div_one");
console.log(divElement);

//2.基于元素的类型(标签名)进行元素获取 特点:可以返回指定的多个标签对象组成的数组 注意:即便只有一个标签元素也会封装到数组中
let divElements = document.getElementsByTagName("div");
console.log(divElements.length);
for (let i = 0; i < divElements.length; i++) {
    console.log(divElements[i]);
}

//3.基于元素的name值进行元素获取 特点:可以返回指定的多个name值相同的元素组成的数组
let inputElements = document.getElementsByName("username");
for (let i = 0; i < inputElements.length; i++) {
    console.log(inputElements[i]);
}

//4.基于元素的class值进行元素获取 特点:可以返回指定的多个class值相同的元素组成的数组
let clzElements = document.getElementsByClassName("clz");
for (let i = 0; i < clzElements.length; i++) {
    console.log(clzElements[i]);
}

对元素的具体操作代码示例如下:

//获取与修改元素的文本
let divElements = document.getElementsByTagName("div");
for (let i = 0; i < divElements.length; i++) {
    let divElement = divElements[i];
    let divText = divElement.innerHTML; //元素.innerHTML;放在=的右边(取值)
    console.log(divText);
    divElement.innerHTML += "<span style='color: red'>very good</span>"; //元素.innerHTML放在=的左边(修改)
}

//获取与修改元素的属性
let imgElement = document.getElementById("light");
let imgElementSrc = imgElement.getAttribute("src"); //var 变量名 = 元素.getAttribute(属性名); 获取元素属性
console.log(imgElementSrc);
imgElement.setAttribute("src","./img/on.gif");

//补:单选/多选是否被选中 元素.checked = true(勾选) / false(不勾选)
let checkboxElements = document.getElementsByName("hobby");
for (let i = 0; i < checkboxElements.length; i++) {
    let checkboxElement = checkboxElements[i];
    checkboxElement.checked = true;
}

//修改元素的样式
let spanElement = document.getElementById("span_one");
spanElement.style.color = "green";

以下代码基于动态绑定以及静态绑定对元素进行操作,其中静态绑定是可以在页面中通过F12看见代码中的方法的,而动态绑定不会有这种情况:

//基于动态绑定完成输入框聚焦变小写/离焦变大写
document.getElementById("info").onfocus = function (){
    //输入框(密码/文本) 元素.value 进行取值/赋值
    document.getElementById("info").value =
        document.getElementById("info").value.toLowerCase();
}
document.getElementById("info").onblur = function (){
    document.getElementById("info").value =
        document.getElementById("info").value.toUpperCase();
}

//基于动态绑定完成全选/反选
document.getElementById("btn_1").onclick = function () {
    let checkboxElements = document.getElementsByName("hobby");
    for (let i = 0; i < checkboxElements.length; i++) {
        checkboxElements[i].checked = true;
    }
}
document.getElementById("btn_2").onclick = function () {
    let checkboxElements = document.getElementsByName("hobby");
    for (let i = 0; i < checkboxElements.length; i++) {
        checkboxElements[i].checked = !checkboxElements[i].checked;
    }
}

//基于静态绑定完成点亮/熄灭功能
function turnOn() {
    document.getElementById("light")
        .setAttribute("src", "./img/on.gif");
}

function turnOff() {
    document.getElementById("light")
        .setAttribute("src", "./img/off.gif");
}

JQuery

选择元素的方式

分为三种方式,Id选择器,类选择器以及标签选择器

代码示例如下:

//1.$("选择器")返回的结果就是基于该选择器选择到的元素封装jQuery对象
let divOneElement = $("#div_one"); //Id选择器
console.log(divOneElement);

let clzElements = $(".clz"); //Class类选择器
console.log(clzElements);

let divElements = $("div"); //标签选择器
console.log(divElements);

事件绑定方式

直接基于选择器选定的内容进行操作

//给btn_1按钮绑定单击事件/双击事件
$("#btn_1").click(function () {
    window.alert("btn_1的单击事件触发了!");
}).mouseover(function () {
    window.alert("btn_1的鼠标移入事件触发了!");
});

DOM操作

相比于JS简化了获取元素的操作,也简化了调用方法的操作

代码示例如下:

$("#btn_1").click(function () {
    //基于jQuery去修改DOM元素的文本 获取到元素的jQuery对象调用html()方法,将修改后的文本作为参数传入。
    $("#div_one").html($("#div_one").html() + "<span style='color: red'>very good</span>");
    //基于jQuery去修改DOM元素的属性 获取到元素的jQuery对象调用attr(属性名,属性值)方法
    $("#light").attr("src", "./img/on.gif");
    //基于jQuery去修改DOM元素的样式 获取到元素的jQuery对象调用css(样式名,样式值)方法
    $("#btn_1").css("color", "blue");
});