python成长之路15

一：JavaScript:

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

1、位置：

<!-- 方式一 -->

<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实现特效慢而已。

如：

<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>

<script>

    alert('123');

</script>

例如2,先写正常的代码，将JavaScript写在最下端：

<body>
 <h1>xxxxxx</h1>
<script>
    function f1() {
        alert("f1")
    }
    f1()
</script>
</body>

3、变量

　　全局变量

　　局部变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量

var name = "seven"  # 局部变量

age = 18            # 全局变量

注释：

 // 
或
 /* */

4、基本数据类型：

数字（Number）

1

2

3

4

5

var page = 111; #整数

var age = Number(18); #数值

var a1 = 1,a2 = 2, a3 = 3; #多个局部变量

parseInt("1.2"); #转换成整数

parseFloat("1.2"); #抓换成浮点数

字符串(String)：

var name = "jack";

var name = String("jack");

var age_str = String(18);

常用方法：

    obj.trim()

    obj.charAt(index)

    obj.substring(start,end)

    obj.indexOf(char)

    obj.length

可以在google浏览器的调试模式的console接口进行调试：

布尔(Boolean)：

var status = true;

var status = false;

var status = Boolen(1==1)

数组(Array)：

var names = ['jack', 'tom', '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 = {'k1': 123, 'k2': 'tony'}

　　获取值

　　items.k1();

　

　　序列化：

　　#将字典转换为字符串

　　s1 = JSON.stringify(items)

　　"{"k1":123,"k2":"tony"}"

　　将字符串序列化为对象：

　　s2 = JSON.parse(s1)

　　Object {k1: 123, k2: "tony"}

　　s2

　　Object {k1: 123, k2: "tony"}

undefined：

undefined表示未定义值

var name;

null：

null是一个特殊值

5、循环语句：

var names = ["jack", "tony", "rain"];

// 数组：方式一

for(var i=0;i<names.length;i++){

    console.log(i);

    console.log(names[i]);

}

如图：

//属组：方式二

var names = {"name": "jack", "age": 18};

for(var index in names){

    console.log(index);

    console.log(names[index]);

}

如图：

//字典循环：

// 字典：方式一

var names = {"k1":"v1","k2":"v2"}

undefined

for(var index in names){

    console.log(index);

    console.log(names[index]);

}

如图：

while 循环：

while(条件){

    // break;

    // continue;

}

6、条件语句：

//if条件语句

    if(条件){

    }else if(条件){

    }else{

    }

var username= 'jack';
var age = 111;

// switch,case语句
    switch(age){
        case 111:
            console.log("111");
            break;
        case 222:
            console.log("222");
            break;
        default :
            console.log("333");
            age = 333;
    }

7、异常处理：

try{

}catch(e) {

}finally{

}
#try是正常代码块，catch(e)捕获指定错误，finally当上面都没有执行的时候执行

8、函数：

函数1：

function Foo (name,age) {

    this.Name = name;

    this.Age = age;

    this.Func = function(arg){

        return this.Name + arg;

    }

}

var obj = new Foo('jack', 18);

var ret = obj.Func("sb");

console.log(ret);

函数2：

function  func(arg){

    console.log(arg);

    return "uuu"

}

func("jack");

var ret = func("123");

console.log(ret);

函数3：匿名函数

var f= function(arg){

    console.log(arg)

};

f("123");

函数4--自执行函数：

<script>

 (function(){

     console.log("abc");

 })();

</script>

函数5--自执行参数2-带参数：

<script>

 (function(arg){

     console.log("jack",arg);

 })("tom");

</script>

8、面向对象：基于函数加原型构造数类似于面向对象的功能

<script>

    function  Foo(name,age){

        this.Name = name;

        this.Age = age;

        this.Func = function(arg){

            return this.Name + arg;

        }

    }

    var obj = new Foo("jack",18);

    console.log(obj.Name);

    console.log(obj.Age);

    var ret = obj.Func("sb");

    console.log(ret);

</script>

二：Dom

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

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

默认格式是查找内容-->操作内容：

修改内容：

tags = document.getElementsByTagName('h1');  #根据tagName修改：

　　[<h1>xxx</h1>, <h1>yyy</h1>]

tags = document.getElementsByTagName('h1');

　　[<h1>xxx</h1>, <h1>yyy</h1>]

tags[0];

　　<h1>xxx</h1>

tags[0].innerText = "1234";

　　"1234"

tags[1].innerText = "2234";

　　"2234"

1、选择器：

<script type="text/javascript">

    var nid = document.getElementById('n1'); //根据标签的id取值，id在性别选择和checkbox的时候是一样的，其他时候不能一样

    nid.innerText = "jack";

</script>

<script type="text/javascript"> //不指定的话默认就是text/javascript，如果写成别的会导致javascript无法正常使用

    var lis = document.getElementsByTagName('li'); //根据标签的名称获取值

    for(var i in lis){ //循环一个对象

        var item = lis[i]; //取出对象里面的值

        item.innerText = i; //innerText 是修改对应key的值

    }

    var lis2 = document.getElementsByClassName('c1');  //根据标签使用的哪一个class获取值

    for(var i in lis2){

        var item = lis2[i];

        item.innerText = i;

    }

var username = document.getElementsByName('username')[0];  //根据标签内置的name获取value

var pwd = document.getElementsByName('pwd')[0];

console.log(username.value,pwd.value); //value表示取出对应的值，username.value就是获取到username对应的值，pwd.value就是获取pwd的值

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属性操作用户输入和选择的值

通过修改文本内容实现数值自动增加：

<body>

    <div>

        <div id="num">1</div>

        <input  type="button" value="+1" onclick="Add();" />

    </div>

    <script type="text/javascript">

        function Add() {

            var nid = document.getElementById('num');

            var text = nid.innerText;

            text = parseInt(text);

            text += 1;

            nid.innerText = text;

        }

    </script>

</body>

获取文本内容：

获取到内部所有标签的文本内容，不包含div，h1等标签：

<div id="n1">

    <h1>jack</h1>

    <h1>XX</h1>

</div>

<script type="text/javascript">

    var text = document.getElementById("n1");

    console.log(text.innerText);

</script>

</body>

结果：

jack

XX

获取包含标签在和文本内容在内的信息：

<body>

<div id="n1">

    <h1>jack</h1>

    <h1>XX</h1>

</div>

<script type="text/javascript">

    var text = document.getElementById("n1");

    console.log(text.innerHTML);

</script>

</body>

结果：

<h1>jack</h1>

<h1>XX</h1>

特殊性：input、select、textarea：通过value 获取值，不能通过 innerText获取：

<body>

   <div id="n11">alex

        <h1>XXX</h1>

    </div>

    <h1>特殊的：value</h1>

    <h3><input type="button" onclick="GetValue();" value="获取值"></h3>

    <input id = "n22" type="text">

    <select id="n33">

        <option value="1">上海</option>

        <option value="2">广州</option>

        <option value="3">深圳</option>

    </select>

    <textarea id="n44">aa</textarea>

</body>

// 通过id获取到值并进行操作

function  GetValue(){

    var  obj = document.getElementById('n22');

    alert(obj.value);

    obj.value = "2"; //重新赋值

}

做一个搜索框吧：默认显示"请输入要搜索的内容"，当鼠标点到搜索框就则不显示，如果搜索框内没有输入任何内容，当鼠标离开时在显示"请输入要搜索的内容"。

<body>

 <input type="text" id="search" value="请输入要搜索的内容"  onfocus="Focus();" onblur="Blur();" />

    <script>

        function Focus(){

           var nid = document.getElementById("search");

           var value = nid.value;

           if(value == "请输入要搜索的内容") {

               nid.value = "";

           }else if(value == "请再次输入关键字") {

               nid.value = "";

           }

        }

        function Blur(){

            var  nid = document.getElementById('search');

            var  value = nid.value;

            if(!value.trim()){

                nid.value = "请输入要搜索的内容";

            }

        }

    </script>

</body>

3、创建标签：

<body>

    <div id="container"></div>

    <a href="http://www.baidu.com" onclick="return AddElement();">添加</a>

    <script>

        function AddElement(){

             /*

            var nid = document.getElementById('container');

            var tag = "<input type = 'text' value='defalut' />";

            nid.innerHTML = tag;

            container.insertAdjacentHTML("beforeBegin",tag);

            return false;

　　　　　　　　//return false表示其后面的将不再执行

           */

            var  createObj = document.createElement('a');

            createObj.href = "http://www.baidu.com";

            createObj.innerText = "我的搜索";

            //nid.innerHTML = createObj;

            var nid = document.getElementById('container');

            nid.appendChild(createObj);

            return false;

        }

    </script>

</body>

4、标签属性及修改：

var obj = document.getElementById('container');

修改固定属性

    obj.id

    obj.id = "nid"

    obj.className

    obj.style.fontSize = "yy";

如图：

获取默认属性：

自定义属性

    obj.setAttribute(name,value)

    obj.getAttribute(name)

    obj.removeAttribute(name)

如图：

总结：有的属性是默认属性可以使用obj.key直接获取，对于没有的属性即自定义可以使用obj.setAttribute("key","value")设置，然使用obj.getAttribute("key")可以获取值

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)

