javascript基础知识和Dom编程学习
JavaScript
Dom编程--->操作html所有的标签(找到html文件,然后操作)
jQuery ---->开源模块(找,操作)
1、导入文件
<script type="text/javascript" src="j1.js"></script>
<!--定义一个script标签写js代码--->
<script type="text/javascript">
func()
/*--引用js代码中的函数func */
</script>
2、JavaScript放置位置,一般放在html页面中body标签的底部,css可以放在head标签内,即html页面的头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--导入js文件 src="j1.js"---->
<script type="text/javascript" src="j1.js"></script>
<!--定义一个script标签写js代码--->
<script type="text/javascript">
func()
/*--引用js代码中的函数func */
</script>
</body>
</html>
3、注释,单行注释用//,多行注释用/* ---- */
4、申明变量
局部变量申明用关键字var开头
例如:
var name="eric"
全局变量申明
例如:
name="alex
5、申明函数传入参数,然后直接调用执行自己
(function(arg){
alert(arg)
})("javascript")
"
6、字符串常用方法和属性
obj.trim() --->去掉字符串中的空格
obj.charAt(index) ------->通过字符串所以下标获取对应的字母
obj.substring(start,end) ----->截取字符串中的某一段,或者叫切片
obj.indexOf(char) ------->找出字符串中某个字符在字符串中下标的索引值
obj.length ---------->字符串的长度
7、数组
声明,如:
var array = Array() 或 var array = []
添加
obj.push(ele) 追加
obj.unshift(ele) 最前插入
obj.splice(index,0,'content') 指定索引插入
移除
obj.pop() 数组尾部获取
obj.shift() 数组头部获取
obj.splice(index,count) 数组指定位置后count个字符
切片
obj.slice(start,end)
合并
newArray = obj1.concat(obj2)
翻转
obj.reverse()
字符串化
obj.join('_')
长度
obj.length
8、循环
var a = '123456789';
for(var i=0;i<10;i++){
console.log(a[i]);
}<br>
for(var item in a){
console.log(a[item]);
}
9、异常处理
ry{
}catch(e) {
}finally{
}
10、Dom编程
文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。
DOM编程:可以操作html所有的标签,进行找、操作!他也是javascript的一部分
①选择器:
-
document.getElementById('id')
-
document.getElementsByName('name')
-
document.getElementsByTagName('tagname')
document.getElementById('id')查找指定的id,然后定位到id所在的标签对标签里的内容进行操作,
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="num01">#定义一个id=num01的div标签
abcdefg
</div>
<script type="text/javascript">
var i=document.getElementById('num01');#通过该句返回对指定ID(num01)对象的一个引用并赋给变量i
i.innerText=123456789;#通过innerText属性对返回的对象的引用进行修改
</script>
</body>
</html>
代码显示结果:
在不加dom语句的情况下div标签显示的结果为:
对于document.getElementsByName('name')同样有如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div name="name01">
abcdefg
</div>
<script type="text/javascript">
var i=document.getElementsByName('name01');//查找指定的name,这里和ID不一样name01可以有多个
for(var item in i){
i[item].innerText='name01-456';//innerText修改指定的字符串
};
</script>
</body>
</html>
同样对于document.getElementsByTagName('tagname')代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
12345
</div>
<div>
67890
</div>
<script type="text/javascript">
var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如<div>标签可以有多个
for (var item in i) {
i[item].innerText = '456'; //innerText修改指定的字符串
};
</script>
</body>
</html>
②注册 事件
事件,比如执行一个按钮动作,当单击一下按钮的时候,发生了什么;双击又发生了什么,在dom中类似这样的操作叫做事件。
注册:这里说的注册时值当我们点击某个按钮执行动作的时候,会出现一个界面展示效果(可能是我们想要的也可能不是想要的),那么展示效果的过程首先要将该事件与对应的函数进行绑定,然后把他们注册到指定的标签上,示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.red {
background-color: red;
}
</style>
</head>
<body>
<div id="id_1">
12345
</div>
<input type="button" οnclick="edit();"value="修改">
//定义一个input标签,按钮名为"button",注册一个事件onclick,将事件与函数edit绑定,当点击"修改"标签,就会完成一个注册事件,因为注册事件的实质与函数edit函数绑定,所以当注册事件其实就是执行函数edit
<input type="button" οnclick="rollback();"value="恢复">
<script type="text/javascript" src="j1.js"></script>
<script type="text/javascript">
function edit(){
var i = document.getElementById("id_1")
i.className="red";
}
function rollback(){
var i = document.getElementById("id_1")
i.className="";
}
</script>
</body>
</html>
刷新代码显示如下:
点击"修改"显示效果如下:
出现红色背景,接着点击"恢复",效果又如下所示:
常见的事件列表如下:
注意:onload和其他事件不太一样,它必须写在JavaScript标签里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的.
window.onload = function () {
alert("The page Load complete")
};
function edit() {
var i = document.getElementById('id_1');
i.className = 'color_red';
}
function rollback() {
var i = document.getElementById('id_1');
i.className = ''; //这里只要给他设置为空即可
}
</script>
</body>
</html>
③常用函数
获取或者修改样式,修改的例子上面已经写了,再看下面的例子,在标签注册了之后,如果在函数内i.className='color_red'l这样是给它这是值:
function edit() {
var i = document.getElementById('id_1');
i.className = 'color_red';
}
函数edit不设置值呢?
function edit() {
var i = document.getElementById('id_1');
console.log(i.className);
}
函数rollback不设置值呢?
function rollback() {
var i = document.getElementById('id_1');
console.log(i.className)
}
整合上面所有代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige_js_file</title>
<!--导入javascript脚本方法-->
<!--<script type="text/javascript" src="t1.js "></script>-->
<style>
.color_red {
background-color: red;
}
</style>
</head>
<body>
<div id="id_1">
</div>
<!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中-->
<input type="button" value="修改 "/>
<input type="button" value="修改 "/>
<script type="text/javascript">
// 这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的.
// window.onload = function () {
// alert("The page Load complete")
// };
function edit() {
var i = document.getElementById('id_1');
i.className = "color_red";
}
function rollback() {
var i = document.getElementById('id_1');
console.log(i.className)
}
</script>
</body>
</html>
运行结果如下:
a、获取属性:
<body>
<div name="Python training" id="id_1">
test 100 hours
</div>
<input type="button" value="测试" />
<script type="text/javascript">
function edit() {
var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签
var result = i.getAttribute('name'); //获取id_1的标签的属性为name并赋值
console.log(result); //输出结果在console
}
</script>
</body>
b、修改属性:
<body>
<div name="Python training" id="id_1">
100 hours
</div>
<input type="button" value="测试" />
<script type="text/javascript">
function edit() {
var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签
var result = i.setAttribute('name','ShuaiGe'); //修改属性
var result = i.getAttribute('name'); //获取id_1的标签的属性为name并赋值
console.log(result); //输出结果在console
}
</script>
</body>
⑤获取或修改样式中的属性
a、修改样式中的属性
<body>
<div name="Python trai" id="id_1" style="font-size:8px;background-color:green">
test 100hours
</div>
<input type="button" value="测试" />
<script type="text/javascript">
function edit() {
var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签
i.style.backgroundColor = "red"; //修改样式中的属性还有很多,可以测试
}
</script>
</body>
b、获取和上面一样很简单!提交表单,并不是之前的那种提交表单!
看下面的例子:
<body>
<form id="form_1" action="https://www.sogou.com/">
<div>
<input type="text" name="query"/>
</div>
<!--第一个submit是可以提交的这个肯定没问题-->
<input type="submit" value="submit">
<!--第二个button可以提交吗?-->
<input type="button" value="button" οnclick="go()">
</form>
</body>
答案当然是不可以,那怎么可以让他提交呢?在js里可以通过修改属性来让他支持提交,代码如下:
document.getElementById('form_1').submit();
<body>
<form id="form_1" action="https://www.sogou.com/">
<div>
<input type="text" name="query"/>
</div>
<!--第一个submit是可以提交的这个肯定没问题-->
<input type="submit" value="submit">
<!--第二个button可以提交吗?-->
<input type="button" value="button" οnclick="go()">
</form>
<script type="text/javascript">
function go() {
document.getElementById('form_1').submit();//修改属性来支持提交
}
</script>
</body>
c、调转页面函数
<body>
<div>
跳转范例
</div>
<div>
<!--在同一个标签内打开-->
<input type="button" value="跳转至百度" />
<!--新起一个标签打开-->
<input type="button" value="跳转至百度" />
</div>
<script type="text/javascript">
function jump() {
window.location.href = 'https://www.baidu.com'
}
function jump_new() {
window.open('https://www.baidu.com')
}
</script>
</body>
d、confirm() ,弹出消息提示框,显示“是”或“否”,根据用户的选择返回True 或者 Flase
代码如下:
<script type="text/javascript">
var result = confirm('是否继续');
console.log(result);
</script>
e、setInterval("alert()",2000);
clearInterval(obj) 可以理解为一个计时器
代码如下:
setInterval("alert()",2000);设置计时器
<body>
<script type="text/javascript">
function f1() {
console.log("test message print in console")
}
setInterval('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,
//这里是每隔1秒执行一次,我这里测试发现,如果函数哪里不加引号就只执行一次!
</script>
</body>
f、clearInterval(obj);关闭计时器
代码如下:
<body>
<script type="text/javascript">
function f1() {
console.log("test message print in console");
clearInterval(obj); //这里是关闭计时器,他需要个句柄,所以在下面的函数中,这个obj句柄必须是全局的
}
obj = setInterval('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,
//这里是每隔1秒执行一次,我这里测试发现,如果函数哪里不加引号就只执行一次!
</script>
</body>
setTimeout(); clearTimeout(obj) 也是计时器他和interval的区别就是,他只执行一次
<body>
<script type="text/javascript">
function f1() {
console.log("test message print in console");
}
obj = setTimeout('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,
//这里是setTimeout所以他只执行一次
</script>
</body>
⑥js实例
a、跑马灯实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js测试页面 </title>
<!--跑马灯实例-->
<script type="text/javascript">
function run_go() { //定义一个函数
var content = document.title; //获取title的内容
var firstChar = content.charAt(0); //获取content第一个元素
var sub = content.substring(1,content.length); //获取content字符串剩余的元素
document.title = sub + firstChar; //对字符串进行新的拼接
}
setInterval('run_go()',1000); //使用interval每秒执行然后达到跑马灯的目的
</script>
</head>
<body>
</body>
</html>
b、搜索框实例,实用性非常高,已用在很多地方!!!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>js测试页面</title>
<style>
.gray{
color:gray;
}
.black{
color:black;
}
</style>
</head>
<body>
<!--input标签内注注册了两个事件(onfocus/onblur并且事件已经绑定了函数)-->
<input type='text' class='gray' id='tip' value='请输入关键字' οnfοcus='Enter();' οnblur='Leave();'/>
<script type="text/javascript">
function Enter(){ //函数Enter的作用,当元素获得焦点就把里面的值设置为空并把颜色设置为黑色
var id= document.getElementById("tip"); //找到id为tip的标签并赋值给id
id.className = 'black'; //给id的class设置为black
if(id.value=='请输入关键字'||id.value.trim()==''){
id.value = ''
} //判断找到的标签的value='请输入关键里'或者你输入的内容为空
}
function Leave(){ //函数Leave的作用,当元素失去焦点就把里面的值设置为"请输入关键字"并把颜色设置为灰色
var id= document.getElementById("tip"); //找到id为tip的标签病赋值为id
var val = id.value; //吧id的value属性赋值为val
if(val.length==0||id.value.trim()==''){
id.value = '请输入关键字';
id.className = 'gray';
}else{
id.className = 'black';
} //判断如果val的长度为0,或者用户输入为空字符,吧id的value设置为"请输入关键字"
//否则吧id.class设置为black
}
</script>
</body>
</html>
展示效果:
鼠标放进去出现元素焦点:
本文转自027ryan 51CTO博客,原文链接:http://blog.51cto.com/ucode/1844234,如需转载请自行联系原作者