第十周第一天笔记

2018-09-27 本文已影响0人果木山

百度搜索框实例

思路：
- 给input添加鼠标聚焦事件和键盘抬起事件；目的：获取数据，绑定数据
  - 判断：判断文本框中是否存在内容，如果不存在，就不进行获取数据等操作，ul要隐藏，如果存在数据，ul要显示；
  - 通过jQuery中的ajax来获取数据,绑定数据
  - 前后台的数据交互，通过ajax怎样获取数据
    - 请求地址:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=周星驰&cb=xxx
      - 地址url:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su，是一个百度服务器上的一个地址，在这个地址上已经有强大的数据库被编写好，怎样去获取相对应的数据，通过wd=后面的赋值，来匹配已经编好的内容，wd=怎么设置，是通过ajax上的data属性设置
      - data:"wd="+val指的是将wd的值赋为文本框中的内容，通过改变文本框中的文字，来获取不同的数据
      - dataType:jsonp，指的是跨域获取，返回的数据格式为json格式；
      - json：参数用来设置cb，在默认情况下为callback，此时的值为随机数；
- 添加点击事件，事件委托给最高级body，通过判断事件源来进行相应的操作
  - 需求1：当鼠标点击列表的时候，对应的内容框变为我们点击的文字，同时开始搜索
    - 判断事件源为a元素，并且a元素的父级为li，这样就代表点击的是列表中的a元素；
    - 怎样跳转页面进行搜索
      - 代码：window.open("https://www.baidu.com/s?wd="+$(target).html(),"_blank");，其中https://www.baidu.com/s?wd=为百度搜索的东西，给wd赋值为什么内容，它就相应的跳转到对应的页面，所以只要给wd赋值为列表中内容就行，至于为什么，待以后解答；
  - 需求2：当鼠标点击百度一下按钮，开始搜索
    - 判断事件源为button元素，然后将文本框内容赋给wd即可；
  - 需求3：当点击除了按钮和列表以外的任何点击都让ul隐藏
    - 添加代码：$ul.hide()
    - 注意：如果此时点击文本框时，会通过冒泡事件，将body点击事件触发，然后执行ul隐藏的代码，会出错，所以必须在此之前，要判断事件源是否为input元素，如果为input则阻断程序执行；此时设置的代码return false，有三个功能；
- 添加键盘按下事件
  - 需求：当按上下键的时候，文本框的内容同步改变，按下enter键，开始搜索,并且让ul隐藏
  - 思路：
    - 如何判断按下的哪一个键：通过判断事件对象上的keyCode属性，其中：enter键: ,向下键：40，向上键：38；
    - 怎样获取列表中的内容，通过全局变量n，当触发一次事件就让n相应的加1或减1，通过给对应的li元素添加一个class名，来改变其背景色；
  - 注意点：
    - 当按下向下向上键的时候，必须解绑keyup事件，当重新输入内容的时候，也就是触发keydown的时候，除了三个键的情况，其他情况均重新绑定keyup事件；
    - 当按下enter键时，跳转新页面后，必须重新赋值n为原始值；
    - 重复绑定keyup事件后，要给n重新赋值为原始值；不然n会错乱；
    - 在向上向下键的按下过程中，当回到文本框的时候，必须给其赋值为最初输入在文本框内的内容；所以需要建立一个全局的变量，用于保存住最原始的文本框内容；通过if判断，只给其赋值一次，不能重复赋值；
