网站搜索框制作

Published on

form   基本构成

<form action=”http://www.baidu.com” target=”_blank” method=”get”>

<input type =”text” name=”wd” class=”search_key” placeholder=”搜索内容”>

<input type=”submit”  value=”搜索” class=”search_btn  search_btn_reset”>

</form>

 

action 属性的作用是决定了表单会被提交到服务器的哪一个端口。简单的说是我们输入搜索的内容会被提交到服务器的指定的端口中去。

target=”_blank”指的是搜索的结果，会在浏览器中以新的标签页呈现给大家。

method=”get”   method   默认get属性

注意：

1.当<input/>标签的type=”submit”时，可以直接提交表单内容到服务器。而不借助任何JS代码、当type=”button”时。没有这种效果（效果不会实现）。

2.此时type=”submit”按钮必须放置在要提交的表单元素内。也就是<form>

标签内     submit默认提交文字。将其value =””；即可将submit内容为空

 

搜索动态效果：

1.搜索框智能提示：

技术要点：(jQ和js事件  、DOM操作、ajax通信)

1.借助JQuery 和JS脚本完成动态效果。

2.事件绑定和事件代理

3.AJAX（用于和服务器之间的信息交换）

 

DOM操作智能提示框的内容，比如输入框下拉选项。智能提示框有很多相关的数据，这些数据来源于服务器。获取数据用Ajax技术。

JQ控制事件绑定，和DOM操作。（$(“#id”)）      这时输入框用到的是键盘的key  down 事件

jQuery实现事件绑定、DOM操作-慕课网

  • $('#id').offset()直接获取元素位置，$('#id').height()获取元素高度

 jQuery实现事件绑定、DOM操作-慕课网 bing 在JQ3.0版本之后实现不了
    1.$(window).on(‘load’,function(){
    $(‘#search-input’).on(‘keyup’,function(){
    }
    })

    2.jQuery实现事件绑定、DOM操作-慕课网

    • bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

      自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。

     3.jQuery实现事件绑定、DOM操作-慕课网

    • 查找jQuery API发现如下：在jQuery 3.0中，.bind()已被标记为弃用。从jQuery 1.7开始，.on() 方法是将事件处理程序绑定到文档（document）的首选方法。所以我们不建议使用该方法。对于早期版本，.bind()方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象中当前选中的元素，所以，在.bind()绑定事件的时候，这些元素必须已经存在。对于更为灵活的事件绑定，可以查看.on() 中事件委派的描述。

    4.jQuery实现事件绑定、DOM操作-慕课网    代码1：

    • $(document).ready(function(){
      $(“#search_input”).bind(‘keyup’,function(){
      if($(this).val()!=””){
      $(‘#search-suggest’).css({
      top:$(‘#search-form’).offset().top+40,
      left:$(‘#search-form’).offset().left,
      position:’absolute’
      }).show(300)}else{$(‘#search-suggest’).hide(100)}
      })});

5.jQuery实现事件绑定、DOM操作-慕课网    代码2：

  • $(‘#input’).keyup(function(){
    $(‘#suggest’).show().css({
    top:$(‘#form’).offset().top+$(‘#form’).height()+10,
    left:$(‘#form’).offset().left-1,
    position:’absolute’
    });
    });

AJAX原理：和服务器做交换。例如：发送一段文本告诉服务器我们需要什么数据，服务器把数据返回给浏览器。

用户不会感知到服务器的操作，这个过程叫做ajax异步化。

ajax   也有浏览器的兼容性：所以一般使用JQ。其格式是：

$.get(url,callback,’json’)：

url  为请求的服务器的端口和服务器的接口的地址。 端口和接口的地址是事先由服务器和前端约定好的。

callback  为回调。由于发送请求的过程是义务的。首先先要建立一个和服务器的链接，然后服务器会返回一个数据。过程中会消耗一定的时间，100ms或200ms.当返回数据这个过程完成之后，会进入到第二个参数，就是回调。

回调就是把从服务器返回的数据用一定的方式展示给用户。

第三个参数‘json’为返回数据的类型。现在一般前端和服务器都是用Json的数据格式来交换数据。好处是不需要对数据做额外的编码。就可以被前端的JS代码识别。

 

Ajax原理及jQuery实现-慕课网

  • $.ajax({
    type : “get”,
    async:true,
    url : “http://api.bing.com/qsonhs.aspx?type=cb&q=”+searchText,
    dataType : “jsonp”,
    jsonp: “cb”,
    jsonpCallback:”callback”,
    success :
    error:

点击搜索框中的智能提示，跳到一个新的页面。这个事件叫做事件代理。作用是，多个元素绑定事件，且是由多个元素由JS代码动态添加到页面中的。就要用到事件代理、结构是动态结构。HTML结构由JS动态添加而成的

 

tab框tab键切换：

切换菜单（动态效果）制作-慕课网

  • $(“#search-tab”).on(“mouseover”,”li”,function(){
    $(this).addClass(“selected”);
    $(this).siblings().removeClass(“selected”);
    });

No Comments

Post a Comment