模拟菜单选中效果

当被最接近的李彪元素或其子后代元素被点击时,会切换背景颜色,之前写这种效果用的removeClaa和addClass,今天发现了一个更简洁的方法。直接上代码吧!

<style>
    .pink{background-color: pink;}
    li{margin-top:10px;}
</style>
<body>
    <ul id="box">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ul>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        //菜单点击标识 clisest从当前元素开始向上遍历
        $(document).bind("click",function(e){
            $(e.target).closest("li").toggleClass("pink");
        })
    </script>
</body>

more >>

json.parse()和json.stringify()

parse()

字符串解析为json对象单引号写在{}外,每个属性名都必须用双引号

var str = '{"name":"jone","age":"18"}'
JSON.parse(str);
//结果
name:"jone",
age:"18"

stringify()

对象解析成字符串

var a = {name:"jone",age:"18"}
JSON.stringify(a)
//结果
'{name:"jone",age:"18"}'

localStorage和sessionStorage的用法

  • localStorage:没有时间限制
  • sessionStorage:针对一个session的数据存储,关闭浏览器即被清除。

localStorage属性

不涉及到登录业务时采用此存储方式,有存储定有值。

localStorage.setItem('openid','aaa');
localStorage.getItem('openid');//aaa

API

localStorage.getItem(‘key’,’val’) - 取得 
localStorage.setItem(‘key’) - 设置 
localStorage.removeItem(‘key’) - 移除 
localStorage.key(0) - 取key值 
localStorage.clear() - 清空

sessionStorage属性

后台登录管理系统,必须从登录页面跳转实现,登录页面存储,后面页面取值。即实现登录功能。有存储重新打开无值。

单个储存
sessionStorage.setItem('openid','aaa');
sessionStorage.getItem('openid');//aaa
多个变量对象储存

ps: 对象储存需要用JSON.stringify()方法转为json字符串,取出的时候需要用JSON.parse()
转为json对象(sessionStorage,localStorage)

 var data = {
   "url":"1233",
   "age":2,
   "sex":"女"
 }
 sessionStorage.setItem("mydata",JSON.stringify(data)); //json对象转为字符串对象
var mydata =  sessionStorage.getItem("mydata");
 var result = JSON.parse(mydata)
 console.log(result);

cookie和localstorage有什么区别

  • cookie数据大小不能超过4k
  • cookie在服务端和客户端之间来回传递
  • cookie可以设置很多属性,max-age,path,expires等
  • localStorage存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
  • localStorage存储的数据容量更大

select下拉值的选取

select的下拉框的值一般通过value直接获取就可以,但在项目中遇到了需要设置特定选项的选取,这时可以采用 selectedIndex 属性。

直接获取

js方法

var obj = document.getElementsByTagName('select')[0]; //select
obj.value();

jquery方法

var obj = $('select');
obj.val();
//或者将fn()绑定select节点的onchange事件
function fn(){
    var obj = $('select');
    var text = obj.find('option:selected').text();
    var value = obj.find('option:selected').val();
}

more >>

margin,padding百分比

对于前端的html,css自我感觉基础知识掌握的还可以,最近在牛客网网做题,深受打击,html可不能小瞧它呀!这不,稍不注意就踩着坑了。

回归正题:当margin,padding的值是百分比时,值得依据都是相对最近的父级块级元素的宽度

注意:是宽度 宽度 宽度!!! 重要的事说3遍。

more >>

小彭子 <br> 记性不太好的<br>前端开发妹子一枚 <br> 博客记录前端知识学习<br>笔记和平时生活七七八八