jQuery实现划词搜索教程
4 浏览量
更新于2024-08-31
收藏 59KB PDF 举报
该资源是一个关于使用jQuery实现划词搜索功能的备忘记录，参考自www.jb51.net上的一个教程。示例代码包括HTML和CSS部分，用于创建一个简单的划词搜索环境，以及引入jQuery库的JavaScript代码。
在这个教程中，主要涉及以下知识点：
1. **jQuery库**：jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在示例中，引入了jQuery的1.4.2版本（`<script type="text/javascript" src="JS/JQuery/jquery-1.4.2.min.js"></script>`），这是实现划词搜索的基础。
2. **HTML结构**：`DragSearchByJQuery.aspx`页面包含一个基本的HTML结构，包括`<head>`和`<body>`标签。在`<head>`中定义了样式表，而`<body>`包含了用户交互的元素，如按钮和文本内容。
3. **CSS样式**：CSS代码定义了划词搜索链接的样式。`a.GL_s`类定义了链接的宽度、高度、边框、内边距、颜色、字体大小和背景图像。还设置了鼠标悬停时的透明度效果，使得链接在被鼠标悬停时更加突出。
4. **JavaScript/jQuery实现**：虽然在这个摘要中没有直接给出JavaScript/jQuery代码，但可以推断实现划词搜索功能的代码会在这段HTML之后。通常，jQuery可以用来监听用户的鼠标移动和点击事件，当用户选中文本后，可以动态地创建或显示与所选文本相关的搜索链接。
5. **划词搜索逻辑**：实际的划词搜索功能可能包括以下步骤：
- 使用jQuery监听鼠标的mousedown和mouseup事件，跟踪用户的选择范围。
- 当用户释放鼠标时，获取选中的文本，并在选区附近插入一个搜索链接。
- 链接的href属性应设置为一个函数，该函数将选中的文本作为查询参数发送到搜索引擎。
- 用户点击链接时，浏览器将打开一个新的窗口或标签页，显示相应的搜索结果。
6. **交互设计**：示例中的“关闭/打开划词功能”按钮表明，可能有一个开关机制允许用户启用或禁用划词搜索功能。这可以通过jQuery改变元素的CSS类或数据属性来实现，从而控制划词搜索的行为。
这个教程提供了一个基本的框架，开发者可以在此基础上扩展和完善，实现更复杂、功能更全面的划词搜索功能。对于想要学习如何使用jQuery增强网页交互性的开发者来说，这是一个很好的起点。
基于基于jquery的划词搜索实现（备忘）的划词搜索实现（备忘）
参照页面://www.jb51.net/article/24825.htm
一、一、DragSearchByJQuery.aspx页面（调用页面）页面（调用页面）
代码如下:
<head runat=”server”>
<title>划词搜索</title>
<style type=”text/css”>
/*search*/
a.GL_s{width:68px;height:20px;display:block;border:solid 1px #2b7ab7;line-height:20px;padding-
left:18px;color:#084f10;font-size:12px;font-weight:bold;background:url(search.gif) no-repeat left;text-decoration:none;}
a.GL_s:link{filter:alpha(opacity=71);-moz-opacity:0.7;opacity: 0.7;}
a.GL_s:hover{filter:alpha(opacity=100);-moz-opacity:1.0;opacity: 1.0;}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<div style=”text-align: center;”>
<input type=”button” value=”关闭/打开划词功能” />
<p>
《红楼梦》是我国古代四大名著之一，属章回体长篇小说，成书于1784年（清乾隆帝四十九年）。梦觉主人序本正式题为
《红楼梦》，它的原名《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。是我国古代最伟大的长篇小说，也是世
界文学经典巨著之一。作者曹雪芹。现通行的续作是由高鹗续全的一百二十回《红楼梦》。
</p>
<p>
if you want to search,one way is to Google,one of the others is Baidu</p>
</div>
</form>
</body>
</html>
相关JQuery
代码如下:
<script type=”text/javascript” src=”JS/JQuery/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” language=”javascript”>
//划词搜索
var GLS = {};
GLS.startObj = null;
GLS.isdb = false;
GLS.allow = true;
GLS.isallow = function() {
if (GLS.allow) {
GLS.allow = false;
alert(‘搜索已关闭’);
}
else {
GLS.allow = true;
alert(‘搜索已打开’);
}
};
GLS.dblclick = function() {
GLS.isdb = true;
};
GLS.mousedown = function(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : “”);
if (evt) {
GLS.startObj = (evt.target) ? evt.target : evt.srcElement;
}
};
GLS.mouseup = function(evt) {
var obj;
var strlen;
evt = (evt) ? evt : ((window.event) ? window.event : “”);
if (evt) {
obj = (evt.target) ? evt.target : evt.srcElement;
strlen = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
}
下载后可阅读完整内容，剩余3页未读，立即下载
2019-07-04 上传
2020-12-09 上传
2023-05-23 上传
2023-04-19 上传
2023-11-17 上传
2023-06-28 上传
2023-09-29 上传
2023-05-23 上传
2023-07-15 上传
weixin_38698018
- 粉丝: 6
- 资源: 902
我的内容管理
展开
最新资源
- ASP.NET数据库高级操作：SQLHelper与数据源控件
- Windows98/2000驱动程序开发指南
- FreeMarker入门到精通教程
- 1800mm冷轧机板形控制性能仿真分析
- 经验模式分解：非平稳信号处理的新突破
- Spring框架3.0官方参考文档：依赖注入与核心模块解析
- 电阻器与电位器详解：类型、命名与应用
- Office技巧大揭秘：Word、Excel、PPT高效操作
- TCS3200D: 可编程色彩光频转换器解析
- 基于TCS230的精准便携式调色仪系统设计详解
- WiMAX与LTE：谁将引领移动宽带互联网?
- SAS-2.1规范草案：串行连接SCSI技术标准
- C#编程学习：手机电子书TXT版
- SQL全效操作指南：数据、控制与程序化
- 单片机复位电路设计与电源干扰处理
- CS5460A单相功率电能芯片：原理、应用与精度分析
