javaScrip

最新推荐文章于 2024-09-21 11:34:18 发布

马煜

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量77

点赞数

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/weixin_44194661/article/details/121019141

版权

ⅩⅠ.javaScrip

引入外部js文件

①取标签中的值

<div onclick = "choose(this)" >黄色</div>
	//可以使用obj.innerText,innerText可以得到开始标签和闭合标签中间的文本
	function choose(obj){
		console.log(obj.innerText);
		//赋值也是一样的
		document.getElmentById("ID").innerText = obj.innerText;
	}

②计算器运算函数

var i =  eval（1+2-3.4*5）；
//用来直接计算一串数字的加减乘除

③封装

把常用的方法进行封装处理；相当于jQuery ，jQuery就是把javascrip中复杂的方法进行了封装处理

//如：封装 document.getElmentById("ID")
function $(obj){
	return document.getElmentById(obj);
}
function getValue(){
	var val = $("name").value;
	cosole.log(val);
}

④常用事件

document.documentElement("body");	//获取对文档根结点（<body>）的引用
document.creatElement("p");		//创建代表某个HTML元素的对象，创建后记得添加节点
document.节点名称.appendChild(node); //将节点追加到所有子节点的末尾 ，首先要创建新节点
insertBefore(newNode,node);         //将节点newNode插入到节点node之前
node.parentNode.removeChild(node);//删除节点，调用自己的父节点，从父结点删除子节点的自己
button.setAttribute("id","btn1");      //给button添加一个id的属性

document.all.页面元素名称; //all：表示文档中所有元素的集合
document.表单名.元素名称;
document.getElementById(“ID名称”);
document.getElementsByName(“元素名称”);
document.getElementsByTagName(“标签名称”);

⑤节点属性：

childNodes 当前节点的所有子节点
firstChild 当前节点的所有子节点中第一个节点
lastChild 当前节点的所有子节点中最后一个节点
parentNode 当前节点的父节点
nodeValue 节点值
nodeName 节点的名称
nodeType 节点的类型
getAttributeNode 得到属性节点

⑥节点值：

类型值描述
元素节点 1 HTML标签
属性节点 2 HTML标签中的属性
文本节点 3 文本信息

⑦创建节点的使用方法

var node=document.createElement("div");  /* <div></div>*/
node.innerHTML="<h3 id='textNode' style='color: red;'>新创建的节点</h3> ";     
/*<div><h3 id='textNode' style='color: red;'>新创建的节点</h3></div>*/
//	document.body.appendChild(node);		
/*<body><div><h3 id='textNode' style='color: red;'>新创建的节点</h3></div></body>*/
	var oldNode= document.getElementById("str");
	document.body.insertBefore(node,oldNode);

⑧Event 对象和事件

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
event:在事件函数中可以使用event对象
浏览器事件
onload、onunload、onsubmit
鼠标事件
onMouseMove、onMouseDown、onMouseUp
onmouseover,onmouseout
文本框事件
onchange
其他
onclick,onfocus,onblur //点击事件，获取焦点事件，失去焦点事件

addEventListenert方法:
一个控件
第一个参数填写事件名，第二个参数是一个函数，
第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序。
true代表捕获阶段处理， false代表冒泡阶段处理。
第三个参数可以省略，大多数情况也不需要用到第三个参数，
不写第三个参数默认false

addEventListenert使用方法:

window.onload = function(){

document.getElementById('btn').addEventListener('click', function(){
alert(1);
}, false);

document.getElementById('btn').addEventListener('click', function(){
alert(2);
}, false);
}

⑨子窗口和父窗口、浮动窗体

打开子窗口，不管该窗口关闭不关闭，父窗口都可操作。

open("demo2.html","","toolbars=0,location=0,statusbars=0,menubars=0,width=500px,height=400px,scrollbars=0");

打开模态窗口，该窗口不关闭父窗口无法操作。

