如何用jQuery实现并且搜索a标签时要用find方法怎么实现

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用jQuery实现并且搜索a标签时要用find方法怎么实现相关的知识，希望对你有一定的参考价值。

给页面中id为abc的div绑定一个click事件,让他将页面中所有类别为back的标记的边框设置为红色,2个像素的宽度,操作完后,进一步搜索a标签,设置他们的内容为:"友情链接"

参考技术A <!DOCTYPE html>
<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
jQuery (function ($)

$ ("#abc").click (function ()

$ (".back").css (

border : "2px solid red"
);
$("a").text("友情链接");
);
);//采纳即可
</script>
</head>
<body>
<div id="abc">aaa</div>
<div id="abc">aaa</div>
<div id="abc">aaa</div>
<a class="back">bbb</a>
<a class="back">bbbb</a>
</body>
</html>本回答被提问者和网友采纳

静态网页中如何用js实现搜索功能？

<table id="test">
<tr>
<td><input value="testsetsetestestsetsetsetset"></input></td>
<td><input value="aaabbbaaabbbaaa"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
</tr>
<tr>
<td><input value="aaacccbbbbcccc"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
</tr>
</table>
<textarea name="txtBox" rows="7" cols="50" id="txtBox">
菊花台 (满城尽带黄金甲主题曲)
歌手：周杰伦 专辑：依然范特西

你的泪光 柔弱中带伤
惨白的月弯弯 勾住过往
夜太漫长 凝结成了霜
是谁在阁楼上冰冷的绝望
雨轻轻淌 朱红色的窗
我一生在纸上 被风吹乱
梦在远方 化成一缕霞
随风飘散 你的模样

菊花惨淡地伤 你的笑容已泛黄
花落人断肠 我心事静静淌
北风乱夜未央 你的影子剪不断
徒留我孤单在湖面生霜
</textarea><br>

<input type="text" value="输入要查询的内容" id="txtFind">

<input type="button" value="表查找" onclick="searchclick()">
<input type="button" value="简单查找" onclick="findText(txtFind.value)">

<script language="javascript">
var searchobj = new Object;
var rng = new Object;
searchobj.row = -1;
searchobj.col = -1;
function searchclick()
findText2("test",txtFind.value);

function findText2(tabname,str)
var tab = document.getElementById(tabname);
var rowobj = tab.rows;
//行数
var rownum = rowobj.length;
if(searchobj.row != -1 && searchobj.col != -1 )
var trobj = tab.rows[searchobj.row];
//列数
var tdnum = trobj.cells.length;
//定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",rowobj[searchobj.row].cells[searchobj.col].childNodes[0].value.length);
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)
return;

//如果上次查询结果是最后一列
if(searchobj.col < tdnum-1)
for(var ii=searchobj.col+1;ii<tdnum;ii++)
rng = rowobj[searchobj.row].cells[ii].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)
searchobj.col = ii;
return;



//如果上次查询结果不是最后一行
if(searchobj.row != rownum-1)
for(var i=searchobj.row+1;i<rownum;i++)
var trobj = tab.rows[i];
//列数
var tdnum = trobj.cells.length;
for(var j=0;j<tdnum;j++)
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT")
rng = rowobj[i].cells[j].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)
searchobj.row = i;
searchobj.col = j;
return;


if(i==rownum-1 && j==tdnum-1)
searchobj.row = -1;
searchobj.col = -1;
findText2(tabname,str);




else
searchobj.row = -1;
searchobj.col = -1;
findText2(tabname,str);


else

for(var i=0;i<rownum;i++)
var trobj = tab.rows[i];
//列数
var tdnum = trobj.cells.length;
for(var j=0;j<tdnum;j++)
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT")
rng = rowobj[i].cells[j].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)
searchobj.row = i;
searchobj.col = j;
return;


if(i==rownum-1 && j==tdnum-1)
alert("没有您要查找的内容");





var rng = document.body.createTextRange();
function findText(str)

