python学习之day13

时间：2021-02-22 20:05:16

目录

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 树

python学习之day13

通过可编程的对象模型，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、事件

python学习之day13

特殊的：

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/

相关文章