簡化js編程（js代碼編寫）

本文目錄一覽：

• 1、使用JS函數簡化代碼
• 2、這一段JS應該如何簡化？
• 3、請高手幫我簡化下面這段js代碼,看s1,s2,s3,s4,s5,s6….能不能寫成個循環,這樣就不用每次修改js了，謝謝！
• 4、學習Web前端要知道的JavaScript、Ajax、jQuery知識
• 5、js簡化代碼~請高手指教
• 6、求助這段JS代碼怎麼簡化，實現滑鼠經過圖片時透明度為1，離開時透明度為0.5

使用JS函數簡化代碼

建議用jquery 一次性綁定事件 回調函數中再通過對象的index改變相應的背景圖，代碼會精簡很多

script src=””/script

script

    $(function() {

        $(“#myUl li”).on(“mouseover”, function () {

            $(this).addClass(“current”)

                .css(“background-image”, “url(img/0” + ($(this).index() + 1) + “big.jpg)”);

        }).on(“mouseout”, function () {

            $(this).removeClass(“current”)

                .css(“background-image”, “url(img/0” + ($(this).index() + 1) + “.jpg)”);

        })

    })

/script

這一段JS應該如何簡化？

$(“.hoverdiv”).hover(function(){//移入

$(“.num”).addClass(“num_active”)

},function(){//移出

$(“.num”).removeClass(“num_active”)

});

給需要移入效果的div加一個公用class為hoverdiv，如class=”product hoverdiv”

給需要變色的num加一個公用class為num_active，如class=”num0 num_active”

.num_active{background-color:yellow}//移入時的背景色

請高手幫我簡化下面這段js代碼,看s1,s2,s3,s4,s5,s6….能不能寫成個循環,這樣就不用每次修改js了，謝謝！

html

head

title

/title

style

.select-search{

cursor:pointer;

}

.lanmu{

display:none;

}

/style

script

function lanmuBlock(){

document.getElementById(‘x2’).style.display=(“block”);

}

function lanmuNone(){

document.getElementById(‘x2’).style.display=(“none”);

}

//——————————下拉部分——————————————–

function lanmu(s){

document.getElementById(‘s0’).innerHTML=s.innerHTML;

document.getElementById(‘typeid’).value=s.value;

}

/script

/head

body

div id=”x1″ class=”select-search” onmouseover=”lanmuBlock();” onmouseout=”lanmuNone();”

a id=”s0″全站搜索/a

span id=”x2″ class=”lanmu”

a id=”s1″ onclick=”lanmu(this);lanmuNone();” value=”0″全站/a

a id=”s2″ onclick=”lanmu(this);lanmuNone();” value=”1″美女/a

a id=”s3″ onclick=”lanmu(this);lanmuNone();” value=”2″帥哥/a

a id=”s4″ onclick=”lanmu(this);lanmuNone();” value=”3″靚仔/a

a id=”s5″ onclick=”lanmu(this);lanmuNone();” value=”4″靚女/a

a id=”s6″ onclick=”lanmu(this);lanmuNone();” value=”5″謝謝/a

/span

/div

input id=”typeid” type=”hidden” value=”0″ name=”typeid”

/body

/html

學習Web前端要知道的JavaScript、Ajax、jQuery知識

今天小編要跟大家分享的文章是關於學習Web前端要知道的JavaScript、Ajax、jQuery知識。今天小編將詳細解讀JavaScript、ajax、jQuery是什麼？他們可以實現什麼？想要學習Web前端的小夥伴們來和小編一起看一看吧！

1、JavaScript

·___ㄒ澹

javaScript的簡寫形式就是JS，是由Netscape公司開發的一種腳本語言，一種廣泛用於客戶端Web開發的腳本語言，常用來給HTML網頁添加動態功能（其編寫的程序可以被嵌入到HTML或XML頁面中，並直接在瀏覽器中解釋執行）。

·___槌剎糠鄭

核心（ECMAScript）、文檔對象模型（DocumentObjectModel，簡稱DOM）、瀏覽器對象模型（BrowserObjectModel，簡稱BOM）

·___枋觶

Javascript就是適應動態網頁製作的需要而誕生的一種新的編程語言，如今越來越廣泛地使用於Internet網頁製作上。

Javascript是由Netscape公司開發的一種腳本語言（scripting

language），或者稱為描述語言。在HTML基礎上，使用Javascript可以開發互動式Web網頁。

