美文网首页初学前端
模拟百度搜索框的dome历史查询

模拟百度搜索框的dome历史查询

作者: 简约酒馆 | 来源:发表于2019-11-24 18:59 被阅读0次

     typeof是原生JavaScript提供检测数据类型的操作符   

    在JS中当我们对某项数据的类型不是很明朗的时候 ,我们可以使用typeof 将其类型检测

    // =======检测null的布尔类型值 以及三元运算符的运算null结果

        var  a=null;

    var b=a?'css':'js' ;// 三木运算符?  语法:条件?条件真输入的内容:条件为假的时候输出的内容

        alert(b);//  输出的是'js'

        //使用if语句检测null是true或者是false

      if(null){

    alert("true")

    }else {

    alert("false")// 输入的是 false  就能说明为什么上面会输出的js

      }

    // ==========获取通过typeof操作符运算的结果

        var c=null;

    console.log(typeof c);// 输出的是: object

        var d=typeof c;

    console.log(typeof d);//检测typeof输出的内容是什么类型的string

        var f=typeof d;

    console.log(typeof f==='string')//true  这里说明了操作符检测返回的值是 字符串类型的  (===恒等:值相等类型相等)

    通过上述的代码测试我们得到的是条件变量a在boolean类型中值为false;初始值为null数据类型为object;typeof检测返回的字符串类型的值

    需求简述: 在开发过程中模仿百度的文本框的历史搜索在加载的时候不显示样式和搜索文本框的文字为空,***主要需求:在鼠标移入或者键盘事件控制上下才会有样式文本框的内容同步

    思路:

    1.获取本地的:localStorage存储的数据  将数据遍历到ul历史列表栏

    2. 声明一个var全局变量data修改保存每次移入或者是上下键盘事件所在位置的索引值,if判断当前的位置索引等于数组中的索引时改变索引对应元素的背景和文本框的内容

    3.设置data的变量值为null;注意data的变量不能直接设置为 0索引;主要需求中描述了在没有进行事件操作之前是没有样式 如果为零那就违背初衷了 界面加载后就有样式和文本框的文字了

    4.这时候三元运素符就派上用场了 判断当data的变量值null,在boolean中null是false的值 这时候不添加样式和文本框历史栏的对应内容

    5.鼠标移入或者键盘事件触发方法将索引重新赋值  这时将data的变量的值null:数据类型是object赋值成了位置索引number的类型了

    6.经过5重新赋值后历史列表栏对应事件索引内容就有样式了和文本框显示当前项的内容

    难点:

     2设置变量data保存的索引值为null当页面加载后显示文本框内容为空,历史列表栏每一项没有样式  触发事件后才同步显示

    ***解决了加载时历史搜索栏的样式问题

      1.判断data变量的值null不等于索引的时候不添加样式 如果data变量保存的索引等于元素的索引为ture添加样式

      原理: 0==null或1==null  得到的返回值都是false当移入或键盘事件触发之后改变了全局变量data的值不为null那后面就是true就可以添加样式了

    ***解决文本框显示问题加载时为空 事件触发后改变全局变量的索引值

        1.  使用typeof操作符检测数据的类型 全局变量的值typeofnull  获取到的值为字符串类型的object

    2.使用三元运算符?判断数据typeofdata==='number'?arr[i].title:''//等于true时输出数组的内容  等于false时输入的空字符串

    相关文章

      网友评论

        本文标题:模拟百度搜索框的dome历史查询

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