数组字符串常用方法

2022-04-18 12:07:51

字符串常用方法字符串
str.length 字符串长度
str[i] 第几个字符
str.indexOf("c") 首次出现位置

str.split("|"); 分割字符串，分完后是一个数组
str.substr(4,3) 前者第几个开始截，第二个截多长，不写为全部
str.substring(4,6); 从哪截，截到哪，左闭右开
str.startsWith("abc"); 判断字符串是否以abc开头
str.endsWith() 判断结尾
str.toUpperCase(); 改成大写

str.toLowerCase(); 改成小写

Math常用方法 Math
Math.PI：圆周率
Math.E 自然对数
Math.pow(x,y); 次方运算
Math.sqrt(x);或者 Math.pow(x,1/y)开方运算
Math.abs(-x);绝对值
Math.max(x,y);找出较大的
Math.floor(x)向下取整
Math.ceil(x)向上取整
Math.round(x)四舍五入取整
Math.sin(x/180*Math.PI) 正弦函数里面写弧度制的

Math.random()生成一个随机数

数组常用方法

                                                数组

filter过滤数组
filter()
1.方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
2.不会改变原始数组
arr.push(x);添加一个元素在数组最后
arr.pop();删除一个元素在最后有返回值，为删掉的元素
arr.unshift(x); 添加一个元素（最前边）
arr.shift();删除一个元素（最前边）有返回值，为删掉的元素
arr.splice(2,1,4,4); 删除插入元素，第一个值为第几个开始，第二个为删几个（0个为添加元素或者不删元素）后边的值为替换的新元素
arr.slice(2,5); 截取，第一个值为从哪开始（含），第二个值为截到哪（不含）
arr.indexOf(x) 返回首次在数组中出现的位置，没有返回-1
arr.reverse(); 顺序取反
arr.join("");将数组元素拼接成字符串，可以通过参数指定分割符，不指定值为逗号

arr.concat(arr2);将两个数组拼接在一起

获取当前日期和时间日期和时间
var xx = new Date(); 首先调用date函数
var year = xx.getFullYear(); 获取年

     .getMonth();    获取月
     .getDate();     获取日
     .getDay();      获取星期 周日为0
     .getHours();    获取小时
     .getMinutes();  获取分钟
     .getSeconds();  获取秒数
     .getTime();     获取事件戳，时间戳：从1970年1月1日00:00:00 到这个时刻所经过的毫秒数

DOM元素查找元素查找

document.getElementById("title"); 获取DOMid值为title的元素对象
document.getElementsByClassName("line"); 获取class是包含line的元素对象，返回值是一个类数组
H5新增方法：
document.querySelector(.line)方法:查询DOM中第一个符合选择器的元素对象

document.querySelectorAll("p");查询DOM中所有符合选择器的元素对象,返回值是一个类数组

元素html属性修改 html属性修改
title为元素对象
title.style.color = "red"; 修改样式
title.textContent 修改元素内容标签会显示
title.innerHTML 修改内容标签会被解析为元素对象
title.classList.add("c1"); 添加class为c1
title.classList.remove("c1") 删除clas为c1
title.classList.toggle("c1"); 切换，有则删除，无则添加

link.href= "www.xxx.com"; 修改网址

元素创建，添加，删除元素创建，添加，删除
document.createElement("h1"); 创建对象
.appendChild() 在某个元素中添加子元素
ul.insertBefore(li,li2); 为元素添加子元素，插入到另一个元素之前，第一个值为要添加的元素对象，第二个参数表示添加在谁之前
ul.remove(); 从DOM中删除这个元素

document.body.removeChild(ul); 删除元素对象的子元素

鼠标事件
1.事件直接写在属性值中

蓝色

2.写成一个函数，写在js代码中

蓝色

   //元素标签属性绑定的事件函数，必须是全局域中的函数
    // function btn1Click1(){
    //   var x =document.getElementById("box");
    //   x.style.border = "solid 1px blue";// }

3.绑定事件的时候可以传event参数，存储事件的详细信息。
在事件函数中，e,是事件对象，记录本次事件的详细信息，通过e.target区分哪个按钮点击的

元素尺寸和位置及滚动事件元素尺寸和位置及滚动事件
box.clientWidth 元素的宽度
box.clientHeight 元素高度
box.offsetWidth 带边框的宽度
box.offsetHeight 带边框的高度
box.offsetLeft 相对于浏览器窗口的横向坐标
box.offsetTop 相对于浏览器窗口的纵向坐标
/////使用自身相对窗口的坐标减去父元素相对窗口的坐标可以得到自己相对于父元素的坐标
window.innerWidth 浏览器窗口的宽（工作区域，显示页面的区域）
window.innerHeight 浏览器窗口的高（工作区域，显示页面的区域）
window.outerWidth 整个浏览器窗口的宽度
window.outerHeight 整个浏览器窗口的高度
box.scrollTop 表示元素纵向的滚动偏移量
box.scrollHeight 表示元素的内容高度

/////元素内容高度 - 元素本身高度 = 最大偏移量

表单元素属性和事件表单元素属性和事件
username.value = "请输入用户名"; 表示当前输入框中输入的内容。是字符串类型

onfocus 元素获得焦点时
onblur 元素失去焦点的事件
oninput 当输入框中的内容发生编辑时触发
onchange 当列表选中内容发生变化时触发

/////对于多选框，获取内容不是用value，而是用checked，是一个布尔值

鼠标事件鼠标事件
onmouseenter 当鼠标指针进入元素时触发
onmouseleave 当鼠标指针离开元素时触发
onmousemove 当鼠标指针在元素中移动时触发，属于频繁出发的事件
onmousedown 在鼠标按键被按下时发生

onmousewheel 在滚轮滚动时发生

jqueryDOM属性操作 jqueryDOM属性操作
.css("color", "red") 用于设置或获取元素的样式值。
.text 用于设置或获取元素的内容。不写参数是表示获取
.html 也用于设置或获取元素内容，和.text的区别是.html设置的标签会被显示为标签元素，而.text设置的标签会显示为字符串
.addClass 用于为元素添加一个class值
.removeClass 用于删除一个class
.toggleClass 切换一个class
.hasClass 用于判断元素是否包含某个class值，包含则返回true
.attr 用于设置或获取元素的属性。写两个参数是表示设置某个属性，第一个参数是属性名，第二个参数是属性值。写一个参数时，表示获取某个属性的值

.prop 用于设置或获取没有值的属性，写两个参数用于设置，第一个参数是属性名，第二个参数是布尔值，表示是否有这个属性，true表示添加这个属性false表示删除这个属性，写一个参数表示获取某个没有值的属性。返回值是布尔值。

.val 用于设置或获取元素的value值，一个参数表示设置，不写参数表示获取

jquery动画 jquery动画
$("#box").hide(); hide方法用于隐藏元素(display:none)
$("#box").fadeOut(300); fadeOut方法，用于动画(淡入淡出)隐藏一个元素，参数为动画时间，不写默认300毫秒
$("#box").slideUp(); slideUp方法，用于上拉隐藏元素
$("#box").show(); show方法用于显示元素(删除display:none)
$("#box").fadeIn(300); 动画出现(淡入淡出)
$("#box").slideDown(); slideDown方法，用于下拉显示元素

码农公寓