2017.11.17 select 清空option、Cookie、Python XML解析、clientHeight等

第一组：杨昊

今天给大家分享一部网络神剧：《毛骗》。

是的没错，就是这么清新脱俗的名字，而且可能画质不好（剧组没钱没办法）。但是！！！这部剧的剧情真的良心。9.6分——这是国产电视剧在豆瓣获得的最高分数。至今,得到这一分数的剧集一共有三部：《走向共和》、《大明王朝1566》（这个也好，都是戏精）以及这部网剧的第三部《毛骗.终结篇》（可能网盘见）。厉害了！

这是知乎上的评价：如何评价网络剧《毛骗》？其中有一点确实是真的，就是剧组为了省钱直接上街拍摄，因为效果太真被群众举报，然后被警察抓走了。正因如此，剧情中群演的表现力超群。
说了这么多，我就是不放剧情，自己去看吧，还有毒点，我是不会说的。好东西要大家一起分享的。

image.png

第二组：

1. select 清空option

$(“#select”).empty();

2. 计算时间差

相差天数

var mydate = new Date();
var tim = "" + mydate.getFullYear();
var mm = mydate.getMonth() + 1;
if (mydate.getMonth() > 9) {
    tim += '-' + mm;
} else {
    tim += '-' + "0" + mm;
}
if (mydate.getDate() > 9) {
    tim += '-' + mydate.getDate();
} else {
    tim += '-' + "0" + mydate.getDate();
}
var nowDate = tim;
var issueDate = IssueDate.substring(0, 10);
var OneMonth = nowDate.substring(5, nowDate.lastIndexOf('-'));
var OneDay = nowDate.substring(nowDate.length, nowDate.lastIndexOf('-') + 1);
var OneYear = nowDate.substring(0, nowDate.indexOf('-'));
var TwoMonth = issueDate.substring(5, issueDate.lastIndexOf('/'));
var TwoDay = issueDate.substring(issueDate.length, issueDate.lastIndexOf('/') + 1);
var TwoYear = issueDate.substring(0, issueDate.indexOf('/'));

var cha = Math.abs((Date.parse(OneMonth + '/' + OneDay + '/' + OneYear) - Date.parse(TwoMonth + '/' + TwoDay + '/' + TwoYear)) / 86400000);

相差月数

  //两个日期
var nowDate = tim.toString();
var issueDate = IssueDate.substring(0, 10).toString();

// 拆分年月日
nowDate = nowDate.split('-');
// 得到月数
nowDate = parseInt(nowDate[0]) * 12 + parseInt(nowDate[1]);
// 拆分年月日
issueDate = issueDate.split('/');
// 得到月数
issueDate = parseInt(issueDate[0]) * 12 + parseInt(issueDate[1]);
var m = Math.abs(nowDate - issueDate);

3. APPCan-底部菜单栏

var tabview_Tab = appcan.tab({
    selector: $("#Tab"),
    hasIcon: true,
    hasAnim: false,
    hasLabel: true,
    hasBadge: false,
    index: 0,
    data: [{
        label: "优免票申请",
        //icon : "fa-home"
    },
    {
        label: "订单查询",
        //icon : "fa-user"
    },
    {
        label: "我的信息",
        //icon : "fa-user"
    }]
});
tabview_Tab.on('click',
function(obj, index) {
    $('.tab_pane').removeClass('active');
    $($('.tab_pane')[index]).addClass('active');
    $('.header').addClass('uhide');
    $($('.header')[index]).removeClass('uhide');
    // clearPage();
})

效果:

图1.png

4. 标签

      var lv2 = appcan.listview({
    selector: "#listview2",
    type: "thinLine",
    hasIcon: true,
    hasAngle: true,
    hasSubTitle: true,
    multiLine: 1
});
lv2.set([{
    // icon : 'myInformation/css/myImg/myImg1.png',
    title: '个人信息',
    subTitle: '',
    name: "personalDetails"
},
{
    title: '亲属信息',
    subTitle: '',
    name: "relativeInformation"
},
{
    title: '额度信息',
    subTitle: '',
    name: "amountInformation"
},
{
    title: '亲属审核',
    subTitle: '',
    name: "relativesAudit"
}]);
lv2.on('click',
function(ele, context, obj, subobj) {
    if (context.name == "personalDetails") {
        appcan.openWinWithUrl('personalDetails', 'personalDetails.html');
    } else if (context.name == "relativeInformation") {
        appcan.openWinWithUrl('relativeInformation', 'relativeInformation.html');
    } else if (context.name == "amountInformation") {
        appcan.openWinWithUrl('amountInformation', 'amountInformation.html');
    } else if (context.name == "relativesAudit") {
        appcan.openWinWithUrl('relativesAudit', 'relativesAudit.html');
    }
})

效果:

图2.png

5. 取到对象的键值key及属性值value

    var object = {
        "name" : "xiaoming",
        "age" : 29
    }
    var keys = [];
    var values = [];
    for (var p in object) {
        if (object.hasOwnProperty(p)) {
            keys.push(p);
            values.push(object[p]);
        }}

第三组：蔡永坚 Cookie

Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。

例如购物网站存储用户曾经浏览过的产品列表，或者门户网站记住用户喜欢选择浏览哪类新闻。在用户允许的情况下，还可以存储用户的登录信息，使得用户在访问网站时不必每次都键入这些信息？

怎么在js/jquery中操作处理cookie那？今天分享一个cookie操作类--jQuery.Cookie.js，是一个轻量级的Cookie管理插件。

Cookie下载地址： http://plugins.jquery.com/project/cookie.

特别提醒，今日发现一个特别的错误，google浏览器提示：has no method $.cookie。火狐浏览器提示:$.cookie is not a function;调试了半天，终于找到原因，如果同一个页面两次或者多次引入Jquery插件就会报此错误。

使用方法：

引入jQuery与jQuery.Cookie.js插件。
代码如下:

<script src="jQuery.1.8.3.js" type="text/javascript"></script> 
<script src="jquery.cookie.js" type="text/javascript"></script>

将cookie写入文件

varCOOKIE_NAME = 'username'; 
 if( $.cookie(COOKIE_NAME) ){  
   $("#username").val( $.cookie(COOKIE_NAME) );  
 } 
 $("#check").click(function(){ 
   if(this.checked){ 
     $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });  
     //var date = new Date();  
     //date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的这个时候过期  
     //$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });  
   }else{ 
     $.cookie(COOKIE_NAME,null, { path: '/'}); //删除cookie 
   } 
 });

