<!doctype?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<link?rel="stylesheet"?href="./index.css">
</head>
<body>
????<div?id="box">
????????<div?id="content">
????????????目前主要針對的是javascript培訓，同時還提供了css教程、javascript視頻、js特效等，最新推出了外地學員們喜歡的javascript網(wǎng)絡課程服務，同時還為處于javascript入門階段的朋友錄制了大量javascript視頻，其中涉及了大量javascript基礎知識，希望妙味課堂推出的javascript網(wǎng)絡培訓課程能帶給大家更多驚喜。目前主要針對的是javascript培訓，同時還提供了css教程、javascript視頻、js特效等，最新推出了外地學員們喜歡的javascript網(wǎng)絡課程服務，同時還為處于javascript入門階段的朋友錄制了大量javascript視頻，其中涉及了大量javascript基礎知識，希望妙味課堂推出的javascript網(wǎng)絡培訓課程能帶給大家更多驚喜。目前主要針對的是javascript培訓，
????????</div>
????????<div?id="open">
????????????<a?href="javascript:;">展開</a>
????????????<ul?style="display:?none;">
????????????????<li><a?href="javascript:;">查找</a></li>
????????????????<li><a?href="javascript:;">替換</a></li>
????????????</ul>
????????</div>
????????<div?id="fun">
????????????<div?class="btns">
????????????????<a?href="javascript:;"?class="active">查找</a>
????????????????<a?href="javascript:;">替換</a>
????????????</div>
????????????<div?id="search"?>
????????????????<input?type="text"?/>
????????????????<input?type="button"?value=""?/>
????????????</div>
????????????<div?id="replace"?style="display:?block;">
????????????????<input?type="text"?/>
????????????????<input?type="text"?/>
????????????????<input?type="button"?value=""?/>
????????????</div>
????????</div>
????</div>
<script?type="text/javascript">
function?$(cssSelector,parent){
????parent?=?parent||document;?//?給?parent?設置了一個默認值是document
????var?els?=?parent.querySelectorAll(cssSelector);
????return?els.length?>?1?els:els[0];
};??
//?//?查找功能
//?(function(){
//?????var?content?=?$("#content");
//?????var?startContent?=?content.innerHTML;
//?????var?txt?=?$('#search?input[type="text"]');
//?????var?btn?=?$('#search?input[type="button"]');
//?????btn.onclick?=?function(){
//?????????var?str?=?txt.value;
//?????????if(!str.trim()){
//?????????????alert("請輸入要查找的內容");
//?????????????txt.focus();//讓元素得到焦點
//?????????????return;
//?????????}
//?????????var?inners?=?startContent.split(str);
//?????????//?判斷有沒有要查找的內容
//?????????if(inners.length?<?2){
//?????????????alert("沒有您要查找的內容");
//?????????????txt.focus();//讓元素得到焦點
//?????????????return;
//?????????}
//?????????content.innerHTML?=?inners.join('<mark>'+str+'</mark>');
//?????};
//?})();
//?查找功能
(function(){
????var?content?=?$("#content");
????var?startContent?=?content.innerHTML;
????var?txt?=?$('#replace?input[type="text"]');
????var?btn?=?$('#replace?input[type="button"]');
????btn.onclick?=?function(){
????????var?str?=?txt[0].value;
????????var?newStr?=?txt[1].value;
????????var?inners?=?startContent.split(str);
????????content.innerHTML?=?inners.join('<mark>'+newStr+'</mark>');
????????//?替換完之后，同步修改原始字符
????????startContent?=?inners.join(newStr);
????};
})();
</script>
</body>
</html>