debugger;
if(str=="")
return;
//定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",txtBox.value.length);
//搜索到后选择文本
if(rng.findText(str))
rng.select();
//搜索到最后的范围还是找不到，则提示搜索完毕，并重新恢复rng最初的范围(否则无法执行新搜索)
if(rng.text!=str)

alert("搜索完毕");
rng = txtBox.createTextRange();

rng = txtBox.createTextRange();


</script> 参考技术A 我的理解:
当前页面只显示一个按钮和一个文本框
新开一个页面,专门用来显示结果

以下内容为在网上找到的搜索代码
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!--＃i nclude file="manage/inc/config.asp"-->
<!--＃i nclude file="inc/conn.asp"-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>爱T发明书店</title>
<link href="/blog/style.css" rel="stylesheet" type="text/css">
</style>
<!-- European format dd-mm-yyyy -->
<script language="JavaScript" src="/blog/calendar.js"></script>

</head>

<body>
<!--＃i nclude file="head.htm"-->

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="219" align="left" valign="top"><!--＃i nclude file="left.asp"--></td>
<td width="561" align="left" valign="top">
<br> <script language=javascript>
var whitespace = " \t\n\r";

function IsWhitespace (s)

var i;
if (IsEmpty(s)) return true;

for (i = 0; i < s.length; i++)

var c = s.charAt(i);
if (whitespace.indexOf(c) == -1) return false;

return true;


function IsEmpty(s)

return ((s == null) || (s.length == 0))


function IsDate(fDate)


var arrDaysInMonth=new Array(12);
arrDaysInMonth[1]=31;
arrDaysInMonth[2]=29;
arrDaysInMonth[3]=31;
arrDaysInMonth[4]=30;
arrDaysInMonth[5]=31;
arrDaysInMonth[6]=30;
arrDaysInMonth[7]=31;
arrDaysInMonth[8]=31;
arrDaysInMonth[9]=30;
arrDaysInMonth[10]=31;
arrDaysInMonth[11]=30;
arrDaysInMonth[12]=31;

if (IsEmpty(fDate))
return true

var NameList=fDate.split("-");
if (NameList.length!=3)
return false

if (!(IsYear(NameList[0]) && IsMonth(NameList[1]) && IsDay(NameList[2])) )
return false

if ( NameList[1]>arrDaysInMonth[NameList[1]] )
return false

if ( (NameList[1]==2) && (NameList[2]>DaysInFebruary(NameList[0]) ) )
return false

return true



function search()

var name = document.forms['frmdata'].elements['name'].value;
var author = document.forms['frmdata'].elements['author'].value;
var manufacturer = document.forms['frmdata'].elements['manufacturer'].value;
var smallprice = document.forms['frmdata'].elements['smallprice'].value;
var largeprice = document.forms['frmdata'].elements['largeprice'].value;
var enabledate = document.forms['frmdata'].elements['enabledate'].value;
var expiredate = document.forms['frmdata'].elements['expiredate'].value;

if (!IsWhitespace(enabledate))

if (!IsDate(enabledate))

alert("出版日期 开始日期格式错误!");
return false;



if (!IsWhitespace(expiredate))

if (!IsDate(expiredate))

alert("出版日期 结束日期格式错误!");
return false;



var allNotEmpty = (!IsWhitespace(name)) ||
(!IsWhitespace(author)) ||
(!IsWhitespace(manufacturer)) ||
(!IsWhitespace(smallprice)) ||
(!IsWhitespace(largeprice))||
(!IsWhitespace(enabledate)) ||
(!IsWhitespace(expiredate));

if (!allNotEmpty)

alert("必需输入一个搜索条件");
return false;


if (!IsWhitespace(smallprice))

if (!IsPlusNumeric(smallprice))

alert("价格数据不合法");
return false;



if (!IsWhitespace(largeprice))

if (!IsPlusNumeric(largeprice))

alert("价格数据不合法");
return false;



if ((!IsWhitespace(enabledate)) && (!IsWhitespace(expiredate)))

if (enabledate>expiredate)

alert("出版日期范围错误");
return false;



if ((!IsWhitespace(smallprice)) && (!IsWhitespace(largeprice)))

