1、首先引入百度CSD
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script src="///libs/jquery/2.1.2/jquery.min.js"></script><script src="///libs/jqueryui/1.10.4/jquery-ui.min.js"></script></head>
2、模拟百度关键字搜索
效果图：
具体实现如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script src="///libs/jquery/2.1.2/jquery.min.js"></script><script src="///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:"/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>
3、自动填充
效果图：
<!doctype html><html lang="en"><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="///libs/jqueryui/1.10.4/css/jquery-ui.min.css"><script src="///libs/jquery/2.1.2/jquery.min.js"></script><script src="///libs/jqueryui/1.10.4/jquery-ui.min.js"></script><script>$(function() {var names = [ "北京大学", "清华大学", "北京体育大学","北京理工大学" ];var accentMap = {"北": "b",};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>
4、文上 2+ 3功能结合 源码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="///libs/jqueryui/1.10.4/css/jquery-ui.min.css"><script src="///libs/jquery/2.1.2/jquery.min.js"></script><script src="///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:"/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 = {"北": "b",};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>
5、实现天气预报查询
效果图：
实现源码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax</title></head><body><input type="text" id="tel"/><button id="ajax">天气预报</button><p><span id="reslut"></span></p><script src="///libs/jquery/2.1.2/jquery.min.js"></script><script src="///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: '/weather/',data: {"city": $telValue},success: function (data) {var reslutData = data;console.log(reslutData);$('#reslut').text(reslutData.city + "明天的天气:" + reslutData.weather[0].weather);},})})})</script></body></html>
5、点击空白处冒字特效
<script src="///libs/jquery/2.1.2/jquery.min.js"></script><script src="///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属性值是逐渐改变的，这样就可以创建动画效果。//详情请看/jquery/effect_animate.asp$i.animate({//将原来的位置向上移动180"top" : y - 180,"opacity" : 0//1500动画的速度}, 1500, function() {//时间到了自动删除$i.remove();});});});</script>
