简化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;

    }

}