知识点：
- jQuery中在函数中添加代码：return false的作用有三种：1）阻止程序执行；2）阻止默认事件；3）阻止冒泡；
问题：
- 按下enter键跳转页面后，无法隐藏ul;即使是解绑keyup，也无法隐藏ul；
- 当鼠标滑动到列表项时，对应的背景色会发生改变，但是按下向下上键时，背景色也会变化，二者会同时存在，而真正的百度上，是鼠标浮动事件和向上向下键是配合的；(这个问题可以给li添加mouseover和mouseout事件，而不是利用css中的hover伪元素设置)；

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>百度搜索框实例</title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         body,html{
             height: 100%;
         }
         .menu{
             width: 100%;
             height: 32px;
             background-color: lightslategray;
         }
         #wrap{
             width: 640px;
             margin: 10px auto 0;
         }
         #logo{
             height: 180px;
             padding-top: 35px;
         }
         #logo img{
             display: block;
             width: 270px;
             height: 129px;
             line-height: 129px;
             vertical-align: middle;
             margin: 0 auto;
         }
         #boxbanner{
             position: relative;
         }
         #boxbanner #txt{
             display: inline-block;
             width: 520px;
             height: 20px;
             font-size: 18px;
             padding: 9px 7px;
             border: 1px solid lightgray;
             outline: none;
             box-shadow: none;
             vertical-align: top;
         }
         #boxbanner button{
             width: 102px;
             height: 40px;
             line-height: 40px;
             font-size: 18px;
             text-align: center;
             background-color: #38f;
             color: white;
             box-shadow: none;
             font-weight: normal;
             border: 0;
             padding: 0;
             cursor: pointer;
         }
         #boxbanner ul{
             position: absolute;
             left: 0;
             top: 40px;
             width: 637px;
             display: none;
             border: 1px solid lightgray;
         }
         #boxbanner ul li{
             width: 100%;
             height: 30px;
         }
         #boxbanner ul li:hover{
             background-color: lavender;
         }
         #boxbanner ul li.active{
             background-color: lavender;
         }
         #boxbanner ul li a{
             display: block;
             color: black;
             font-size: 14px;
             line-height: 30px;
             text-decoration: none;
             padding-left: 7px;
         }
     </style>
 </head>
 <body>
 <div class="menu"></div>
 <div id="wrap">
     <div id="logo"><img src="img/logo.png" alt="loge"></div>
     <div id="boxbanner">
         <input type="text" id="txt"><button id="btn">百度一下</button>
         <ul id="ul">
             <!--<li><a href="javascript:;">百度一下</a></li>
             <li><a href="javascript:;">百度一下</a></li>
             <li><a href="javascript:;">百度一下</a></li>
             <li><a href="javascript:;">百度一下</a></li>
             <li><a href="javascript:;">百度一下</a></li>-->
         </ul>
     </div>
 </div>
 <script src="JS库/jquery.js"></script>
 <script>
     //请求地址:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=周星驰&cb=xxx
     //上面的地址是百度的数据库中添加的一个后台大数据；目的就是当你搜索的时候，能够匹配到相应的信息；
     /*UL显示的情况
     * 1）当聚焦的时候，如果文本框内有内容，ul显示，否则，隐藏
     * 2）在编辑内容的时候，如果有内容，ul显示，否则隐藏，同时，编辑内容的时候，列表跟着同步改变；
     * 3）当鼠标点击列表的时候，对应的内容框变为我们点击的文字，同时开始搜索
     * 4）点击百度一下按钮，开始搜索,并且让ul隐藏
     * 5）点击页面任何地方的时候，ul都隐藏
     * 6）当按上下键的时候，文本框的内容同步改变，按下enter键，开始搜索
     * */
     //获取元素
     var $txt=$("#txt");
     var $ul=$("#ul");
     var $aLi=null;
     var $n=-1;
     //oldval目的是保存最初的文本框内容
     var oldval=null;
     //1 添加聚焦事件，键盘抬起事件
     $txt.on("focus keyup",getData);
     function getData() {
         var val=$(this).val();
         console.log(2)
         if(val.length){
             //获取数据，绑定数据
             //请求地址:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=周星驰&cb=xxx
             //url为问号前面的地址，data来设置wd=xxx,dataType为跨域获取，jsonp用来修改cb，如果不修改，则默认为callback，值为随机数；
             $.ajax({
                 url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                 data:"wd="+val,
                 dataType:"jsonp",
                 jsonp:"cb",
                 success:function (data) {
                     //绑定数据
                     var str="";
                     for(var i=0; i<data.s.length; i++){
                         str+=`<li><a href="javascript:;">${data.s[i]}</a></li>`;
                     }
                     $ul.html(str);
                     //数据更新后要重新获取数据，因为jQuery中没有DOM映射；
                     $aLi=$ul.children("li");
                 }
             });
             $ul.show();
         }else{
             $ul.hide();
         }
     }
     //2 添加点击事件，事件委托给最高级元素body
     $("body").on("click",function (e) {
         var target=e.target;
         //2.1当鼠标点击列表的时候，对应的内容框变为我们点击的文字，同时开始搜索,并且让ul隐藏
         if(target.tagName.toLowerCase()==="a" && target.parentNode.tagName.toLowerCase()==="li"){
             $txt.val($(target).html());
             window.open("https://www.baidu.com/s?wd="+$(target).html(),"_blank");
         }
         //2.2点击百度一下按钮，开始搜索
         if(target.tagName.toLowerCase()==="button"){
             window.open("https://www.baidu.com/s?wd="+$txt.val(),"_blank");
         }
         //2.3点击页面任何地方的时候，ul都隐藏，排除txt,button，a
         if(target.tagName.toLowerCase()==="input"){
             //当聚焦input的时候，会默认发生点击事件，所以会发生冒泡，导致ul隐藏
             return false;//阻止冒泡
         }
         $ul.hide();
     });
     //3 当按上下键的时候，文本框的内容同步改变，按下enter键，开始搜索
     //注意：jQuery中没有DOM映射；
     $txt.on("keydown",function (e) {
         if(e.keyCode===40){
             if(!oldval){
                 oldval=$(this).val();
             }
             //当按下下键时，让对应的li背景色改变，通过n来控制
             $(this).off("keyup",getData);
             $n++;
             $n%=$aLi.length+1;
             if($n===$aLi.length){
                 $aLi.removeClass("active");
                 $(this).val(oldval);
                 return;
             }
             $aLi.eq($n).addClass("active").siblings("li").removeClass("active");
             $(this).val($aLi.eq($n).children("a").html());
         }else if(e.keyCode===38){
             if(!oldval){
                 oldval=$(this).val();
             }
             //当按下下键时，让对应的li背景色改变，通过n来控制
             $(this).off("keyup",getData);
             if($n===0){
                 $aLi.removeClass("active");
                 $(this).val(oldval);
                 $n=-1;
                 return;
             }
             if($n<0){
                 $n=$aLi.length;
             }
             $n--;
             if($n===$aLi.length){
                 $aLi.removeClass("active");
                 $(this).val(oldval);
                 return;
             }
             $aLi.eq($n).addClass("active").siblings("li").removeClass("active");
             $(this).val($aLi.eq($n).children("a").html());
         }else if(e.keyCode===13){
             window.open("https://www.baidu.com/s?wd="+$(this).val(),"_blank");
             $n=-1;//此时$n必须要重新赋值为原始值；
         }else{
             $(this).on("keyup",getData);
             $n=-1;//此时$n必须要重新赋值为原始值；
         }
     });
 </script>
 </body>
 </html>

