JavaScript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。
1. JavaScript的存在形式
JavaScript有两种存在形式,分别是文件形式和代码块形式
文件形式:
<!-- 方式一 --> <script type"text/javascript" src="JS文件"></script>
js代码块存在形式:
<script type"text/javascript"> Js代码内容 </script>
2、JavaScript代码存在位置
- html的head标签内
- html的body底部,推荐使用这种方式,因为html代码是从上往下执行的,这样可以避免某些js脚本问题而导致页面内容不显示,一般会让页面先显示出来然后再执行js脚本。
代码示例:
<body> <script src="jquery-2.2.3.min.js"></script> <script> (function(){alert(1);})(); (function(arg){ console.log("aaabbb",arg) })("cccddd"); function foo(num1,num2){ this.num1=num1; this.num2=num2; this.Func= function (arg) { return this.num1+arg; } } </script> </body>
3、变量
- 全局变量
- 普通变量
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量
var name = "seven" # 局部变量 age = 18 # 全局变量
注:注释 // 或 /* */
4、基本数据类型
- 数字(Number)
定义方法:
var age=19 var age=parseInt("20") var age=Number("21")
- 字符串(String)
var name =String("北京故宫") console.log(name[0]) //按照索引取相应的字符串 console.log(name.charAt(2))//按照索引取相应的字符串 console.log(name.substring(1,4))//连续取字符串 console.log(name.indexOf("京"))//取某字符串的索引 console.log(name.length)//取字符串的长度
- 布尔(Boolean)
var status = true; var status = false; var status = Boolen(1==1)
- 数组(Array)
var names = ['alex', 'tony', 'eric'] var names = Array('alex', 'tony', 'eric') 常用方法: 添加 obj.push(ele) 追加 obj.unshift(ele) 最前插入 obj.splice(index,0,'content') 指定索引插入,中间的0是固定参数必须为0 移除 obj.pop() 数组尾部获取 obj.shift() 数组头部获取 obj.splice(index,count) 数组指定位置后count个字符 切片 obj.slice(start,end) 合并 newArray = obj1.concat(obj2) 翻转 obj.reverse() 字符串化 obj.join('_') 长度 obj.length字典
var items
=
{
'k1'
:
123
,
'k2'
:
'tony'
}
5. 循环
<script> //数组 方式一 var names=["alex", "tony", "rain"] for (var i=0;i<names.length;i++){ console.log(names[i]); } var dics = {"name1":"alex","name2":"tony"} for (var n in dics) { console.log(dics[n]) } //数组 方式二 var names=["alex", "tony", "rain"] for (var index in names){ console.log(names[index]) } //while循环 while (1==1){ console.log("ok!"); break; } </script>
6. if语句
<script> //if语句 a = "alex" if (a=="tony"){ console.log("wrong!"); }else if (a=="alex"){ console.log("right!"); }else{ console.log("no!"); } //switch case 语句 names="tony" switch(names){ case "tony": console.log("tony"); break; case "rack": console.log("rack"); break; case "alex": console.log("alex"); break; } </script>
7. 异常处理
//异常处理 try { dfadfadfadf; }catch (e){ console.log("出错了!"); }finally { console.log("endly"); }
8. 函数
<script> //普通函数 function func(){ console.log("普通函数!") } func() //匿名函数 var func2 = function(){ console.log("匿名函数") } func2() //自执行函数 (function(){ console.log("ok") })();
9. 面向对象
function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; } } var obj = new Foo('alex', 18); var ret = obj.Func("sb"); console.log(ret);
Dom编程
Dom
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
注:一般说的JS让页面动起来泛指JavaScript和Dom
1、选择器
document.getElementById('id');//根据id获取 document.getElementsByName('name');//根据name属性获取 document.getElementsByTagName('tagname');//根据标签名字获取
2、内容
innerText innerHTML var obj = document.getElementById('nid') obj.innerText # 获取文本内容 obj.innerText = "hello" # 设置文本内容 obj.innerHTML # 获取HTML内容 obj.innerHTML = "<h1>asd</h1>" # 设置HTML内容 特殊的: input系列 textarea标签 select标签 value属性操作用户输入和选择的值
3. 创建标签
方式一: 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);
4. 标签属性
var obj = document.getElementById('container'); 固定属性 obj.id obj.id = "nid" obj.className obj.style.fontSize = "88px"; 自定义属性 obj.setAttribute(name,value) obj.getAttribute(name) obj.removeAttribute(name)
5. 5、提交表单
document.geElementById('form').submit()
6. 事件
特殊的:
window.onload = function(){} //jQuery:$(document).ready(function(){}) //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的,不等图片加载完毕。图片还么有渲染,就可以进行事件的执行。
7、其他功能
console.log() alert() confirm() // URL和刷新 location.href location.href = "url" window.location.reload() // 定时器 setInterval("alert()",2000); clearInterval(obj) setTimeout(); clearTimeout(obj)
jQuery
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/