Python学习路程day13

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

 如：

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

3、变量

全局变量
局部变量

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

 var name = "seven"  # 局部变量

 age = 18            # 全局变量

注：注释 // 或 /* */

4、基本数据类型、

数字（Number）

 var page = 111;

 var age = Number(18);

 var a1 = 1,a2 = 2, a3 = 3;

 parseInt("1.2");

 parseFloat("1.2");

字符串(String)

 var name = "wupeiqi";

 var name = String("wupeiqi");

 var age_str = String(18);

 常用方法：

     obj.trim()

     obj.charAt(index)

     obj.substring(start,end)

     obj.indexOf(char)

     obj.length

布尔(Boolean)

 var status = true;

 var status = false;

 var status = Boolen(1==1)

数组(Array)

 var names = ['alex', 'tony', 'eric']

 var names = Array('alex', 'tony', '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'}

序列化和反序列化

 var items = {'k1': 123, 'k2': 'tony'}

 s = JSON.stringify(items)      #序列化字典

 m = JSON.parse(s)         #反序列化

undefined

 undefined表示未定义值

 var name;

null

 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('wu', 18);

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

 console.log(ret);

Dom

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

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

1、选择器

 document.getElementById('id');

 document.getElementsByName('name');

 document.getElementsByTagName('tagname');

 document.getElementsBycClassName('classname');

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、创建标签

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

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

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

     <script type="text/javascript">

         function AddElement(){

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

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

             createObj.innerText = "百度一下"

             var container = document.getElementById("container");

             container.appendChild(createObj)

             return false;

         }

     </script>

 </body>

 </html>

 方式一：(推荐)

     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)

实例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' >

        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>

        <script type='text/javascript'>

            function Go(){

                var content = document.title;

                var firstChar = content.charAt(0)

                var sub = content.substring(1,content.length)

                document.title = sub + firstChar;

            }

            setInterval('Go()',1000);

        </script>

    </head>

    <body>

    </body>

</html>

跑马灯

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' />

        <title></title>

        <style>

            .gray{

                color:gray;

            }

            .black{

                color:black;

            }

        </style>

        <script type="text/javascript">

            function Enter(){

               var id= document.getElementById("tip")

               id.className = 'black';

               if(id.value=='请输入关键字'||id.value.trim()==''){

                    id.value = ''

               }

            }

            function Leave(){

                var id= document.getElementById("tip")

                var val = id.value;

                if(val.length==0||id.value.trim()==''){

                    id.value = '请输入关键字'

                    id.className = 'gray';

                }else{

                    id.className = 'black';

                }

            }

        </script>

    </head>

    <body>

        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>

    </body>

</html>

搜索框

jQuery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

http://www.php100.com/manual/jquery/

1、选择器和筛选器

实例:加载

实例:左侧菜单

实例:Tab菜单-css

实例:Tab菜单-html

2、属性和css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .back{

            position: fixed;

            bottom: 0px;

            right: 0px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div style="height: 2000px;"></div>

<div onclick="GoTop()" class="back hide">返回顶部</div>

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

<script type="text/javascript">

    function GoTop(){

        //返回顶部

        $(window).scrollTop(0);

    }

    $(function(){

        $(window).scroll(function(){

            //当滚动滑轮时，执行函数体

            //获取当前滑轮滚动的高度

            var top = $(window).scrollTop();

            if(top>100){

                //展示“返回顶部”

                $('.back').removeClass('hide');

            }else{

                //隐藏“返回顶部”

                $('.back').addClass('hide');

            }

        });

    });

</script>

</body>

</html>

实例:返回顶部

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' />

        <title></title>

        <script type="text/javascript" src='jquery-1.8.2.js'></script>

        <script type="text/javascript">

            $(function(){

                $('#selectAll').click(function(){

                    $('#checklist :checkbox').prop('checked',true);

                })

                $('#unselectAll').click(function(){

                    $('#checklist :checkbox').prop('checked',false);

                })

                $('#reverseAll').click(function(){

                    $('#checklist :checkbox').each(function(){

                        $(this).prop('checked',!$(this).prop('checked'))

                    })

                })

            })

        </script>

    </head>

    <body>

        <div id='checklist'>

            <input type='checkbox' value='1'/>篮球

            <input type='checkbox' value='2'/>足球

            <input type='checkbox' value='3'/>羽毛球

        </div>

        <input type='button' value='全选' id='selectAll' />

        <input type='button' value='不选' id='unselectAll' />

        <input type='button' value='反选' id='reverseAll' />

    </body>

</html>

实例:多选，反选和取消

实例:滚动菜单

3、文档处理

4、事件

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">

        <div id="title" style="background-color: black;height: 40px;"></div>

        <div style="height: 300px;"></div>

    </div>

<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>

<script>

    $(function(){

        $('#title').mouseover(function(){

            $(this).css('cursor','move');

        }).mousedown(function(e){

            //console.log($(this).offset());

            var _event = e || window.event;

            var ord_x = _event.clientX;

            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;

            var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove', function(e){

                var _new_event = e || window.event;

                var new_x = _new_event.clientX;

                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);

                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');

                $(this).parent().css('top',y+'px');

            })

        }).mouseup(function(){

            $(this).unbind('mousemove');

        });

    })

