网站开发背景和意义,wordpress 分类页 获取别名,焦作网站建设服务,做美食网站推荐阅读
有趣的前端知识#xff08;一#xff09; 有趣的前端知识#xff08;二#xff09; 文章目录 推荐阅读JS内置对象JS外部对象BOM模型history对象screen对象navigator对象 DOM#xff08;文档对象模型#xff09;DOM的方法#xff08;对于节点的操作#xff09…推荐阅读
有趣的前端知识一 有趣的前端知识二 文章目录 推荐阅读JS内置对象JS外部对象BOM模型history对象screen对象navigator对象 DOM文档对象模型DOM的方法对于节点的操作 JavaScript简称“JS” 是一种具有函数优先的轻量级解释型或即时编译型的编程语言。
JS内置对象
一切皆对象方法即对象可以直接作参数传入。
String对象
var she;
var snew String(he);
s.length;Number对象
var num123.123;
console.log(num.toFixed(2));//保留2位小数Boolean对象
ture/falseArray对象
var a[100,299];
var a1[zhangsna,25,true];//js中变量无类型所以可以存各种类型的数据Object
var bnew Array();
b[aa,22];
//追加数据
b.push(adah);
console.log(b[2]);//adah
//数组倒转
var arr[1,2,3];
arr.reverse();// 3 2 1
//数组排序
var c[3,43,6,2,5];
c.sort();//输出后 2,3,43,5,6按照字符串来排的。并不单单是按照数的大小来比的。
比较方法js内置的固定方法按照字符串来比较值的大小。字符串值转换为Unicode的值在进行比较
使用匿名方法做参数改变排序默认由小到大
c.sort(function(a-b){return a-b};);//2,3,5,6,43;Math对象
无需创建直接调用属性和方法。
console.log(Math.PI);
console.log(Math.round(4.234));//取整4
console.log(Math.round(4.577));//取整 5四舍五入Date对象处理日期和对象。
var datenew Date();时间一般来源用户的浏览器时间var anew Date(2022.11.23);(时间来源服务器)//转换为本地日期或者字符串
console.log(d.toLocaleTimeString());
console.log(s.toLocaleDateString());
//获取时间分量
读 getXXX(); 写setXXX();
var ra.getHours();
var xa.getDate();
var ya.getMonth();
var day (y1)月x日;//月份从0 开始
console.log(day);//11月23日RegExp对象
正则表达式
var reg/正则表达式/匹配模式;
var reg /\d/g
var reg new RegExp(正则表达式,模式);
var regnew RegExp(\\d,g);匹配模式g全局检测字符串i :忽略大小写来检测字符串正则表达式的方法
reg.exex(str);
//普通模式从str中找出和reg相匹配的第一个字符串
//全局模式从第n次调用从str里找出和reg匹配的第n个字符串。
var stryou can ,you no ,no akn nosss;
/*普通模式调用第一个字符串*/
console.log(reg.exec(str));
/*全局模式的第n次调用第n个字符串*/
var reg/no/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));判断str中是否包含与reg匹配的字符串。
reg.test(str);
str.replace(reg,字符串);
将str中与reg匹配的所有字符串都替换目标。
console.log(str.replace(reg,o));
//字符串是不可变的修改字符串的方法并没有改变原字符串而是生成了新字符串
str.match(reg)
从str中找出包含与reg匹配的字串
console.log(str.match(reg));
str.search(reg);
从str中找出与reg匹配的第一个子串的索引
console.log(str.search(reg));Function对象
function 定义函数Function 对象js的函数没有重载调用函数名一样的无论传入多少函数调用同一个函数默认当成一个数组对象arguments传入需要啥调用啥。没有收到实参的参数值和undefined。
function sum(){var s0;if(arguments.length0){for(var i0;iarguments.length;i){sarguments[i]; } } return s;
}
var anew Function (x,y,return(xy););JS外部对象
外部对象就是浏览器提供的内部的API。这些对象由浏览器开发者设计并开发。这些对象分为2个部分BOW包含了DOM
BOM模型
浏览器整体是一个对象
- window对象
window对象对应着浏览器窗口本身。window对象是BOM的顶层对象核心对象所有的对象都是通过它延伸出来的也可以说为window的子对象。window对象表示浏览器目前正在打开的窗口为全局对象,直接后代无需加window前缀但是document对象的后代需要加上document前缀。
//弹出框
function f1(){alert(1);
}
//确认框
function f2(){var vconfirm(nnn);console.log(v);
}
//输入框
function f3(){var aprompt(aaa);console.log(a);
}定时器
周期性定时器隔一定时间执行反复执行达到停止条件停止
function f4(){var a3;//启动定时器,返回定时器id用来停止定时器var idsetInterval(function (){console.log(a--);if (!a){clearInterval(id);console.log(heihei);}},1000)//1s//启动定时器相当于启动了一个支线程当前方法f4 相当于主线程2个线程并发执行不互相等待因此主线程在启动完该线程立刻向下执行而支线程却需要在1s后执行。console.log(afa);
}
一次性计时器推迟一定时间执行一次函数执行后自动停止或者手动停止。
var id;
function f5(){if(id){return; }//启动定时器,若想在未执行定时器之前停止需要使用id。idsetTimeout(function (){console.log(a);},3000);//推迟3s
}
function f6(){//若定时器已经执行则取消无效若定时器还未执行则可以取消if(id){clearTimeout(id);idnull;}}- location对象
location对象提供了与当前窗口中加载的文档有关的信息还能提供一定的导航的功能。
function b(){var bconfirm(likai);if (b){location.hrefhttp://www.baidu.com;}
}//跳转至百度。
function a(){location.reload();
}//刷新history对象
function d(){history.forward();//前进//history.back();后退。
}screen对象
function c(){console.log(screen.width);console.log(screen.height);console.log(screen.availHeight);console.log(screen.availWidth);
}navigator对象
function f(){console.log(navigator.userAgent);
}DOM文档对象模型
DOM树HTML是根节点,浏览器获取网页后将其解析为对象对网页进行读写操作只需读写对象即可DOM树树结构中每级对象为节点。节点有着不同的分类。
DOM的方法对于节点的操作
读写节点名称。类型不能进行修改
//读写节点名称/类型不能更改
window.onload function(){
var pdocument.getElementById(a);
console.log(p.nodeName);
console.log(p.nodeType);
}
p idab节点/b名称/p读写节点内容
//读写节点的内容双标签中间的文本为内容aheihei/a
/*innerHTML(会将子标签都输出来)
//innerText忽略子标签,不把标签当标签来用*/
window.onload function(){
console.log(p.innerHTML);
p.innerHTMLb读取/b节点;
var bdocument.getElementById(b);
console.log(b.innerText);
b.innerTextu读写/u节点;
}
p idab节点/b名称/p
p idbbhei/bjie/p读写节点的值
//读写节点的值表单控件中的数据为值只有如下表单控件才有值input(9个)selecttextarea
window.onload function(){var b1document.getElementById(b1);console.log(b1.value);b1.valuec;}pinput typebutton value值 idb1
/p读写节点的属性
通过方法读写属性
//通过方法读写属性
window.onload function(){var imgdocument.getElementById(test);console.log(img.getAttribute(src));//属性路径img.setAttribute(src,../images/3.png);//改属性路径img.removeAttribute(src;//删除
}
pimg src../images/4.png idtest/p通过标准属性名读写属性
class,id,style
window.onload function(){
var h document.getElementById(h);
console.log(h.style.color);
h.style.colorblue;
}
p id“h” stylecolor:blue;标准属性/p通过不标准属性名读写属性高版本浏览器可兼容。a.herf img.color.
查询节点
根据id查询节点
var inputdocument.getElementById(num);根据标签查询节点
var imgsdocument.getElementsByTagName();//获取所有图片根据层次查询节点
var cdocument.getElementById(c);
查询父亲
var ulc.parentNode;
console.log(ul);
查询孩子(包含空格)
console.log(ul.childNodes);
查询孩子不包含空格var imgsul.getElementsByTagName(img);查询兄弟//节点.父亲.孩子[i]
var bc.parentNode.getElementsByTagName(li)[2];根据name查询节点一般查询用于查询一组单选或者多选
var namedocument.getElementsByName(sex);
console.log(name);增加节点
//创建节点
var lidocument.createElement(li);
//设置ul的内容
li.innerHTMLG;
//将li 追加到ul下在网页中显示出来
var uldocument.getElementById(city);
ul.appendChild(li);可以直接在控制台写入也可以写入一个选择器调用js函数。 插入节点
//创建节点并写入内容
var lidocument.createElement(li);
li.innerHTMLT;
//获取该节点的父亲和弟弟
var uldocument.getElementById(a);
var cdocument.getElementById(c);
//把他插入到父亲的弟弟前
ul.insertBefore(li,c);删除节点
//获取要删节点的父亲
var uldocument.getElementById(a);
//获取要删除的元素
var cdocument.getElementById(c);
//删除元素
ul.removeChild(c);
