javascript实现html中关键字查询
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#content{
width :500px;
height:300px;
border: 1px solid ###;
margin: 30px auto;
}
#search{
width :500px;
height:300px;
border: 1px;
margin: 30px auto ; }
#change{
background: yellow; }
</style>
<script> window.onload=function()
{
var btn=document.getElementById('btn');
var texts=document.getElementById('texts');
//var content=document.getElementById('content');
var content=document.getElementsByClassName('con')[]; var str=content.innerHTML; console.log(str);
//console.log(str)
btn.onclick=function(){ var val=texts.value;
if (val=="")
{
alert("请输入内容");
}
if(str.indexOf(val)==-)
{
alert('你输入的内容不在范围内');
}
else
{
content.innerHTML=str.split(val).join('<span id="change">'+val+'</span>');
}
}
} </script>
</head>
<body>
<div class="con" id="content" >
. 您可以上传或是从邮件附件中摘取文件并保存于您邮箱的网络存储空间中, 您将可以在发送邮件时直接将网络存储中的附件加入到待发邮件中. . 因为存储文件夹使用的是您的邮箱空间, 所以您需要注意合理分配存储文件夹的数据量. . 在您删除存储文件夹下的子文件夹时, 需要先将子文件夹中的文件转移或删除, 否则子文件夹无法被删除. . 您可以通过设置密码或是不设置密码的方式共享您的存储文件夹数据. </div>
<div
<div class="con1" id="content" >
. 在您删除存储文件夹下的子文件夹时, 需要先将子文件夹中的文件转移或删除, 否则子文件夹无法被删除. . 您可以通过设置密码或是不设置密码的方式共享您的存储文件夹数据.
</div> <input type="text" id="texts"/>
<input type="button" value="查找" id ="btn"/>
</div> </body>
</html>
实现效果：
javascript实现html中关键字查询的更多相关文章
- MySQL数据库之单表查询中关键字的执行顺序
目录 MySQL数据库之单表查询中关键字的执行顺序 1 语法顺序 2 执行顺序 3 关键字使用语法 MySQL数据库之单表查询中关键字的执行顺序 1 语法顺序 select distinct from ...
- 细数Javascript技术栈中的四种依赖注入
作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...
- c# 通过关键字查询
1:首先需要在前端显示界面View视图中添加查询按钮: <div> <div>@Html.NopLabelFor(model => model.IndividualNam ...
- 【本周面试题】第1周 - 获取URL中的查询字符串参数、get和post的区别
[此系列优先解决自己经历的面试题] 2018.11.16 面试题一:你如何获取浏览器URL中查询字符串中的参数? 题目代码: 测试地址为 https://www.sogou.com/tx?query= ...
- Linq中关键字的作用及用法
Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...
- javascript call与apply关键字的作用
apply接受两个参数.第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合. call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数. 1 2 3 4 ...
- 大型 JavaScript 应用架构中的模式
原文:Patterns For Large-Scale JavaScript Application Architecture by @Addy Osmani 今天我们要讨论大型 JavaScript ...
- 完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
- ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
随机推荐
- 完美解决IE8不支持margin auto问题
不用js,超级简单,完美支持. body下的整个container .container { overflow: hidden; margin: 0px auto; text-align: cente ...
- C#里的应用程序域AppDomain
首先,描述一下AppDomain是什么:当一个程序集被执行时,系统就会自动为其创建一个AppDomain,每一个AppDomain属于某个进程,一个进程内可以有多个AppDomain:每个AppDom ...
- INotitypropertyChanged
WPF数据绑定(要是后台类对象的属性值发生改变,通知在“client界面与之绑定的控件值”也发生改变须要实现INotitypropertyChanged接口) MainWindow.xaml < ...
- 弹性盒布局（flex）
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...
- windows服务器nginx日志分割
编写一个bat文件 @echo off rem @echo off rem 取1天之前的日期 echo wscript.echo dateadd(,date) >%tmp%\tmp.vbs fo ...
- nginx在win系统下的安装配置与tomcat集成springmvc框架
先来一个常用命令 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止 ...
- 【洛谷P2907】 【USACO08OPEN】农场周围的道路 水模拟分治
P2907 [USACO08OPEN]农场周围的道路Roads Around The Farm 题目描述 Farmer John's cows have taken an interest in ex ...
- mvp例子与MVVM例子
VMP例子 <!-- 从百度CDN上面找个jquery的链接 --> <!DOCTYPE html> <html lang="en"> < ...
- 手机号测吉凶python代码
根据数理数来测电话后四位吉凶: 数理数 解释批注 0点特殊.......大吉 1大展鸿图．可获成功吉 2一盛一衰．劳而无功凶 3蒸蒸日上．百事顺遂吉 4坎坷前途．苦难折磨凶 5生意欣荣．名利双收吉 6 ...
- golang学习资料必备
核心资料库 https://github.com/yangwenmai/learning-golang