</script>

</body>

</html>

实例:移动面板

5、扩展

下载：http://files.cnblogs.com/files/wupeiqi/%E7%99%BB%E9%99%86%E6%B3%A8%E5%86%8C.zip

实例:表单验证

6、ajax和跨域

下载：http://files.cnblogs.com/files/wupeiqi/ajax_demo.zip

实例:ajax

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />

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

<script src="jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function AjaxRequest() {

            $.ajax({

                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',

                type: 'GET',

                dataType: 'jsonp',

                jsonp: 'callback',

                jsonpCallback: 'list',

                success: function (data) {

                    $.each(data.data,function(i){

                        var item = data.data[i];

                        var str = "<p>"+ item.week +"</p>";

                        $('#container').append(str);

                        $.each(item.list,function(j){

                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";

                            $('#container').append(temp);

                        });

                        $('#container').append("<hr/>");

                    })

                }

            });

        }

</script>

</body>

</html>

实例:Ajax跨域

作业：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>selfHomework</title>

    <style>

        .tableAttr{

            border:1px solid black;

            width:300px;

            text-align:center;

            margin: 100px auto 0px auto;

        }

        .tableAttr td{

            border:1px solid black;

        }

        .hiden{

            display:none;

        }

        .edit{

            background-color: #ADADAD;

            width: 500px;

            height: 300px;

            margin: auto;

        }

        .edit .bj{

            width: 300px;

            margin: 0px auto;

            padding-top: 30px;

        }

        .edit .tj{

            width: 50px;

            height: 30px;

            margin-left: 80px;

        }

        .edit .qx{

            width: 50px;

            height: 30px;

            margin-right: 80px;

        }

        .red-color{

            border:2px red solid;

        }

    </style>

</head>

<body>

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

    <table class="tableAttr">

        <tbody>

            <tr id="1">

                <td>1</td>

                <td>2</td>

                <td class="ed">编辑</td>

            </tr>

            <tr id="2">

                <td>11</td>

                <td>22</td>

                <td class="ed">编辑</td>

            </tr>

            <tr id="3">

                <td>111</td>

                <td>222</td>

                <td class="ed">编辑</td>

            </tr>

        </tbody>

    </table>

    <div class="edit hiden">

        <div class="bj">ID:<input type="text" id="key" value=""></div>

        <div class="bj">NUM:<input type="text" id="num" value=""></div>

        <div class="bj">

            <button class="tj">提交</button>

            <button class="qx">取消</button>

        </div>

    </div>

    <script type="text/javascript">

        var lock = 0

        var edit_id = 0

        //编辑操作

        $(".ed").click(function(){

            if(lock == 1){

                return false;

            }

            lock = 1;

            edit_id=$(this).parent().attr("id");

            $(".edit").removeClass("hiden");

            $(this).siblings().each(function(i){

                if(i==0){

                    $("#key").val($(this).text());

                }

                if(i==1){

                    $("#num").val($(this).text());

                }

            })

        })

        //提交

        $(".tj").click(function(){

            var key_val = $("#key").val().trim();

            var key_num = $("#num").val().trim();

            if(key_val==""){

                $("#key").addClass("red-color");

                alert("请输入有效内容");

                return false;

            }else if($("#key").hasClass("red-color")){

                $("#key").removeClass("red-color");

            }

            if(key_num==""){

                $("#num").addClass("red-color");

                alert("请输入有效内容");

                return false;

            }else if($("#num").hasClass("red-color")){

                $("#num").removeClass("red-color");

            }

            $(".edit").addClass("hiden");

            $("#"+edit_id).children().each(function (i) {

                if(i==0)  {

                    $(this).text(key_val);

                }

                if(i==1){

                    $(this).text(key_num);

                }

            })

            lock = 0;

        })

        //取消

        $(".qx").click(function(){

            $(".edit").addClass("hiden");

            lock = 0;

        })

    </script>