Javascript的出現使得網頁和用戶之間實現了一種實時性的、動態的、交互性的關係，使網頁包含更多活躍的元素和更加精彩的內容。

Javascript短小精悍，又是在客戶機上執行的，大大提高了網頁的瀏覽速度和交互能力。同時它又是專門為製作Web網頁而量身定做的一種簡單的編程語言。

主流的javaScript框架有：YUI,Dojo，Prototype，jQuery…

2、AJax

·___ㄒ澹

AJAX即「AsynchronousJavaScriptandXML」（非同步JavaScript和XML)，AJAX並非縮寫詞，而是由JesseJamesGaiiett創造的名詞，是指一種創建互動式網頁應用的網頁開發技術。

_JAX不是一個技術，它實際上是幾種技術，每種技術都有其獨特之處，合在一起就成了一個功能強大的新技術。

·___槌桑

基於XHTML和CSS標準的表示；

使用Document

ObjectModel進行動態顯示和交互；

使用XML和XSLT做數據交互和操作；

使用XML

HttpRequest與伺服器進行非同步通信；

使用JavaScript綁定一切。

·___枋觶

Ajax是結合了Java技術、XML以及JavaScript等編程技術，可以讓開發人員構建基於Java技術的Web應用，並打破了使用頁面重載的管理。

Ajax技術使用非同步的HTTP請求，在Browser和WebServer之間傳遞數據，使Browser只更新部分網頁內容而不重新載入整個網頁。

Ajax是使用客戶端腳本與Web伺服器交換數據的Web應用開發方法。這樣，Web頁面不用打斷交互流程進行重新加裁，就可以動態地更新。使用Ajax，用戶可以創建接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面。

3、jQuery

·___ㄒ澹

jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML

documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。

·___氐悖

輕量級、鏈式語法、CSS1-3選擇器、跨瀏覽器、簡單、易擴展；

jQuery是一種獨立於伺服器端代碼的框架，獨立於ASP.NET或者JAVA；

jQuery是當前很流行的一個JavaScript框架，使用類似於CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴展性，擁有不少插件。

·___枋觶

對於程序員來說，簡化javascript和ajax編程，能夠使程序員從設計和書寫繁雜的JS應用中解脫出來，將關注點轉向功能需求而非實現細節上，從而提高項目的開發速度。

對於用戶來說，改善了頁面的視覺效果，增強了與頁面的交互性，體驗更絢麗的網頁物資。javaScript框架實際上是一系列工具和函數。

4、三者的關係

下面我用一張導圖來闡述這三者的關係：

解釋：

javaScript是用於Web客戶端開發的腳本語言，Ajax是基於JS語言，主要組合JS、CSS、XML三種技術的新技術，是用於創建互動式網頁應用的網頁開發技術。jQuery是JS的框架，基於JS語言，集合Ajax技術開發出來的JS庫，封裝JS和Ajax的功能，提供函數介面，大大簡化了Ajax，JS的操作。

以上就是小編今天為大家分享的關於學習Web前端要知道的JavaScript、Ajax、jQuery知識的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助。想要了解更多Web前端知識記得關注北大青鳥Web培訓官網。最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師！

原文鏈接：#/u/155352/blog/789347

SHAPE\*MERGEFORMAT

SHAPE\*MERGEFORMAT

js簡化代碼~請高手指教

定義一個getMap方法：

function getMap(){

return new qq.maps.Map(document.getElementById(‘container’), {

disableDefaultUI: true,

panControl: false,

zoomControl: false,

scaleControl: false,

center: center,

zoom: 13,

zoomControlOptions: {

//設置縮放控制項的位置為相對左方中間位置對齊.

// position: qq.maps.ControlPosition.LEFT_CENTER,

}

});

}

兩處紅框中的地方改成：

map=getMap();即可

求助這段JS代碼怎麼簡化，實現滑鼠經過圖片時透明度為1，離開時透明度為0.5

樓上那個也可以。

下面說的是純JS 如果你圖片很多會比上面的方便

1將圖片所用變數 弄成一個數組，

var yiguitu1;

var myarry=[];

for(var i=0;in;i++){

    var j=yiguitu1+i;

    myarry.push(j);

};

2.將你需要的事件做成for循環

foreach(m in myarry){

    m.onmouseover=function(m){

        m.style.opacity=1;

    }

    m.onmouseout=function(m){

        m.style.opacity=0.5;

    }

}