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

随机推荐

[已解决]Eclipse 插件Maven在使用 add dependency，找不到包，解决办法
以Eclipse版本[Version: Luna Release (4.4.0),]为例, 依次打开:Window >show view > other > Maven Reposi ...
打包app命令行
$ cd myApp $ ionic platform add android $ ionic build android $ ionic emulate android
HDU 5685：2016"百度之星" - 资格赛 Problem A
原文链接:https://www.dreamwings.cn/hdu5685/2637.html Problem A Time Limit: 2000/1000 MS (Java/Others) ...
ajax 代码
function ajax(){ var aj=null; if(window.ActiveXObject){ aj = new ActiveXObject("Microsoft.XMLHT ...
Linq join on 多条件
var a = from m in DbContext.Set<T1>() join q in DbContext.Set<T2>() on new { m.ID, Phone ...
Flowplayer-Embedding
SOURCE URL:https://flowplayer.org/docs/embedding.html Embedding Video embedding is an act where the ...
nginx 配置文件备份
1. /etc/nginx/sites-enabled/default 的原始文件 # You may add here your # server { # ... # } # statements ...
FreeMarker标签介绍
转自:http://www.blogjava.net/kxbin/articles/366505.html FreeMarker标签使用一.FreeMarker模板文件主要有4个部分组成 1.文本 ...
Scrum Meeting 2-20151202
任务安排姓名今日任务明日任务困难董元财完成下拉刷新的实现请假(明天是编译截至最后一天) 无胡亚坤完成圆形头像代码设计请假(明天是编译截至最后一天) 无刘猛学习listview的 ...
iOS - Mac Apache WebServer 服务器配置
前言 Apache 是目前使用最广的 Web 服务器,可以支持各种脚本的执行. Mac 系统自带,无需单独安装,只需要修改几个配置就可以,简单,快捷. 有些特殊的服务器功能,Apache 都能很好的支 ...

Python学习路程day13

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

随机推荐

热门专题