</body>

</html>

homework

Python学习路程day13的更多相关文章

Python学习路程day18
Python之路,Day18 - Django适当进阶篇本节内容学员管理系统练习 Django ORM操作进阶用户认证 Django练习小项目:学员管理系统设计开发带着项目需求学习是最有趣和效 ...
Python学习路程day16
Python之路,Day14 - It's time for Django 本节内容 Django流程介绍 Django url Django view Django models Django te ...
Python学习路程day8
Socket语法及相关 socket概念 A network socket is an endpoint of a connection across a computer network. Toda ...
Python学习路程day6
shelve 模块 shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式 import shelve d = shelve.open ...
python 学习路程（一）
好早之前就一直想学python,可是一直没有系统的学习过,给自己立个flag,从今天开始一步步掌握python的用法: python是一种脚本形式的语言,据说是面向废程序员学习开发使用的,我觉得很适合 ...
记录我的 python 学习历程-Day13 匿名函数、内置函数 II、闭包
一.匿名函数以后面试或者工作中经常用匿名函数 lambda,也叫一句话函数. 课上练习: # 正常函数: def func(a, b): return a + b print(func(4, 6)) ...
Python学习路程-常用设计模式学习
本节内容设计模式介绍设计模式分类设计模式6大原则 1.设计模式介绍设计模式(Design Patterns) ——可复用面向对象软件的基础设计模式(Design pattern)是一套被反复 ...
Python学习路程day19
Python之路,Day19 - Django 进阶本节内容自定义template tags 中间件 CRSF 权限管理分页 Django分页 https://docs.djangoproj ...
Python学习路程day15
Python之路[第十五篇]:Web框架 Web框架本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/en ...

随机推荐

Python—模块
一.模块模块,是用一堆代码实现了某个功能的代码集合,模块分为三种:自定义模块(自己定义).内置模块(python自带).开源模块导入模块 (1).导入一个py文件,解释器解释该py文件 (2).导 ...
新知识：Java 利用itext填写pdf模板并导出（昨天奋战到深夜四点，知道今天两点终于弄懂）
废话少说,不懂itext干啥用的直接去百度吧. ***************制作模板******************* 1.先用word做出界面 2.再转换成pdf格式 3.用Adobe Acr ...
mac 安装phpredis扩展
curl -O https://nodeload.github.com/nicolasff/phpredis/zip/master tar -zxf master cd phpredis-master ...
JAVA基础知识之JDBC——使用ResultSetMetaData分析结果集
通过ResultSetMetaData可以对ResultSet进行分析,获取ResultSet里包含了哪些数据列,以及每个列的数据类型. ResultSet中包含了一个getMetaData()方法, ...
Android跨进程通信的四种方式
由于android系统中应用程序之间不能共享内存.因此,在不同应用程序之间交互数据(跨进程通讯)就稍微麻烦一些.在android SDK中提供了4种用于跨进程通讯的方式.这4种方式正好对应于andro ...
filebeat安装与基础用法
来自官网,版本为1.2 下载rpm包并安装 wget -c https://download.elastic.co/beats/filebeat/filebeat-1.2.3-x86_64.rpm r ...
車(rook)
[题目分析] JustPenz:我们假设n>m(不大于就交换),那最多能摆m个,所以会有(n-m)个空白,我们把这些空白插入到n中,答案就是C(n,n-m)=C(n,m);数据范围比较大,我们就 ...
js替换字符串问题
利用正则表达式配合replace替换指定字符. 语法 stringObject.replace(regexp,replacement) 参数描述 regexp 必需.规定了要替换的模式的 RegEx ...
VS下的解决方案目录结构设置和管理
转载:http://blog.csdn.net/pl20140910/article/details/52074165 为了方便管理自己写的代码,也为了日后工作能方便的查找之前做过相同的代码,仿照某源 ...
js的一些复习
JavaScript Js是一种直译式的脚本语言,是一种弱类型,基于对象的语言.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言 ...

Python学习路程day13

Python学习路程day13的更多相关文章

随机推荐

热门专题