Python学习路程day13

2022-08-31 18:31:09

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、事件

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)

实例：

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

上一篇：Sqlserver列出所有数据库名,表名,字段名


下一篇：站在K2角度审视流程--任务的独占与释放