更改style里里面的属性：

var nid = document.getElementById("n1"); #找到id为n1的属性

nid.style.backgroundColor = "green" #进行操作

如图：

8、提交表单：

不做验证，即不判断用户的输入是否为空：

<body>

    <form id="forml" action="https://www.sogou.com/web" method="get">

        <input name="query" type="text" />

       <!-- <input type="submit" value="提交">  /* 方法1，使用submit直接提交 */ -->

        <div onclick="Submit();">提交</div>

    </form>

    <script>

        function  Submit(){

            document.getElementById('forml').submit(); #找到id为forml的并将表单给其提交

        }

    </script>

</body>

验证用户的输入是否为空：

<body>

    <form id="forml" action="https://www.sogou.com/web" method="get">

        <input name="query" type="text" />

       <input type="submit" value="提交" onclick="return MySubmit();" style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>

    </form>

    <script>

        function  MySubmit(){

            var q = document.getElementsByName('query')[0];

            if(q.value.trim()){

                return true

            }else {

                alert('请输入内容')

                return false

            }

        }

    </script>

</body>

注：提交成功后将是搜狗的搜索界面

定时器：

<head>

    <meta charset="UTF-8">

    <title>欢迎光临本网站，您的满意是我们最大的需求！</title>

</head>

<body>

    <input type="button" onclick="Stop();" value="停下来吧" >

    <input type="button" onclick="Start();" value="继续转吧" >

    <script>

        //setInterval("操作"，"间隔时间毫秒")

        obj1 = setInterval("Func()",1000);

        //obj2 = setTimeout("Func()",10000); //设置超时时间，即一共转动多少秒

        function Stop(){

            //清楚定时器

            clearInterval(obj1);

            //clearTimeout(obj2); //调用超时

        }

        function Start(){

            obj1 = setInterval("Func()",1000);

        }

        function  Func(){

            var  text = document.title;

            var  firstChar = text.charAt(0);

            var  subText = text.substring(1,text.length);

            var  newTitle = subText + firstChar;

            document.title = newTitle;

        }

    </script>