if (parseFloat(smallprice)>parseFloat(largeprice))

alert("价格范围错误");
return false;



</script> <br> <table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="/blog/images/w.gif"></td>
<td style="color:#415373">搜索图书</td>
</tr>
</table> <br> <FORM name=frmdata method=get action="rsearch.asp">
<TABLE cellSpacing=10 cellPadding=0 width="100%" border=0>

<TBODY>
<TR>
<TD align=right width="31%" height=30>商品名称：</TD>
<TD width="69%"><INPUT name=name class="inputstyle">
</TD>
</TR>
<TR>
<TD align=right width="31%" height=30>作者名称：</TD>
<TD width="69%"><INPUT name=author class="inputstyle">
</TD>
</TR>
<TR>
<TD align=right width="31%" height=30>出版社：</TD>
<TD width="69%"><INPUT name=manufacturer class="inputstyle">
</TD>
</TR>
<TR>
<TD align=right width="31%" height=28>出版时间：</TD>
<TD vAlign=center width="69%"><INPUT name=enabledate class="inputstyle" size=12>
<a
href="javascript:cal1.popup();"><img height=16 alt=点击选择日期
src="/blog/images/cal.gif" width=16 border=0></a>  至 
<INPUT name=expiredate class="inputstyle" size=12>
<a
href="javascript:cal2.popup();"><img height=16 alt=点击选择日期
src="/blog/images/cal.gif" width=16 border=0></a> <script language=JavaScript>
var cal1 = new calendar1(document.forms['frmdata'].elements['enabledate']);
cal1.year_scroll = true;
cal1.time_comp = false;
var cal2 = new calendar1(document.forms['frmdata'].elements['expiredate']);
cal2.year_scroll = true;
cal2.time_comp = false;
</script></TD>
</TR>
<TR>
<TD align=right width="31%" height=30>价格范围：</TD>
<TD width="69%"> <input name="smallprice" type="text" id="smallprice" size="5" >
至

<input name="largeprice" type="text" id="largeprice"
size="5" >
</TD>
</TR>
<TR>
<TD align=right height=30>分类：</TD>
<TD><select name=code>
<option value="" selected>所有图书</option>
<%
set rs=server.CreateObject("adodb.recordset")
rs.open "select * from category",conn,1,1
do while not rs.eof
%>
<option value="<%=rs("categoryid")%>" ><%=rs("category")%></option>
<%
rs.movenext
loop
rs.close
set rs=nothing
%>
</select></TD>
</TR>
<TR>
<TD align=right height=30>排序字段：</TD>
<TD><input name="OrderField" type="radio" value="adddate" checked>
添加日期  <input type="radio" name="OrderField" value="productdate">
出版日期
<input type="radio" name="OrderField" value="price2">
价钱(会员价)
<br>
<br> <input type="radio" name="OrderField" value="vipprice">
价钱(VIP)
<input type="radio" name="OrderField" value="pagenum">
页数    <input type="radio" name="OrderField" value="discount">
折扣</TD>
</TR>
<TR>
<TD align=right width="31%" height=30>排序方式：</TD>
<TD width="69%"><input type="radio" name="Order" value="ASC">
升序
<input name="Order" type="radio" value="DESC" checked>
降序</TD>
</TR>
<TR align=center>
<TD height=40 colSpan=2><INPUT type=submit value=开始搜索 name=Submit2 onClick="return search()"> </TD>
</TR>

</TABLE>
</FORM></td>
</tr>
</table>

<!--＃i nclude file="foot.htm"-->
</body>
</html>本回答被提问者采纳

以上是关于如何用jQuery实现并且搜索a标签时要用find方法怎么实现的主要内容，如果未能解决你的问题，请参考以下文章

如何用jquery实现搜索到的关键字标红显示？

如何用jQuery和CSS3制作数字时钟

如何用jquery实现搜索到的关键字标红显示

如何用<dl>标签做表格而不用table标签

如何用jquery实现动态删除表格行

如何用jquery实现点击展开收缩效果