函数:
语法：$.cookie(名称,值,[option])

读取cookie值
$.cookie(cookieName)　　
cookieName:要读取的cookie名称。
示例：$.cookie("username"); 读取保存在cookie中名为的username的值。
写入设置Cookie值：
$.cookie(cookieName,cookieValue);　
cookieName:要设置的cookie名称，cookieValue表示相对应的值。
示例:$.cookie("username","admin"); 将值"admin"写入cookie名为username的cookie中。
$.cookie("username",NULL);　　　销毁名称为username的cookie
[option]参数说明：
expires:有限日期，可以是一个整数或一个日期(单位：天)。这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了。
path:　cookie值保存的路径，默认与创建页路径一致。
domin: cookie域名属性，默认与创建页域名一样。这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置 ".xxx.com" 。
secrue:一个布尔值，表示传输cookie值时，是否需要一个安全协议。

示例：
复制代码代码如下:

$.cookie("like", $(":radio[checked]").val(), { 
        　　path: "/", expiress: 7 
        })

想了解详情可以去查阅详细文档2017.11.17-第3组-蔡永坚.docx。

第四组：张元一 Python XML解析

1. SAX (simple API for XML )

python 标准库包含SAX解析器，SAX用事件驱动模型，通过在解析XML的过程中触发一个个的事件并调用用户定义的回调函数来处理XML文件。

