python开发学习-day14(jquery、ajax等)

s12-20160421-day14

*: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自动化开发 day14

Date:2016.04.21

    @南非波波

课程大纲：

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

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

JQuery

1.查找

选择器

$('#nid')  根据id找到某个标签
$('.nid')  根据class查找
$('.nid div #nid')  根据class查找下面的div标签下面的id
$('.nid,div,#nid')  查找到class或div或id条件的查找到
$('li:eq(0)')  查到到第一个li标签行

筛选器

$('li').eq(0)  查到到第一个li标签行

2.操作

属性

添加指定属性，并删除兄弟的属性
 $(ths).addClass('current').siblings().removeClass('current');

attr：
    其他所有标签都适用，除checkbox、redio之外
prop：
    checkbox、redio

jQuery循环：

    var userList = ['swht','shen','test'];
    $.each(userList,fun(i,item){
        console.log(i,item);
    })

CSS

文档处理

增加 
append(content|fn) 
　　在指定的标签内部后面追加 
appendTo(content) 
　　把指定的某个标签追加某个标签内部后面 
prepend(content|fn) 
　　在指定的标签内部前面追加 
prependTo(content) 
　　把指定的某个标签追加某个标签内部前面 
包裹 
　　wrap(html|ele|fn) 
　　unwrap() 
　　wrapAll(html|ele) 
　　wrapInner(html|ele|fn)
删除
empty()
remove([expr])
detach([expr])
复制
clone([Even[,deepEven]])

事件

绑定事件：
    1. 直接绑定ready(fn) 文本加载完之后执行事件绑定
        1. $(document).ready(function(){

            })
        2. $(function(){

            })
    2. 委派delegate(s,[t],[d],fn)
        1. $('ul').delegate('li','click',function(){

           })

    3. bind(type,[data],fn)
        1. $('li').click(function(){

            })
        2. $('li').bind('click')
        3. unbind

AJAX

异步的javascript和xml
ajax是对javascript和Dom的封装。
ajax容易出现跨域的问题。
$.ajax({
    url:"",
    data:{},
    type:"",
    dateType:"",
    jsonp:"",
    jsonpCallback:"",
    sucess:function(){},
    error:function(){}
})

JQuery扩展

(function(arg){
    arg.extend({
      qinghua: function() {
        return "SB";
      },
      qinghua1: function() {
        return this.each(function() { this.checked = false; });
      }
    });

    arg.fn.extend({
       sanjiang:function(){
           return "DSB"
       }
    });
})(jQuery);

其他

30款最好的 Bootstrap 3.0 免费主题和模板 http://www.cnblogs.com/lhb25/p/30-free-bootstrap-templates.html

例子：

tab菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <style>
        .tab-box .box-menu{
            background-color: #DDDDDD;
            border: 1px solid #DDDDDD;
            height: 33px;
            line-height: 33px;
        }
        .box-menu a{
            border-right: 1px solid #664747;
            padding: 10px;
            background-color: #425a66;;
        }
        .tab-box .box-body{
            border: 1px solid #dddddd;
        }
        .hide{
            display: none;
        }
         .current{
            background-color: white;
            color: black;
            border-top: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="tab-box">
        <div class="box-menu">
            <!--所有菜单-->
            <a menu1="c1" onclick="ChangeTab(this);" class="current">菜单一</a>
            <a menu1="c2" onclick="ChangeTab(this);">菜单二</a>
            <a menu1="c3" onclick="ChangeTab(this);">菜单三</a>
        </div>
        <div class="box-body">
            <!--所有内容-->
            <div id="c1">内容一</div>
            <div id="c2" class="hide">内容二</div>
            <div id="c3" class="hide">内容三</div>
        </div>
    </div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        function ChangeTab(ths){
            $(ths).addClass('current').siblings().removeClass('current');
            var contentId = $(ths).attr('menu1');
            var temp = "#" + contentId;
            $(temp).removeClass('hide').siblings().addClass('hide');

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

　　全选、反选、取消

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>全选、反选、取消</title>
	</head>
	<body>
	    <div>
	        <input type="button" value="全选" onclick="selectAll();" />
	        <input type="button" value="反选" onclick="selectInvert();" />
	        <input type="button" value="取消" onclick="clearAll();" />
	    </div>
	    <div>
	        <table border="1">
	            <tr>
	                <td>
	                    <input type="checkbox" />
	                </td>
	                <td>
	                    第一章
	                </td>
	                <td>
	                    第一篇
	                </td>
	            </tr>
	            <tr>
	                <td>
	                    <input type="checkbox" />
	                </td>
	                <td>
	                    第二章
	                </td>
	                <td>
	                    第一篇
	                </td>
	            </tr>
	            <tr>
	                <td>
	                    <input type="checkbox" />
	                </td>
	                <td>
	                   第三章
	                </td>
	                <td>
	                    第一篇
	                </td>
	            </tr>
	            <tr>
	                <td>
	                    <input type="checkbox" />
	                </td>
	                <td>
	                   第四章
	                </td>
	                <td>
	                    第一篇
	                </td>
	            </tr>
	        </table>
	    </div>

	    <script src="jquery-2.2.3.js"></script>
	    <script>
	        function selectAll(){
	            $("table input[type='checkbox']").prop('checked',true);
	        }
	        function selectInvert(){
	            $("table input[type='checkbox']").each(function(){
	               var isChecked = $(this).prop('checked');
	                if(isChecked){
	                    $(this).prop('checked',false);
	                }else{
	                    $(this).prop('checked',true);
	                }
	            });
	        }
	        function clearAll(){
	            $("table input[type='checkbox']").prop('checked',false);
	        }
	    </script>
	</body>
	</html>

ajax_jsonp

　

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>ajax_jsonp</title>
	</head>
	<body>

	    <input type="button" value="获取电视节目" onclick="Ajax_jsonp();"/>
	    <dev id="contaner">

	    </dev>
	    <script src="jquery-2.2.3.js"></script>
	    <script>
	        function Ajax_jsonp(){
	            $.ajax({
	                url:"http://www.jxntv.cn/data/jmd-jxtv2.html",
	                data:{},
	                type:"GET",
	                dataType:"jsonp",
	                jsonp:"callback",
	                jsonpCallback:"list",
	                success:function(arg){
	                    console.log(arg);
	                    var jsonArray = arg.data;
	                    $.each(jsonArray,function(k,v){
	                        var week = v.week;
	                        var label = "<h1>" + week + "</h1>";
	                        $("#contaner").append(label);
	                        var listArray = v.list;
	                        $.each(listArray,function(kk,vv){
	                            var link = vv.link;
	                            var name = vv.name;
	                            var time = vv.time;
	                            var labelNew = "<a href='" + link + "'>" + time+name + "</a><br/>";
	                            $("#contaner").append(labelNew);
	                        })
	                    })
	                },
	                error:function(arg){
	                    console.log(arg);
	                }
	            })
	        }
	    </script>

	</body>
	</html>