JavaScript
JavaScript是一种脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
1、两种存在形式:
1 <!--导入javascript脚本方法--> 2 <script type="text/javascript" src="t1.js "></script> 3 4 <!--直接在html内部编写javascript--> 5 <script type="text/javascript"> 6 function func() { 7 alert("Hello Peony") 8 }
2、存在位置:
- HTML的head中
- HTML的body代码块底部(推荐)
为什么不能放在上面呢?为什么css的就可以放在上面呢?
注:css代码首先要记住html代码是从上往下解释的,如果css代码放在下面,在上面的代码使用css样式,如果css代码块放在下面就没有办法显示样式了
另不同的浏览器处理请求也不同:正常来说当有一个请求过来时候会把js&css一起发送过去,咱们按照最low的方式理解的话可以这么理解:如果js文件或者js耗时比较久的话,下面的html代码就无法执行了。
3、声明变量和函数(注意:这里一些程序员容易出错)
1 function m1() { 2 alert("girl") 3 var name = 'Peony'; //var 变量名 ,变量名前面加var为局部变量 4 age = '27'; 5 //注这里需要注意,建议使用的时候一般不要使用全局变量!否则如果代码量比较大的 6 //时候容易出现调用混乱的问题 7 } 8 m1();
函数
// 普通函数 function func() { alert("Hello word") } // 定义一个可传参数的函数 function func(arg) { alert(arg) } func('Superman') // 自执行函数,顾名思义,定义好之后可以自动执行 (function f3(arg) {alert(arg)})("Today is sunny");
// 普通函数 function func() { alert("Hello word") } // 定义一个可传参数的函数 function func(arg) { alert(arg) } func('Superman') // 自执行函数,顾名思义,定义好之后可以自动执行 (function f3(arg) {alert(arg)})("Today is sunny");
// 匿名函数,用处不是很大了解就行 var a = function() { alert('meinv'); }; a();
js 的展示方法有两种:
//通过网页来展示 <script type="text/javascript"> function f1() { alert("hello man") } f1() </script> //通过console来展示 <script type="text/javascript"> function f1() { console.log("Hello man ") } f1() </script>
4、字符串常用方法及属性
调试的地方可以在google chrome 上进行测试,F12点击"Console"
obj.trim() 去除空格
var a = " fanbingbing " undefined a.trimLeft() #去除左边的空格 "fanbingbing " a.trimRight() #去除右边的空格 " fanbingbing" a.trim() //去除两边的空格 "fanbingbing" a " fanbingbing " #这里可以发现我执行了上面的去除空格的命令之后,实际的值是没有改变的 b = a.trim() "fanbingbing" #但是我们可以通过赋值来改变他 b "fanbingbing"
obj.charAt(index) 根据索引获取字符串里的字符
b "FanBingBing" b.charAt(0) "F" b.charAt(1) "a" b.charAt(2) "n"
obj.substring(start,end) 获取字符的子序列,类似于切片
b "FanBingBing" b.substring(0,3) "Fan"
obj.indexOf(char) 去字符串找指定的字符的索引值是多少
b "FanBingBing" b.indexOf("B") 3
obj.length 获取字符串的长度
b "FanBingBing" b.length 11
5、数组
声明一个数组和python中的列表类似
a = [11,22,33,44] #声明一个数组 [11, 22, 33, 44]
插入
a = [11,22,33,44] #声明一个数组 [11, 22, 33, 44] a.push(55) #在数组最后增加一个元素 #这里是数组的长度 a [11, 22, 33, 44, 55] a.unshift(00) #在数组最前面增加一个元素 #长度 a [00, 11, 22, 33, 44, 55] a.splice(3,0,'insert') #在指定的索引增加一个元素,括号内(3为索引值,0为固定值,要插入的内容) [] a [00, 11, 22, "insert", 33, 44, 55] a.unshift(100)
移除
a [100, 0, 11, 22, "insert", 33, 44, 55] a.pop() # 从尾部获取 a.shift() #从开头获取 a [0, 11, 22, "insert", 33, 44] a.splice(3,1) #从指定位置获取,括号内参数为(元素的索引,后面为索引后的元素个数,包含本身) ["insert"] a [0, 11, 22, 33, 44]
切片
a [0, 11, 22, 33, 44] a.slice(1,3) [11, 22] a [0, 11, 22, 33, 44]
合并
a = [11,22]反转 [11, 22] b = [44,55] [44, 55] a.concat(b) [11, 22, 44, 55] a [11, 22] b.concat(a) [44, 55, 11, 22]
反转
a [11, 22] a.reverse() [22, 11] a [22,
a [22, 11] a.join('_') "22_11" a [22, 11]
11]
字符串格式化
1 a 2 [22, 11] 3 a.join('_') 4 "22_11" 5 a 6 [22, 11]
数组长度
a [22, 11] a.length 2
6、字典(没有字典类型,但是可以伪造)
dict1 = {'k1':123,'k2':234} #定义一个字典 Object {k1: 123, k2: 234} dict1['k1'] 123
7、循环
js中的循环有两种方式
#第一种 for (var i=0;i<10;i++) {console.log(i)} #输出结果,看本代码下第一图 #第二种 for (var item in a) {console.log(a[item])} #输出结果,看本代码下第二图
8、异常处理
和python中的异常处理类似,代码如下:
<script type="text/javascript"> try{ var name = Peony }catch(e) { console.log(e) }finally{ console.log("Peony is a beauty;") } </script>
DOM编程:
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
注:一般说的JS让页面动起来泛指JavaScript和Dom
1、选择器:
document.getElementById('id') 查找指定的id,然后我们可以进行操作
<body> <div id="id_1"> </div> <script type="text/javascript"> var i = document.getElementById('id_1'); //查找指定的id i.innerText = '456'; //innerText修改指定的字符串 </script> </body>
显示效果,当我们打开IE的时候123就会被修改为456
document.getElementsByName('name')
<body> <div name="name_1"> </div> <script type="text/javascript"> var i = document.getElementsByName('name_1'); //查找指定的name,这里和ID不一样name可以有多个 for (var item in i) { i[item].innerText = '456'; //innerText修改指定的字符串 }; </script> </body>
document.getElementsByTagName('tagname')
<body> <div> </div> <div> </div> <script type="text/javascript"> var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如<div>标签可以有多个 for (var item in i) { i[item].innerText = '456'; //innerText修改指定的字符串 }; </script> </body>
2、注册 事件(onclick=”函数”)
常用事件:
- onclick
- onblur
- onfocus
- ..................
举例代码如下:
写一个input的标签,首先把事件和函数进行绑定,当你一点这个按钮的时候就会自动执行,绑定的函数:
<!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" onclick="edit();" value="修改" /> <script type="text/javascript"> function edit() { var i = document.getElementById('id_1'); i.className = 'color_red'; } </script> </body> </html>
再改回去:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--导入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" onclick="edit();" value="修改" /> <input type="button" onclick="rollback();" value="回滚"/> <script type="text/javascript"> 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>
事件列表:
注:一个标签可以绑定多个事件!
注:onload 和其他的不太一样,他是写在Javascirpt里的
<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>
3、常用函数
获取或者修改样式,修改上面的例子
在标签内注册了之后,如果在函数内i.className = 'color_red'; 这样是给他设置值,如果不设置值呢?
function edit() { var i = document.getElementById('id_1'); i.className = 'color_red'; }
不设置值(在上面修改的基础上再修改回去原样):
function edit() { var i = document.getElementById('id_1'); console.log(i.className); } function rollback() { var i = document.getElementById('id_1'); console.log(i.className) }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--导入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" onmousemove="edit()" value="修改 "/> <input type="button" onclick="rollback()" 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>
获取或设置属性:
获取属性
<body> <div name="Penoy" id="id_1"> age 18 </div> <input type="button" value="测试" onclick="edit()" /> <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>
修改属性:
<body> <div name="Peony" id="id_1"> age 18 </div> <input type="button" value="测试" onclick="edit()" /> <script type="text/javascript"> function edit() { var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签 var result = i.setAttribute('name','meihuan'); //修改属性 var result = i.getAttribute('name'); //获取id_1的标签的属性为name并赋值 console.log(result); //输出结果在console } </script> </body>
获取或修改样式中的属性
修改样式属性
<body> <div name="Peony" id="id_1" style="font-size:8px;background-color:green"> age 18 </div> <input type="button" onclick="edit()" value="测试" /> <script type="text/javascript"> function edit() { var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签 i.style.backgroundColor = "red"; //修改样式中的属性还有很多,可以测试 } </script> </body>
提交表单:
<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" onclick="go()"> </form> </body>
上述代码是不支持提交的,那么怎么做到可以提交呢?可以通告修改属性:
<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" onclick="go()"> </form> <script type="text/javascript"> function go() { document.getElementById('form_1').submit(); } </script> </body>
跳转页面:
<body> <div> 跳转范例 </div> <div> <!--在同一个标签内打开--> <input type="button" onclick="jump()" value="跳转至百度" /> <!--新起一个标签打开--> <input type="button" onclick="jump_new()" 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>
confirm() ,弹出消息提示框,显示“是”或“否”,根据用户的选择返回True 或者 Flase
<script type="text/javascript"> var result = confirm('是否继续'); console.log(result); </script>
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>
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>
Dom编程之创建标签:
创建标签的2种方式:
1、 通过字符串创建
2、 通过对象创建(常用方法)
方式一: var obj = document.createElement('a'); obj.href = "http://www.etiantian.org"; obj.innerText = "老男孩"; var container = document.getElementById('container'); //container.appendChild(obj); //container.insertBefore(obj, container.firstChild); //container.insertBefore(obj, document.getElementById('hhh')); 方式二: var container = document.getElementById('container'); var obj = "<input type='text' />"; container.innerHTML = obj; // 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd' //container.insertAdjacentHTML("beforeEnd",obj);
实例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' > 5 <title>欢迎blue shit莅临指导 </title> 6 <script type='text/javascript'> 7 function Go(){ 8 var content = document.title; 9 var firstChar = content.charAt(0) 10 var sub = content.substring(1,content.length) 11 document.title = sub + firstChar; 12 } 13 setInterval('Go()',1000); 14 </script> 15 </head> 16 <body> 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <title></title> 6 7 <style> 8 .gray{ 9 color:gray; 10 } 11 .black{ 12 color:black; 13 } 14 </style> 15 <script type="text/javascript"> 16 function Enter(){ 17 var id= document.getElementById("tip") 18 id.className = 'black'; 19 if(id.value=='请输入关键字'||id.value.trim()==''){ 20 id.value = '' 21 } 22 } 23 function Leave(){ 24 var id= document.getElementById("tip") 25 var val = id.value; 26 if(val.length==0||id.value.trim()==''){ 27 id.value = '请输入关键字' 28 id.className = 'gray'; 29 }else{ 30 id.className = 'black'; 31 } 32 } 33 </script> 34 </head> 35 <body> 36 <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/> 37 </body> 38 </html>
jQuery
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是更加便捷的开发,并且在兼容性方面十分优秀。
要想使用jQuery首先得导入代码如下(附加简单应用):
http://www.php100.com/manual/jquery/
1、选择器和筛选器
基本选择器:
例如:$('#n1').text('123'); //分解 $('#n1') 找到id为n1的标签,并把里面的内容修改为123
更多见:http://www.php100.com/manual/jquery/
http://www.cnblogs.com/wupeiqi/articles/5369773.html