</body>

python成长之路15的更多相关文章

（转）Python成长之路【第九篇】：Python基础之面向对象
一.三大编程范式正本清源一:有人说,函数式编程就是用函数编程-->错误1 编程范式即编程的方法论,标识一种编程风格大家学习了基本的Python语法后,大家就可以写Python代码了,然后每个 ...
【Python成长之路】装逼的一行代码：快速共享文件
[Python成长之路]装逼的一行代码:快速共享文件 2019-10-26 15:30:05 华为云阅读数 335 文章标签: Python编程编程语言程序员Python开发更多分类专栏: 技术 ...
【Python成长之路】Python爬虫 --requests库爬取网站乱码（\xe4\xb8\xb0\xe5\xa）的解决方法【华为云分享】
[写在前面] 在用requests库对自己的CSDN个人博客(https://blog.csdn.net/yuzipeng)进行爬取时,发现乱码报错(\xe4\xb8\xb0\xe5\xaf\x8c\ ...
python成长之路第三篇(1)_初识函数
目录: 函数为什么要使用函数什么是函数函数的返回值文档化函数函数传参数文件操作(二) 1.文件操作的步骤 2.文件的内置方法函数: 一.为什么要使用函数在日常写代码中,我们会发现有很多 ...
我的Python成长之路---第一天---Python基础（1）---2015年12月26日（雾霾）
2015年12月26日是个特别的日子,我的Python成之路迈出第一步.见到了心目中的Python大神(Alex),也认识到了新的志向相投的伙伴,非常开心. 尽管之前看过一些Python的视频.书,算 ...
我的Python成长之路---第四天---Python基础（15）---2016年1月23日（寒风刺骨）
二.装饰器所谓装饰器decorator仅仅是一种语法糖, 可作用的对象可以是函数也可以是类, 装饰器本身是一个函数, 其主要工作方式就是将被装饰的类或者函数当作参数传递给装饰器函数.本质上, ...
Python成长之路第二篇（1）_数据类型内置函数用法
数据类型内置函数用法int 关于内置方法是非常的多这里呢做了一下总结 (1)__abs__(...)返回x的绝对值 #返回x的绝对值!!!都是双下划线 x.__abs__() <==> a ...
Python成长之路 — 字典
一.字典的定义与创建字典是Python中唯一内建的映射类型.你可以将其想象成书本的目录,章节名称代表"key",页码则代表"value".书本的目录本质上是也 ...
python成长之路第三篇（4）_作用域，递归，模块，内置模块（os，ConfigParser，hashlib），with文件操作
打个广告欢迎加入linux,python资源分享群群号:478616847 目录: 1.作用域 2.递归 3.模块介绍 4.内置模块-OS 5.内置模块-ConfigParser 6.内置模块-has ...

随机推荐

.Net时间计算函数，统计某一天是一年的第几周，这一周从哪天开始到哪天结束
/// <summary> /// 计算某年第一周的天数 /// </summary> /// <param name="dt& ...
Gridview编辑时Jquery自动计算自定义列（鼠标离开输入框Jquery计算）
Jquery片段: <script type="text/javascript"> function compute(nbBoxQuantity, lblQuantit ...
iOS 监听键盘变化
//将要显示键盘 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(willShowKeyboard: ...
handlebar.js使用
官方网站:http://handlebarsjs.com/ 下载及查看使用帮助,或者用百度cdn引用一.定义模板 <script id="entry-template" t ...
JavaScript的深度克隆
1.JavaScript的五种基本数据类型: Number.String.Boolean.null.undefined. 2.typeof返回的六种数据类型: Number.String.Boolea ...
HOOK API（三）—— HOOK 所有程序的 MessageBox
HOOK API(三) —— HOOK 所有程序的 MessageBox 0x00 前言本实例要实现HOOK MessageBox,包括MessageBoxA和MessageBoxW,其实现细节与H ...
HOOK API（二）—— HOOK自己程序的 MessageBox
HOOK API(二) —— HOOK自己程序的 MessageBox 0x00 前言以下将给出一个简单的例子,作为HOOK API的入门.这里是HOOK 自己程序的MessageBox,即将自己程 ...
UVa1585 Score
#include <stdio.h> int main(){ int T, O, score; char str[81], *p; scanf("%d" ...
1.3. chromium源代码分析 - chromiumframe - 窗口系列
在_tWinMain中有这样两条语句: MainWindowDelegate delegate; view::Window::CreateNativeWindow(NULL, gfx::Rect(), ...
BZOJ 1221: [HNOI2001] 软件开发(最小费用最大流)
不知道为什么这么慢.... 费用流,拆点.... --------------------------------------------------------------------------- ...

python成长之路15

python成长之路15的更多相关文章

随机推荐

热门专题