window.showModalDialog("ModelSon.html","","toolbars=0,location=0,statusbars=0,menubars=0,width=500px,height=400px,scrollbars=0")

注意浏览器可能会拦截，模态窗口默认只对IE浏览器生效，谷歌内核浏览器不支持。
opener 属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。用于子页面与主页面之间的传值问题。

window.opener.document.getElementById("Downloads").value = '新值';

滚动
window.onscroll,页面滚动时触发，用于浮动广告

⑩计时器

设置计时器：
两种方法均可实现计时器，
setTimeout要写到调用的方法体里边才可以实现，
setInterval写到调用的方法体外边。

var time = setInterval("方法名称"，1000（毫秒））); //每1000毫秒调用一次该方法
var time = setTimeout("方法名称"，1000（毫秒）); //1000毫秒以后调用该方法

停止计时器：
使用哪种定时就使用哪种清除

clearInterval（time）; 
clearTimeout (time);

页面的前进后退关闭：

<a href="javaScrip:history.back()">后退</a>
<a href="javaScrip:history.forward()">前进</a>
<a href="javaScrip:window.close()">close</a>
<a href="javaScrip:history.go(-1)"></a>   //go(-1)相当于后退，go(1)相当与前进

①①Stshiyiring对象以及应用

名称描述
length 用于计算字符串中的字符个数
charAt 返回字符串对象中指定索引处的字符，索引从0开始。
indexOf 返回某个子字符串在目标字符串中的首次出现位置。
substr 从指定索引位置开始截取指定长度的字符串。
substring 返回指定索引范围内的字符串。
replace 使用指定的字符串替代目标字符串中指定的子字符串。
split 返回按照指定分隔符拆分的若干子字符串数组。

join与split相反，join将数组通过某个字符合并为字符串

①②表单验证

通过返回值判断是否提交表单

<form name="form1" action="registerUser.jsp"
onsubmit = "return  checkForm();">
function  checkForm(){

　　//......验证过程
　　return true|false;
	}
</form>

①③正则表达式

RegExp是JavaScript中提供的一种用来完成有关正则表达式操作和功能的对象
两种创建方式：

var reg=new RegExp(“表达式”,”附加参数”);

var reg=/表达式/附加参数
Regular:正规的
Expression:表达式

RegExp对象的附加参数:

var recat = new RegExp(“cat“,”g”);
var pattern=/cat/g;

g：global,全局匹配,
如果无g，只会匹配第一个单词cat,有g，匹配所有单词cat
i：不区分大小写匹配
m：可以进行多行匹配

常用方法:
注意：test,exec是正则表达式的方法
正则表达式.test(字符串)
正则表达式.exec(字符串)
名称描述
test 它指出在被查找的字符串中是否存在模式，返回true/false。
exec 用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组
match 使用正则表达式模式查找字符串，并返回包含查找结果的数组
search 返回与正则表达式查找内容匹配的第一个子字符串的位置
replace 返回根据正则表达式进行文字替换后的字符串
exec方法返回的数组元素属性，有index

！
！！
！！！
正则表达式使用时前后使用/来代替"
如：

var cname = /^[\u4e00-\u9fa5]{0,}$/     //正确
var cname = "^[\u4e00-\u9fa5]{0,}$"     //报错

创建RegExp对象使用方法：

var  str=”white CATs,black cats";
var regex=new RegExp("cat",'gi'); //查询是否含有cat字符，gi为全局查询
// var pattern=/cat/gi;
var result=regex.test(str);
document.write(result);
//document.writeln(pattern.test(str));

Boolean b = 正则表达式.test(字符串)

正则表达式判断使用方法：

var realName = $("realname").value;
var email = $("email").value;

var cname = /^[\u4e00-\u9fa5]{0,}$/;
var cemail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(cname.test(realName) && cemail.test(email)){
	alert("注册成功");
	return true;
}else{
	alert("注册信息格式不对");
	return false;
}