一忙菠、了解jQuery
jQuery是一個(gè)js函數(shù)庫犹赖，可以看作它實(shí)現(xiàn)的就是js，但從代碼上看更簡(jiǎn)單了。
1.html 的元素選取
一個(gè)格式上的$(" ") 認(rèn)識(shí)了選擇器吮炕，相當(dāng)與原生js中通過document.getElement......來獲取的功能
對(duì)html元素的操作也是類似的
2.常用jQuery事件
$(document).ready()
$("p").dblclick(function(){ $(this).hide();});
3.認(rèn)清jQuery對(duì)象與DOM對(duì)象的差異
通過jQuery包裝后的對(duì)象是一個(gè)類數(shù)組對(duì)象
jQuery是一個(gè)類數(shù)組對(duì)象，而DOM對(duì)象就是一個(gè)單獨(dú)的DOM元素。
4.索引的注意：
jQuery實(shí)現(xiàn):nth-child(n)從1開始計(jì)數(shù)，:nth-child(index)從1開始的悲龟，而eq(index)是從0開始的
nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計(jì)算，后者從后往前計(jì)算
額冰寻。须教。還沒有寫demo
二、完善自己以前寫的小例子
1.百度首頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下斩芭，你就知道</title>
<link rel="shortcut icon" type="images/x-icon" >
<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" >新聞</a>
<a class="setWide" >hao123</a>
<a class="setWide" >地圖</a>
<a class="setWide" >視頻</a>
<a class="setWide" >貼吧</a>
<a class="setWide" >學(xué)術(shù)</a>
<a >登錄</a>
<a class="setting"><a href="#">設(shè)置</a>
</a>
<div class="product-list">
<input class="more-product" type="submit" value="更多產(chǎn)品" name="submit" />
<div class="list">
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a >糯米</a>
</span>
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a >音樂</a>
</span>
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a >知道</a>
</span>
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a >文庫</a>
</span>
<span>
<img src="#" style="width:30px;height:30px;" alt="" ><br><a >風(fēng)云榜</a>
</span>
<span>
<a style="font-size: 12px;">全部產(chǎn)品>></a>
</span>
</div>
</div>
</span>
</div>
</div>
<div class="pic">
<img class="logo" src="http://www.baidu.com/img/bd_logo1.png" title="點(diǎn)擊一下轻腺，了解更多"/>
</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 >把百度設(shè)為主頁</a>
<a >關(guān)于百度</a>
<a class="Line" >About Baidu</a>
<a >百度推廣</a>
</div>
<div class="bottom">
<p>
?2018 Baidu <a style="margin: 0 3px">使用百度前必讀</a>
<a style="margin: 0 3px">意見反饋</a> 京ICP證030173號(hào)
<i class="icp"></i>
<a >京公網(wǎng)安備11000002000001號(hào)</a>
<i class="gongan"></i>
</p>
</div>
<script>
var oText = document.getElementById("search-text");
oSug = document.querySelector("#suggest");
lis = document.getElementsByClassName("li1");
// 當(dāng)在input框中鍵盤彈起觸發(fā)
oText.onkeyup = function(){
oSug.style.display = oText.value?"block":"none";
var osc = document.createElement("script");
// 引入百度的url,然后將oText文本框中輸入的內(nèi)容連接到url,在后面在運(yùn)行自己的方法，同時(shí)也完成頁面跳轉(zhuǎn)完成搜索的核心
osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+oText.value+"&cb=record";
document.body.appendChild(osc);
//按下回車跳轉(zhuǎn)頁面
if(event.keyCode===13){
window.location.+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.+oText.value;
}
//單擊body中的任意地方可以隱藏li
document.body.onclick = function(){
oSug.style.display = "none";
};
//單擊百度btn的時(shí)候觸發(fā),并跳到新的連接
var button = document.querySelector("#search-button");
button.onclick = function(){
var oText = document.getElementById("search-text").value;
window.location.+oText;
}
</script>
</body>
</html>
2.文字查找替換
（上個(gè)學(xué)期的新生作業(yè)里的）
<!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>生活是人間在繁華的演出划乖，沉睡是所有故事的收尾贬养、誰不是生命的漫游者？
誰沒在云端閑情過琴庵？
生命煤蚌，只是一場(chǎng)唯有一次的真實(shí)夢(mèng)境。
新的陽光里细卧，香樟哭了，那些憂傷化作清晨的霧被蒸干了筒占。
因?yàn)橛嘘柟獾目锰懊恚阏敛鸥曳潘翜I珠，那么翰苫，我的眼淚呢止邮？
</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>");
//顯示結(jié)果
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>");
//顯示結(jié)果
p.innerHTML = show;
}
}
</script>
</body>
</html>
這之前的嘗試的實(shí)例中領(lǐng)略了CSS對(duì)頁面布局樣式的作用奏窑，在這個(gè)例子中則認(rèn)識(shí)到JS在功能上的實(shí)現(xiàn)导披，類似的還有選項(xiàng)卡的切換功能......
3.文字搬運(yùn)
(這個(gè)還差一點(diǎn)，快了埃唯。撩匕。)
