JavaScript

Moon⁡

于 2024-08-06 00:32:07 发布

阅读量617

点赞数 9

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_73620971/article/details/140894773

版权

【JS引入方式案例】

1、直接嵌入至 html 元素内部：

        <input type="button" value="按钮" οnclick="alert('hello')">

2、定义 <script> 标签，写至 script 标签中：

        <script>alert("hello")</script>

3、定义 <script> 标签，通过 src 引入外部 js 文件：

        <script src="hello.js"></script>

一、基础语法

1.1 变量

JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值，并且变量的类型也可以发生改变。

关键字	说明
var	声明变量的关键字，作用域在该语句的函数内
les	声明变量的关键字，作用域在该语句所在的代码块内
const	声明常量的，声明后不能修改

【案例】

    var name = 'moon';
    les name = 'moon';
    const name = 'moon';
    name = 10;

1.2 数据类型

数据类型	说明
number	数字，不区分整数和小数
string	字符串，需要使用引号，单双引号均可
boolean	布尔类型，true真、false假
undefined	表示变量未初始化，只有唯一的值 undefined

使用 typeof 函数可以返回变量的数据类型：

    <script>
        var a = 10;
        console.log(typeof a); //number

        var b = 'hello';
        console.log(typeof b); //string

        var c = true;
        console.log(typeof c); //boolean

        var d;
        console.log(typeof d); //undefined
        
        var e = null;
        console.log(typeof e); //null
    </script>

二、JavaScript对象

2.1 数组

【数组定义】

1、使用 new 关键字创建数组。

var arr = new Array();

2、使用字面量方式创建数组。

var arr = [];

var arr = [1, 2, 'hello', true];

注: JavaScript 的数组不要求元素是相同类型。

【数组操作】

1、读：通过下标访问数组元素。

2、增：通过下标新增，或使用 push 追加元素。

3、改：通过下标修改。

4、删：使用 splice 方法删除元素。

【案例】

    <script>
        var arr = [1, 2, 'hello', true];

        //读
        console.log(arr[0]); //1

        //增
        arr[4] = "moon";
        console.log(arr[4]); //moon
        console.log(arr.length); //5

        //改
        arr[3] = "update";
        console.log(arr[3]); //update

        //删
        arr.splice(4, 1); //表示从下标 4 开始，删 1 个元素
        console.log(arr[4]); //undefined
        console.log(arr.length); //4
    </script>

2.2 函数

2.2.1 语法格式

函数定义：

function 函数名(形参列表) {

函数体

return 返回值;

}

函数调用：

函数名(实参列表) //不考虑返回值

返回值 = 函数名(实参列表) //考虑返回值

【案例】

//函数定义
function hello() {
    console.log("hello")
}
//函数调用
hello();

2.2.2 函数表达式

【案例】

var add = function() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

console.log(add(10,20)); //30

console.log(typeof add); //function

注：在 JavaScript 中，arguments 是一个类数组对象，是自动创建的，无需手动声明。

2.2.3 对象

在 JavaScript 中，字符串、数组、函数都是对象。每个对象包含若干的属性和方法。

属性：事物的特征。

方法：事物的行为。

【访问或添加对象属性和方法】

1、使用点号 "." 操作符。

2、使用方括号 "[]" 操作符。

【创建对象的方法】

1、使用字面量创建对象。

var a = {}; //空对象

var person = {
    name: 'moon',
    age: 18,
    sayHello: function() {
        console.log("hello");
    },
};

console.log(person.name); //moon
console.log(person['age']); //18
person.sayHello(); //hello

2、使用 new Object 创建对象。

var person = new Object();
person.name = "moon";
person.age = 18;
person.sayHello = function() {
    console.log("hello");
}

console.log(person.name); //moon
console.log(person['age']); //18
person.sayHello(); //hello

3、使用构造函数创建对象。

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function () {
        console.log("hello");
    }
}

var obj = new Person("moon", 18);

console.log(obj.name); //moon
console.log(obj["age"]); //18
obj.sayHello(); //hello

三、JQuery

3.1 引入依赖

使用 JQuery 需要先引入对应的库，可以在 JQuery 官网获得所需要的 JQuery。

只需在 HTML 文档中加入如下代码，即可引入 JQuery。(推荐将 js 文件下载至项目中并修改对应的 src)

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

3.2 JQuery语法

JQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

【基础语法】

$(selector).action()

$() 是 JQuery 提供的一个全局函数，用于选择和操作 HTML 元素。
selector 表示选择器，用于 "选定" HTML 元素。
action 表示操作，执行对 HTML 元素的操作。

JQuery 代码通常写在 document ready 函数中。(document 表示整个页面)

这是为了防止在文档完全加载之前运行 JQuery 代码，即在文档完全加载完成后，才可以对页面进行操作。若文档没有完全加载就运行函数，可能导致操作失败。

【document ready函数】

$(document).ready(function() {
    //jQuery functions   
});

【简介写法】

$(function() {
    //jQuery functions
});

【案例】

给按钮添加了 click 事件，点击后按钮元素消失。

    <button id="hide">点击隐藏</button>
    <script>
        $(document).ready(function () {
            $("#hide").click(function () {
                $(this).hide();
            });
        });
    </script>

