Python之路Day13

day13主要内容：JavaScript、DOM、jQuery

武Sir blog:http://www.cnblogs.com/wupeiqi/articles/5369773.html

JavaScript

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照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实现特效慢而已。

3. 变量

//全局变量:可以在脚本中的任何位置被引用。
name = "Alex"
//局部变量：只存在于声明它的那个函数内部。
var name = "Alex"

良好的编程习惯应该是，在第一次对某个变量赋值时应该用var对其作出声明。在函数内部使用变量时，更应该如此。

4. 基本数据类型

4.1 数值（Number）

var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
parseInt("1.2");  //转换成int类型
parseFloat("1.2");  //转换成float类型

4.2 字符串(String)

var name = "Alex";
var name = String("Alex");
var ageStr = String(18);

常用方法：
    obj.trim()  //去除空格
    obj.charAt(index)  //指定索引位
    obj.substring(start,end)  //切片
    obj.indexOf(char)  //求索引值
    obj.length  //长度

4.3 布尔值(Boolean)

var status = true;
var status = false;
var status = Boolen(1==1)

4.4 数组(Array)

var names = ['alex', 'john', 'eric']
var names = Array('alex', 'john', 'eric')

常用方法：
    添加
        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 = Array();items["name"] = "computer";items["year"] = 2000；items["running"] = false;不推荐这样使用。本质上，在创建关联数组时，你创建的是Array对象的属性。在JavaScript中，所有的变量实际上都是某种类型的对象。因此，理想状态下，不应该修改Array对象的属性，而应该使用通用的对象（Object）来表达这种情形。

4.5 对象（Object）

与数组类似，对象也是使用一个名字表示一组值。对象的每个值都是对象的一个属性。

var person = new Object;
persion.name = "Alex";
persion.age = 18;

类似于Python的字典类型?

//这里的persion是一个对像，类似于Python中的字典？
var persion = {'name': "Alex", 'age': 18};
console.log(persion.name);
console.log(persion.age);

4.6 undefined

undefined表示未定义值，即表示变量不含有值。

4.7 null

null是一个特殊值，可以通过将null赋值给变量来清空该变量。

5. 循环语句

var num = 2;

//循环
console.log("For循环：");
nameArray = ["Alex", "John", "Eric"];

//一种循环数组的方法
for(var i=0;i<nameArray.length;i++){
    console.log(i);
    console.log(nameArray[i]);
}

//另外一种循环数组的方法
for(var inx in nameArray){
    console.log(inx);
    console.log(nameArray[inx]);
}

console.log("While循环：");var num = 1;while(i < 10){    console.log(num);    num++;}

console.log("do while循环:");var num = 1;do {    console.log(num);    num++;} while (num < 10);

//continue和break
while (num < 10){
    if (num == 5){
        num ++;
        continue;  //跳过本次循环
    }
    if (num == 7){
    break;  //跳出循环
    }
    console.log(num);
    num ++;
}

6. 条件语句

var num = 2;
//条件判断
console.log("if条件判断:");
if(num == 1){
    console.log("num=1");
}else if (num == 2){
    console.log("num=2");
}else if (num == 3){
    console.log("num=3");
}else {
    console.log("unknown num!");
}

//switch判断
console.log("switch判断：");
switch (num){
    case 1:
        console.log("num=1");
        break;
    case 2:
        console.log("num=2");
        break;
    case 3:
        console.log("num=3");
        break;
    default:
        console.log("unknown num!");

}

7. 异常处理

var num = 2;
//异常处理
console.log("异常处理:");
try{
    console.log(num=2);
}catch(e){
    console.log(e);
}finally {
    console.log("finally do something...");
}

8. 函数

//函数声明
function func1(arg){
    console.log(arg);
    return "alex";
}

var ret = func1("1111");
console.log(ret);

//匿名函数
var f = function(arg){
    console.log("1111", arg);
};

f("2222");

//自执行函数
(function (arg){
    console.log(arg);
})("123");

JavaScript 内嵌函数:

所有函数都能访问全局变量。

实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();
    return counter;
}

JavaScript 闭包:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能通过 add 方法修改。

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 ret1 = obj.Func("humor");
console.log(ret1);

DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

注：一般说的JS让页面动起来泛指JavaScript和Dom

1. 选择器

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>q1mi</h1>"      # 设置HTML内容

特殊的：
    input系列
    textarea标签
    select标签
    value属性操作用户输入和选择的值

3. 创建标签

方式一：
    var obj = document.createElement('a');
    obj.href = "http://www.liwenzhou.com;
    obj.innerText = "q1mi";

    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. 事件

7. 特殊

window.onload = function(){}
        //jQuery：$(document).ready(function(){})
        //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。

特殊参数：this，event

8. 其他

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/

参考：http://www.runoob.com/jquery/jquery-tutorial.html

jQuery 安装

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

从 jquery.com 下载 jQuery 库

从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<script src="jquery-2.2.3.js"></script>

提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。

替代方案

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

百度、新浪、谷歌和微软的服务器都存有 jQuery 。

如果站点用户是国内的，建议使用百度、新浪等国内CDN地址，如果站点用户是国外的可以使用谷歌和微软。

例如从谷歌引用 jQuery，使用以下代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪事件

为了防止文档在完全加载（就绪）之前就运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

① 试图隐藏一个不存在的元素

② 获得未完全加载的图像的大小

以下两种方式可以实现文档就绪后再执行jQuery方法：

1.

$(document).ready(function(){
   // jQuery methods go here...
});

2.

$(function(){
   // jQuery methods go here...
});

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

更多实例

注意：为了 jQuery 函数易于维护，应该把 jQuery 函数放到独立的 .js 文件中。

jQuery 事件

jQuery 是为事件处理特别设计的。

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

①在元素上移动鼠标。

②选取单选按钮

③点击元素

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

常见 DOM 事件：

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

定义一个触发事件：

$("p").click(function(){
  // action goes here!!
});

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTMl 元素时执行。

在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

$("p").click(function(){
  $(this).hide();
});

dblclick()

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});