目录
JavaScript
Dom
jQuery
JavaScript
JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
avaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
1、JavaScript代码存在形式
<!-- 方式一 --> <script type"text/javascript" src="JS文件"></script> <!-- 方式二 --> <script type"text/javascript"> Js代码内容 </script>
2、JavaScript代码存在位置
- HTML的head中
- HTML的body代码块底部(推荐)
由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。
<head> 中的 JavaScript 函数
在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。
该函数会在点击按钮时被调用:
实例
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script> </head> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html>
<body> 中的 JavaScript 函数
在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。
该函数会在点击按钮时被调用:
实例
<!DOCTYPE html> <html> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script> </body> </html>
提示:我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本。
外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:
实例
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>
在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。
提示:外部脚本不能包含 <script> 标签。
3、变量
- 全局变量
- 局部变量
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量
var name = "seven" # 局部变量 age = 18 # 全局变量
注:注释 // 或 /* */
4、基本数据类型
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
实例
var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill"; // x 为字符串
JavaScript 字符串
字符串是存储字符(比如 "Bill Gates")的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:
实例
var carname="Bill Gates"; var carname=‘Bill Gates‘;
您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:
实例
var answer="Nice to meet you!"; var answer="He is called ‘Bill‘"; var answer=‘He is called "Bill"‘;
JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
实例
var x1=34.00; //使用小数点来写 var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
实例
var y=123e5; // 12300000 var z=123e-5; // 0.00123
JavaScript 布尔
布尔(逻辑)只能有两个值:true 或 false。
var x=true var y=false
布尔常用在条件测试中。
JavaScript 数组
下面的代码创建名为 cars 的数组:
var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
var cars=["Audi","BMW","Volvo"];
数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。
常用方法:
常用方法: 添加 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 字典 var items = {‘k1‘: 123, ‘k2‘: ‘tony‘}
JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:
var person={ firstname : "Bill", lastname : "Gates", id : 5566 };
对象属性有两种寻址方式:
实例
name=person.lastname;
name=person["lastname"];
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
实例
cars=null; person=null;
5、循环语句
var names = ["alex", "tony", "rain"]; // 数组:方式一 for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); } // 数组:方式二 for(var index in names){ console.log(index); console.log(names[index]); } var names = {"name": "alex", "age": 18}; // 字典:方式一 for(var index in names){ console.log(index); console.log(names[index]); } // while循环 while(条件){ // break; // continue; }
6、条件语句
//if条件语句 if(条件){ }else if(条件){ }else{ } var name = ‘alex‘; var age = 1; // switch,case语句 switch(name){ case ‘1‘: age = 123; break; case ‘2‘: age = 456; break; default : age = 777; }
7、异常处理
try{ }catch(e) { }finally{ }
8、函数
函数的声明 function func(arg){ return true; } 匿名函数 var func = function(arg){ return "tony"; } 自执行函数 (function(arg){ console.log(arg); })(‘123‘)
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);
资料:http://www.w3school.com.cn/js/index.asp
Dom
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
1、查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
document.getElementById(‘id‘); document.getElementsByName(‘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、提交表单
document.geElementById(‘form‘).submit()
6、事件
特殊的:
window.onload = function(){} //jQuery:$(document).ready(function(){}) //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的,不等图片加载完毕。图片还么有渲染,就可以进行事件的执行。
特殊参数:this,event
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/