JS输出、获取元素,变量,事件组成,流程控制,对象,函数

简介: JS输出、获取元素,变量,事件组成,流程控制,对象,函数

1.JS输出、获取元素

输出数据

  • 输入框:prompt()------取过来的值为字符型;
  • 弹出警告框:alert();
  • 将内容写到 HTML 文档中: document.write()方法 ;
  • 写入到浏览器的控制台: console.log() ;
  • 将内容写入html中: innerHTML、innerText;

innerText与innerHTML两个属性的区别:

同:

都是可读写的,可以获取元素里面的内容;

异:

innerText不能识别Html标签 会去除空格和换行;

InnerHTML能识别html标签

即div.innerHTML='<strong>今天是</strong>2019'----其中“今天是”将会变粗

且保留空格和换行;

获取元素

  • 通过 id 获得: document.getElementById()-------id是大小写敏感的字符串
<p id="demo"><p>
 document.getElementById('demo').innerHTML='内容';
  • 通过标签名获得:getElementTagName()方法;
  • 通过类名获得:getElementByClassName()----获得某些元素集合
<div class="fly">倾听</div>
<div class="fly">蜻蜓</div>
var x=document.getElementByClassName('fly');
console.log(x);

两个div中的内容都将输出

  • 返回指定选择器的第一个元素-----querySelector 里面选择器需要加符号 .fly #demo li
<div class="fly">倾听</div>
<div class="fly">蜻蜓</div>
var x=document.getquerySelector('.fly');
console.log(x);

将只得到第一个div中的内容

-返回指定选择器的所有元素集合-----querySelectorAll

<div class="fly">倾听</div>
<div class="fly">蜻蜓</div>
var x=document.getquerySelectorAll('.fly');
console.log(x);

将得到两个div中的内容

2.JS变量

变量名:

变量必须以字母开头

变量也能以 $ 和 _ 符号开头

变量名称对大小写敏感(y 和 Y 是不同的变量)

全局变量:函数外的变量,作用域为全局,即任何地方都可访问;

局部变量:函数内部变量,只可在函数内部被访问;

声明(创建)变量:使用 var关键字

var x;

给变量赋值:

x='demo';

var x='demo';

let关键字:只在 let 命令所在的代码块 {} 内有效----作用域只在循环体内,循环体外的变量不受影响

<script>
var  x = 10;
// 这里输出 x 为 10
{  
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10
document.getElementById("demo").innerHTML = x;
结果为 10
</script>

const关键字:声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改

(定义了一个常量引用一个值,用 const 定义的对象或者数组,是可变的)


变量提升:

var 关键字定义的变量可以在使用后声明,也就是变量可以先使用再声明

let 关键字定义的变量则不可以在使用后声明,也就是变量需要先声明再使用

const声明的常量必须初始化

重置变量

使用 var 关键字声明的变量在任何地方都可以修改;

在相同的作用域或块级作用域中,不能使用 const 关键字来重置 var 和 let关键字声明的变量;

在相同的作用域或块级作用域中,不能使用 const 关键字来重置 const 关键字声明的变量;

const 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的

3.JS对象

对象:带有属性和方法的特殊数据类型

对象的创建:

(1)var x=new 对象名;等价于x=new 对象名;

(2)以字面量来创建对象:{name1:valu1,name2:valu2}

如:person={age=“50”,color="blue};

(3)构造函数来创建对象:

function 构造函数名(){

this.属性=值;

this.方法=function(){}

}

不需要return 就可以返回结果

对象的调用:

(1)对象里面的属性调用:对象.属性名-----”小点可以理解为的“

(2)另一种调用:对象[‘属性名’],方括号里面的属性必须加引号

(3)对象里面调用方法:对象.方法名()------方法名后面一定要加括号

(4)调用构造函数 必须使用 new

如果 new 了函数内的 this 会指向当前这个 person 并且就算函数内部不 return 也会返回一个对象。

如果不 new 的话函数内的 this 指向的是 window。

对象属性的调用:对象名.属性名

var small={
     name:'小小',
     age:'7',
     goodBye:function(){
           console.log('good');
     }
}

属性或者方法采用: 属性名: 属性值

多个属性之间用逗号隔开

对象方法的调用:对象名.方法名()

small.goodBye();

prototype(原型对象):增加属性或方法

即:构造函数名.prototype.新属性或者新方法



4.JS函数

函数步骤:1.声明 2.调用

执行过程:先调用后声明,将实参传给形参,函数结果应该给调用者

如果实参多于形参,取到形参个数;反之则输出undefined;

函数的调用

  • 函数名()
  • 使用方法被调用


使用构造函数被调用(创建一个新的对象)

箭头函数

(参数1,参数2,参数3)=>{函数声明}

(参数1,参数2,参数3)=>表达式(单一)

相当于 :(参数1,参数2,参数3)=>{return 表达式;}

隐式函数:在函数中调用的参数就是隐式函数;

call()和apply()---------两者第一个参数必须是对象本身

区别:apply()将多个参数结合为一个数组传入;

call()直接作为call的参数传入;


函数返回值return:

(1)return后面的代码不会被执行;

(2)return只能返回一个值------可以用数组或者对象等返回多个值

5.JS事件组成

事件组成:

(1)事件源—事件被触发的对象 如:按钮

var btn=document.getElementById(‘btn’);

(2)事件类型----如何触发什么事件 如:鼠标点击(onclick)还是鼠标移动

(3)事件处理程序—通过一个函数赋值的方式 完成如:

btn.οnclick=function(){ }

6.流程控制:顺序、条件语句、循环语句

顺序:根据先后来流程执行

条件语句:if语句、else语句、if else if语句、switch语句、三元运算符

if语句:

条件成立执行代码,否则什么也不做
if(条件表达式){
  条件成立执行的代码语句
}

else语句:

if(条件表达式){
   执行语句1
}else{
   执行语句2
}
如果表达式为真则执行语句1,假则为语句2

if else if语句

switch语句:


将表达式与value相匹配,如匹配则执行相应语句,如均不匹配则执行最后的语句


三元运算符:

条件表达式 ? 执行语句1:执行语句2

如果条件表达式为真则执行1,如果为假反之

循环语句:for循环,while循环,do while循环,for in循环

for循环:循环代码块一定的次数

while循环:在指定条件为真时循环执行代码块

do while循环:至少执行一次循环,若符合条件则继续执行

for in循环:对象属性将全部输出


相关文章
|
6月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
198 56
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
155 19
|
6月前
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
99 15
|
6月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
7月前
|
JavaScript 前端开发 开发者
JavaScript基础——JavaScript变量名称命名规范
JavaScript变量命名规范是编写高质量代码的重要部分。通过遵循基本规则、使用常见命名约定并应用最佳实践,可以提高代码的可读性和可维护性。希望本文能帮助开发者在日常编程中更好地理解和应用JavaScript变量命名规范,从而编写出更清晰、更可靠的代码。
363 11
|
8月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
167 32
|
7月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
9月前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
157 11

热门文章

最新文章