項目中的日常隨記~~不定期更新

1.隱藏內容

display:none;  是內容、空間都隱藏,不會佔地方。

visibility: hidden; 是內容隱藏、但是會留有這個元素所佔的空間。

2.複製文本框中的內容

<input type="text" value="u換個色ui給我" id="textInput">
<input type="button" onClick="copytest()" value="複製" />
<script type="text/javascript">
	function copytest(){
	var copy2=document.getElementById("textInput");
	copy2.select();// 選擇對象
	document.execCommand("Copy"); // 執行瀏覽器複製命令
	alert("複製完成,使用ctrl+v粘貼複製的內容");
	}
</script>

已測試兼容ie、火狐、谷歌瀏覽器~~注意不要給文本框添加disable屬性,要不會使複製功能失效,如果要禁止用戶輸入的話加上readonly只讀熟悉就可以了,不需要用到disable了。。

複製這個功能剛發現一個缺陷就是當文本框或者文本域隱藏時,他會獲取不到裏面的值,從而失效,不過可以用css的一個屬性opacity:0;通過把文本框隱藏來實現即隱藏了文本框裏又可以複製裏面的值。

3.使用function函數傳參(變量)。

    $(function(){
    	var hahaha = {"name":"張三","age":3,"sex":"男"};//注意函數傳參過後會變成字符串格式,所以如果要傳值的話應先使用點語法獲取到,然後傳過去。
    	var hahahaStr = hahaha.name;
    	$("ul li").append("<a class='aaa' οnclick='byValue(this,\""+hahahaStr+"\")'>函數傳參示例</a>");
    })
	function byValue(obj,val){
        var obj = obj;
        var val = val;
        // var valObj = '{"name":"張三","age":3,"sex":"男"}';
        // JSON.parse(valObj);
        console.log(val);
        // console.log(typeof(val));
	}

有時我們需要即傳this又傳變量時,變量可以用\""+變量+"\"的方法來實現,而且尤爲注意的是如果你傳的變量是一個對象的話,傳過去後會輸出字符串object而不是你的值了,所以可以先把值從對象中用點語法取出來變成字符串傳過去。

4.echarts圖表插件之餅圖的位置設置

直接在series:[{center["30%","50%"]}]屬性,其中第一個百分比爲left值,即餅圖距容器的left,第二個值爲top值。

5.當單選框或複選框選中時執行回調函數

    <input type="radio" name="sex" id="sex1"><label for="sex1">男</label>
    <input type="radio" name="sex" id="sex0"><label for="sex0">女</label>
    <button class="submit">提交</button>
    <script>
        $(function(){
            $(".submit").click(function(){
                if($("#sex1").is(":checked")){
                    //當選擇男時觸發的函數
                    alert("你選擇的是男");
                }
                if($("#sex0").is(":checked")){
                    //當選擇女時觸發的函數
                    alert("你選擇的是女");
                }  
            })
        })
    </script>   
6.meta標籤使360瀏覽器自動切換爲webkit內核訪問

若頁面需默認用極速核,增加標籤:<meta name=”renderer” content=”webkit” />

若頁面需默認用ie兼容內核,增加標籤:<meta name=”renderer” content=”ie-comp” /> 

若頁面需默認用ie標準內核,增加標籤:<meta name=”renderer” content=”ie-stand” /> 

content的取值爲webkit,ie-comp,ie-stand之一,區分大小寫,分別代表用webkit內核,IE兼容內核,IE標準內核。注意結尾應爲“ />”(/ 前面有空格)。

7. echarts表格橫座標文字的傾斜。

其實需要寫的就倆個屬性,很簡單。第一個是在xAis:[{axisLabel:{interval:0,rotate:60}}]裏寫的。interval是顯示橫座標個數,如何寫0的話會強制顯示所有的橫座標,如果寫1的話會隔一個顯示一個,以此類推。rotate屬性就是控制橫座標名稱的旋轉角度,寫的是number類型。還有一個就是如果你用到放大縮小顯示橫座標的顯示區間的話,就需要用到這個和xAis平級的grid屬性,是這樣寫的gird:{y2:110}。

gird屬性改之前:(橫座標名字與時間軸重合了)


改之後:


8.獲取鼠標所在瀏覽器中的位置

                    //鼠標跟隨事件
		    var e = arguments.callee.caller.arguments[0] || window.event;
		    var pointX=e.pageX+5;
		    var pointY=e.pageY+5;
		    alert(pointX+'   '+pointY);
把上面代碼寫進點擊事件中,就會在鼠標點擊時獲取到當前鼠標的位置,一般用於鼠標跟隨功能和右鍵菜單。

9.內容超出div的寬度時自動換行

word-wrap:break-word; 
word-break:break-all; 

overflow: hidden;  overflow一定要根據項目的實際情況來寫~比如有豎向滾動條時就不能寫hidden而是auto了。

10.jq裏mouseout和mouseleave的區別。

  不論鼠標指針離開被選元素還是任何子元素,都會觸發 mouseout 事件。這也是我們平常用mouseout時鼠標明明還沒有離開被選元素時要展現的元素卻一直閃爍。那是因爲寫有mouseover時使元素顯示mouseout時使元素隱藏。但鼠標輕輕移動時離開了被選元素的子元素,因此會一直隱藏,顯示次數多了就一直閃爍了~~~此時應用下面那個事件來代替mouseout。

   只有在鼠標指針離開被選元素時,纔會觸發 mouseleave 事件。

11. table裏的tBodies。

        在js中可以直接寫document.getElementById(table).tBodies[0]直接獲取到該table的tbody,裏面是所有的tr,td。可以通過tBodies[0].rows[0].cells[0]取到table裏的一個td也可以通過insertRow和insertCell插入tr和td。

12.easyui與bootstrap樣式一起引入時下拉框樣式變得難看,而且在ie瀏覽器下會有一個樣式bug,那就是當頁面加載出來時,會發現文字不在輸入框的中間,並且向下偏移,當你鼠標點擊文本框時,它就會恢復正常跑到中間去了,具體如下圖所示:


總感覺裏面還有一層文本框~~雖然不太明顯~~但是逼死處女座的節奏呢~~

修改後如圖:


修改方法就是把bootstrap.css裏面的幾個input[type="text"]的類去掉就可以了。

13.easyui combobox下拉框和datebox日期框只能選擇不能編輯的寫法:$(".easyui-combobox").combobox({'editable':false});  $(".easyui-datebox").datebox({'editable':false});

發佈了32 篇原創文章 · 獲贊 9 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章