JS学习笔记

本文围绕JS数组和DOM元素展开。介绍了JS数组的声明、取值、属性、赋值等操作,还提及排序、去重等方法,以及字符串与数组的转换处理。同时阐述了DOM元素的获取方式,包括按类名、名称、ID等,还说明了操作DOM元素属性、事件的方法及添加事件的不同方式。

js数组

1.数组是js的内置对象–Array。
2.数组的取值 a【0】 0代表索引,指元素的位置
声明写法 var a=new Array() new产生一个对象
3.数组的属性 length 代表数组的长度。
4.数组如何来赋值?

(1)一种是直接在声明数组的时候在括号里赋值
  赋值一个参数的时候,代表数组的长度;多个值得时候代表直接给数组赋值,长度为值得个数。
(2)另一种赋值方式
	 a[0]=1;
	 a[1]=2
	 a[2]=3;
	 a[3]=function(){
	 };
	 a[4]=null;

5.函数里面的数组写法
(1)可以直接写 var k=new Array( )
(2)可以简写成var k=【1,2,3,4,5】
console.log(k.join()) 把数组拼接成字符串string
括号里写的东西代表以什么符号来拼接成字符串
k.reverse()数组翻转 把所有元素反向排列
k.slice ()截断数组 参数 start end 索引 比如 k.slice(0,2)截取0号位到2号位 输出 【1,2,3】。对原数组无影响。
k.splice();参数 start count(截多少长度) 比如k.splice(0,3)零号位截取三个长度 输出【1,2,3】 对原数组有影响
k.push() 数组内容之后追加 返回值为数组长度
k.unshift()数组内容之前追加 返回值是数组的长度
k.shift() 数组从前往后删除 删除前面的一位
k.pop() 数组从后往前删除 删除后边的一位

6.数组的冒泡排序
(1)每两个数需要相互比较,按照固定顺序排列。利用循环遍历然后建立空元素使参数互换值即可。
(2)第一次循环遍历数组长度,内层循环代表每一个元素位置的索引用来做相对的比较然后完成冒泡排序数值交换。
7.sort排序方法

var a1=a.sort(function(n1,n2){
		return  n1-n2;
});  
  取数组里相邻的值比较大小,比较完之后按照从小到大排,如果是n2-n1的话比较完之后是从大到小排。