3.3 JQuery选择器

通过 JQuery 选择器来选择 HTML 元素，并对其进行操作。JQuery 中所有选择器格式都为：$(...)。

选择器	说明
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p")	选取所有 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("p:last")	选取最后一个 <p> 元素
$(".e")	选取所有 class="e" 的元素
$("#e")	选取 id="e" 的元素
$(".a .b")	选取所有 class="a" 且 class="b" 的元素
$("p .e")	选取 class 为 e 的 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$(":input")	选取所有 <input> 元素
$(":text")	选取所有 type="text" 的 <input> 元素
$(":checkbox")	选取所有 type="checkbox" 的 <input> 元素

3.4 JQuery事件

事件由三部分组成：

1、事件源：哪个元素触发的。

2、事件类型：是点击、选中还是修改。

3、事件处理程序：进一步如何处理，往往是一个回调函数。

【案例】

某个元素的点击事件：

$("p").click(function() {
    //点击事件发生后的执行代码
});

【常见事件】

事件	代码
页面完成加载事件	$(document).ready(function)
点击事件	$(selector).click(function)
双击事件	$(selector).dblclick(function)
元素的值发生改变	$(selector).change(function)
鼠标悬停事件	$(selector).mouseover(function)

3.5 操作元素

3.5.1 获取/设置元素内容

JQuery方法	说明
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容 (包括 HTML 标签)
val()	设置或返回表单字段的值

这三个方法，既可以获取元素的内容，又可以设置元素的内容。
有参数时，就可以进行元素的值设置；没有参数时，就进行元素内容的获取。

获取元素内容：

    <div id="elem">你好</div>
    <input type="text" value="hello">

    <script>
        $(function() {
            var html = $("#elem").html();
            console.log("html内容为:"+html);

            var text = $("#elem").text();
            console.log("text内容为:"+text);

            var inputValue = $(":input").val();
            console.log("input内容为:"+inputValue);
        })
    </script>

设置元素内容：

    <div id="elem">你好</div>
    <div id="elem1">nihao</div>
    <input type="text" value="hello">

    <script>
        $(function () {
            $("#elem").html("<h1>设置html</h1>");
            $("#elem1").text("<h1>设置text</h1>");
            $(":input").val("设置input");
        });
    </script>

3.5.2 获取/设置元素属性

JQuery 中使用 attr() 方法获取/设置属性值。

获取元素属性：

    <p><a href="https://www.baidu.com" id="baidu"></a></p>

    <script>
        $(function() {
            var href = $("p a").attr("href");
            console.log(href);
        })
    </script>

设置元素属性：

    <p><a href="https://www.baidu.com" id="baidu"></a></p>

    <script>
        $(function() {
            $("p a").attr("href","https://www.csdn.net");
            console.log($("p a").attr("href"));
        });
    </script>

3.5.3 获取/设置css属性

css() 方法获取/设置被选元素的一个或多个样式属性。

获取元素css属性：

    <div style="color: red;">你好</div>

    <script>
        $(function() {
            var css = $("div").css("color");
            console.log(css);
        });
    </script>

设置元素css属性：

    <div style="color: red;">你好</div>
    
    <script>
        $(function() {
            $("div").css("color", "purple");
            console.log($("div").css("color"));
        });
    </script>

3.5.4 添加元素

append()：在被选元素的结尾插入内容。
prepend()：在被选元素的开头插入内容。
after()：在被选元素之后插入内容。
before()：在被选元素之前插入内容。

    <ol>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ol>

    <script>
        $(function() {
            $("ol").append("<li>item4</li>");
            $("ol").prepend("<li>item0</li>");

            $("ol").before("head");
            $("ol").after("tail");
        });
    </script>

3.5.5 删除元素

remove()：删除被选元素 (及其子元素)。
empty()：删除被选元素的子元素。

删除被选元素：

    <ol>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ol>
    <button>删除ol元素</button>

    <script>
        $(function() {
            $("button").click(function() {
                $("ol").remove();
            });
        });
    </script>

删除被选元素的子元素：

    <ol>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ol>
    <button>删除ol元素的子元素</button>

    <script>
        $(function() {
            $("button").click(function() {
                $("ol").empty();
            });
        });
    </script>

总结

1、JavaScript 中变量可以存放不同类型的值，并且变量的类型也可以发生改变。

2、使用 typeof 函数可以返回变量的数据类型。

3、JS 的数组不要求元素是相同类型。

4、函数中若实参个数比形参个数少, 则此时多出来的形参值为 undefined。

5、arguments 是一个类数组对象，是自动创建的，无需手动声明。

6、使用点号 "." 或方括号 "[]" 访问或添加对象属性和方法。

Moon⁡

关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

1、JavaScript 中变量可以存放不同类型的值，并且变量的类型也可以发生改变。2、使用 typeof 函数可以返回变量的数据类型。3、JS 的数组不要求元素是相同类型。4、函数中若实参个数比形参个数少, 则此时多出来的形参值为 undefined。5、arguments 是一个类数组对象，是自动创建的，无需手动声明。6、使用点号 "." 或方括号 "[]" 访问或添加对象属性和方法。
复制链接

扫一扫