python开发学习-day13（js、jQuery）

s12-20160409-day13

*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* TABLES
=============================================================================*/

table th {
font-weight: bold;
}

table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}

table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}

table tr:nth-child(2n) {
background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
max-width: 100%
}
-->

pytho自动化开发 day10

Date:2016.04.09

    @南非波波

课程大纲：

day13

http://www.cnblogs.com/wupeiqi/articles/5369773.html

一、概述

js
    使页面动起来的一门语言，解释器就是浏览器的引擎
dom
    提供一套api
jQuery
    封装的JS和dom的类库

一、javaScript

1. 存在形式：
    文件
    标签
2. 放置位置：
    原则上可以存在head 和body，但是当页面请求不到js的时候就会一直在等待。建议将js代码放在body底部
3. 声明变量：
    name = "swht";  //全局变量
    age = 18;   //局部变量  

4. 注释：
    当行注释：  //
    多行注释：   /*  ..  */
    每行代码结束需要加分号(;)
5. 类型：
    数字
    字符串
    数组（字典）
6. 类型转换：
    var age = 18；
    var age = Number(18)；

    Number("123");
    parseInt('123');  //将字符串转换成数字类型
    var num = 18.9;
    num1 = parseInt(num); //将数字类型转换成整型数字输出
    num2 = parseFloat(num); //将数字类型转换成浮点型数字输出
    console.log("num1:",num1,typeof num1,"num2:",num2,typeof num2); //控制台打印转换后的值和类型
    //输出结果：num1: 18 number num2: 18.9 number
7. 控制台打印：
    var age = "18";
    var n1 = 1,n2 = 3,n3 = 4; //单行可以声明多个变量并赋值
    console.log(age,typeof age); //控制台输出变量的值和类型

字符串操作

1. 去除字符串左右空格：
    var name = "swht   ";
    name.trim();
2. 按索引取值：
    var name = "swht";
    name.charAt(1);
3. search:
    name.search("w");  //返回字符所在的索引值
4. split：
    name.split("");  //将字符串转换成数组
    ["s", "w", "h", "t", " ", " ", " "]
5. xx

for循环

var li1 = [11,22,33,44];
for (var index in li1){
    console.log(index);
}

for (var i = 0;i < li1.length;i++){
    console.log(i,li1[i]);
}

var dict = {"name":"swht","age":18,"work":"运维"}
for (var item in dict){
    console.log(item,dict[item]);
}

while循环

while(true){
    countine;
    break;
}

switch

var name = '1';
switch (name){
    case "1":
        console.log(1);
        break;
    case "2":
        console.log(2);
        break;
    case "3":
        console.log(3);
        break;
    default:
        console.log('default');
        break;
}

if条件句

var name = "swht";
if (name == "alex"){
    console.log(err);
}else if (name == "hh"){
    console.log(true);
}else {
    console.log("你逗呢！");
}

try

var name = "swht";
try {
    if (name == "shen"){
        console.log("err");
    }else {
        console.log("false");
    }
}catch (e){
    console.log(e);
}finally {
    console.log("finally");
}

函数

//函数的声明
function func1(arg){
    return true;
}
//匿名函数
var func2 = function(arg){
    return true;
}
//自执行函数，一般用在jq封装类库时使用
(function(arg){
    console.log(arg);
})('123')

面向对象

function Foo(name,age){
this.Name = name;
this.Age = age;
this.Func = function(arg){
    return this.Name +arg;
}
}
var obj = new Foo('swht',22)
console.log(obj.Name);
console.log(obj.Age);
var ret = obj.Func('haha');
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');

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

方式一：
    var obj = document.createElement('a');
    obj.href = "http://www.apicloud.com";
    obj.innerText = "APICloud";

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

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 lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎南非波波同志成为本届董事长</title>
    </head>
    <body>
        <input type="button" onclick="DropInterval();" value="停止滚动" />
        <script>
            obj1 = setInterval("GunDong()",1000);
            console.log(obj1);
            function DropInterval(){
                   clearInterval(obj1);
            }
            function GunDong(){
                var text = document.title;
                var firstWord = text.charAt(0);
                var subWord = text.substring(1,text.length);
                var newWord = subWord + firstWord;
                document.title = newWord;
            }
        </script>
    </body>
</html>

搜索框

<input type="text" placeholder="请输入关键字" id="search" onfocus="Focus();" onblur="Blur();"/>
<script type="text/javascript">
    function Focus(){
        var nid = document.getElementById("search");
        var value = nid.placeholder;
        if (value == "请输入关键字"){
            nid.placeholder = "";
        }
    }

    function Blur(){
        var nid = document.getElementById("search");
        var value = nid.placeholder;
        if (!value.trim()){
            nid.placeholder = "请输入关键字";
        }
    }
</script>

三、jQuery

1、选择器：

#id
element
.class
*
selector1,selector2,selectorN

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
           <div id="n1">11</div>
            <div class="c1">22</div>
            <div  class="c1">33</div>
            <a></a>
            <span id="n2"></span>

            <div id="n3">
                <div>
                    <div class="c3">
                        <span>
                            <a class="c4">asdf</a>
                        </span>
                    </div>
                </div>
                <span>asdf</span>
            </div>

        </div>

        <script src="jquery-2.2.3.js"></script>
        <script>
            /*
            选择器基础使用
             */
            $("#n1").text("中国好声音");
            $(".c1").text("欢迎三江同学");
            $(".c4").text("一不小心挂掉了");
            $("#n3 span").text("游泳冠军");

        </script>
    </body>
</html>

2、 筛选器

3、属性、CSS

4、文档处理

5、事件

作业

1. jQuery API文档阅读
2. 博客实例阅读练习
3. 列表处理、登录方式
4. 主机管理列表可编辑