zoukankan html css js c++ java

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;

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

16.

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="">

查看全文

相关阅读:
Spring+Mybatis+Maven+MySql搭建实例
 Spring+Mybatis+SpringMVC+Maven+MySql搭建实例
 SQL GROUP BY 语句
 SQL SUM() 函数
 SQL MIN() 函数
 SQL MAX() 函数
 SQL LAST() 函数
 SQL FIRST() 函数
 SQL COUNT() 函数
 SQL AVG() 函数

原文地址：https://www.cnblogs.com/ygyy/p/9993795.html