jQuery開發經驗執行個體筆記

來源:互聯網
上載者:User

標籤:style   blog   http   java   使用   os   io   檔案   

jQuery擷取檔案選擇輸入框的副檔名

var file=$("input[name=‘file‘]").val()var filename=file.replace(/.*(\/|\\)/, "");  //檔案名稱var fileExt=(/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : ‘‘;  //副檔名

今天在用ajaxfileupload時,遇到一個要重新整理一次頁面才能再次上傳,用live()方法來綁定<input type="file">的change事件就能夠解決?直接$("xxx").change();只能調用一次,據聞是IE瀏覽器的安全性。後來終於找到解決方案了。IE瀏覽器下<input type="file">選擇完成自動認可的問題,在每次處理完成後把<input type="file" />替換成原來的代碼,然後隨便加個不同的屬性。如本例中添加了title。

    var count = -1;    $("#upload").live("change", function () {        count++;    $.ajaxFileUpload(config);    $("#upload").replaceWith("<input type=‘file‘ id=‘upload‘ name=‘upload‘ style=‘position:relative; top:0px; left:-240px; width:346px; height:46px; opacity:0; filter: Alpha(Opacity=0); cursor:pointer; title=" + count + "‘ />");})    

 

jQuery根據生日計算年齡,星座,生肖的執行個體:

<html>
<head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> //根據輸入的生日自動擷取星座,生肖和年齡。 var year = new Array("豬", "鼠", "牛", "虎", "兔", "龍", "蛇", "馬", "羊", "猴", "雞", "狗"); jQuery(function () { $("#Birthday").blur(function () { setTimeout(function () { var strHtml = ""; var date = new Date($("#Birthday").val().replace(/-/g, "/")); var con = getxingzuo(date.getMonth() + 1, date.getDate()); strHtml += "你的星座是:" + con; var zodiac = year[(parseInt(date.getFullYear()) + 9) % 12]; strHtml += "<br/>你的生肖是:" + zodiac; var Age = new Date().getFullYear() - date.getFullYear(); strHtml += "<br/>你的年齡是:" + Age; $("#div1").append(strHtml); }, 200); }) }) function getxingzuo(month, day) { var d = new Date(1999, month - 1, day, 0, 0, 0); var arr = []; arr.push(["魔羯座", new Date(1999, 0, 1, 0, 0, 0)]) arr.push(["水瓶座", new Date(1999, 0, 20, 0, 0, 0)]) arr.push(["雙魚座", new Date(1999, 1, 19, 0, 0, 0)]) arr.push(["牡羊座", new Date(1999, 2, 21, 0, 0, 0)]) arr.push(["金牛座", new Date(1999, 3, 21, 0, 0, 0)]) arr.push(["雙子座", new Date(1999, 4, 21, 0, 0, 0)]) arr.push(["巨蟹座", new Date(1999, 5, 22, 0, 0, 0)]) arr.push(["獅子座", new Date(1999, 6, 23, 0, 0, 0)]) arr.push(["處女座", new Date(1999, 7, 23, 0, 0, 0)]) arr.push(["天秤座", new Date(1999, 8, 23, 0, 0, 0)]) arr.push(["天蠍座", new Date(1999, 9, 23, 0, 0, 0)]) arr.push(["射手座", new Date(1999, 10, 22, 0, 0, 0)]) arr.push(["魔羯座", new Date(1999, 11, 22, 0, 0, 0)]) for (var i = arr.length - 1; i >= 0; i--) { if (d >= arr[i][1]) return arr[i][0]; } } </script></head><body> <div id="div1" style="width:200px;height:200px;"> <input type="text" id="Birthday" value="請輸入你的生日!" /> <input type="button" value="開始計算" /> </div></body></html>

 jQuery判斷元素下是否有另一指定元素

  $(this).has("p").length > 0     //此句代碼的意思是,含有P的當前元素的數量,如果含有P則為1,不含有P則為0。因為$(this)肯定是1,給它加了個條件,含有P的$(this)要是是1,要麼是0 。

  另外一種方法就是用find

  $(this).find("p").length > 0  //此句代碼的意思是,含有的P子項目數量是否大於0

<head>    <script src="jquery-1.7.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $("#div1").click(function () {                if ($(this).has("p").length > 0) {                    alert("div1有p子項目s");                }            })        })    </script></head><body>    <div id="div1">        <p>我是一個P</p>    </div></body>

 

jQuery判斷當前元素是隱藏還是顯示

$(this).is(":hidden");  //如果元素是隱藏的話,則返回true

is挺好用的,他能夠用jQuery選取器作為參數,特別是跟jQuery裡面的選取器裡面那些以冒號開頭的篩選符配合使用,實現各種各樣的判斷。如: ":checked,:hidden"等等。給個例子:

<head>    <script src="jquery-1.7.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $(":button").click(function () {                if ($(this).is(":button")) {                    alert("我是一個按鈕!");                }                if ($("#check1").is(":checked")) {                    alert("我是被選中的");                }                if ($(".p1").is(":visible")) {                    alert("p1是可見的");                }            })        })    </script></head><body>    <div id="div1">        <p class="p1">我是一個p</p>        <input id="check1" type="checkbox" value="" />複選框        <input type="button" value="確認" />    </div></body>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.