python学习之day13

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/