jquery 自动补全 google 百度 提示效果
jquery fullscreen 用法
一、概述随着互联网的发展，网页设计和开发变得越来越重要。
其中，jQuery 作为一种流行的JavaScript库，为开发者提供了丰富的功能和工具。
其中，全屏模式是网页设计中常见的功能之一，它能够让用户全屏浏览网页内容，提升用户体验。
本文将介绍jQuery fullscreen的用法，帮助开发者更好地实现全屏功能。
二、使用方法1. 引入jQuery库需要在网页中引入jQuery库。
可以通过CDN方式引入，也可以下载jQuery库文件后引入到网页中。
确保在引入jQuery fullscreen插件前已经引入了jQuery库。
2. 引入jQuery fullscreen插件在引入了jQuery库之后，需要引入jQuery fullscreen插件。
可以通过CDN方式引入，也可以下载插件文件后引入到网页中。
确保在使用该插件之前已经引入了jQuery库和该插件。
3. 初始化全屏功能在引入了jQuery库和jQuery fullscreen插件后，需要初始化全屏功能。
可以通过下面的代码实现：```javascript$(document).ready(function(){$('#element').fullscreen();});```其中，`#element`是需要实现全屏的元素，可以是一个div、图片或是整个页面的body。
4. 自定义全屏按钮如果需要自定义全屏按钮，可以通过下面的代码实现：```javascript$('#fullscreen_btn').click(function(){$('#element').fullscreen(true);});```其中，`#fullscreen_btn`是自定义的全屏按钮元素，`#element`是需要实现全屏的元素。
5. 退出全屏用户在全屏模式下，可能会需要退出全屏。
可以通过下面的代码实现：```javascript$(document).on('fullscreenchange', function(){ if(!document.fullscreenElement){// 退出全屏后的操作}});```6. 监听全屏变化可以通过下面的代码监听全屏变化：```javascript$(document).on('fullscreenchange', function(){ if(document.fullscreenElement){// 进入全屏后的操作} else {// 退出全屏后的操作}});```三、使用注意事项1. 兼容性jQuery fullscreen插件的兼容性较好，能够支持大部分主流浏览器。
jquery中alert用法
jquery中alert用法在前端开发中，经常会用到jquery来进行DOM操作和事件处理。
其中，alert是一个常用的方法，用来弹出提示框来告知用户一些信息。
今天，我将来探讨一下jquery中alert的用法。
1. 简介在jquery中，alert是一个简单的方法，用来在页面上弹出一个提示框，显示一段文本信息。
它的用法非常简单，可以通过一行代码来实现。
2. 基本用法在jquery中，使用alert方法非常简单，只需要以下几行代码即可：```javascript$(document).ready(function(){alert("这是一个提示信息");});```以上代码中，$(document).ready()是jquery中用来在DOM加载完成后执行的方法，它确保了alert方法会在页面完全加载后执行。
而alert("这是一个提示信息")则是弹出一个提示框，显示文本"这是一个提示信息"。
3. 自定义样式除了基本的用法外，我们还可以通过一些技巧来自定义alert提示框的样式，使其更符合我们的页面风格。
可以通过CSS和一些jquery插件来实现。
4. 插件丰富性在jquery中，有很多第三方插件可以用来替代默认的alert提示框，这些插件通常具有更丰富的功能和更灵活的样式定制。
可以使用SweetAlert插件来实现更漂亮的提示框，或者使用Bootstrap框架的Modal组件来实现类似的效果。
5. 个人观点jquery中的alert方法是一个简单而实用的工具，可以帮助我们在页面上显示提示信息，提示用户一些重要的内容。
虽然它的默认样式比较简单，但通过一些技巧和插件，我们可以实现更丰富的效果，提升用户体验。
在本篇文章中，我简要介绍了jquery中alert的基本用法以及一些扩展技巧，希望能帮助大家更好地使用这个方法来提升页面功能和用户体验。
jquery教程
JQUERY教程JQUERY简介jquery库的新特性：jquery是一个javascript的函数库，它包含以下特性：html元素选取、html元素操作、css操作、html事件函数、javascript特效和动画、html dom遍历和修改、ajax、utilites 向页面中添加jquery库。
Jquery库位于一个javascript文件中，其中包含了所有的jquery 函数，可以通过以下标记把jquery添加到页面中：注意：<script>标签应该位于页面的<head>部分Jquery的实例：hide()函数，隐藏了html中所有的<p>标签效果：页面会出现三段字和一个按钮，当点击按钮时，<p>标签里边的字将自动隐藏库的代替：Google和Microsoft对jquery的支持都很好。
如果不从自己的计算机上加载jquery库，可以从Google和Microsoft加载CDNjquery的核心文件使用Google的CDN：使用Microsoft的CDN：Jquery语法通过jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。
Jquery语法实例$(this).hide(); 演示jquery hide（）函数，隐藏当前的html元素$(“#this”).hide(); 演示jquery hide（）函数，隐藏id为test的元素$(“p”).hide(); 演示jquery hide（）函数，隐藏所有p标签元素$(“.this”).hide(); 演示jquery hide（）函数，隐藏class为test的元素Jquery语法基础语法是$(selector).action();美元符号定义jquery，选择符（selector）查询和查找html元素，jquery的action（）执行对元素的操作例如：$(“p”),hide(); 隐藏所有段落$(“p.test”).hide(); 隐藏所有class为test的段落等提示：jQuery使用的语法是XPath与CSS 选择器语法的组合。
jQueryUI常用功能实战
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能.二.前言经过公司内部收集, 整理了一些经常使用javascript实现的功能. 实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQuery UI.如果你还在为了一个小小的特效而去下载并安装插件, 发现Bug还没有人替你解决. 记住插件是我们没有办法的最后选择.使用插件有太多的坏处:1.不利于维护2.增加页面大小3.不利于成员间交流共享,具有学习成本.4.不够健壮, 不能保证插件版本一直更新并修复所有问题.下面就引入今天的主角:jQuery UI三.jQuery UIjQuery UI 是jQuery 的一部分, 是在jQuery之上的一套专门用于UI交互的类库. 使用jQuery UI 可以实现底层交互, 各种高级特效, 动画, 并且可定制主题.我们可以用它轻松的构建高度交互的Web应用程序.官方首页:/下载:/download示例和文档:/demos/皮肤:/themeroller/jQuery UI 的在线网站十分强大. 首先就是在下载时可以组装自己想要的功能定制下载:并且针对各种控件不仅提供了详细的参数说明和实例, 还可以随时更换实例的皮肤:本文主要讲解实例, 大家可以通过实例代码快速上手jQuery UI. 使用jQuery UI我们可以再不借助其他插件的情况下完成大部分页面应用, 说其是一个官方的超级UI插件也不为过. 包含所有功能的jQuery UI类库文件为188K, 启用Gzip压缩后是45K. 虽然较大但是一次加载全网站获益.而且45K大小在当今的互谅网时代还算可以接受.()目前还没有jQuery UI的中文教程. 因为本文是实战篇, 所以不会仔细讲解基础内容. 在后面的章节中我会加入jQuery UI的基础教程.争取成为中文jQuery UI第一教程.四. 准备工作我将所有相关的文件, 包括各种类库文件, Theme模板放置在如下路径:/JSLib/此路径开通了目录浏览, 可以直接查找需要的文件. 目录组织结构按照本系列: (八) 插播:jQuery实施方案中介绍的方案组织.另外也可以从Google上引用文件, Google的CDN速度更快也更有保证, 参见: Google's CDN 本文的实例的所有引用都使用WebConfig.ResourceServer 这个属性:public class WebConfig{public static string ResourceServer = @"http://www.dotn /";}五.弹出层对话框弹出框是最常用最实用的功能. 先来看一下艺龙网上的一些应用场景.1. 艺龙网应用场景举例(1) 静态提示类弹出层. 弹出层的内容是固定的.(2) 动态提示类弹出层. 弹出层内容是根据事件源变化的.(3)遮罩类弹出层. 弹出时背景变灰并不可点击.2. 应用实例使用jQuery UI 的Dialog 组件. 我以轻松实现上面三种效果.Dialog组件的主要特点是可以拖动(Draggable), 可以改变大小(Resizable) .示例完整代码如下:<%@ Page Language="C#" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional/ /EN""/TR/xhtml1/DTD/xhtml1-transitional. dtd"><html xmlns="/1999/xhtml"><head id="Head1"runat="server"><title>jQuery UI - 弹出层应用实例 Dialog</title><!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vad er--><link rel="stylesheet"type="text/css"href="<%=WebConf ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/><script type="text/javascript"src="<% =WebConfig.Resou rceServer %>/JsLib/jquery/jquery-min-lastest.js"></script><script src="<% =WebConfig.ResourceServer %>/JsLib/jque ry/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type=" text/javascript"></script><% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用 == ========*/</script><style type="text/css"></style></head><body><!-- Demo 静态提示类弹出层 --><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"><h3>Demo. 共享同一个静态弹出层, 弹出层内容固定: </h3><div><span id="spanShowTip1">显示提示</span> &nb sp; <span id="spanShowTip2">显示提示</span> <span id="spanShowTip3">显示提示</span> &nb sp; <span id="spanShowTip4">显示提示</span> </div></div><br /><br /><!-- Demo 动态提示类弹出层 --><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"><h3>Demo. 每个弹出层内容不同, 弹出层内容存储在事件源的元素属性中: </h3><div><span id="spanShowDataTip1" data="颜色是红色">红色</span> <span id="spanShowDataTip2" data="颜色是绿色">绿色</span> </div></div><br /><br /><!-- Demo 遮罩类弹出层 --><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"><h3>Demo. 弹出IFrame </h3><div><input type="button" id="btnShowIframe" name="b tnShowIframe" value="显示弹出层"/></div></div><!-- 提示类弹出层 --><div id="divTip" title="自定义标题"><p>弹出层</p></div><!-- 遮罩类弹出层 --><div id="divIframe" title="iFrame弹出层" style="text-al ign:center;"><iframe src="" width="450px" he ight="230px"></iframe></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/$(function(){//静态提示类弹出层$("span[id^=spanShowTip]").css("cursor", "point er").click(function(event){$("*").stop();event.stopPropagation();var top = $(event.target).offset().top + 20;var left = $(event.target).offset().left;$("#divTip").dialog("option", "position", [l eft, top]);$("#divTip").dialog("open");});//动态提出类弹出层$("span[id^=spanShowDataTip]").css("cursor", "p ointer").click(function(event){$("*").stop();$("#divTip").dialog("close");event.stopPropagation();var top = $(event.target).offset().top + 20;var left = $(event.target).offset().left;$("#divTip").html($(event.target).attr("dat a"));$("#divTip").dialog("option", "position", [l eft, top]);$("#divTip").dialog("open");});//遮罩类弹出层$("#btnShowIframe").click(function(event){event.preventDefault();event.stopPropagation();$("#divIframe").dialog("open");});//单击自身取消冒泡$("#divTip, #divIframe").bind("click", function (event){event.stopPropagation();});//document对象单击隐藏所有弹出层$(document).bind("click", function(event){$("#divTip").dialog("close");$("#divIframe").dialog("close");});});/*==========加载时执行的语句==========*/$(function(){//初始化提示类弹出层$("#divTip").dialog({show: null,bgiframe: false,autoOpen: false});//初始化遮罩类弹出层$("#divIframe").dialog({show: null,bgiframe: false,autoOpen: false,width: 500,height: 300,draggable: true, resizable: false,modal: true});});</script></body></html>效果如图:静态提示类弹出层动态提示类弹出层:遮罩类弹出层:3.关键点讲解(1)计算弹出层位置提示类弹出框最重要的是计算弹出框的位置. 通过事件对象获取到事件源, 使用offset()函数计算事件源相对于document的位置:var top = $(event.target).offset().top;var left = $(event.target).offset().left;需要将弹出层放在Body元素中的第一层.即父类因为是相对于document, 即页面左上角的位置, 所以需要将弹出层放在就是body. 如果包含在其他元素中, 需要确定任何一个父类的position样式设置为了relative.计算出来的top和left是事件源的位置, 在此位置显示会将事件源对象遮盖住. 所以通常需要手工做一些偏移, 比如top+20.(2) 取消冒泡和浏览器默认行为如果我们为document对象绑定了单击后关闭弹出层的事件, 那么就一定要取消事件的冒泡. 使用event 对象的stopPropagation()方法可以取消冒泡.event.stopPropagation();对于具有默认行为的元素,比如提交按钮的提交表单行为, <a>元素的超链接行为等, 我们如果在这些元素上应用事件, 还需要取消它们的默认行为:event.preventDefault();(3) 设置动画效果与取消动画通过设置dialog的配置项的show属性, 可以设置显示dialog时候的动画效果:$('.selector').dialog({ show: 'slide' });show默认为null即无动画, 可以是使用下列值:'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.对于这些动画的效果, 可以在此页观看:/demos/show/当一个动画效果执行时, 如果用户在此对这个元素进行操作, 就会出现各种问题, 比如定位不准确等. 所以如果应用了动画, 我们在对其操作时需要使用stop()函数来停止动画, 通常是停止虽有元素的动画:$("*").stop();但是即使停止了动画再进行操作, 如果操作的太快也容易产生问题. 所以至于是否使用动画需要经过权衡决定.(4) 动态提示类弹出层的数据传递动态提示类弹出层的数据是不同的, 本文实例使用的是将数据存储在元素属性data上:<span id="spanShowDataTip1"data="颜色是红色">红色</span>这是一种简单直观的方式. 比较容易编程实现(尤其是在使用MVC编程模型的时候.)还有一种常用方式是使用javascript变量存储数据.这两种方式在第5章时有过讲解:/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html(5)更换主题大家注意实例中的弹出层没有为其编辑任何样式, 但是显示出来后已经被美化过了. 这是因为我引用了jQ uery UI的主题:<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/>注释中有很多的主题, 只需要将引用路径中的"redmond"改为其中任何一个, 弹出层的样式会立刻发生变化.VS中有一个Bug, 就是针对link标签, href中的语句块编译有问题, 某些情况下<%%>不被编辑解析. 所以我使用上面代码中的方式构造href属性值.()可以在下面的地址查看各个主题的效果:/themeroller/#themeGallery六.Tab标签不刷新页面, 在页面中的不同标签间切换:本实例通过jQuery UI的Tabs组件实现. Tabs组件的使用与dialog一样十分简单, 默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用.1.应用实例源代码:<%@ Page Language="C#" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional. dtd"><html xmlns="/1999/xhtml"><head id="Head1"runat="server"><title>jQuery UI - 弹出层应用实例 Dialog</title><!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/><script type="text/javascript"src="<% =WebConfig.Resou rceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jque ry/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type=" text/javascript"></script><% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用 == ========*/</script><style type="text/css"></style></head><body><!--Demo.默认Tab与Ajax Tab --><div id="tabs1" style="width:300px;"><ul><li><a href="#tabs1-1">One</a></li><!-- Ajax Tab --><li><a href="TabData.htm">Two</a></li><li><a href="#tabs1-3">Three</a></li></ul><div id="tabs1-1"><p>Tab1内容</p></div><div id="tabs1-3"><p>Tab3内容</p></div></div><br /><br /><br /><!--Demo. 可折叠的Tab --><div id="tabs2" style="width: 300px;"><ul><li><a href="#tabs2-1">One</a></li> <li><a href="#tabs2-2">Two</a></li> <li><a href="#tabs2-3">Three</a></li> </ul><div id="tabs2-1"><p>Tab1内容</p></div><div id="tabs2-2"><p>Tab2内容</p></div><div id="tabs2-3"><p>Tab3内容</p></div></div><br /><br /><br /><!--Demo. 鼠标滑动即切换的Tab --><div id="tabs3" style="width: 300px;"><ul><li><a href="#tabs3-1">One</a></li> <li><a href="#tabs3-2">Two</a></li> <li><a href="#tabs3-3">Three</a></li> </ul><div id="tabs3-1"><p>Tab1内容</p></div><div id="tabs3-2"><p>Tab2内容</p></div><div id="tabs3-3"><p>Tab3内容</p></div></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/$(function(){});/*==========加载时执行的语句==========*/ $(function(){//默认Tabs$("#tabs1").tabs();//可折叠的Tabs$("#tabs2").tabs({collapsible: true});//鼠标滑动即切换的Tabs$("#tabs3").tabs({event: "mouseover"});});</script></body></html>效果:1. 默认设置的Tabs, Two标签内容使用Ajax获取2.再折叠tab3.鼠标滑动即切换的tab2.要点讲解(1) 注意Tabs中的HTML结构.使用ul构建标签. 内容div一定要和标签关联, 没有关联的div将不被处理直接显示.容器中.内容放入指定容器中(2) 使用Ajax可以不指定内容容器, 但是也可以将Ajax内容放入指定<li><a href="hello/world.html"title="Todo Overview"> ... </a></li><div id="Todo_Overview"> ... </div>(3) 活用事件tab有很多事件:select, load, show, add, remove, enable, disable使用这些事件可以完成很多复杂任务. 需要注意事件的签名:$('#example').bind('tabsselect', function(event, ui) { // Objects available in the function context:ui.tab // anchor element of the selected (clicked)tabui.panel // element, that contains the selected/clicked tab contentsui.index // zero-based index of the selected (clicked) tab});第一个是事件对象, 第二个ui对象是传递的额外参数, 我们可以获取tab对象, tab所在容器和tab的索引值.比如我们可以在事件中做验证:$('#example').tabs({select: function(event, ui) {var isValid = ... // form validation returning trueor falsereturn isValid;}});或者当添加一个tab时立刻切换到选中状态:var $tabs = $('#example').tabs({add: function(event, ui) {$tabs.tabs('select', '#' + ui.panel.id);}});活学活用, 更多应用大家也可以参见tab组件的官方文档:/demos/tabs七. 手风琴菜单使用jQuery UI的accordion组件可以实现手风琴菜单. 效果见下图.accordion文档地址: /demos/accordion/1.实例效果2.实例代码<%@ Page Language="C#" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional/ /EN""/TR/xhtml1/DTD/xhtml1-transitional. dtd"><html xmlns="/1999/xhtml"><head id="Head1"runat="server"><title>jQuery UI - 手风琴菜单应用实例 Accordion </title> <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vad er--><link rel="stylesheet"type="text/css"href="<%=WebConf ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/><script type="text/javascript"src="<% =WebConfig.Resou rceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jque ry/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type=" text/javascript"></script><% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用 == ========*/</script><style type="text/css">body{font-size: 12px;}</style></head><body><!-- Demo. 默认配置的Accordion菜单 --><div style="width: 300px; float:left; margin-left:20px; "><div id="accordion1"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><!-- Demo. 取消自动高度, 可折叠 --><div style="width: 300px; float: left; margin-left: 20p x;"><div id="accordion2"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><!-- Demo. 鼠标滑动触发, 自定义图标 --><div style="width: 300px; float: left; margin-left: 20p x;"><div id="accordion3"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/$(function(){});/*==========加载时执行的语句==========*/$(function(){//默认配置的Accordion菜单$("#accordion1").accordion();//取消自动高度, 可折叠$("#accordion2").accordion({autoHeight:false,collapsible: true});//鼠标滑动触发, 自定义图标$("#accordion3").accordion({icons: {header: "ui-icon-circle-arrow-e", headerSelected: "ui-icon-circl e-arrow-s"},event: "mouseover"});});</script></body></html>3. 关键点讲解(1) 注意高度设置过小问题当包含accordion控件的容器高度设计过小时, 在FireFox3中在此容器后面的内容会被accordion控件部分遮盖. 在IE中没有此问题. 经检查是因为容器高度小于菜单高度导致. 所以我们在应用时应当注意不要将容器高度设置过小.(2) 部分关键属性autoHeight: 设置是否自动将内容高度设置为容器高度.collapsible: 设置是否可折叠一般上面两个配合使用, 以为折叠后肯定会改变菜单高度, 会导致autoHeight设置为true无效.更多属性和事件使用请参阅官方文档.八.总结本章简单介绍了jQueryUI, 并且使用jQuery UI完成了弹出层,tabs,手风琴菜单的应用实例. 使用jQu ery UI可以不需要额外寻找插件. 并且实现简单.但是有些功能是必须使用插件完成的. 下一张讲解两个插件实例: 自动完成插件AutoComplete 和表单验证插件jQuery Validate.本章源代码下载:/zhangziqiu/Code-jQueryStudy-10.rar。
JQuery插件autocomplete使用说明文档
JQuery插件autocomplete使⽤说明⽂档项⽬中有时会⽤到ajax⾃动补全查询，就像Google的搜索框中那样，输⼊汉字或者字母的⾸个字母，则包含这个汉字或者字母的相关条⽬会显⽰出来供⽤户选择，该插件就是实现这样的功能的。
autocomplete官⽹：（可下载jQuery autocomplete插件）。
使⽤此插件需要引⽤两个js⽂件和⼀个css⽂件，分别如下：jquery核⼼库⽂件 <script src="./jquery-1.3.2.js"type="text/javascript"></script>当jquery版本过⾼时需要使⽤jquery兼容⽂件<script src="~/Content/jquery-autocomplete/lib/jquery-migrate-1.2.1.js"></script>插件js⽂件 <script src="./jquery.autocomplete.js" type="text/javascript"></script>插件样式⽂件 <link rel="stylesheet" href="./jquery.autocomplete.css" />插件的参数说明如下：minChars(number) 该参数指定在触发autocomplete之前⽤户在查询框中输⼊的最⼩字符数，通常设置为1，即⽂本框值不为空的时候执⾏autocomplete,如果取值为0，则在⽤户双击查询⽂本框或删除⽂本框内容时查询width 该参数的⽤途是指定下拉框的宽度，通常不⽤设置，默认的值为和<input>元素相同max 查询时下拉列表框中显⽰的条⽬数，defaultValue为10delay 击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10autoFill(boolean) 是否在⽤户选择时⾃动将⽤户⿏标所在的值填充到input元素中，default:falsemustMatch(boolean) 参数boolean类型，true时，如果输⼊的查询条件⽆法匹配到合适的结果，则<input>元素中输⼊的查询值会⾃动清空，否则会保留。
jquery 搜索框提示功能(完整版)
<%@ page language="java" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery</title><style type="text/css">.searchTableTr{ background-color : gray;}.divSearchInput{display: none;position: absolute;border-width: 1px;overflow:hidden;background:none repeat scroll 0 0 #FFFFFF;border:#c5dadb 1px solid;}</style></head><body><div id="divSearchPage"><div id="divWidthAuto" style="border:#c5dadb 1px solid;border-width: 1px;height:30px;float: left;"><input type="text" name="search" id="search" style="border: 0px;height:30px;font-size: 16px;line-height: 30px;color: #000000;"></div> <input type="button" value="搜索" style="height:30;width:100"><input type="hidden" name="searchIndex" id="searchIndex" value="0"><input type="hidden" name="maxIndex" id="maxIndex" value="0"><div id="searhInput" class="divSearchInput" ><table id="searhTable"><tbody></tbody></table></div></div><script src="jquery.js"></script><script>//鼠标停留改变搜索显示的背景颜色functionchangeColor(v,i) {if ($("#searchIndex").val() != '') {var index = $("#searchIndex").val();if (index == 10) {index = 1;}$("#searhTabletr").each(function(i,v) {if (i == (index-1)) {$(this).removeClass();}})}$(v).addClass("searchTableTr");$(v).css("cursor","default");$("#searchIndex").val(i+1);}//鼠标离开移除搜索显示的背景颜色functionmoverColor(v) {$(v).removeClass();$(v).css("cursor","");$("#searchIndex").val(0);}//点击搜索显示信息functionsearchValue(v) {$("#search").val($(v).text());$("#searhInput").hide();}$(function(){$("#divWidthAuto").width(533);$("#search").width(530);$("#searhInput").width(533);$("#searhTable").width(533);vardisp = true;//点击空白处隐藏$(document).click(function(){//点击搜索处显示$("#divSearchPage").click(function(){disp = false;if ($('#searhInput').css('display') == 'block') {$('#searhInput').show();}});if (disp) {$('#searhInput').hide();}disp = true;});//右键点击搜索处显示$("#divSearchPage").bind("contextmenu",function(e){ $('#searhInput').show();});//输入框键盘触发事件$("#search").keyup(function(e){var key = e.which;//下键if(key == 40){$('#searhInput').show();var index = $("#searchIndex").val();varmaxIndex = $("#maxIndex").val();if (index == new Number(maxIndex)) {index = 0;}if (index == (new Number(maxIndex)+1)) {index = 1;}$("#searhTabletr").each(function(i,v) { if (i == index) {$("#search").val($(this).text());$(this).addClass("searchTableTr");} else {$(this).removeClass();}})index++;$("#searchIndex").val(index);}//上键if(key == 38){$('#searhInput').show();var index = $("#searchIndex").val();varmaxIndex = $("#maxIndex").val();if (index == 0) {index = (new Number(maxIndex)+1);}if (index == 1) {index = (new Number(maxIndex)+1);}index = index - 2;$("#searhTabletr").each(function(i,v) {if (i == index) {$("#search").val($(this).text());$(this).addClass("searchTableTr");} else {$(this).removeClass();}})index = index+1;$("#searchIndex").val(index);}if (key != 40 && key != 38) {if(this.value != '') {querySearchInfo(this);} else {$('#searhTable').empty();$('#searhInput').hide();}}});//搜索框输入functionquerySearchInfo(v) {jQuery.post("json.action",{value : $("#search").val()},function(json) {$("#searhTable").empty();$("#searhInput").hide();$("#searchIndex").val(0);for (i = 0;i <json.test.length;i++) {if (i == 10) {break;}$("#searhTable").append("<tronmousemove='changeColor(this,"+i+")'onmouseout='moverColor(this)' id='searchTr"+i+"'><td onclick='searchValue(this)'>"+json.test[i].a1+"</td></tr>")}if (json.test.length != 0) {var y = ($(v).offset().top+30);var x = ($(v).offset().left-1);$("#searhInput").css("top",y);$("#searhInput").css("left", x);varmaxIndex = json.test.length;if (json.test.length> 10) {maxIndex = 10;}$("#maxIndex").val(maxIndex);$("#searhInput").show();}},"json");}});</script></body></html>。
query补全的意思
query补全的意思query补全是指在用户进行搜索时，搜索引擎根据用户的输入部分关键词，在数据库中自动匹配并提供相关的搜索建议，以便用户能够更快、更准确地找到所需信息。
这种搜索建议通常以下拉菜单的形式呈现在搜索框下方，根据用户的输入内容实时更新。
在搜索引擎中，query补全功能起到了提供搜索建议、帮助用户更快找到所需信息的作用。
通过实时匹配用户的输入，搜索引擎可以根据用户的意图提供相关的搜索关键词。
用户只需要输入部分关键词，搜索引擎就会自动补全后续的搜索内容，这样可以减少用户的输入量，加快搜索速度，并且避免了用户输入错误关键词的问题。
query补全的实现原理是基于搜索引擎的庞大数据库和智能算法。
搜索引擎会根据用户的输入，从数据库中匹配相关的搜索内容，并按照一定的算法排序，将最可能的搜索关键词展示给用户。
这个数据库中包含了海量的数据，其中包括用户常用的搜索关键词、搜索频率高的关键词等。
query补全功能的优点在于它可以提高搜索的效率和准确性。
当用户进行搜索时，往往并不清楚具体的关键词，只有输入了一部分内容，query补全功能就会根据这部分内容提供相关的搜索建议，用户可以根据这些建议进行选择，从而更快地找到所需信息。
另外，query补全还可以帮助用户纠正错误的关键词，避免一些输入错误造成的搜索失败。
总而言之，query补全是一种提供搜索建议、加快搜索速度、提高搜索准确性的功能。
它通过匹配用户输入的关键词，提供相关的搜索建议，帮助用户更快找到所需信息。
该功能的优点在于提高搜索效率、准确性，并帮助纠正用户的输入错误。
在使用搜索引擎时，我们可以充分利用query补全功能，以提高搜索体验和效果。
仿百度搜索智能提示(纯JS实现)
仿百度搜索智能提示(纯JS实现)项目中经常用到搜索智能提示，开源的象jQuery、yui等都有，但是觉得有点臃肿，于是自己用ajaxpro+JavaScript搞了一个目前只支持ie，可能还有若干个bug。
相信新手应该用得着吧，老鸟就算了。
大家发现了请指出，我马上改正，大家多多支持哈~~核心代码如下：代码var arrList = new Array();//要搜索的数据var objouter, objInput, objInputId = "txtSearch";//控件IDvar selectedIndex = -1, intTmp;//初始化function smanPromptList() {this.style ="overflow:hidden;width:393px;height:auto;background:#FFFFFF;border:1px solid #000000;font-size:14px;cursor:default;"if (arrList.constructor != Array) {alert('smanPromptList初始化失败:第一个参数非数组!');return;}document.write("<div id='__smanDisp'style='position:absolute;display:none;" + this.style + "'onblur></div>");document.write("<style type=\"text/css\">.sman_selectedStyle{background-Color:#3366CC;color:#FFFFFF}</style>");arrList.sort(function(a, b) {if (a.length > b.length) return 1;else if (a.length == b.length) return a.localeCompare(b);else return -1;});objouter = document.getElementById("__smanDisp") //显示的DIV对象objInput = document.getElementById(objInputId); //文本框对象if (objInput == null) {alert('smanPromptList初始化失败:没有找到"' + objInputId + '"文本框'); return;}objInput.onblur = function() { objouter.style.display = 'none'; } objInput.onkeyup = checkKeyCode;objInput.onfocus = checkAndShow;}function getAbsoluteHeight(ob) {return ob.offsetHeight;}function getAbsoluteWidth(ob) {return ob.offsetWidth;}function getAbsoluteLeft(ob) {var s_el = 0, el = ob;while (el) {s_el = s_el + el.offsetLeft;el = el.offsetParent;};return s_el;}function getAbsoluteTop(ob) {var s_el = 0, el = ob;while (el) {s_el = s_el + el.offsetTop;el = el.offsetParent;};return s_el;}function outSelection(Index) {objInput.value = objouter.children[Index].innerText.Trim();objouter.style.display = 'none';}function divPosition() {objouter.style.top = getAbsoluteHeight(objInput) +getAbsoluteTop(objInput);objouter.style.left = getAbsoluteLeft(objInput);objouter.style.width = getAbsoluteWidth(objInput);}function chageSelection(isUp) {if (objouter.style.display == 'none') {objouter.style.display = '';}else {if (isUp)selectedIndex++;elseselectedIndex--;}var maxIndex = objouter.children.length - 1;if (selectedIndex < 0) { selectedIndex = 0; }if (selectedIndex > maxIndex) { selectedIndex = maxIndex; }if (selectedIndex == maxIndex) { selectedIndex = -1; }for (intTmp = 0; intTmp <= maxIndex; intTmp++) {if (intTmp == selectedIndex) {objouter.children[intTmp].className = "sman_selectedStyle"; objInput.value = objouter.children[selectedIndex].innerText.Trim(); }else {objouter.children[intTmp].className = "";}}}function checkKeyCode() {var ie = (document.all) ? true : falseif (ie) {var keyCode = event.keyCodeif (keyCode == 40 || keyCode == 38) {var isUp = falseif (keyCode == 40)isUp = true;chageSelection(isUp)}else if (keyCode == 13) {outSelection(selectedIndex);}else {checkAndShow();}}else {checkAndShow();}divPosition();}function checkAndShow() {var strInput = objInput.value.Trim();if (strInput != "") {divPosition();selectedIndex = -1;arrList.length = 0;objouter.innerHTML = "";//=======================这里修改数据================================ var result = WebApplicationTestDiv.WebForm11.GetArray(strInput).value; //=================================================================== var data = eval('(' + result + ')');for (var j = 0; j < data.length; j++) {arrList[j] = data[j];}for (intTmp = 0; intTmp < arrList.length; intTmp++) {for (i = 0; i < arrList[intTmp].length; i++) {if (arrList[intTmp].substr(i, strInput.length).toUpperCase() == strInput.toUpperCase()) {addOption(arrList[intTmp], strInput);}if (objouter.childNodes.length >= 10) {break;}}}if (objouter.childNodes.length > 0) {objouter.innerHTML += "<div style=\"width:395px;height:22px;text-align:right;color:Blue;text- decoration:underline;cursor:pointer;\">关闭</div>";}objouter.style.display = '';}else {objouter.style.display = 'none';}}//显示搜索的数据并关键字涂色function addOption(value, keyw) {var v = value.replace(keyw, "<b><font color=\"red\">" + keyw +"</font></b>");objouter.innerHTML += "<div style=\"width:395px;height:22px\" onmouseover=\"this.className='sman_selectedStyle'\"onmouseout=\"this.className=''\"onmousedown=\"document.getElementById('" + objInputId + "').value='" + value + "'\">" + v + "</div>"}String.prototype.Trim = function() {return this.replace(/(^\s*)|(\s*$)/g, "");}smanPromptList();后台核心代码：代码[AjaxPro.AjaxMethod]public string GetArray(string name){try{List<string> list = new List<string>();#regionlist.Add("1");list.Add("12");list.Add("123");list.Add("1234");list.Add("12345");list.Add("123456");list.Add("1234567");list.Add("12345678");list.Add("123456789");list.Add("9876543210");list.Add("987654321");list.Add("98765432");list.Add("9876543");list.Add("987654");list.Add("98765");list.Add("9876");list.Add("987");list.Add("98");list.Add("9");list.Add("1111222");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("");list.Add("杨澜");list.Add("杨扬");list.Add("杨白劳");list.Add("杨钰莹");list.Add("杨百万");list.Add("杨一洋");list.Add("杨丞琳");list.Add("杨一尔");list.Add("杨二尔");#endregionList<string> l1 = list.FindAll(delegate(string ss) { return ss.Contains(name); });string str = "[";foreach (string s in l1){str += "\"" + s + "\"" + ","; }str = str.TrimEnd(',') + "]"; return str;}catch (Exception ex){throw ex;}}最后效果如图：。
jqtooltip用法
jqtooltip用法jq-tooltip是一个基于jQuery的工具库，用于在网页元素上添加鼠标悬停提示信息。
它提供了一种简单易用的方式来创建和自定义提示框，使其能够适应不同的需求。
使用jq-tooltip的基本步骤如下：1. 在HTML页面中引入必要的文件。
在使用jq-tooltip之前，需要引入jQuery库和jq-tooltip插件库。
可以通过以下方式来引入这些文件：```html```2. 创建提示框。
在需要添加提示的元素上添加`data-tooltip`属性，并将其设置为提示内容。
例如：```html<button data-tooltip="这是一个按钮">按钮</button>```3. 初始化jq-tooltip。
在页面加载完成后，通过调用`tooltip(`函数来初始化jq-tooltip。
例如：```javascript$(document).ready(function$('[data-tooltip]').tooltip(;});```4.自定义样式。
可以使用CSS来自定义提示框的样式，以满足特定的需求。
现在我们来详细了解jq-tooltip的用法。
一、初始化选项在初始化jq-tooltip时，可以传递一些选项对象来自定义提示框的行为和样式。
常用的选项包括：- `trigger: 'hover'`：指定提示框的触发方式，可选值包括'hover'（默认）、'click'和'manual'。
- `position: 'top'`：指定提示框的位置，可选值包括'top'（默认）、'bottom'、'left'和'right'。
- `delay: 200`：指定提示框的延迟显示时间（毫秒），默认值为200。
ASP+AJAX做类似google的搜索提示
ASP+AJAX做类似google的搜索提示主要要文件有:Index.html 实现功能,一个文本框,输入内容并实现提示search.asp 查询功能,让文本框输入的内容在数据库中查询,然后返回给客户端conn.asp 数据库连接功能,实现与数据库相连 xmlhttp.js AJAX 核心部分,用来把客户端的数据传给服务端,再把服务端的数据返还给客户端.style.css 样式文件,主要是对google提示框查询到的内容进行样式化处理先看第一个文件style.css@charset "utf-8";/* CSS Document */body{font-size:12px;font-family:Arial, Helvetica, sans-serif;}#search_suggest{position:absolute;background:#FFFFFF;text-align:left;border:1px #000000 solid;}.suggest_link_over{background-color:#e8f2fe;padding:2px 6px;}.suggest_link{padding:2px 6px;background-color:#FFFFFF;}.none{display:none;}第二个文件: xmlhttp.js// JavaScript Documentrtvar xmlHttp = createXmlHttpRequest();function createXmlHttpRequest(){var xmlhttp = null;try{xmlhttp = XMLHttpRequest();}catch(e1){try{xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");}catch(e2){try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}catch(e3){xmlhttp = false;alert("创建失败!");}}}return xmlhttp;}function change_key(){if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {var str = document.getElementById("txt_key").value;xmlHttp.open("get","search.asp?key=" + str ,true); xmlHttp.onreadystatechange = handSearchRequest;xmlHttp.send(null);}}function handSearchRequest(){if (xmlHttp.readyState == 4){var div = document.getElementById("search_suggest");div.innerHTML = "";var str = xmlHttp.responseText.split("|");for (var i=0; i<str.length; i++){var suggest = ’<div onmouseover="javascript：suggestOver(this);" ’; suggest += ’onmouseout="javascript：suggestOut(this);" ’;suggest += ’onclick="javascript：setSearch(this.innerHTML);" ’; suggest += ’class="suggest_link">’ + str[i] + ’</div>’;div.innerHTML += suggest;}}}function setSearch(div_value){document.getElementById("txt_key").value = div_value;document.getElementById("search_suggest").className = ’none’;}function suggestOver(div_value){div_value.className = ’suggest_link_over’;}function suggestOut(div_value){div_value.className = ’suggest_link’;}第三个文件:conn.asp<%set conn = Server.CreateObject("Adodb.Connection")connStr = "Provider=SQLOLEDB;Server=.\SQLEXPRESS;UID=sa;PWD=sa;Initial catalog=test;"conn.ConnectionString = connStrconn.open%>第四个文件:search.asp<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><!-- #include file="conn.asp" --><%key = request.QueryString("key")if (key <> "") thenkey = replace(key,"\","")key = replace(key,"’","")key = replace(key,"or","")sel_sql = "select [key] from [key] where [key] like ’" & key & "%’" dim keywordkeyword = ""set rs = conn.execute (sel_sql)do while not rs.eofkeyword = keyword & rs(0) & "|"rs.movenextloopresponse.Write(keyword)end if%>最后一个结果文件:index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>google提示 </title><script src="xmlhttp.js" ></script><link rel="stylesheet" type="text/css" href="style.css"></head><body><form id="form1" name="form1" method="post" action=""><input name="txt_key" type="text" id="textarea" autocomplete="off" onkeyup="change_key()"/><br/><div id="search_suggest" ></div></form> </body> </html>。
jq toggle用法
jq toggle用法jq toggle是jQuery的一个方法，可以切换元素的可见性。
当元素隐藏时，toggle会使它显现，当元素显现时，toggle会使它隐藏。
使用toggle方法前，需要先编写一些基本的HTML和CSS代码。
在HTML中，需要创建要切换可见性的元素，可以是任何元素如 div、p、ul、li、img等，并为其设置一个唯一的ID或类。
在CSS中，需要定义这个元素的默认样式以及不显示的样式。
可以使用以下代码段作为HTML模板：```<div id="my-element" class="hidden"><p>This is a paragraph that will toggle visibility.</p></div>```在CSS中，可以将该元素设置为默认隐藏：```.hidden {display: none;}```接下来，就可以使用jq toggle方法来切换该元素的可见性了。
下面是常用的jq toggle方法语法。
```$(selector).toggle(speed, easing, callback);```- selector：必需，用于选择要动作的元素。
- speed：可选，规定动画的速度。
可以是毫秒值，也可以是“slow”或“fast”。
- easing：可选，规定动画的效果。
默认为“swing”，也可以设置为“linear”。
- callback：可选，当动画完成后执行的函数名。
例如，在点击按钮时切换元素可见性，可以使用以下代码：这会将一个ID为“toggle-button”的按钮与一个ID为“my-element”的元素关联起来。
当单击按钮时，该元素的可见性将被切换。
可以通过向jq toggle方法中添加速度和效果来定制动画效果。
以下是一个例子：这将使元素在1秒钟内以线性方式淡入/淡出，而不是默认的摇摆效果。
(bi商务智能)推荐jQueryMobile插件和教程
4.jQueryMobileDatepickers 21.jQueryUI’sDatepickerStyledformobile TheincludedfilesextendthejQueryUIdatepickertomakeitsuitablefortouchdevices.This pluginisnotincludedinjQueryMobilebydefault,soyou’llneedtoincludethefilesyourse lfifyou’dliketousethem.Scrolldownforusageinstructions. 22.Android-LikeDatePickerwithjQuerymobile.2 23.SoundSystemStudioWebLayout Inthistutorialyouwilllearnhowtocreateanicelookinglayout.
VSCode代码补全插件推荐
VSCode代码补全插件推荐代码编辑器是程序员日常工作中必备的工具之一，而在众多代码编辑器中，Visual Studio Code（简称VSCode）凭借其丰富的功能和强大的插件生态系统成为了许多开发者的首选。
而其中，代码补全是提高开发效率的一个重要功能。
本文将为大家推荐几款优秀的VSCode代码补全插件，希望能够帮助大家更好地开展开发工作。
1. TabnineTabnine是一款基于机器学习的智能代码补全插件，能够通过分析代码库和上下文来提供准确的补全建议。
其强大的智能推荐功能能够极大地减少编写代码时的重复工作，提高开发效率。
不仅如此，Tabnine还支持多种主流编程语言，包括Java、JavaScript、Python等，方便开发者在不同项目中使用。
2. IntelliSense for CSS class names对于前端开发者来说，CSS样式的编写是一项重要的工作。
而IntelliSense for CSS class names插件能够为CSS样式类名提供智能的补全建议，在编写CSS时能够快速准确地找到所需的样式类名，避免了手动输入的烦琐过程。
3. Python如果你是Python开发者，那么Python插件将是你的首选。
它提供了丰富的代码补全功能，支持Python语言的关键字、函数、类等的自动补全。
此外，Python插件还集成了调试和测试等功能，方便开发者进行代码调试和单元测试。
4. HTML CSS SupportHTML CSS Support插件是一款为前端开发者准备的代码补全插件，它能够为HTML、CSS和JavaScript提供智能的补全建议。
在开发网页时，该插件能够自动补全HTML标签、CSS属性和JavaScript函数等，极大地提高了开发效率。
5. GitLensGitLens是一款为Git版本控制工具提供代码补全功能的插件。
它能够在代码编辑器中显示每一行代码的Git历史记录，并提供了一些有用的功能，如显示最后一次修改的作者和时间、显示代码行注释等。
jquery中toggle的2种用法详解（推荐）
jquery中toggle的2种⽤法详解（推荐）⼀、在元素的click事件中绑定两个或两个以上的函数 toggle不像bind需要在后⾯添加"click"来绑定click触发事件，toggle本⾝就是click触发的（⽽且只能click触发），如下实例：<input id="btntest" type="button" value="点⼀下我" /><div>我是动态显⽰的</div><script type="text/javascript">$(function () {$("#btntest")$("#btntest").toggle(function(){$("div").html("我变了！");},function(){$("div").html("我⼜变了！");});});</script>⼆、切换元素的显⽰与隐藏效果：<input id="btntest" type="button" value="点⼀下我" /><div>我是动态显⽰的</div><script type="text/javascript">$(function () {$("#btntest").bind("click",function(){$("div").toggle(500);//此处的 500 是隐藏显⽰的延迟时间，默认为0，也可以⽤"slow","normal"或"fast"//如果⾥⾯的值为true（toggle(true)）时只能显⽰元素，值为false（toggle(false)）时只能隐藏元素。
Eclipse支持HTML&JS&ExtJS&jQuery代码智能提示
Eclipse支持HTML&JSExtJS&jQuery代码智能提示2012-06-01安装HTML插件GEF和EclipseHTMLEditor一、GEF下载安装进到网页/gef/downloads/点6.2M的那个。
会进入下载页面/downloads/download.php?file=/tools/gef/downloads/drops/3.7.2/R201201171 043/GEF-ALL-3.7.2.zip点击红色框内链接下载，链接地址如下：/downloads/download.php?file=/tools/gef/downloads/drops/3.7.2/R201201171 043/GEF-ALL-3.7.2.zip&url=/eclipse/tools/gef/downloads/drops/3.7.2/R20120117 1043/GEF-ALL-3.7.2.zip&mirror_id=385GEF-ALL-3.7.2.zip解压出来如下图：把features目录下的全部拷贝到eclipse/features下，把plugins目录下的文件全部拷贝到eclipse/plugins下。
二、安装EclipseHTMLEditor进入页面http://sourceforge.jp/projects/amateras/downloads/51002/tk.eclipse.plugin.htmleditor_2.1.0.jar/点击红色框内下载地址，链接地址如下：http://sourceforge.jp/frs/redir.php?m=iij&f=%2Famateras%2F51002%2Ftk.eclipse.plugin.htmleditor_2.1 .0.jar把该文件tk.eclipse.plugin.htmleditor_2.1.0.jar拷贝到eclipse/plugins下。
google常用语法（百度语法同）
google常⽤语法（百度语法同）1.intitle：搜索⽹页标题中包含有特定字符的⽹页。
例如输⼊“intitle: 你好”，这样⽹页标题中带有你好的⽹页都会被搜索出来。
2.inurl：搜索包含有特定字符的URL。
例如输⼊“inurl:hello”，则可以找到带有hello字符的URL。
3.intext: 搜索⽹页正⽂内容中的指定字符，例如输⼊“intext:你好”。
这个语法类似⼀些⽹站中使⽤的“搜索”功能。
4.filetype: 搜索指定类型的⽂件。
例如输⼊“filetype:txt”，将返回所有以txt结尾的⽂件URL。
5.site：找到与指定⽹站有联系的URL。
例如输⼊“site：”。
所有和这个⽹站有联系的URL都会被显⽰。
相关组合：adminsite:site: intext:管理|后台|登录|⽤户名|密码|验证码|系统|账号|后台管理|后台登录site: intitle:管理|后台|登录|⽤户名|密码|验证码|系统|账号|后台管理|后台登录inurl:login/admin/manage/admin_login/login_admin/system/boos/master/main/cms/wp-admin/sys|managetem|password|username site: inurl:filesite: inurl:loadsite: inurl:php?id=site: inurl:asp?id=site: inurl:fcksite: inurl:ewebeditorinurl:ewebeditor|editor|uploadfile|eweb|editintext:toparent directoryintext:转到⽗⽬录/转到⽗路径inurl:upload.aspinurl:cms/data/templates/p_w_picpaths/index/intitle:poweredby dedecmsindexof/pptFiletype:mdbsite: intext:to parent directory+intext.mdbinurl:robots.txtintitle:index.of"parent directory"indexof /passwdsite: filetype:mdb|ini|php|asp|jsp其他相关指令：related，cache，info，define，link，allinanchor注：使⽤组合语法时⽤空格隔开，同时也可以⽤负号（-）排除相关内容。
插件的自动填充和表单辅助功能如何使用
插件的自动填充和表单辅助功能如何使用哎呀，说到插件的自动填充和表单辅助功能，这可真是个实用又有趣的话题！我记得有一次，我在网上填写一份超级长的调查问卷。
那里面的问题多得让人眼花缭乱，从个人信息到兴趣爱好，再到各种生活习惯，真是啥都有。
就在我一个一个费劲地敲字，感觉自己的手指都要累断的时候，我突然想起了插件的自动填充和表单辅助功能。
就拿常见的浏览器插件来说吧，比如说某知名的自动填充插件。
当你进入一个需要填写表单的页面时，它就像是一个贴心的小助手，会自动检测表单中的字段，然后根据你之前保存的信息进行填充。
比如说姓名、地址、电话号码这些常用的信息。
你只需要在第一次使用的时候，认认真真地填写好，之后再遇到类似的表单，插件就会“嗖”的一下把这些信息填进去，简直太方便啦！而且，有的插件还能智能识别表单的类型。
比如说，遇到注册账号的表单，它能自动判断需要填写用户名、密码、邮箱等信息，并准确地填充进去。
还有哦，一些表单辅助功能不仅能帮你填充，还能给你提供一些建议和提示。
比如在填写密码的时候，会提醒你设置一个强度高的密码，或者在填写日期的时候，给出一个方便选择的日历小窗口。
另外，有些插件还支持自定义填充的内容。
比如说，你经常需要填写一些特定的工作相关信息，就可以把这些内容提前设置好，需要的时候轻松一点，就填进去啦。
不过呢，使用这些功能的时候也要小心一点。
有时候自动填充的信息可能不是完全准确的，比如说地址更新了但插件还填的是旧地址，这就需要咱们自己检查检查，可别闹了乌龙。
总之，插件的自动填充和表单辅助功能真的是能给咱们的网络生活带来很大的便利。
就像我那次填写调查问卷，如果没有这个功能，估计我得在电脑前忙活半天，说不定还会因为烦躁填错不少信息呢。
现在有了它，节省时间又省力，让咱们能更轻松地应对各种繁琐的表单填写任务。
所以呀，大家都赶紧去试试这些好用的功能，让咱们的网络生活变得更加便捷高效！。
jqueryappendTo用法
jqueryappendTo⽤法$("#top_cartWarp").appendTo($("#top_main_right")).css('position','relative').css('top','0px');返回值:jQueryappendTo(content)V1.0概述把所有匹配的元素追加到另⼀个指定的元素元素集合中。
实际上，使⽤这个⽅法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，⽽是把A追加到B中。
在jQuery 1.3.2中，, prependTo, insertBefore, insertAfter, 和 replaceAll这个⼏个⽅法成为⼀个破坏性操作，返回值是所有被追加的内容，⽽不仅仅是先前所选中的元素。
所以，要选择先前选中的元素，需要使⽤end()⽅法，参见例⼆。
参数contentString⽤于被追加的内容⽰例描述:把所有段落追加到ID值为foo的元素中。
HTML 代码:<p>I would like to say: </p><div></div><div></div>jQuery 代码:$("p").("div");结果:<div><p>I would like to say: </p></div><div><p>I would like to say: </p></div>描述:新建段落追加div中并加上⼀个classHTML 代码:<div></div><div></div>jQuery 代码:$("<p/>").("div").addClass("test").end().addClass("test2");结果:<div><p class="test test2"></p></div><div><p class="test"></p></div>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jquery.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"/TR/html4/loose.dtd">
// if the formatMatch option is not specified, then use formatItem for backwards compatibility
options.formatMatch = options.formatMatch || optБайду номын сангаасons.formatItem;
},
search: function(handler) {
return this.trigger("search", [handler]);
},
flushCache: function() {
return this.trigger("flushCache");
},
setOptions: function(options){
return this.each(function() {
new $.Autocompleter(this, options);
});
},
result: function(handler) {
return this.bind("result", handler);
if (blockSubmit) {
blockSubmit = false;
return false;
}
});
// only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
var KEY = {
UP: 38,
DOWN: 40,
DEL: 46,
TAB: 9,
RETURN: 13,
ESC: 27,
COMMA: 188,
PAGEUP: 33,
PAGEDOWN: 34,
BACKSPACE: 8
};
// Create $ object for input element
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script>
autocomplete: function(urlOrData, options) {
var isUrl = typeof urlOrData == "string";
options = $.extend({}, $.Autocompleter.defaults, {
url: isUrl ? urlOrData : null,
blockSubmit = true;
return false;
}
break;
case KEY.ESC:
select.hide();
break;
default:
clearTimeout(timeout);
case KEY.RETURN:
if( selectCurrent() ) {
// stop default to prevent a form submit, Opera needs special handling
event.preventDefault();
$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
// track last key pressed
lastKeyPressCode = event.keyCode;
var hasFocus = 0;
var lastKeyPressCode;
var config = {
mouseDownOnSelect: false
};
var select = $.Autocompleter.Select(options, input, selectCurrent, config);
3，鼠标事件，鼠标离开时层失去焦点，不锁定提示层
4，已经匹配的字用细体显示，未匹配的用黑体显示，
5，，增加提交之前的验证，比入输入中文时候需要敲空格，则输入之前不传参，
还有一些细微的完善，此处不赘述，需注意的是，若需实现本人完善的效果，需要另存本人的jquery.autocomplete.js文件，以及jquery.autocomplete.css文件，另外几个文件，请到官网下载：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
return this.trigger("setOptions", [options]);
},
unautocomplete: function() {
return this.trigger("unautocomplete");
}
});
$.Autocompleter = function(input, options) {
</body>
</html>
jquery.autocomplete.js代码如下：
/**
* 此js为本人修改完善版，以下功能
* ---李小朋 2:45 2010-10-31
**/
;(function($) {
$.fn.extend({
// if highlight is set to false, replace it with a do-nothing function
options.highlight = options.highlight || function(value) { return value; };
}
break;
case KEY.PAGEUP:
event.preventDefault();
if ( select.visible() ) {
select.pageUp();
} else {
onChange(0, true);
var blockSubmit;
// prevent form submit in opera when selecting with return key
$.browser.opera && $(input.form).bind("submit.autocomplete", function() {
switch(event.keyCode) {
case KEY.UP:
event.preventDefault();
if ( select.visible() ) {
select.prev();
} else {
onChange(0, true);
var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass);
var timeout;
var previousValue = "";
var cache = $.Autocompleter.Cache(options);
data: isUrl ? null : urlOrData,
delay: isUrl ? $.Autocompleter.defaults.delay : 10,
max: options && !options.scroll ? 10 : 150
}, options);
timeout = setTimeout(onChange, options.delay);
break;
}
}).focus(function(){
// track whether the field has focus, we shouldn't process any
$(document).ready(function(){
$("#example").autocomplete("Jquery");
});
</script>
</head>
<body>
API Reference: <input id="example" size=40/> (try "C" or "E")