前端-js基础

Posted whcp855

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端-js基础相关的知识,希望对你有一定的参考价值。

html三把利剑之一,浏览器具有解析js的能力

一、js基础

在HTML中可以将javascript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时,按照CSS规则解释,遇到Script标签时,按照JavaScript的语法规则解释。

引入JavaScript代码,类似于Python的import

<script src="public.js" type="text/javascript"></script>

head中引入JS与body中引入JS区别

html代码从上而下解析,如果在head中引入JS,影响页面打开的速度,存在风险,所以通常放在htmlbody的最下方,这样页面内容先展示,最后在加载JS。注:写在最下面要有底线,写在body内部的最底下。

注释

单行注释通过 //  多行通过 /* */

 

JavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。

 

 

1.1 js变量

const a = 1//定义常量,不可以修改
let name = ‘xiaolin‘//定义变量,没有预解析
var name1 = ‘xiaoxiaolin‘//定义变量,预解析,提前给定义为undefined,

1.2 字符串

技术图片
//定义字符串
        var str = ‘你开心就好‘;
        var name=‘疯狂的石头‘;
        //字符串的拼接
        var name_str = name+str;
        //字符串操作
        str.charAt(0)//根据角标获取字符串中的某一个字符  char字符
        str.substring(1,3) //根据角标获取 字符串子序列 顾头不顾尾(大于等于x  小于y )
        str.length //获取字符串长度
        str.concat(‘五月天‘)  //拼接字符串
        str.indexOf(‘五月‘)//获取子序列的位置
        str.slice(0,1)//切片 开始,结束 顾头不顾尾
        str.toLowerCase()//变为小写
        str.toUpperCase()//变为大写
        str.split(‘,‘)//以指定的字符串进行分割,返回数组,参数2为取分割后数组的前多少个元素
技术图片

1.3 数字类型

技术图片
var age=19;
        var score = 89.5;
        number = ‘18‘;
        //字符串转换
        var n = parseInt(number);
        //转换为小数
        f = parseFloat(number);
        //布尔类型
        var t = true;
        var f = false;
技术图片

1.4 数组类型

技术图片
// 第一种创建方式 
var list = new Array(); 
list[0] = ‘李四‘; 
list[1] = ‘王五‘; 
 
// 第二种创建方式 
var list2 = new Array(‘李四‘,‘王五‘); 
 
// 第三种创建方式 
var list3 = [‘李四‘,‘牛教授‘]; 
 
数组操作 
var list4 = [‘李四‘,‘王五‘];
 
list3.length;// 数组的长度 
 
list3.push(‘dsx‘);// 尾部追啊参数 
 
list3.shift();// 头部获取一个元素 并删除该元素 
 
list3.pop();// 尾部获取一个元素 并删除该元素 
 
list3.unshift(‘dsx‘);// 头部插入一个数据 
 
list3.splice(start, deleteCount, value);// 插入、删除或替换数组的元素 
 
list3.splice(n,0,val) ;//指定位置插入元素 
 
list3.splice(n,1,val);// 指定位置替换元素 
 
list3.splice(n,1);// 指定位置删除元素 
 
list3.slice(1,2);// 切片;
 
list3.reverse() ;//反转 
 
list3.join(‘-‘) ;//将数组根据分割符拼接成字符串 
 
list3.concat([‘abc‘]);// 数组与数组拼接 
 
list3.sort() ;//排序
技术图片

1.5 对象类型(等同于Python的字典)

var dict = {name:‘dsx‘,age:18,sex:‘男‘ };
var age = dict.age; 
var name = dict[‘name‘];
delete dict[‘name‘] 删除
delete dict.age 删除

1.6 js条件判断语句

技术图片
var score = 89
if(score>=90){
    console.log(‘优秀‘)
}else if(score>=80 && score<90){
    console.log(‘良好‘)
}else if(score>=60 && score<80){
    console.log(‘中等‘)
}else{
    console.log(‘不及格‘)
}

switch (score) {
    case 90:
        console.log(‘优秀‘)
        break;
    case 80:
        console.log(‘良好‘)
        break;
    default;
技术图片

1.7 js循环语句

技术图片
//第一种循环
//循环的是角标
tmp = [‘宝马‘, ‘奔驰‘, ‘尼桑‘];
tmp = ‘宝马奔驰尼桑‘;
tmp = {‘宝马‘: ‘BMW‘, ‘奔驰‘: ‘BC‘};
for (var i in tmp) {
    console.log(tmp[i])
}
//第二种循环
//不支持字典的循环
for (var i = 0; i < 10; i++) {
    console.log(tmp[i])
}
//第三种循环
while (1 == 1) {
    console.log(111)
}
技术图片

1.8函数

技术图片
// 普通函数
function funcName(name,age) {

}
funcName(‘lis‘,78); //匿名函数,函数即变量 var funcNameTwo = function(){ }; funcNameTwo()
技术图片

二、DOM

DOM(Document Object Model 文档对象模型)

一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法,找到html的各个标签。通过找到标签就可以操作标签使页面动起来,让页面动起来。

2.1 获取标签

技术图片
//直接获取标签
document.getElementById(‘id1‘);//根据id获取标签
document.getElementsByName(‘elname‘);//根据属性name获取标签数组
document.getElementsByTagName(‘div‘);//根据标签名称获取标签数组
document.getElementsByClassName(‘c1‘);根据属性class获取标签数组

//间接获取标签
var temp = document.getElementById(‘id1‘);
temp.parentElement;//父节点标签元素
temp.children;//所有子节点
temp.firstElementChild;//第一个子标签元素
temp.lastElementChild;//最后一个标签元素
temp.nextElementSibling;//下一个兄弟标签元素
temp.previousElementSibling;//上一个兄弟标签元素
技术图片

2.2 文本内容操作

技术图片
//文本内容操作:
// innerHTML和innerText
temp.innerText;//获取标签中的文本内容
temp.innerHTML;//获取标签中的所有内容,包括html代码
temp.innerText=‘fdsfsfs‘;//修改标签中的文本内容
temp.innerHTML=‘<input type="text">fdsfsfs</input>‘//可以将html格式的字符串变为标签

//input textarea标签
temp.value;//获取input,textarea的值
temp.value=‘fdsfsfs‘;//修改input,textarea的值

//select标签
tmp.value; //获取select标签的value参数
tmp.value = ‘选项‘ // 修改select选项
tmp.selectedIndex; // 获取select标签的选项下标
tmp.selectedIndex = 1 // 通过下标更改select的选项
技术图片

2.3 事件

技术图片
<!--    直接绑定-->
<input type="button" id="b1" onclick="show()">
function show() {
    alert(‘fdsfsdlfsjflskjdf‘)
}

<!--间接绑定-->
<input type="button" id="b2" >
var b2 = document.getElementById(‘b2‘);
b2.onmouseover = function () {
    b2.style.backgroundColor=‘red‘
}

// 间接绑定的this代指,getElementById找到的这个标签
var obj = document.getElementById(‘b2‘);
obj.onmouseout = function () {
    this.style.background = ‘‘;
}
技术图片

以上是关于前端-js基础的主要内容,如果未能解决你的问题,请参考以下文章

关于js----------------分享前端开发常用代码片段

[vscode]--HTML代码片段(基础版,reactvuejquery)

回归 | js实用代码片段的封装与总结(持续更新中...)

前端-js基础

前端JS基础

前端开发常用代码片段(中篇)