js,css随笔(动态生成的dom做点击事件无效)

1.动态生成的DOM做点击事件无效   https://blog.csdn.net/mm_hello11/article/details/79010679

2.消除button的默认样式

margin: 0;
padding: 0;
border: 1px solid transparent; //自定义边框
outline: none; //消除默认点击蓝色边框效果

3. 键盘按下事件

$("#btn").keydown(function(event){
    if(event.keyCode == 13){
      alert('你按下了Enter'); 
    }
});

4.on事件

1. $("#JS_ul").off("click").on("click","li",function(event){
                
        var val = $(this).html()
        $("#JS_ul li").removeClass("yactive");
        $(this).addClass('yactive');  
});
2. $("p").on("click",function(){ alert("段落被点击了。"); });

 3. $("div").on("click","p",function(){
    alert($(this).text());
 })

 


5.字符串拼接(接口反回数据渲染)

for (var i = 0; i <= obj.length-1; i++) {
      html += '<li id="JS_li">'+
                       '<div class="box">'+
                       '<div class="y_num">'+obj[i].code+'</div><div class="y_town">'+obj[i].name+'</div>'+
                       '</div>'+
              '</li>'
}
$('#JS_ul').html(html);

6.input 框禁止编辑 readonly="readonly"


7. json格式转换

var json = '{"result":true, "count":42}';
var obj = JSON.parse(json);

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);

8. validform.js    表单验证插件

9.表单提交前进验证  (可以使用form表单的onsubmit方法);

 <HTML>
      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     </head>
      <BODY>
          <form action="http://www.baidu.com" onsubmit="return toVaild()">
              <input type="text" id="ff">
              <input type="submit" id="submit" value ="提交"/>
          </form>
     </BODY>
        <script language="javascript">
            function toVaild(){
                var val = document.getElementById("ff").value;
                 alert(val);
                if(val == "可以提交"){
                     alert("校验成功,之后进行提交");
                     return true;
                 }
                else{
                     alert("校验失败,不进行提交");
                     return false;
                 }
             }
     </script>
 </HTML>

 10.  获取表单数据  $("form").serialize();     例:FirstName=Bill&LastName=Gates

11.图片转为 base64 编码显示 (webpack打包)

    .index  {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAFhCAMAAAAFoMsrAAAA/FBMV…aUCbdTJjiLDsU5We6q82JkKPM16MacCqrzVxITJc353ARnWPtuL/MkbAzlAAAAAElFTkSuQmCC) no-repeat;
if(undefined){
		console.log('undefined是true')
	}else{
		console.log('undefined是false') // 执行这里,undefined为false
	}   

17. 图片访问不到用默认图片

<img class="mailList-tab1__img"
                                        onerror="this.src='/phone/static/images/default-head.jpg';"
                                        :src="item.txtImg?item.txtImg:'/phone/static/images/default-head.jpg'" alt="">

posted @ 2018-11-21 11:06  炽橙子  阅读(1938)  评论(0编辑  收藏  举报