Ajax jQuery 安装 &天气预报关键字查询自动填充等功能

最新推荐文章于 2024-05-24 10:49:57 发布

BADReamer

最新推荐文章于 2024-05-24 10:49:57 发布

阅读量378

点赞数

分类专栏： JAVA WEB

本文链接：https://blog.csdn.net/BADReamer/article/details/109879242

版权

JAVA WEB 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

下载与安装

例：
引用百度CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
      <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>

模拟百度关键字搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
      <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" id="keyword" placeholder="请输入关键字"/>
<input type="button" id="btn" value="百度关键字"/>
<div class="box"></div>


<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            var keyWord = $("#keyword").val();
            var obj={
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                data:{wd:keyWord},
                dataType: "jsonp",
                jsonp:"cb",
                success:function(data){
                    var list = "<ul>";
                    for(var i=0; i<data.s.length; i++){
                        var temp = data.s[i];
                        list += "<li>"+temp+"</li>";
                    }
                    list += "</ul>";
                    $(".box").html(list);
                }
            };
            $.ajax(obj);
        });
    });
</script>
</body>
</html>

在这里插入图片描述

自动填充

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

  
  <script>
  $(function() {
    var names = [ "桂林理工大学", "桂林电子科技大学", "桂林航天工业学院" ];
 
    var accentMap = {
      "桂": "g",
 
    };
    var normalize = function( term ) {
      var ret = "";
      for ( var i = 0; i < term.length; i++ ) {
        ret += accentMap[ term.charAt(i) ] || term.charAt(i);
      }
      return ret;
    };
 
    $( "#developer" ).autocomplete({
      source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( names, function( value ) {
          value = value.label || value.value || value;
          return matcher.test( value ) || matcher.test( normalize( value ) );
        }) );
      }
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <form>
  <label for="developer">学校：</label>
  <input id="developer">
  </form>
</div>
 
 
</body>
</html>

在这里插入图片描述
两功能结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
      <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
      <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  
  

</head>
<body>

<input id="developer" type="text"  placeholder="请输入关键字"/>
<input type="button" id="btn" value="百度关键字"/>
<div class="box"></div>


<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            var keyWord = $("#developer").val();
            var obj={
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                data:{wd:keyWord},
                dataType: "jsonp",
                jsonp:"cb",
                success:function(data){
                    var list = "<ul>";
                    for(var i=0; i<data.s.length; i++){
                        var temp = data.s[i];
                        list += "<li>"+temp+"</li>";
                    }
                    list += "</ul>";
                    $(".box").html(list);
                }
            };
            $.ajax(obj);
        });
    });
</script>
  
    <script>
  $(function() {
    var names = [ "桂林理工大学", "桂林电子科技大学", "桂林航天工业学院" ];
 
    var accentMap = {
      "桂": "g",
 
    };
    var normalize = function( term ) {
      var ret = "";
      for ( var i = 0; i < term.length; i++ ) {
        ret += accentMap[ term.charAt(i) ] || term.charAt(i);
      }
      return ret;
    };
 
    $( "#developer" ).autocomplete({
      source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( names, function( value ) {
          value = value.label || value.value || value;
          return matcher.test( value ) || matcher.test( normalize( value ) );
        }) );
      }
    });
  });
  </script>
</body>
</html>

天气预报

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>

</head>
<body>


    <input    type="text"  id="tel"/>

    <button id="ajax">天气预报</button>

    <p><span id="reslut"></span></p>


<script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#ajax').on('click',function(){
            var $telValue=$('#tel').val();
            if($telValue=="") {
                alert('不能为空！');
                return;
            }
            $.ajax({
                type: 'GET',
                dataType:'jsonp',
                jsonp:'callback',                          
                  jsonpCallback:'getName',
                url: 'http://api.asilu.com/weather/',
                data:{
                    "city":$telValue        
                },
                success: function(data){
                    var reslutData=data;
                    console.log(reslutData);    
                    $('#reslut').text(reslutData.city+"明天的天气:"+reslutData.weather[0].weather);
                } ,
               

            })
        })
        
    })
    </script>
</body>
</html>

在这里插入图片描述

点击空白处冒字例

 <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
    //定义获取词语下标
var a_idx = 0;
jQuery(document).ready(function($) {
        //点击body时触发事件
    $("body").click(function(e) {
    //需要显示的词语
    var a = new Array("桂林","山水", "甲天下", "天下","山水", "在桂林(不是)");
    //设置词语给span标签
    var $i = $("<span/>").text(a[a_idx]);
    //下标等于原来下标+1  余 词语总数
    a_idx = (a_idx + 1)% a.length;
    //获取鼠标指针的位置，分别相对于文档的左和右边缘。
    //获取x和y的指针坐标
    var x = e.pageX, y = e.pageY;
    //在鼠标的指针的位置给$i定义的span标签添加css样式
    $i.css({"z-index" : 999999,
        "top" : y - 20,
        "left" : x,
        "position" : "absolute",
        "font-weight" : "bold",
        "color" : "#DEB887"
        });
    //在body添加这个标签
    $("body").append($i);
        //animate() 方法执行 CSS 属性集的自定义动画。
        //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
        //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
        $i.animate({
        //将原来的位置向上移动180
            "top" : y - 180,
                "opacity" : 0
         //1500动画的速度
        }, 1500, function() {
        //时间到了自动删除
            $i.remove();
        });
    });
});
 
</script>

BADReamer

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Ajax jQuery 安装 &天气预报关键字查询自动填充等功能

下载与安装例：引用百度CDN<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script> <script src="//apps.
复制链接

扫一扫