百度搜索框复习版

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>百度搜索框实例复习</title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         body{
             font: 16px Arial;
             height: 1000px;
         }
         .nav{
             width: 100%;
             height: 32px;
             border-bottom: 1px solid #ccc;
         }
         .sou{
             width: 640px;
             height: 260px;
             margin: 0 auto;
         }
         .sou a{
             display: block;
             width: 270px;
             margin: 10px auto;
             height: 129px;
             text-decoration: none;
             background: url("img/bd1.png") no-repeat;
         }
         .sou p{
             width: 640px;
             height: 40px;
             margin: 0 auto;
         }
         .sou p input{
             width: 536px;
             height: 40px;
             padding: 9px 48px 9px 7px;
             border: 1px solid #b8b8b8;
             box-sizing: border-box;
             outline: none;
             box-shadow: none;
             font: 16px Arial;
         }
         .sou p input[type="text"]:focus{
             border-color: #38f;
         }
         .sou p i{
             display: inline-block;
             width: 18px;
             height: 16px;
             background: url("img/02.png") no-repeat;
             background-position: 0 0;
             position: absolute;
             margin-left: -30px;
             margin-top: 12px;
             cursor: pointer;
         }
         .sou p i:hover{
             background-position: 0 -20px;
         }
         .sou p span{
             display: inline-block;
             width: 104px;
             height: 40px;
             line-height: 40px;
             font-size: 16px;
             color: white;
             text-align: center;
             background-color: #398bfb;
             border: 1px solid #398bfb;
             box-sizing: border-box;
             vertical-align: top;
             cursor: pointer;
         }
         .sou p span:hover{
             background-color: #39f;
         }
         .sou ul{
             width: 640px;
             position: absolute;
             border: 1px solid lightgray;
             box-sizing: border-box;
             font-size: 14px;
             display: none;
         }
         .sou ul li{
             width: 100%;
             height: 30px;
             line-height: 30px;
             padding-left: 7px;
             box-sizing: border-box;
             cursor: pointer;
         }
         .sou ul li.active{
             background-color: lightsteelblue;
         }
     </style>
 </head>
 <body>
 <div class="nav"></div>
 <div class="sou">
     <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_Pclogo_6ysd4c7a&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pc" title="点击一下，了解更多" target="_blank"></a>
     <p><input type="text" name="search" id="ser"/><i></i><span id="btn">百度一下</span></p>
     <ul>
         <!--<li>天空</li>-->
     </ul>
 </div>
 <script src="../toolLibrary/jquery.js"></script>
 <script>
     //获取元素
     var $oInput=$("#ser");
     var $oUl=$(".sou ul");
     var $oinputVal=null;
     var $aLi=null;
     var data=null;
     var daLength=null;
     var n=-1;
     //1.获取数据
     function getData() {
         //每次事件触发后，重新获取内容；
         $oinputVal=$oInput.val();
         if($oinputVal.length>0){
             $.ajax({
                 url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                 type:"get",
                 data:{wd:$oinputVal},
                 dataType: "jsonp",
                 jsonp:"cb",
                 success:function (val) {
                     data=val.s;
                     daLength=data.length;
                     insertDom();
                 },
                 error:function (err) {
                     console.log(err);
                 }
             })
         }
     }
     //2.将数据插入页面
     function insertDom() {
         var str="";
         $.each(data,function (index,item) {
             str+=`<li>${item}</li>`;
         });
         $oUl.html(str);
         $aLi=$oUl.children("li");
         //li设置鼠标划上事件；
         $aLi.mouseover(function () {
             n=$(this).index();
             $(this).addClass("active").siblings("li").removeClass("active");
         }).mouseout(function () {
             n=-1;
             $(this).removeClass("active");
         });
     }
     //3.文本框添加事件
     keyEvent();
     function keyEvent() {
         //keyup事件，更新数据，绑定DOM0级事件，不会出现重复绑定的方法；
         $oInput[0].onkeyup=keyUp;
         function keyUp(){
             //让ul显示
             $oUl.show();
             //获取新的数据，插入页面中；
             getData();
         }
         //keydown事件
         $oInput.on("keydown",keyDown);
         function keyDown(e) {
             //向下为40，向上为38;
             if(e.keyCode===40 || e.keyCode===38){
                 $oInput[0].onkeyup=null;
                 if(e.keyCode===40){
                     console.log("todown");
                     if(n>=daLength-1){
                         $aLi.eq(n).removeClass("active");
                         n=-1;
                         $oInput.val($oinputVal);
                         return;
                     }
                     n++;
                 }
                 if(e.keyCode===38){
                     console.log("toup");
                     if(n<=0){
                         n=daLength;
                         if(n===0){
                             $aLi.eq(n).removeClass("active");
                             $oInput.val($oinputVal);
                             return;
                         }
                     }
                     n--;
                 }
                 $aLi.eq(n).addClass("active").siblings("li").removeClass("active");
                 $oInput.val($aLi.eq(n).html());
                 set_text_value_position(this, -1);  //让文本框内的光标位置在最后面；
             }else{
                 //回车键盘码为13；回车跳转页面
                 if(e.keyCode===13){
                     toBlank($oInput.val());
                 }
                 $oInput[0].onkeyup=keyUp;
             }
         }
         //点击事件，事件委托在外围容器上
         $("body").click(function (e) {
             if(e.target.id==="btn"){
                 toBlank($oInput.val());
             }
             if(e.target.id==="ser"){
                 getData();
                 $oUl.slideDown(500);
             }else{
                 $oUl.slideUp(300);
                 n=-1;
             }
             if(e.target.nodeName==="LI"){
                 $oInput.val(e.target.innerHTML);
                 toBlank(e.target.innerHTML);
             }
         });
     }
     //4.跳转页面
     function toBlank(arg) {
         var t=/^\s+$/.test(arg);//筛选空格，如果为多个空格，页面也不跳转；
         if(!arg || t) return;
         window.open("https://www.baidu.com/s?wd="+arg);
     }
     //让文本框内的光标位置在最后面；
     function set_text_value_position(tobj, spos){
         if(spos<0)
             spos = tobj.value.length;
         if(tobj.setSelectionRange){ //兼容火狐,谷歌
             setTimeout(function(){
                     tobj.setSelectionRange(spos, spos);
                     tobj.focus();}
                 ,0);
         }else if(tobj.createTextRange){ //兼容IE
             var rng = tobj.createTextRange();
             rng.move('character', spos);
             rng.select();
         }
     }
 
 
 </script>
 </body>
 </html>

第十周第一天笔记

百度搜索框实例

百度搜索框复习版

猜你喜欢

热点阅读