8.数组的去重方法
(1)遍历数组长度
(2)循环访问数组的索引,访问到每一个索引的值
(3)写条件式利用截取属性完成去重。
9.字符串合并加去重
(1)建立两个字符串a1,a2
(2)建立新的变量a3用concat属性将字符串拼接成一个整体
(2)用split属性将字符串a3以空字符分隔开,转为数组
(3)然后根据数组去重方法来进行去重。
10.字符串翻转
(1) 可以利用for循环进行翻转
(2)转成数组进行翻转也是可以的
11.找一句话中最长的单词
(1)首先要利用split以空格截取每个单词这样接可以分开截取为数组
(2)然后建立两个新的变量储存每一次的单词和单词的长度。
(3)处理有相等值的情况的时候。
12.选择性排序
(1)首先对数组进行遍历一次循环
(2)建立最小索引然后二次循环引入新变量从最小索引位往后遍历,进行大小比较,建立空变量接收值。
(3)利用空变量传值后输出a数组,完成排序。
13.快速排序
以中间值的索引为比对将数组分为两个进行排序,元素够大继续对两个数组进行裂变然后进行快速排序。
14.dom元素
(1)如何获取dom元素
var 变量=document.getElementsByClassName(" ") 根据class类名称获取,返回集合,用法跟数组一致。
var 变量=document.getElementsByName(" ") 根据name名称获取,返回节点型,用法和数组一致。
var 变量=document.getElementsByClassId(" ") 根据id名称获取,获取为单个对象,返回单个对象。直接使用即可。
var 变量=document.getElementsByTagname(" ")根据标签名称获取,返回为标签的名称。
document.querySelector(“#id” “.class”)根据名称获取单个对象
document.querySelectorAll(“#id” “.class”)根据名称获取整体集合
document.body 获取的是所有body里的元素
(2)操作dom元素怎么操作 js不能操作一组对象,只能分开操作
操作dom元素的属性和行为称为事件,先获取在操作元素
修改属性

 var btn=document.getElementByTagName(“button”)
    btn【0】.style.background=“red”
    btn【0】.style.width=“200px”

js操作的属性都是行内属性,可以设置或者获取
js获取非行内样式如何获取?

  window.getComputedStyle(btn【0】).width);

dom的事件
onkeydown键盘敲下事件 onkeyup键盘抬起事件 onkeypress键盘按住状态
onfocus获焦事件 onblur失焦事件
onclick鼠标单击事件 ondbclick鼠标双击事件 onmouseleave 鼠标水平离开 onmouseout 包含垂直方向离开 onmousemove鼠标移动事件 onmouseenter鼠标进入事件 onmouseover鼠标悬停事件 onmousewheel鼠标滚轮事件
onload浏览器加载完成时间 onresize窗口变化事件 onerror浏览器加载报错事件
touchstart开始触屏事件 touchmove触屏移动事件 touchend触屏结束事件
15.如何给dom元素添加事件
(1)常规添加 直接在标签上添加事件 可添加多个事件
(2)动态给dom元素添加事件

  var btn=document.getElementById(“btn“)
    btn.onclick=functio(){
			console.log(1);
		}

 var btn=document.getElementById(“btn“)
 btn.onclick=show;不能加小括号,不然失效。
functio  show(){
		console.log(1);
	}      
(3)事件的监听
var btn=document.getElementById("btn2");
btn2.addEventListener("click",function(){
			console.log(2);
			});    事件写的时候不加on 只能写一种事件

(4)事件执行里的绑定参数

 var btn=document.getElementById(“btn“)
    btn.onclick=functio(e){    e指时间当前的执行参数,也可以写成event,可以写成函数的形参,也可以直接在函数内定义e=event。
		console.log(this);  this指当前的执行对象
	}
		var target=e.target || e.srcElement     
		console.log(target); 输出当前目标元素

js里的this可以指代当前事件的执行对象,也可以在函数里指代window对象。
(5)js里事件的冒泡 (做开发尽量避免事件的冒泡)
e.stopPropagation();阻止事件冒泡
(6)事件的委托 父容器的事件委托给子容器进行执行

 var btn=document.getElementById(“btn“);
 btn。onclick=function(e){
 			var target=e.target || e.srcElement;
 			if(target.nodeName.tolLowerCase( )==“li”)
 			{
			console.log(1);
			}
		}
乐播投屏是一款简单好用、功能强大的专业投屏软件,支持手机投屏电视、手机投电脑、电脑投电视等多种投屏方式。 多端兼容与跨网投屏:支持手机、平板、电脑等多种设备之间的自由组合投屏,且无需连接 WiFi,通过跨屏技术打破网络限制,扫一扫即可投屏。 广泛的应用支持:支持 10000+APP 投屏,包括综合视频、网盘与浏览器、美韩剧、斗鱼、虎牙等直播平台,还能将央视、湖南卫视等各大卫视的直播内容一键投屏。 高清流畅投屏体验:腾讯独家智能音画调校技术,支持 4K 高清画质、240Hz 超高帧率,低延迟不卡顿,能为用户提供更高清、流畅的视觉享受。 会议办公功能强大:拥有全球唯一的 “超级投屏空间”,扫码即投,无需安装。支持多人共享投屏、远程协作批注,PPT、Excel、视频等文件都能流畅展示,还具备企业级安全加密,保障会议资料不泄露。 多人互动功能:支持多人投屏,邀请好友加入投屏互动,远程也可加入。同时具备一屏多显、语音互动功能,支持多人连麦,实时语音交流。 文件支持全面:支持 PPT、PDF、Word、Excel 等办公文件,以及视频、图片等多种类型文件的投屏,还支持网盘直投,无需下载和转格式。 特色功能丰富:投屏时可同步录制投屏画面,部分版本还支持通过触控屏或电视端外接鼠标反控电脑,以及在投屏过程中用画笔实时标注等功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值