目录

 

JavaScript

引入样式 

基础语法

变量

数据类型

 运算符

JavaScript对象

数组

数组定义

数组操作

函数

语法格式

关于参数个数

函数表达式

对象

JQuery

语法

 选择器

事件

常见的事件

操作元素

获取/设置元素内容 

获取/设置元素属性

获取/设置CSS属性

添加元素

删除元素

---

 

JavaScript

引入样式 

引入方式	语法描述	示例
行内样式	直接嵌⼊到 html 元素内部	<input type="button" value="点我⼀下" οnclick="alert('haha')">
内部样式	定义<script>标签，写到 script 标签中	<script> alert("haha"); </script>
外部样式	定义<script >标签，通过src属性引⼊外部js ⽂件	<script src="hello.js"></script>

 

 

 

 

 

 

3种引⼊⽅式对⽐:

1. 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤. 

2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的jS.

3. 外部样式，html和js实现了完全的分离, 企业开发常⽤⽅式.

基础语法

变量

关键字	解释	示例
var	早期JS中声明变量的关键字, 作⽤域在该语句的函数内	var name='zhangsan';
les	ES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块 内	les name = 'zhangsan';
const	声明常量的，声明后不能修改	const name = 'zhangsan';

 

 

 

 

注意事项:

1. JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态), ⽐如: 

var name='zhangsan';

var name=20;

随着程序的运⾏, 变量的类型可能会发⽣改变. (弱类型)

var a = 10; // 数字

a = "hehe"; // 字符串

数据类型

数据类型	描述
number	数字. 不区分整数和⼩数.
string	字符串类型. 字符串字⾯值需要使⽤引号引起来, 单引号双引号均可
boolean	布尔类型. true 真, false 假
undefined	表⽰变量未初始化. 只有唯⼀的值 undefined

 

 

 

 

 

使⽤typeof函数可以返回变量的数据类型:

<code><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>

 运算符

