一、了解jQuery
jQuery是一个js函数库，可以看作它实现的就是js，但从代码上看更简单了。
1.html 的元素选取
一个格式上的$(" ") 认识了选择器，相当与原生js中通过document.getElement......来获取的功能
对html元素的操作也是类似的
2.常用jQuery事件
$(document).ready()
$("p").dblclick(function(){ $(this).hide();});
3.认清jQuery对象与DOM对象的差异
通过jQuery包装后的对象是一个类数组对象
jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
4.索引的注意：
jQuery实现:nth-child(n)从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算
额。。还没有写demo
二、完善自己以前写的小例子
1.百度首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
<link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">
<style>
.top {
width:100%;
height:40px;
}
.top>.title {
height:40px;
float:right;
}
.top>.title>span
{
line-height:40px;
float:right;
}
.top>.title>span>a {
font-size:13px;
text-decoration:underline;
color:#333;
}
.setWide {
font-weight:bold;
}
.product-list {
display: inline;
margin:0;
}
.more-product {
border:0;
height:25px;
width:65px;
font-size: 14px;
background: rgba(51, 102, 255, 0.82);
color:#fff;
text-align: center;
}
.list {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 90px;
background-color: #f9f9f9;
color: #000;
text-align: center;
border-left: 1px solid #e7e7e7;
transform: translate3d(100px,0,0);
padding-top: 50px;
}
.list span {
border-top: rgba(191, 191, 191, 0.44) solid 1px ;
text-align: center;
display: block;
padding: 10px
}
.product-list:hover .more-product {
background: transparent;
color: #333;
}
.product-list:hover .list {
transform: translate3d(0,0,0);
z-index: -1;
}
.list span a {
font-size: 14px;
text-decoration: none;
}
.pic{
text-align:center;
}
.logo{
height:130px;
}
.foot {
text-align: center;
}
.foot>a {
width:100%;
text-align: center;
font-size:12px;
color:darkgray;
margin-bottom: 10px;
text-decoration: underline;
}
.foot>.Line {
text-decoration: underline;
}
.bottom {
color:#767376;
padding-top: 0;
width:100%;
text-align: center;
font-size:12px;
}
.bottom>p {
margin:0;
line-height: 40px;
color:#767376;
}
.bottom>p>a {
text-decoration: underline;
color: #767376;
}
.icp,
.gongan {
width: 14px;
height: 17px;
display: inline-block;
overflow: hidden;
background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_5859e57.png) no-repeat;
}
.icp {
background-position: -600px -96px;
position: relative;
top: 3px;
}
.gongan {
background-position: -623px -96px;
position: relative;
top: 3px;
}
#search-text {
width: 540px;
height: 36px;
box-sizing: border-box;
margin-left: 355px;
margin-top: 3px;
text-indent: 4px;
}
#search-button {
width: 100px;
height: 36px;
background: #3385FF;
border: 0;
letter-spacing: 1px;
color: white;
margin-left: -5px;
font-size: 15px;
box-sizing: border-box;
transform: translateY(2px);
-webkit-box-sizing: border-box;
}
#search-button:hover {
cursor: pointer;
}
#suggest {
width: 540px;
margin: 0;
padding: 0;
margin-left: 355px;
list-style: none;
display: none;
border: 1px solid #E3E5E4;
}
#suggest li {
line-height: 36px;
background: white;
}
#suggest li:hover {
background: #F0F0F0;
}
.li1 {
text-indent: 4px;
}
</style>
</head>
<body>
<div class="top">
<div class="title">
<span>
<a class="setWide" href="http://news.baidu.com/">新闻</a>
<a class="setWide" href="https://www.hao123.com/">hao123</a>
<a class="setWide" href="https://map.baidu.com/">地图</a>
<a class="setWide" href="http://v.baidu.com/">视频</a>
<a class="setWide" href="https://tieba.baidu.com/index.html">贴吧</a>
<a class="setWide" href="http://xueshu.baidu.com/">学术</a>
<a href="https://passport.baidu.com">登录</a>
<a class="setting"><a href="#">设置</a>
</a>
<div class="product-list">
<input class="more-product" type="submit" value="更多产品" name="submit" />
<div class="list">
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a href="https://www.nuomi.com/?cid=002540">糯米</a>
</span>
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a href="http://music.baidu.com/">音乐</a>
</span>
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a href="https://zhidao.baidu.com/">知道</a>
</span>
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a href="https://wenku.baidu.com/">文库</a>
</span>
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a href="http://top.baidu.com/">风云榜</a>
</span>
<span>
<a href="http://top.baidu.com/" style="font-size: 12px;">全部产品>></a>
</span>
</div>
</div>
</span>
</div>
</div>
<div class="pic">
<img class="logo" src="http://www.baidu.com/img/bd_logo1.png" title="点击一下，了解更多"/>
</div>
<br/>
<div class="main-search">
<form>
<input id="search-text" type="text" name="search" value="" />
<input id="search-button" type="button" name="submit" value="百度一下" />
<ul id="suggest">
<li class="li1" onclick="show_it(this.id)"></li>
<li class="li1" onclick="show_it(this.id)"></li>
<li class="li1" onclick="show_it(this.id)"></li>
<li class="li1" onclick="show_it(this.id)"></li>
<li class="li1" onclick="show_it(this.id)"></li>
<li class="li1" onclick="show_it(this.id)"></li>
<li class="li1" onclick="show_it(this.id)"></li>
<li class="li1" onclick="show_it(this.id)"></li>
<li class="li1" onclick="show_it(this.id)"></li>
<li class="li1" onclick="show_it(this.id)"></li>
</ul>
</form>
</div>
<br><br><br><br><br><br><br><br>
<div class="c-img" style="text-align: center;">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" ><br>
<span style="font-size: 12px;font-weight: bold;color:dimgrey" >百度</span>
</div>
<br>
<div class="foot">
<a href="https://www.baidu.com/cache/sethelp/help.html" >把百度设为主页</a>
<a href="http://home.baidu.com/">关于百度</a>
<a class="Line" href="http://ir.baidu.com">About Baidu</a>
<a href="http://e.baidu.com/?refer=888">百度推广</a>
</div>
<div class="bottom">
<p>
©2018 Baidu <a href="http://www.baidu.com/duty/" style="margin: 0 3px">使用百度前必读</a>
<a href="http://jianyi.baidu.com/" style="margin: 0 3px">意见反馈</a> 京ICP证030173号
<i class="icp"></i>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>
<i class="gongan"></i>
</p>
</div>
<script>
var oText = document.getElementById("search-text");
oSug = document.querySelector("#suggest");
lis = document.getElementsByClassName("li1");
// 当在input框中键盘弹起触发
oText.onkeyup = function(){
oSug.style.display = oText.value?"block":"none";
var osc = document.createElement("script");
// 引入百度的url,然后将oText文本框中输入的内容连接到url,在后面在运行自己的方法，同时也完成页面跳转完成搜索的核心
osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+oText.value+"&cb=record";
document.body.appendChild(osc);
//按下回车跳转页面
if(event.keyCode===13){
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+oText.value;
}
};
var count = 0;
var search = 0;
var arr = oSug.children;
function record(json){
var jsonLength = 0;
for(var x in json.s){
jsonLength++;
}
for(var i=0;i<lis.length;i++){
if(jsonLength===0){
arr[i].innerHTML = null;
}else{
if(json.s[i]!=null){
arr[i].innerHTML = json.s[i];
}
}
}
if(count===lis.length-1){
count=0;
search=0;
}
count++;
search++;
}
//单击li中的值显示在input框中
function show_it(e){
oText.value = arr[e].innerHTML;
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+oText.value;
}
//单击body中的任意地方可以隐藏li
document.body.onclick = function(){
oSug.style.display = "none";
};
//单击百度btn的时候触发,并跳到新的连接
var button = document.querySelector("#search-button");
button.onclick = function(){
var oText = document.getElementById("search-text").value;
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+oText;
}
</script>
</body>
</html>
2.文字查找替换
（上个学期的新生作业里的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字查找替换</title>
<style>
#box {
border: 1px solid grey;
width: 600px;
margin: 0 auto;
}
.means {
display: inline-block;
}
span {
background: #ffa185;
}
</style>
</head>
<body>
<div id="box">
<div class="means">
<form>
查找：<input type="text" />
替换：<input type="text" />
<input type="button" value="查找" />
<input type="button" value="替换" />
</form>
</div>
<br>
<div>
<p>生活是人间在繁华的演出，沉睡是所有故事的收尾、谁不是生命的漫游者？
谁没在云端闲情过？
生命，只是一场唯有一次的真实梦境。
新的阳光里，香樟哭了，那些忧伤化作清晨的雾被蒸干了。
因为有阳光的揩拭，香樟才敢放肆泪珠，那么，我的眼泪呢？
</p>
</div>
</div>
<script>
window.onload = function () {
var oInput = document.getElementsByTagName("input");
var p = document.getElementsByTagName("p")[0];
var str = p.innerHTML;
oInput[2].onclick = function () {
var finder = oInput[0].value;
if (str.indexOf(finder)===-1) {
alert ("没有找到！")
}
else {
var show = str.split(finder).join("<span>" + finder + "</span>");
//显示结果
p.innerHTML = show;
}
}
oInput[3].onclick = function () {
var finder = oInput[0].value;
var change = oInput[1].value;
var show = str.split(finder).join("<span>"+change+"</span>");
//显示结果
p.innerHTML = show;
}
}
</script>
</body>
</html>
这之前的尝试的实例中领略了CSS对页面布局样式的作用，在这个例子中则认识到JS在功能上的实现，类似的还有选项卡的切换功能......
3.文字搬运
(这个还差一点，快了。。)
网友评论