美文网首页
前端开发的一些小记录点

前端开发的一些小记录点

作者: asimpleday | 来源:发表于2018-11-28 10:44 被阅读0次
    修改了css、js文件，可以加一个时间戳作为版本号，以防止缓存。
    <link rel="stylesheet" type="text/css" href='css/style.css?version=20181128' />
    如果是动态设置样式，最好给盒子加高度，不要等图片加载出来之后，获取对应图片的高度再计算,因为可能图片加载很慢，此时，外层盒子高度为0，没法正确的计算。
    .pic-container{ 
  height: 100px;
}
    把 title 标签放到定义字符集的 meta 标签下面
    <meta charset="UTF-8">
<title>learn js</title>
    什么是事件冒泡

    气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。

    如何阻止事件冒泡
    // 1、不兼容 ie
event.stopPropagation();

// 2、兼容 ie
if(event.stopPropagation){
      event.stopPropagation();
}else{
      event.cancelBubble = true;
}
    如何取消默认行为
    // 不兼容 ie
event.preventDefault(); 

// 兼容 ie
if(event.preventDefault){
      event.preventDefault();  
}else{
      event.returnValue=false;
}
    页面之间实现跳转的几种方式
    // 1、a 链接跳转
 <a href="b.html">b</a>

// 2、
window.location.href  = "b.html";

// 3、
self.location = "b.html";

// 4、
top.location = "b.html";

// 5、返回上一页
window.history.back(-1);
    页面之间传值的几种方式

    (1)、url 传值

    window.location.href = "https://www.google.com/search?q=hello&oq=hello"

// 如何把后面的值转化为 JSON
function parseURL(url){
    var url = url.split("?")[1];
    var para = url.split("&");
    var len = para.length;
    var res = {};
    var arr = [];
    for(var i=0;i<len;i++){
        arr = para[i].split("=");
        res[arr[0]] = arr[1];
    }
    return res;
}

    (2)、cookie 传参

    function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(";");
    for(var i=0;i<ca.length;i++){
        var c = ca[i];
        while(c.charAt(0)==' '){
            c = c.substring(1); 
        }
        if(c.indexof(cname) == 0){
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

    (3)、H5中Web Storage中的localStorage对象

    localStorage.setItem("age","24");

localStorage.getItem("age");
    图片标签尽量加 alt 属性
    <img src="https://www.baidu.com" alt="到百度首页" title="到百度首页">
    <br> 标签最好用在 p 段落内部的文字换行，其他地方不要用
    <p>
  我是一个段落，<br>
  我是一个段落。
</p>
    几种常见的灰色
    媒体查询
    // 在最大宽度为1366像素的屏幕上应用的样式
@media screen and (max-width: 1366px) {
    .top{
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}

// 在最小宽度为1366像素，最大为1600像素的屏幕上应用的样式
@media screen and (min-width: 1366px)  and （max-width: 1600px）{
    .top{
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}
    jquery 各版本 CDN
    // jquery-2.1.1

 

注:jquery-2.0以上版本不再支持IE 6/7/8)百度引用地址 (推荐目前最稳定的，不会出现延时打不开情况)


百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>


// jquery-2.0.0


百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

 

// jquery-1.11.1

 

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

 

// jquery-1.10.2

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>


// jquery-1.9.1

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


// jquery-1.8.3


百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

 

// jquery-1.7.2

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 


// jquery-1.6.4

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    $.inArray

    返回数组中指定元素的索引值，没有找到返回 -1

    var arr = [1, 2, 3, 8 , 9, 10];

var index1 = $.inArray(8, arr);
console.log(index1);   // 3

var index2 = $.inArray('8', arr);
console.log(index2);   // -1
    delete 操作符

    用于删除对象的某个属性

    var obj = {
    username: 'tom',
    age: 24,
    likes: 'sing'
}
delete obj.age;
console.log(obj);

// {
//     username: 'tom',
//     likes: 'sing'
// }
    使用 debugger 调试 js 
    setTimeout(function(){
    console.log('hello');
},0)
var num = 0;
for (var i = 0; i < 5; i++) {
    debugger;
    num += i;
}
console.log(i);
    清除浏览器一系列记录及缓存

    ctrl + shift + delete

    监听 input 内容改变事件

    1、onchange
    在内容发生改变，并且失去焦点时触发

    $("#username").on("change", function () {
    console.log($(this).val());
})

    ie9 以下不支持。
    2、oninput
    内容发生改变时触发，不需要失去焦点。js 动态改变 value 值不会触发该事件。

    $("#username").on("input", function () {
    console.log($(this).val());
})

    ie9 以下不支持。

    $(选择器).click(function(){}) 和 $(document).on('click', 选择器, function () {})的区别

    主要区别：
    $(选择器).click(function(){}) 只针对页面已经存在的元素。
    举个例子：

    // 这种情况下，最后一个创建的 li 元素是无法绑定点击事件的。
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    $("ul li").click(function () {
        console.log($(this).text());
    })
    $("ul").append("<li>4</li>");
</script>

// 这种情况下，最后一个创建的 li 元素也拥有点击事件。
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    $("body").on("click", "ul > li", function () {
        console.log($(this).text());
    })
    $("ul").append("<li>4</li>");
</script>

    window.location.pathname 和 window.location.search

    访问 http://127.0.0.1:8095/abc/b.html?user=tom&age=23 这个地址的话

    console.log(window.location.pathname);   // /abc/b.html
console.log(window.location.search);   // ?user=tom&age=23
console.log(window.location.href);   // http://127.0.0.1:8095/abc/b.html?user=tom&age=23

    jq 获取父页面

    如果用 iframe 引入了一个子页面，想在子页面中操作父页面的话，可以使用 parent.document

    $(parent.document).find('h2').css('background-color', 'yellowgreen');
$(window.parent.document).find('h2').css('background-color', 'yellowgreen');
$('h2', parent.document).css('background-color', 'yellowgreen');

    $.ajax 的回调函数执行顺序

    $.ajax({
    url: "./data.php",
    success: function () {
        console.log("success");
    },
    beforeSend: function () {
        console.log("beforeSend");
    },
    complete: function () {
        console.log("complete");
    },
    error: function () {
        console.log("error");
    }
})
// beforeSend
// success
// complete

    js 删除数组中某个元素

    splice

    var arr = [0, 1, 2, 3, 4];
arr.splice(2, 1);
for (var i = 0; i < arr.length; i ++) {
    console.log(i + ' ---- ' + arr[i]);
}
// 0 ---- 0
// 1 ---- 1
// 2 ---- 3
// 3 ---- 4

    delete

    var arr = [0, 1, 2, 3, 4];
delete arr[2]
for (var i = 0; i < arr.length; i ++) {
    console.log(i + ' ---- ' + arr[i]);
}
// 0 ---- 0
// 1 ---- 1
// 2 ---- undefined
// 3 ---- 3
// 4 ---- 4

    top parent self

    1. parent常用在iframe和frame中的子页面访问父页面中的对象

    2. top ：一个页面可能会有很多层，top是指最顶层的框架

    3. self ：是指当前窗口

    相关文章

      网友评论

          本文标题：前端开发的一些小记录点

          本文链接：https://www.haomeiwen.com/subject/jfhaqqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|前端开发的一些小记录点|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！