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的值。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容