项目中的日常随记~~不定期更新

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});