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

随机推荐

Delphi的WebBrowser改造，对网页中Alter等对话框的改造方法（通过COM来改造）
刚有一段时间没做博客了,今天刚好有人问了这个问题,而自己以前也弄过,于是这里有了一篇新的博文. 关于改造WebBrowser控件的一些技巧,大家可以参考MSDN或者蒋晟写的一个东西,里面有讲的很详细的 ...
windows 下面的内存泄漏排查.
内存泄漏排查一下本人只是简单的介绍一个实用, 如果读者很感兴趣, 可以查阅msdn自己去深入调查相关的API和原理. API 介绍 1. 马上打印泄漏信息:_CrtDumpMemoryLeaks() ...
ubuntu安装XHProf
1. 安装XHProf wget http://pecl.php.net/get/xhprof-0.9.2.tgz tar zxf xhprof-0.9.2.tgz cd xhprof-0.9.2 s ...
String、StringBuffer和StringBuild的区别
public class Test1 { public static void stringReplace (String text) { text = text.replace('j','i') ; ...
Visual Studio 继续并运行上次的成功生成,未提示直接运行上一个版本解决方案!
Visual Studio ==>工具 ==> 选项==>项目和解决方案 ==>生成并运行_运行时,当出现生成或部署错误时_选择,提示启动
C/C++存储区划分
一. 在c中分为这几个存储区1.栈 - 由编译器自动分配释放2.堆 - 一般由程序员分配释放,若程序员不释放,程序结束时可能由OS回收3.全局区(静态区),全局变量和静态变量的存储是放在一块的,初始化 ...
C++ STL中map存储方式——SAP电面（4）
map存储方式一般是平衡二叉树红黑树
BZOJ 1708: [Usaco2007 Oct]Money奶牛的硬币( dp )
背包dp.. -------------------------------------------------------------------------------- #include< ...
jquery选择器:nth-child()与空格:eq() 的区别;
在一个7x7的表格当中 nth-child(1); td.parents("table").find("tr :nth-child(1)").css(" ...
selenium 学习笔记 ---新手学习记录（6）问题总结（java）
1.查看网页的cookie信息 //查看cookie 登录后的cookie Set<Cookie> setcoke= driver.manage().getCookies(); for(C ...

python成长之路15

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

随机推荐

热门专题