【干货】个人html5实战总结

如果实现点击切换效果: 1, divid=popoverclass=mui-popoverulclass=mui-table-viewliclass=mui-table-view-cell1/liliclass=mui-table-view-cell2/liliclass=mui-table-view-cell3/liliclass=mui-table-view-cell4/li/ul/div a href=#popover cla



如果实现点击切换效果:

1,

<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">2</li>
<li class="mui-table-view-cell">3</li>
<li class="mui-table-view-cell">4</li>
</ul>
</div>


<a href="#popover" class="mui-btn mui-btn-primary">弹出框框</a>


js内容  mui(".mui-popover").popover('toggle');

 

点击“弹出框框”就会弹出这个有class="mui-popover"的窗口,点除了窗口的其他位置就隐藏,注意这个窗口一定要写在header之外

此外,mui(".classname").popover("hide");隐藏classname的内容 mui(".classname").popover("toggle");classname的内容隐藏和显示切换

或者(点击一个次显示再点击一次隐藏)

2.var event_b=true;(注意这里是下划线,否则就会编译出错)

mui('#OA_task_1').on('tap', '.mui-btn-red', function() {

if(event_b){

event_b=true执行这个函数

   }

else{

event_b=false执行这个函数

   }

event_b=!event_b;最终结束的时候改变event-b的值,这样每次点击效果就不一样。但是只适用于一行的隐藏显示,如果多行的,点击一次内容就显示event_b=true,当点击第二行的时候。event_b=false。第二行内容就是隐藏的。

3.利用if语句判断如果是显示就隐藏,反之亦然。

var olist=document.getElementById("list");

 mui('.mui-header1').on('tap','.mui-btn',function(){

    if(olist.style.display=="none"){

olist.style.display="block";}

    else{

       olist.style.display="none";

    }

   });

F

想要选择框在上面不占位position:absolute;z-index:2px;Z-index在使用绝对定位 position:absolute属性条件下使用才能使用



变量'+db.title+'

mui-table-view-cell 下横线左端有一定距离。调整的方法

.mui-table-view-cell:after{left:0}



这样选择类型就不会被选中

<select>
    <option value=""  style="display:none">选择类型</option>
    <option value="cat-1" >cat-1</option>
    <option value="cat-2">cat-2</option>
    <option value="cat-3">cat-3</option>
</select>


和js有点类似

var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap', function() {
        mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {
info.innerText = '你刚关闭了警告框';
});
});
document.getElementById("confirmBtn").addEventListener('tap', function() {
var btnArray = ['否', '是'];
mui.confirm('MUI是个好框架,确认?', 'Hello MUI', btnArray, function(e) {
if (e.index == 1) {
info.innerText = '你刚确认MUI是个好框架';
} else {
info.innerText = 'MUI没有得到你的认可,继续加油'
}



querySelector只选中第一个,querySelectorAll()选择所有的。它是JavaScript的dom选择器,比document.getElementById(),document.getElementByClassName().document.getElementByTagName()更加方便,因为他不局限于id class tagname这样。更加灵活,可以document.querySelector('#holder')或者document.querySelector('input[type='text']')或者document.querySelector('div>li:first-child')




组织冒泡,在里面的元素里面写return false;

阻止默认行为 e。preventDefault()

阻止冒泡 e.stopPropagation()


使用mui.trigger()方法可以动态触发特定DOM元素上的事件。


    .trigger( dom元素 , "tap" , 需要传递给事件的业务参数) 



在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例:


mui.plusReady(function(){

     console.log("当前页面URL:"+plus.webview.currentWebview().getURL());

});


导航和底部固定写在一个页面,在这个页面里面用

mui.init(){

  subpages:[{  

     url:'',   //这里面的内容就是页面的主要信息

     id:'',

     styles:{top:'',bottom:''}

}]};


想要两个元素相对位置不变,需要把这两个元素写在一个标签内,在父标签上写position:relative。在子标签上写position:absolute;top:10px;left:10px;

下面的例子当选择这两个字改变位置,1122也会随着改变

<div style="position:relative">

  <div>选择</div>

     <ul styel="position:absolute;top:10px;left:10px;">

        <li>11</li>

        <li>22</li>

     </ul>


图标是字体的形式,所以可以改变颜色background-color大小font-size


一个元素(按钮)在屏幕上居中

把按钮写在一个p标签内。

p{margin:auto;

text-align:center;}



一个div中的字体如果想让他在这个div块中垂直居中,为这个字体设置line-height=这个div的高度


不管屏幕大小怎样变化,一个元素相对位置不变,都比如处在屏幕中间,父元素position:relative;

这个子元素position:absolute;left:50%;



获取当时触发的这个元素的第一个子元素this.childNodes[1];本来第一个的下标为0但是,空格也算一个,所以他变成了1


<p><label for="name">名字:</label><input type="text" oninput="setCustomValidity('')" oninvalid="setCustomValidity('两至五个汉字')" required="required" pattern=".{2,5}"></p>

如果不写oninput可能是出现不匹配的时候提示框还是请填写此字段,那个验证的"两至五个汉字"不出现,不单独写*而是,直接在css里面加上一个图片的样式input:required, textarea:required {

    background: #fff url(images/red_asterisk.png) no-repeat 98% center;

}



输入mList会出现一个有三项的列表。class样式已经给出了,mButton会出现一个蓝色按钮


mui只有一些手势事件,但是缺少鼠标事件,要使用鼠标事件需要对象.addEventlistener("mouseout",function(){...})




CSS outline(轮廓属性   outline位于边框的外面,不一定是方形,三个参数颜色outline-color,样式outline-style,粗细outline-width -----#ffffff,solid,thick



    电话号码:^(0|86|17951)?(13[0-9]|15[01234567889]|17[678]|18[0-9]|14[57])[0-9]{8}$

    身份证:^([0-9]){7,18}(x|X)?$

    密码:^[a-zA-Z]\w{5,17}$ 字母开头,长度在6~18之间,只能包含字母、数字和下划线

    强密码:^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间


maxLength可以写在任何input里面。代表输入字段的最大长度,max规定输入字段的最大值和min配 套使用

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。




修改在css中显示的表单placeholder的样式

::-webkit-input-placeholder { color: blue;}   //safira和chrome

::-moz-placeholder{color:blue}  火狐4-18

:-moz-placeholder {color: blue;}  火狐19+

:ms-input-placeholder{}//ie

input:focus::-webkit-input-placeholder{}




#F4B5B8



z-index只能在position属性值为relative或absolute或fixed的元素上有效。z-index值只决定同一父元素中的同级子元素的堆叠顺序。先写的元素一定会比后写的位置靠下,即使他的z-index大


如果点击就直接出现提示的框 .form_hint {display:none;z-index: 999;position:absolute;} 可以为这个提示框加尖尖.form_hint::before{content:'\25c0';color:}点击时显示提示form input:focus + .form_hint {display: inline;} 

验证正确时提示form input:required:valid + .form_hint {background: blue;} 

input:focus {background-color:#fff !important;} 可能有的时候就需要加上!important才效果。


title是和pattren配对使用的,代表如果不符合pattren就弹出“请与所请求的格式保持一致

+title内容”的提示信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息。也可以为链接添加描述性文字


pattren不必使用^和$表示要匹配字段值的开头和结尾


Form 事件

onvalid当元素无效时运行的脚本

oninput当元素获得用户输入时运行的脚本

把一个div变成小三角。这个div里面不要写文字。如果写的话

   border-width:10px; 

    border-style:solid; 

    border-color:transparent #333 transparent transparent; 

     display:block; 

也可以直接写成,下面这个样式:

border:10px solid transparent;

border-right:10px solid #333;

display:block;


在一个框前面加一个小三角;可先设置这个元素div{poisition:relative;}

div:before{poisition:absolute;content:'';top:17px;right:100%;height:0px;width:0px;border:7px solid transparent;border-right:7px solid #ccc;}



两个按钮中间有个竖线,那个竖线可以当成一个元素的右边框,两个就是a的链接标签。a{display:inline-block; width:50%;}



 使用JavaScript代码调用元素的setCustomValidity()方法,可以很方便地修改元素在验证时展示的系统提示信息,其调用格式如下:

页面元素.setCustomValidity("系统提示信息");

注意目前为止,只有Opera 11才支持该方法,其他浏览器暂时还不支持该方法。



mui中自带的select是没有边框的,所以要想它右边框需要在当前页面添加select{border:solid #cccc 1px!important;}加上!important是使它优先考虑这个



Item 1后面有个箭头

<li class="mui-table-view-cell">

<a class="mui-navigate-right">

Item 1

</a>

</li>


//点击“确定”后选中内容显示在输入框中,多选 

<li class="gn[]"><input type="checkbox" class="gn"/></li>


   var ogns=document.getElementsByClassName("gn"); //注意有时必须添下标("gn")[0]才可以。

     var ogn=document.getElementsByClassName("gn[]");

    mui(".hidelist").on("tap",".sure",function( ){

var flag="";    //flag容器,放选中的下拉

    for(var i=0;i<ogn.length;i++){

//如果是被选中  ,把它的值获取到  

      if(ogns[i].checked==true){

flag+=ogn[i].innerText+' ';}

    }

  document.getElementById("choose1").value=flag;//把flag的值获取到输入框中

document.getElementById("hidelist").style.display="none";//下拉隐藏

});




Chrome中文版中默认将最小字号限制在12号

.classname {

    font-size: 9px;

    -webkit-transform: scale(0.75);//12*o.75=9这里设置的是9px的字体

    -o-transform: scale(1);    //针对能识别-webkit的opera browser设置

}



jquery开头

  $(document).ready(function(){


  });


有时候用display="block"没有显示的话。就用display=""



 JavaScript 放置在文档最后面可以使页面加载速度更快 -->

   $(document).ready(function () {        

        //点击“返回顶部”

        $('.goTop').click(function () {

            $(document).scrollTop(0);

        });

        //页面加载隐藏“返回顶部”

    });



设置css使文字和图片同排同行时上下垂直居中图片和文字在同一排,要让文字和图片都是居中的img{vertical-align:middle;}



作为背景的图片一定要设高度,否则就不显示

居中对齐margin:0 auto;width:960px;一定要设高度否则还是不居中


去掉两个img之间的白线,用img{display:block;}



密码:<input type="password" id="p1"><br>

重复密码:<input type="password" id="p2" >

<input type="submit" onclick="checkPass()"velue="提交" />

<span id="errorpwd" style="display:none;border:1px solid red;color:red;">两次输入密码不一致</span><!--display:none;-->

<script type="text/javascript">

function checkPass(){

 var pwd1=document.getElementById("p1").value;

 var pwd2=document.getElementById("p2").value;

if(pwd1!=pwd2){

//法一弹出提示

var s=document.getElementById("errorpwd");    

   mui.alert(s.innerHTML);

   //法2显示提示

   //document.getElementById("errorpwd").style.display="";//这里设为block没有效果,所以写的空。

}

}

</script>



getElementsByClassName()得到的是个数组,所以要在后面添加[0]

getElementsByClassName("classname")[0]



Maximum call stack size exceeded堆栈溢出错误可能是有死循环。


<input type="tel" class="name" /><span class="need">*</span>和

<input type="tel"  class="name/>

<span class="need">*</span>   效果不一样,尽管只是换了一行,但是这种document.getElementByClassName("name").nextSibling第一种写法可以找到第二种就没有办法找到可能会报错如果你想取里面的innerHTML.他会说innerHTML没有定义。




box-sizing:border-box;需要并排放置两个带边框的框,并把边框和内边距放入框中。只需要设置width,其中含有padding和border的值,和以往的盒子宽度=padding + border + width 不同。但它具有兼容性box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */


低于IE9版本IE浏览器并不支持<header>, <article>, <footer>, <figure>等html5标签,现在用js脚本来让它们支持。

<!–[if lt IE 9]>

<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>

<![endif]–>




word-wrap:break-word;文本超过盒子宽度就自动换到下一行

overflow规定当内容溢出元素框时发生的事情。值:visible默认。在之外。hidden隐藏外面的只留框内的。scroll使用滚动条。auto

   判断某个元素是否可见。不仅可以用 if($(this).css(“display”)=“block”).还可以if($(this).next("ul").is(":visible"))


<input name="textfield" type="text"  maxlength="20" value="请输入文字.."

    onfocus="if (value =='请输入文字..'){value =''}"

    onblur="if (value ==''){value='请输入文字..'}" />




在css中加入这个效果实现隔行换色

tr:nth-child(even) {background: #CCC}   为父类元素下的同级tr中的偶数行设颜色

tr:nth-child(odd) {background: #FFF} 

.a:nth-child(odd) .b{background: #FFF} 为奇数行a中的b设颜色


文本框字数限制

<textarea id="taContent" rows="3"  maxlength="20" onchange="this.value=this.value.substring(0, 20)" onkeydown="this.value=this.value.substring(0, 20)" onkeyup="this.value=this.value.substring(0, 20)" ></textarea>

 <span class="wordwrap">你还可输入<span class="word">20</span>/20</span>

js里面写

$("#taContent").keyup(function(){

    var n=$(this).val().length;

     $(".word").html(10-n);

    if($(".word").html()<=0){

alert("只能输入10个字符");

}

 })


jQuery(selector, [context])

这种用法,相当于 $(context).find(selector) 

所以可以用$("#y",this)>0意思是在当前的这个对象内有id=y的元素。适合判断某行中拥有属性id=y时对它经行一个操作,否则另一个操作处理。




设置div的透明度

    div{filter:alpha(opacity=50);} /* for IE8 and earlier */

    div{opacity:.5;} /* for IE9 and other browsers */

以上2段代码的效果相同



伪类。.class:before{content:'';}在一个类前面(before)或者后面(after)添加文字或者图形



让按钮上有图片

<button ><img src="img/icon_msg.png">发送给朋友</button>


window.open("url","参数")在新的窗口中打开页面



返回到顶部

 $(document).ready(function () {        

        //点击“返回顶部”

        $('.goTop').click(function () {

            $(document).scrollTop(0);

        });

        //页面加载隐藏“返回顶部”

    });



添加属性add_div.classList.add("mui-hidden");

删除属性add_div.classList.remove("mui-hidden");

判断是否拥有属性add_div.classList.contains("mui-hidden");




JQuery中serialize()实例 看额我的博客http://blog.csdn.net/qq_33769914/article/details/54409236

/*表单提交开始*/

$(document).on('tap','#btn_ok',function(){

//匹配身份证号码

var vidcard=$('#vidcard').val();

var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

if(vidcard!=''){

//验证身份证

if(!pattern.test(vidcard)){

layer.open({content:'身份证有误!',time: 2});

return false;

}

}

//姓名验证

var vname=$("input[name='vname']").val();

if(vname==''){

layer.open({content:'姓名不能为空!',time:2});

return false;

}

//手机号验证

var vphone=$("input[name='vphone']").val();

var vpattern = /^1[34578]\d{9}$/;  

if(vphone=='' || !vpattern.test(vphone)){

layer.open({content:'手机号有误!',time:2});

return false;

}

//return false;

var data=$('.form').serialize();

$.ajax({

url:"{:U('Apphuiyuan/doEditClient')}",

data:data,

type:'post',

dataType:'json',

success:function(data){

if(data.status==1){

layer.open({content:'无效的操作!',time: 2});

};

if(data.status==2){

layer.open({content:'卡号被占用!',time: 2});

};

if(data.status==3){

layer.open({content:'手机号被占用!',time: 2});

};

if(data.status==4){

layer.open({content:'编辑成功!',time: 2});

};

if(data.status==5){

layer.open({content:'编辑失败!',time: 2});

};

},

error:function(){

alert('链接出错');

}

});

});

/*表单提交结束*/


正则输入数字或者数字有两位小数 *是0个或多个   ?代表有0个或1个 

 /^\d*(\.\d{0,2})?$/



css3的渐变属性

 linear-grandient线性渐变 ,radical-grandient径向渐变。具有兼容性的问题

-moz-linnear-grandient(top,#ccc,#fff)


选择列表中的第一个 <li> 元素并设置其样式:li:first-child。所以他代表的是父类中的第一个元素

第一个li若选择里的第一个孩子p则li:first-child p{}




鼠标经过it_expertxt时它里面的字体颜色改变,位置改变的js效果。动画

$(".it_expertxt").hover(function(){

$(this).find(".it_expertit").css("color","#fff");

$(this).find(".it_experconter").css("color","#fff");

var div = $(this).find(".it_expertit");

var div2 = $(this).find(".it_experconter")

div.animate({left: 20}, 200);

div2.animate({left: 20}, 200);

},function(){

var div = $(this).find(".it_expertit");

var div2 = $(this).find(".it_experconter")

$(this).find(".it_expertit").css("color","#434343");

$(this).find(".it_experconter").css("color","#7d858c");

div.animate({left: 0}, 200);

div2.animate({left: 0}, 200);

});


或者

$("#btn").click(function() {

if(div.hasClass("dest")) {

div.removeClass("dest").animate({left: 0}, 1000);

} else {

div.addClass("dest").animate({left: 100}, 1000);

}

})




换上一页。下一页,每一页就是一个ul,里面有几个 li。先把他们写在一个页面里面通过,显示隐藏实现效果。

$(function(){    

         abc2();

    }); 

function abc2(){

         var $obj = $('#hot_ranks2 ul');//每一页就是一个ul里的几个li  

         var len  = $obj.length;  

         var i = 0;  

         $("#next2").click(function(){  

              i++;  

              if(i==len){  //如果是最后一页了,让它回到第一页

                i = 0;  

              }  

              $obj.stop(true,true).hide().eq(i).fadeIn(600);  //停止所有页面的动画,并隐藏,只把其中的一个ul以600ms的速度淡入

              return false;  

         });      

         $("#previous2").click(function(){  

              i--;  

              if(i==-1){  

                i = len-1;  

              }  

              $obj.stop(true,true).hide().eq(i).fadeIn(600);  

              return false;  

         });  



mui-table-view-cell会自动有下划线,但是少了前半截,解决方法.mui-table-view-cell:after{left:100%;}这样就没有线了,如果把left=0.这样就是全线



行内元素不能设宽高,设了也没用,a.所以如果你设的宽高没有反应就把它设成display:inline-block或者block。

块状元素高度可设。

为a设置display:inline-block;就可以使各个a成行显示,又可以设置高度。如果宽度超过100%,就会换行,而line是一直不会换行的。



把js文件写在body里面。最下面的地方


全选和全部选

$("#btn-all").click(function(){

if($("#btn-all").prop("checked") == "true"){   

$(this).attr("value","全不选");//全选的按钮变成全不选 //全不选时的name=2

$(this).prop("checked",true); //点击全选所有内容选中

}

else{

$(this).attr("value","全不选");//全选的按钮变成全不选

$(this).prop("checked",false);

}

});


选中的复选框,input[type="checkbox"]:checked




console.log()输出到控制台




使弹出内容无论在哪里居中的样式

    width: 90%;

    height: auto;//是内容自动撑满

    position: fixed;//位置固定的

    top: 50%;//先让他处于几乎右下角位置

    left: 50%;

    margin-left: -142px;//再让它左移回来

    margin-top: -127px;



关闭左滑的效果mui-table-view-cell

  var elem = this;

  var li = elem.parentNode.parentNode;

  mui.swipeoutClose(li);




滚动条overflow:scroll,还要设置宽高


//当日期字体多于3个的时候添加样式

//$("li").each(function(){

// if($(this).text().length>3)

// $(this).css({'padding-top':'13px','line-height':'16px'});

// //alert($(".bordered1 td").height());

// $(this).css('height',$(".bordered1 td").height());

//});


统计一共多少条。用$("li:last").index()+1   //这里统计的就是li有多少个,最后一个li的索引+1.因为index是索引值

或者是直接用了length属性 $("#item2 li").length。



html里面的内容,获得,$("#id").html(),设置$("#id").html(text)


jquery 如何使用innerHTML---$("#responsediv")[0].innerHTML=msg等价于$("#responsediv").html(msg)



tr td:first只能选中tr中的第一个td而first-child能选中所有父类tr下的第一个td



动态设置margin-top的值,$("#imgr").css("margin-top",$(".bordered1").height()/2);



使用display:table-cell,vertical-align:middle,text-align:center;三个一起让大小不固定元素垂直居中,大小不同的图片在一排且图片都垂直居中



一个table默认的display=table。他的th td都是display=table-cell。tr的display=table-row,所以判断他们显示if($(".table").css("display")==table)而不是象其他的,display==block



没有触发左滑动

<li class="mui-table-view-cell">

   <div class="mui-slider-right mui-disabled">

<a class="mui-btn mui-btn-red">删除</a>

   </div>

   <div class="mui-slider-handle">

 左滑显示删除按钮

   </div>

</li>


触发左滑动

<li class="mui-table-view-cell mui-transitioning mui-selected">

   <div class="mui-slider-right mui-disabled mui-selected">

<a class="mui-btn mui-btn-red" style="transform: translate(-88px, 0px);">删除</a>

</div>

<div class="mui-slider-handle" style="transform: translate(-88px, 0px);">

左滑显示删除按钮

</div>

</div>

</li>

对比两个class中的差别,然后通过判断hasClass,addClass,removeClass



在使用each时注意,里面的遍历数要用this代替。

var sum=0;这个要写在最前面的。否则在里面每次都要从新归0

 $("#要遍历的").each(function(){

   sum+=parseInt($(this).html());一定要把它转为整型再加,否则加起来的就是字符串。

   $(".osum").html(sum)

 });


img 加载出错使用默认图片

  onerror=this.src='def.jpg' 



如果子类中有自己的样式,即使为父类定义了样式,也不可能改变子类样式。所有改变样式时要获取子类的标签


alert和console.log()输出内容不一样,可能是alert弹得内容不全,就隐藏了。


mui.alert(li.innerHTML);弹出的直接是有样式的最终显示效果,而不是他的html标签,所以想要标签需要写成

li.innerHTML.replace(/&/g, '&amp').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')




注意var oli=this.parentNode.parentNode;

如果想要使用这个js中的变量oli在jquery中。$(oli).css("display","none")注意这里的oli并没有打引号


先找到父元素,在在父元素中的子元素var oli=this.parentNode.parentNode; $(oli).find(".childclass").css();


mui.swipeoutOpen(里面是js的选择器用this而不是$(this))  参数dom元素

mui.swipeoutClose()



如果你通过addClassName来给元素添加样式,而最后用css(“color”,“red”)这种方式来改变该元素样式的话,两者可能冲突,可能在某些时候就失效了。所以要采用一样的方式。


当改变有一个图片时,把它从新命名,再添加到页面中,这样页面中的效果可以更快的加载新的页面。



hightchart规定y轴

 yAxis: {       

                yAxis:{  min: 0, //规定y的开始坐标

                title: {

                    text: '<b style="font-size:12px;" >预约人数</b>'

                },

                tickPositions: [0,10,20,30,40],//这里是y轴的值的设定

                plotLines: [{

                    value: 0,

                    width: 1,

                    color: '#808080'

                }]

            },



$(".date").slideToggle("fast"); //卷入卷出相切换



给一个自己设的下拉ul设置 height: 270px; overflow: auto;就会有下拉啦


$('#leftbar li:not(:first-child)').click(function(){  //#leftbar li:not(:first-child)li必须是 #leftbar的第一元素才行,否                                                           //则就是除去的是 #leftbar里面的第一个元素。如果想找 #leftbar里面的第一                                                        个li就得写#leftbar li:not(:nth-of-type(1))

/、$(".text").toggle();//点击一下显示再点击一下隐藏


// $(".text").css('margin-top',$(".monthta").height()/8+$(this).index()*53);

// $(".text").css('margin-left',$(".monthta").width()/6);

// $('.text').html($(this).text()+"收益共计:"+20000+'元').show(1000);







如果想要获取2016-2中的2016,可以获取整个2016-2 rs.text再利用split("-")来分割成两个。rs.text.split("-")[0]就是2016。rs.text.split("-")[1]就是2




/*箭头向上*/

.arrow-up {

    width:0; 

    height:0; 

    border-left:30px solid transparent;

    border-right:30px solid transparent;

    border-bottom:30px solid #fff;

}

    

 /*箭头向下*/

.arrow-down {

    width:0; 

    height:0; 

    border-left:20px solid transparent;

    border-right:20px solid transparent;

    border-top:20px solid #0066cc;

}

    

 /*箭头向左*/

.arrow-left {

    width:0; 

    height:0; 

    border-top:30px solid transparent;

    border-bottom:30px solid transparent; 

    border-right:30px solid yellow; 

}



当内容超出手机页面时可以考虑指定外层div设置width:100%,然后加滚动条overflow:sroll,这样内层的div只需设个固定的width=900px。就可以让多余900的内容滚动拖拽进来了。。。

但是数据很少还添加这个效果的话就会有问题。就可能是屏幕小时,合适。大的时候就有留白。所以判断一下数据多少,多的话就加

<div style="width:100%;overflow: scroll;">

<div id="list" style="height:400px;min-width:300px;margin-bottom:50px;width:1000px;"></div>

</div>



鼠标滑动li时,可以为它添加背景图片,不仅仅是改变字体颜色




利用雪碧图,实现点击时皮肤换色

ul li{width:15px;height:15px;margin-left:10px;

list-style:none;background-image:url(images/bg.gif);cursor:pointer;float:left;display:block;}

#skin_1{background-position:0 0;}

#skin_2{background-position: -25px 0;}

#skin_3{background-position: -50px 0;}

#skin_1.selected{background-position:0 -16px;}

#skin_2.selected{background-position:-25px -16px;}

#skin_3.selected{background-position:-50px -16px;}


$("li").click(function(){

$("#"+this.id).addClass("selected").siblings().removeClass("selected");}




<link rel="stylesheet" type="text/css" href="css/skin_1.css" id="cssfile"/>

$("#cssfile").attr("href","css/"+this.id+".css");

也可以在链接外部样式表中加id,之后js中改变他的链接样式




你想创建一个元素,使它的宽度占满它的父元素,但还要留出一部分像素宽做其它用处

.parent {   

    width: 100%;   

    position: relative;   

    }   

    

.child {   

    position: absolute;   

    left: 100px;   

    width: calc(90% - 100px);    

    }   






var li = document.createElement('li');

li.className = 'mui-table-view-cell';

li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';

table.insertBefore(li, table.firstChild);//把li插在table的第一个孩子前面





回到顶部  这是在mui中的方法     

    $("#toppic").click(function () {

         if(mui.os.ios){ //如果是ios系统

            mui("#pullrefresh").pullRefresh().scrollTo(0,0);

      

             });  

           

            }else{//如果是其它,android

            window.scrollTo(0, 0);

            }

});


下拉出现的元素他的位置是固定的,那么你应该设置position:fixed;top:0px;

$('.scrolltop').hide();刚开始滚动条是隐藏的。

$(window).scroll(function(){   滚动条滚动时触发事件


if($(window).scrollTop()<400){滚动条高度高于400时显示回到顶部的图标

    $(".scrolltop").hide();

}

else{

    $(".scrolltop").show();

}

$(".scrolltop").click(function(){

window.scrollTo(0,0); 点击图标回到顶部   或者 $('html, body').animate({scrollTop:0}, 'fast');

return false;

});

});





页面跳转

window.location.href = "http://www.kaigesheji.com/wangzhanjianshe/"; 在原窗口打开。可以去掉window

mui.openWindow({url:'paybill.html',id:'paybill.html'})  mui的页面跳转

window.open()打开新页面




刷新:

window.location.reload()   如果刷新提交数据会询问是否提交

window.location.href=window.location.href 这个如果刷新时要提交数据。会向指定的页面提交数据



页面使用iframe引入一个框架点击提交时出现这个框架页面。

你点击返回就隐藏这个框架。需要在框架里写 

$("#back").click(function(){

      window.top.iframe.hanshu();  

})


主页面写function hanshu(){

  $("iframe").hide();

}



规定两个并排的带边框的框:box-sizing:border-box;相当于规定了框,所有内容都在框里面添加。边框都是在内部的。

具有兼容性问题。

box-sizing:border-box;

-moz-box-sizing:border-box; 

-webkit-box-sizing:border-box;

width:50%;//两个div宽度是50%,所以即使下面加了很粗的边框,也不会换行越界,因为边框的处理是在这个框里的、。

float:left;




如果屏幕小就隐藏某些内容

$(function(){

    window.onresize = function(){

        if(window.innerWidth < 1150){

            $("#head-shortcut").css("display","none");

        }else{

            $("#head-shortcut").css("display","block");

        }

    }

})



.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

ff火狐可以识别!important。。ie不行。写法width:200px !important;



$(".a:gt("+len+")").css("display","none");注意这里是+len+的双引号。因为他是一个变量,所以不能写在双引号里面



如果引入了样式表,还是显示不出来,1,如果是图标不显示,可能是缺少ttf的文件,你可以打开这个css文件看看他的某个url的后缀是。ttf的地址,把它加到fonts文件夹下面。并且注意这个css文件中的引入路径。2,样式没有用。可能是link里面没有写rel=“stylesheet”3,要在用的那个地方(也就是和content:之后要加字体类型和引入的那个css里面的那个字体一样 font-family: 'FontAwesome';)



box-shadow具有兼容性

box-shadow : 0 0 10px rgba(0,0,0,.8);

-webkit-box-shadow : 0 0 10px rgba(0,0,0,.8);

-moz-box-shadow : 0 0 10px rgba(0,0,0,.8); 



颜色渐变 ( 停止点也可以带一个位置,这个位置可以是像素值,也可以是百分比:background: -webkit-linear-gradient(top left, red, green 30%, blue 80%, orange);)

background: -moz-linear-gradient( top,#ccc,#000)  线性渐变从上面开始,颜色有#ccc变成#000

background:-webkit-gradient(linear,0 50%,100% 50%,from(#ccc),to(#000));/*Old gradient for webkit*/

background:-webkit-linear-gradient(left,#ccc,#000);/*new gradient for Webkit*/

background:-o-linear-gradient(left,#ccc,#000); /*Opera11*/



鼠标经过一个元素,另一个元素的样式改变。前提是。经过的那个是父元素,改变的那个是子元素。

写css的时候可以.parent:hover .child {...}


        <div class="a" >1sssssssss</div>

<div class="a" >2sssssssss</div>

<div class="a" >3sssssssss</div>

 条数:<select name="listrows" onchange="fun1();" id="sel">

                <option value="10">10</option>

                <option value="20"> 20</option>

                <option value="30">30</option>

                <option value="50" >50</option>

                <option value="100" >100</option>

            </select>

//条数控制

function fun1(){

var len=$("#sel").val();

$(".a").show();

$(".a:gt("+len+")").css("display","none");

}





window.innerWidth/innerHeight:浏览器可见区域的内宽度、高度(不含浏览器的边框,但包含滚动条)。兼容:ie9/10、chrome、firefox。


window.screen.availWidth/availHeight:屏幕的可用宽度、高度(通常与屏幕的宽度、高度一致)。兼容性:ie6/7/8/9/10、chrome、firefox。




全屏打开新的页面

window.open(url, "", "menubar=no,location=no,toolbar=no,status=yes,resizable=yes,scrollbars=yes, width = " + screen.width + ", height = " + screen.height);


提示UNdefined is a function可能原因js插件的函数名写错,或者jquery.min.js没有先引用。



淡雅的蓝色,可以用作表格的滑过颜色#EAF2FF  比#efefef更加淡的灰色是#f5f5f5



clientX  clientY相对于浏览器窗口的位置

screenX  screenY相对于整个电脑显示器窗口的位置

pageX  pageY相对于文档窗口的位置,其中包括滚动条的与移动距离



强制不换行:div{white-space:nowrap;}

自动换行:div{ word-wrap: break-word; word-break: normal;}

强制英文单词断行:div{word-break:break-all;} 




记住不是所有的元素都可以用$().html("你好!")这样的形式改变里面的文字的。有的可能是$("select").val("你好!")

jquery中截取字符串是$(".str").substr(0,9)  字数超过自动弹出,用的是keyup事件




transform对元素进行旋转rotate(8deg)-正数表示顺时针旋转,负数则表示逆时针旋转、缩放scale(x,y)、倾斜skew(x-angle,y-angle)、移动translate(x,y)  

具有兼容性.可以写在一起。既旋转7度又缩放。

transform:rotate(7deg) scale(1,2)  ;

-ms-transform:rotate(7deg) scale(x,y); /* IE 9 */

-moz-transform:rotate(7deg) scale(x,y); /* Firefox */

-webkit-transform:rotate(7deg) scale(x,y); /* Safari 和 Chrome */

-o-transform:rotate(7deg) scale(x,y);      /* Opera */



用来调整背景图像的尺寸大小。

如果一个图片没有全部在你设置的尺寸之内,就可以通过下面的设置来调节大小而没有必要在ps里面去缩小它的大小

background-size : contain | cover | 100px 100px | 50% 100%;


contain按照图片的尺寸等比例的调整到宽或者高正好适应背景的区域。所以可能出现空白。

cover背景图片拉伸去适应定义的背景的区域




首先克隆了一个li它具有mesTitle,username,mesContent的属性。

把提交的mesTitle,username,mesContent的值都获取到放在新的li的对应元素里。然后把所有这些放在最后一个li之后。

var ooli=$("ul li:last-child").clone();

$(".mesTitle",ooli).html($("#mesTitle").val());

$(".username",ooli).html($("#username").val());

$(".mesDate",ooli).html(new Date());

$(".mesContent",ooli).html($("#mesContent").val());

$(this).parents(".fm1").siblings(".contentList").has("li:last-child").before(ooli);



ttf文件通过同名css引入。如果想看别人页面的图片,可以按f12.在network里面看。

搜索框里面搜索的框里面有小图标,要是文字和图片不重叠,可以设置字体的text-indext:20px;



artDialog

 <link rel="stylesheet" href="../Content/artdialog/ui-dialog.css"/>

 <script src="../Content/js/jquery-2.0.1.min.js"></script>

 <script src="../Content/artdialog/dialog-min.js"></script>  

$(".edit").click(function(){

var d = dialog({

title: '修改',

content: '内容',

okValue: '确 定',

ok: function () {

var that = this;

setTimeout(function () {

that.title('提交中..');

}, 2000);

return false;

},

cancelValue: '取消',

cancel: function () {

}

});


d.showModal();//这是有遮罩的效果。如果不想它有遮罩层就用d.show();

});




background:#c0dce0 url(images/tuijian/bgbg1.png) no-repeat;设置了背景图片,没有背景图的地方用背景色



只有刷新色块的颜色随机

   function init()  

            {  

                    var divs = $(".a2");  

                    for(i=0;i<divs.length; i++){  

                      divs[i].style.backgroundColor = getRandomColor();  

                    }  

      

            }  

      

            function getRandomColor(){  

              return  '#' +  

                (function(color){  

                return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])  

                  && (color.length == 6) ?  color : arguments.callee(color);  

              })('');  

            }  

        </script>  

     </head>  

      

     <body onload="init()"> </body>




a标签被点击的样式,不用js直接写#div .active a{}因为引入的js里面写了这个事件所以才不用写的,不要误会啊!尴尬



有时一块的文字宽度不够就自己换行,但换行换的也不正常的离前一行就很远,可能是自己很设置了很大的行高line-height。虽然设这个值可以让文字上下居中。但是要考虑一行不可以写下的情况。有多行时需要设置padding就好啦。



超过一行的字数省略

display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;注意还要写一个width

超过两行省略

两行超出溢出隐藏

div{

   overflow:hidden;    //前两个不变

  text-overflow:ellipsis;

  

  white-space:normal !important;

  display:-webkit-box;

/*将对象作为弹性伸缩盒子模型显示*/ 

 -webkit-line-clamp:2;   限制盒子的显示行数

-webkit-box-orient:vertical; 设置排列方式


}


zoom:1

  zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题,功能相当于overflow:auto,同样也可以用height:1%来代替zoom:1。所以一般要在浮动元素的父元素加上overflow:auto;zoom:1;。这样,子元素浮动,父元素会自动跟子元素扩大了。

zoom:1能够比较神奇地解决ie下比较奇葩的bug。


譬如外边距(margin)的重叠,譬如浮动的清除,譬如触发ie的 haslayout属性等等。



如果一个div里面有三个浮动的元素,给这个div设置背景色的时候是没有反应的。

法1,给这三个浮动的元素外面加一层div。并给他添加样式。float:left。background-color:#ccc;width:100%;注意这个width:100%;

法2,给最外层的加样式 .div:after{content:"";clear:both;display:block;}



min-width的用法,当宽度由内容决定的时候才起作用。也就是display:block


如何对齐文本与文本输入框vertical-align:middle;

input { width:200px;height:30px;border:1px solid red;verticalclan.js的全屏滚动插件,如果在一个页面前面加了一个<div style="clear:both"></div>用来清除上个页面float对本页面的影响,那样可能会使插件的向下滑动失效。此时只要把这个清除浮动放在第一个div里面不用专门来写一个div



鼠标滑过时图片变大,直接利用css就可以啦,

<div class="box">

<img src="img/4.jpg" width="300px" height="200px"/> 

</div>

先为box设置好宽高,超出部分隐藏。在利用transform:scale(倍数)。注意transform具有兼容性

.box{width:300px;height:200px;overflow: hidden;border:2px solid #000;}

img:hover{-webkit-transform:scale(1.3);-o-transform:scale(1.3)}

如果希望它有延时的缓慢变大,可以利用animation: myfirst 3s;

@-webkit-keyframes myfirst{

from{-webkit-transform:scale(1);-o-transform:scale(1);}

to{-webkit-transform:scale(1.3);-o-transform:scale(1.3);}

}



[Web浏览器] "Uncaught TypeError: Cannot read property 'msie' of undefined"错误原因是jquery的1.9.1版本的删除了一些api导致新引进来的插件没办法正常运行。jQuery1.9中去掉了msie的方法.这个时候采用低版本的jquery库就可以啦。


只执行一次就取消.执行$(".a").on("click",function(){})取消$(".a").off("click")

或者用$(".a").bind("click",f1=function(){})   $(".a").unbind("click",f1)

一个属性上有多个事件点击和鼠标滑过效果一样的话。就用$(".a").on("click mouseover",function(){}){})

on和bind的区别,on比bind多一个selector的选择器。可以进一步选择子元素。$(".a").on("click","a1",function(){})触发的是a里面的子元素a1.而bind却不能进一步到子元素



offset() 方法返回或设置匹配元素相对于文档的偏移


如果通过background-image添加的背景图不显示。可能原因是图片和背景颜色一样,或者是图片的行内元素span这种,所以即使设了宽高也不行。应该设置成display:block;width:30;height:30px;


导航居中

ul,li{list-style:none;}

.navbar {text-align:center;}

.navbar ul { display:inline-block;}

.navbar li { float:left; margin-left:20px;}

这里浏览器兼容只能是IE8或更高版本,所以如果要兼容IE7的话,请加入以下代码


.navbar ul {

    display:inline;

    zoom:1;

}


他的html内容:

<div class="navbar">

<ul>

<li ><a href="#">home</a></li>

<li ><a href="#">advice</a></li>

<li ><a href="#">page</a></li>

<li ><a href="#">people</a></li>

<li ><a href="#">service</a></li>

      </ul> 

    </div>



给一个图片添加  border-radius: 50%;属性,它就会有方形变成椭圆或者圆形啦。



当屏幕宽度减小时,调节导航的距离

var a= document.body.clientWidth;//获得浏览器窗口的宽度

if(a<400){  //当屏幕的宽度小于400时就缩小每个导航之间的距离

$(".nav li").css({"margin-left":"2px","margin-right":"2px"});

}


或者使用@media only screen and (max-width: 400px){

.nav li{margin:0px 2px;}

}



获取匹配元素在当前视口的相对偏移。$(".div").offset()返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。距离左边的偏移$(".div").offset().left



如果使用iframe引入一个html页面。可以在原页面的地图页面设置htmlbody的height=100%; <!--百度地图容器-->

  <div style="width:100%;height:100%;border:#ccc solid 1px;" id="dituContent"></div>

这样两个地方都设置好。引入的时候就算指定宽高也就全部在内的。o




在页面中通过img显示图片。设置 max-width: 100%;就可以自动缩放


display:table-cell此元素会作为一个表格单元格显示(类似 <td> 和 <th>)



伪类有::first-child ,:link,:vistited,:hover,:active,:focus,:lang单引号

伪元素有::first-line,:first-letter,:before,:after  用双引号

 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。



可以在鼠标滑过的时候出现伪类的元素。a:hover

a:hover::before, a:hover::after { position: absolute; }  

a:hover::before { content: " ";left: -20px;font-family: fontAwesome; }  

a:hover::after { content: " "; right:  -20px; font-family: fontAwesome} 这里的双引号是为了浏览器兼容性才写的,有时在某在浏览器里可以去掉。



backface-visibility:hidden;

隐藏被旋转的 div 元素的背面:

div

{

backface-visibility:hidden;

-webkit-backface-visibility:hidden; /* Chrome 和 Safari */

-moz-backface-visibility:hidden; /* Firefox */

-ms-backface-visibility:hidden; /* Internet Explorer */

}




再写页码的时候,希望鼠标滑过每一行的数字时,他会自动加个边框。但是加了边框肯定就影响原来的位置啦。


这时我们需要在开始的时候就加一个和背景一样颜色的边框。或者是滑过的时候margin设个负数的值,值得大小和边框宽度一样。



给span设置了display:inline-block;屏幕大的时候,一行显示。小的时候就自动换做两行啦




<img src>的方式引入图片,然后通过设置样式img{width:200px;height:20px;}这样的图片就会自动的缩放到你指定的大小,如果通过background-image这样加图片就不行缩放






背景图自适应,html,body{height:100%;width:100%}

.div{    background: #8FC320 url(../img/bg.jpg) no-repeat;height:100%;width:100%;background-size:cover;}

background-size:cover;加上这个就能保证是全部显示的没有截取部分啦!重点重点!!图片会拉伸去适用屏幕背景




当编辑和添加都是用的同一个弹窗元素的时候,那么他们的保存就会有两个事件。所以可以用一个隐藏的元素, <input type="hidden" value="0" class="test"/>,当编辑的时候给$('.test').val("1")从新赋值,所以之后再点击保存时候,判断这个  if($('.test').val()==1),是编辑的保存,否则是添加的保存。。而且在里面$(this),在编辑是,指的是编辑里面的那个保存,反之是另一个保存按钮,是不一样的。



背景图片background-image设置时必须设置高度否则就不出现,但是一旦设高它既可能不是全屏的啦,所以你需要在这个图片的父元素设置width:100%;height:100%;,然后这个img{width:100%; height:100%; background-image:url(img/green.jpg)}就是全屏的啦




如果一个元素仅仅出来一半,这时需要查看所有的设置position的元素,是否设置高度100%,因为position他就浮动了,这时必须有高度才行



       mydiv.style.backgroundImage="url(img/"+imgArr[currentimg]+")";注意这里imgArr[currentimg]还是一个变量,所以给他左右+,并且用双引号括起来,注意这里是双引号。



有时候给一个元素添加事件可是没起作用,可能是你的元素范围太广$("input[type='radio']").click(function(){})这样的要在全局找这个单选框,所以没作用。你可以使用$(".adress").on("click","input[type='radio']",function(){})这样就先找父元素再找单选框。就有效果啦




使用var newdress=$(".adress div:l

上一篇:共享单车押金退款管理   |  下一篇:HP P6300 故障存储更换步骤详解