运算符类型	运算符
算术运算符	+ , - , * , / , %
⾃增⾃减运算符	++ , --
赋值运算符	= , += , -= , *= , /= , %=
⽐较运算符	< , > , <= , >= , != , !== == ⽐较相等(会进⾏隐式类型转换) === ⽐较相等(不会进⾏隐式类型转换)
逻辑运算符	&& , || , !
位运算符	& 按位与 | 按位或  ~ 按位取反  ^ 按位异或
移位运算符	<< 左移 >> 有符号右移(算术右移) >>> ⽆符号右移(逻辑右移）
三元运算符	条件表达式 ? true_value : false_value

 

 

 

 

 

 

 

 

 

 

代码示例：

<code><script>

var age = 20;

var age1 = "20";

var age2 = 20;

console.log(age == age1);//true, ⽐较值

console.log(age === age1);//false, 类型不⼀样

console.log(age == age2);//true, 值和类型都⼀样

</script>

JavaScript对象

数组

数组定义

创建数组有两种⽅式

1. 使⽤ new 关键字创建

// Array

的

A

要⼤写

var arr = new Array();

2. 使⽤字⾯量⽅式创建 [常⽤]

var arr = [];

var arr2 = [1, 2, 'haha', false];

//

数组中保存的内容称为

"

元素

注意: JS 的数组不要求元素是相同类型.

数组操作

1. 读: 使⽤下标的⽅式访问数组元素(从 0 开始)

2. 增: 通过下标新增, 或者使⽤ push 进⾏追加元素

3. 改: 通过下标修改

4. 删: 使⽤ splice ⽅法删除元素

代码示例 

<script>

var arr = [1, 2, 'haha', false];

//读取数组

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

//添加数组元素

arr[4] = "add"

console.log(arr[4]);//add

console.log(arr.length);//5, 获取数组的⻓度

//修改数组元素

arr[4] = "update"

console.log(arr[4]);//update

//删除数组元素

arr.splice(4,1);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除的元素

console.log(arr[4]);//undefined 元素已经删除, 如果元素不存在, 结果为undefined

console.log(arr.length);//4, 获取数组的⻓度

</script>

注意:

1. 如果下标超出范围读取元素, 则结果为 undefined

2. 不要给数组名直接赋值, 此时数组中的所有元素都没了

函数

语法格式

//

创建函数

/

函数声明

/

函数定义

function 函数名(形参列表) {

函数体

return 返回值;

}

//

函数调⽤

函数名(实参列表)

//

不考虑返回值

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

//

考虑返回值

函数定义并不会执⾏函数体内容, 必须要调⽤才会执⾏. 调⽤⼏次就会执⾏⼏次.

function hello() {

        console.log("hello");

}

//

如果不调⽤函数

,

则没有执⾏打印语句

hello();

调⽤函数的时候进⼊函数内部执⾏, 函数结束时回到调⽤位置继续执⾏. 可以借助调试器来观察.

函数的定义和调⽤的先后顺序没有要求. (这⼀点和变量不同, 变量必须先定义再使⽤)

//

调⽤函数

hello();

//

定义函数

function hello() {

        console.log("hello");

}

关于参数个数

实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配

1. 如果实参个数⽐形参个数多, 则多出的参数不参与函数运算

sum(10, 20, 30);

// 30

2.如果实参个数⽐形参个数少, 则此时多出来的形参值为 undefined

sum(10);

// NaN,

相当于

num2

为

undefined.

函数表达式

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(add(1, 2, 3, 4));

// 10

console.log(typeof add);

// function

此时形如 function() { } 这样的写法定义了⼀个匿名函数, 然后将这个匿名函数⽤⼀个变量来表示。

后⾯就可以通过这个 add 变量来调⽤函数了 。

对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象.

每个对象中包含若⼲的属性和⽅法.

• 属性: 事物的特征.

• ⽅法: 事物的⾏为.

JavaScript 的对象 和 Java 的对象概念上基本⼀致. 只是具体的语法表项形式差别较⼤.

1. 使⽤ 字⾯量 创建对象 [常⽤]

使⽤ { } 创建对象

var a = {}; // 创建了⼀个空的对象

var student = {

name: '蔡徐坤',

height: 175,

weight: 170,

sayHello: function() {

console.log("hello");

}

};

• 使⽤ { } 创建对象

• 属性和⽅法使⽤键值对的形式来组织.

• 键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆

• 键和值之间使⽤ : 分割.

• ⽅法的值是⼀个匿名函数.

使⽤对象的属性和⽅法

// 1.

使⽤

.

成员访问运算符来访问属性

`.`

可以理解成

"

的

"

console.log(student.name);

// 2.

使⽤

[ ]

访问属性

,

此时属性需要加上引号

console.log(student['height']);

// 3.

调⽤⽅法

,

别忘记加上

()

student.sayHello();

2.使⽤ new Object 创建对象

 

var student = new Object();

//

和创建数组类似

student.name = "蔡徐坤";

student.height = 175;

student['weight'] = 170;

student.sayHello = function () {

        console.log("hello");

}

console.log(student.name);

console.log(student['weight']);

student.sayHello();

注意, 使⽤ { } 创建的对象也可以随时使⽤ student.name = "蔡徐坤"; 这样的⽅式来新增属性.

3.使⽤ 构造函数 创建对象

function 构造函数名(形参) {

        this.属性 = 值;

        this.⽅法 = function...

}

var obj = new 构造函数名(实参);

注意:

• 在构造函数内部使⽤ this 关键字来表⽰当前正在构建的对象.

• 构造函数的函数名⾸字⺟⼀般是⼤写的.

• 构造函数的函数名可以是名词.

• 构造函数不需要 return

• 创建对象的时候必须使⽤ new 关键字.

JQuery

使⽤JQuery需要先引⼊对应的库

在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码:

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

其中， src 属性指明了JQuery库所在的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库提供的⼀个统⼀资源定位符,也可以使⽤其他公司提供的CDN地址。

如果需要使⽤其他版本的JQuery, 可以在官⽹进⾏下载 。

开发时, 建议把JQuery库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险.

下载⽅式:

1. 通过浏览器访问上述连接

2. 右键 -> 另存为.... 保存到本地, 放在项⽬中即可.

也可以从其他CDN上下载引⽤JQuery

⽐如:

 

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></scipt>

语法

jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作 。

$(selector).action()

• $() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.

• Selector 选择器, ⽤来"查询"和"查找" HTML 元素

• action 操作, 执⾏对元素的操作

JQuery 的代码通常都写在 document ready 函数中.

document：整个⽂档对象, ⼀个⻚⾯就是⼀个⽂档对象, 使⽤document表⽰.

这是为了防⽌⽂档在完全加载（就绪）之前运⾏ jQuery 代码，即在 ⽂档加载完成后才可以对 ⻚⾯进⾏操作。

如果在⽂档没有完全加载之前就运⾏函数，操作可能失败 。

代码示例：

<code><button type="button">点我消失</button>code>

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

<script>

$(document).ready(function(){

$('button').click(function(){

$(this).hide();

});

});

</script>

 选择器

我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作.

JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器.

jQuery 中所有选择器都以 $ 开头：$(）。

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p")	所有 <p> 元素
$("p:first")	选取第⼀个 <p> 元素
$("p:last")	最后⼀个 <p> 元素
$(".box")	所有 class="box" 的元素
$("#box")	id="box" 的元素
$(".intro .demo")	所有 class="intro" 且 class="demo" 的元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("ul li:first")	选取第⼀个 <ul> 元素的第⼀个 <li> 元素
$(":input")	所有 <input> 元素
$(":checkbox")	所有 type="text" 的 <input> 元素
$(":checkbox")	所有 type="checkbox" 的 <input> 元素

 

 

 

 

 

 

 

 

 

 

 

qqqq

事件

JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.

⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 操作都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽进⾏更复杂的交互操作. 

事件由三部分组成:

1. 事件源: 哪个元素触发的

2. 事件类型: 是点击, 选中, 还是修改?

3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数。

例如: 某个元素的点击事件:

 

$("p").click(function(){

        //动作发⽣后执⾏的代码

});

常见的事件

事件	代码
⽂档就绪事件(完成加载)	$(document).ready(function)
点击事件	$(selector).click(function)
双击事件	$(selector).dblclick(function)
元素的值发⽣改变	$(selector).change(function)
⿏标悬停事件	$(selector).mouseover(function)

 

 

 

 

 

操作元素

获取/设置元素内容 

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

 

 

 

 

这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容.

有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取.

代码示例

获取元素内容

<div id="test"><span>你好</span></div>

<input type="text" value="hello">

<script>

        $(document).ready(function () {

                var html = $("#test").html();

                console.log("html内容为:"+html);

                var text = $("#test").text();

                console.log("⽂本内容为:"+text);

                var inputVal = $("input").val();

                console.log(inputVal);

        });

</script>

设置元素内容

<div id="test"></div>

<div id="test2"></div>

<input type="text" value="">

<script>

        $(document).ready(function () {

                $("#test").html('<h1>设置html</h1>');

                $("#test2").text('<h1>设置text</h1>');

                $("input").val("设置内容");

        });

</script> ​​​​​​​ 

获取/设置元素属性

代码示例 

获取元素属性

<p><a href="https://www.baidu.com/index" id="bite">百度</a></p>

<script>

        $(function(){

                var href = $("p a").attr("href")

                console.log(href);

        });

</script>​​​​​​​ 

设置元素属性

<p><a href="https://www.baidu.com/index" id="bite">百度</a></p>

<script>

        $(function(){

                $("p a").attr("href","baidu.com")

                console.log($("p a").attr("href"));

        });

</script>

获取/设置CSS属性

css() ⽅法设置或返回被选元素的⼀个或多个样式属性。

代码示例

获取元素属性

 

<div style="font-size: 36px;">我是⼀个⽂本</div>

<script>

        $(function(){

                var fontSize = $("div").css("font-size");

                console.log(fontSize);

        });

</script>

设置元素属性

<div style="font-size: 36px;">我是⼀个⽂本</div>

<script>

        $(function(){

                $("div").css("font-size","24px");

        });

</script>

添加元素

添加 HTML 内容

1. append() : 在被选元素的结尾插⼊内容

2. prepend() : 在被选元素的开头插⼊内容

3. after() : 在被选元素之后插⼊内容

4. before() : 在被选元素之前插⼊内容

代码示例

<ol>

        <li>List item 1</li>

        <li>List item 2</li>

        <li>List item 3</li>

</ol>

<img src="pic/rose.jpg">

<script>

        $(function () {

                $("ol").append("<li>append</li>");

                $("ol").prepend("<li>prepend</li>");

                $("img").before("图⽚前插⼊");

                $("img").after("图⽚后插⼊");

        });

</script>

删除元素

删除元素和内容，⼀般使⽤以下两个 jQuery ⽅法：

1. remove() : 删除被选元素（及其⼦元素）

2. empty() : 删除被选元素的⼦元素 

代码示例1：

<div id="div1">我是⼀个div</div>

<button>删除 div 元素</button>

<script>

        $(function () {

                $('button').click(function(){

                        $('#div1').remove();

                });

        });

</script>

代码示例2：

<ol>

        <li>List item 1</li>

        <li>List item 2</li>

        <li>List item 3</li>

</ol>

<button>删除列表元素</button>

<script>

        $(function () {

                $('button').click(function(){

                        $('ol').empty();

                });

        });

</script>