详解JavaScript

标签：function JavaScript console log 元素 详解 var 函数

目录

 

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函数可以返回变量的数据类型:

<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

 

 

 

 

 

 

 

 

 

 

代码示例：

<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 代码，即在 ⽂档加载完成后才可以对 ⻚⾯进⾏操作。
如果在⽂档没有完全加载之前就运⾏函数，操作可能失败 。

代码示例：

<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<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>

 

标签：function,JavaScript,console,log,元素,详解,var,函数
From： https://blog.csdn.net/wmh_1234567/article/details/141728723