目录

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 树

ct_htmltree

通过可编程的对象模型,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/