2. DOM(Document Object Model)

将XML数据在内存中解析成一个树，通过对树的操作来操作XML。

3. ElementTree(元素树)

ElementTree就像一个轻量级的DOM，具有方便友好的API。代码可用性好，速度快，消耗内存少。

python使用SAX解析xml

SAX是一种基于事件驱动的API。

利用SAX解析XML文档牵涉到两个部分:解析器和事件处理器。

解析器负责读取XML文档,并向事件处理器发送事件,如元素开始跟元素结束事件;

而事件处理器则负责对事件作出相应,对传递的XML数据进行处理。

适于处理下面的问题：

对大型文件进行处理；
只需要文件的部分内容，或者只需从文件中得到特定信息。
想建立自己的对象模型的时候。

在python中使用sax方式处理xml要先引入xml.sax中的parse函数，还有xml.sax.handler中的ContentHandler。

4. ContentHandler类方法介绍

characters(content)方法

调用时机：

从行开始，遇到标签之前，存在字符，content的值为这些字符串。
从一个标签，遇到下一个标签之前，存在字符，content的值为这些字符串。
从一个标签，遇到行结束符之前，存在字符，content的值为这些字符串。
标签可以是开始标签，也可以是结束标签。

startDocument()方法: 文档启动的时候调用。
endDocument()方法: 解析器到达文档结尾时调用。
startElement(name, attrs)方法: 遇到XML开始标签时调用，name是标签的名字，attrs是标签的属性值字典。
endElement(name)方法: 遇到XML结束标签时调用。

make_parser方法

以下方法创建一个新的解析器对象并返回。
xml.sax.make_parser( [parser_list] )

参数说明:

parser_list - 可选参数，解析器列表

parser方法

以下方法创建一个 SAX 解析器并解析xml文档：
xml.sax.parse( xmlfile, contenthandler[, errorhandler])

参数说明:

xmlfile - xml文件名
contenthandler - 必须是一个ContentHandler的对象
errorhandler - 如果指定该参数，errorhandler必须是一个SAX ErrorHandler对象

parseString方法

parseString方法创建一个XML解析器并解析xml字符串：
xml.sax.parseString(xmlstring, contenthandler[, errorhandler])

参数说明:

xmlstring - xml字符串
contenthandler - 必须是一个ContentHandler的对象
errorhandler - 如果指定该参数，errorhandler必须是一个SAX ErrorHandler对象

第五组：王颢 clientHeight、offsetHeight、scrollHeight

window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度

IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

clientHeight

clientHeight，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

clientHeight与offsetHeight的区别

clientHeight和offsetHeight的区别，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么组成的呢？如何计算这两个数的值？

clientHeight和offsetHeight的值由什么决定？

clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，而offsetHeight的值由DIV内容的实际高度，CSS中的padding值，scrollbar的高度和DIV的border值决定；至于CSS中的margin值，则不会影响clientHeight和offsetHeight的值。

2017.11.17 select 清空option、Cookie、Python XML解析、clientHeight等

第一组：杨昊

第二组：

1. select 清空option

2. 计算时间差

3. APPCan-底部菜单栏

4. 标签

5. 取到对象的键值key及属性值value

第三组：蔡永坚 Cookie

第四组：张元一 Python XML解析

1. SAX (simple API for XML )

2. DOM(Document Object Model)

3. ElementTree(元素树)

4. ContentHandler类方法介绍

characters(content)方法

make_parser方法

parser方法

parseString方法

第五组：王颢 clientHeight、offsetHeight、scrollHeight

clientHeight

offsetHeight

scrollHeight

clientHeight与offsetHeight的区别

clientHeight和offsetHeight的值由什么决定？

推荐阅读更多精彩内容