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;




     }


12.边框阴影（外边框和内边框）




.out{


box-shadow:0px 0px  10px 5px #aaa;


}


.in{


box-shadow:0px 0px 10px 5px #aaa inset;


}


13.段落首行空两格


text-indent: 2em;


14.手机背景图铺满全屏




.background{


　　background-image: url(../images/bg.jpg);


　　background-repeat: no-repeat;


　　background-position: center;


　　background-size: cover;


　　height: 100vh;


　　margin: 0px;


　　padding: 0px


}


15.

复制代码


先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是
768、992、1200。当然了过去也有些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢，那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了
运用@media实现网页自适应中的几个关键分辨率
从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
经过了上面的入门学习，我们就可以灵活的来点高级的混合应用了
@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } 
 @media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }
 @media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px} }
 @media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none} } 
@media only screen and (max-width: 479px) { #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px} }
4
上面的代码中用到了 screen这里指定了显示器为显示设备，也可以是print打印机等其他设备，一般我们用screen。或者干脆省略。如果想看详细的关于media的说明可以百度一下关于media query的知识


复制代码




16.








?
1
2
3
4
5
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 @ 
 
炽橙子 
阅读(1957) 
评论(0) 
编辑 
收藏 
举报


	

	
	








    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
    

· go语言实现终端里的倒计时
    

· 如何编写易于单元测试的代码
    

· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
    

· .NET Core 中如何实现缓存的预热？
    



    

    阅读排行：
    

 ·          分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
        

 ·          25岁的心里话
        

 ·          基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
        

 ·          闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
        

 ·          ollama系列01：轻松3步本地部署deepseek，普通电脑可用
        



    

    







	

	


	
	

	

	

	





    

        
    


    
    








  

  
点击右上角即可分享

  微信分享提示