首页 / JAVASCRIPT / javaScript

javaScript

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javaScript，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含17392字，纯文字阅读大概需要25分钟。

内容图文

ajax

概念

ajax, asychronous javascript and xml  *异步*的javascript和xml技术。ajax并不是一名新技术。ajax就是javascirpt技术。 ajax是一种新的客户端（浏览器）和 服务器端 的交互模式。

同步与异步区别

同步交互模式：

         特点：

         1）下一个请求必须等上一个请求完毕才能发出

         2）服务器的响应会刷新整个网页（全局刷新）

异步交互模式：

         特点：    

         1）每个浏览器的请求是独立的，互不干扰的

         2）服务器的响应实现页面局部刷新

Ajax开发步骤

1：创建异步对象

IE浏览器低版本：ActiveXObject

非IE浏览器和IE高版本： XMLHttpRequest

function createAjax(){

                       var ajax;

                       try{

                                //IE低版本（IE高版本也兼容，非IE不行）

                                ajax = new ActiveXObject("microsoft.xmlhttp");

                       }catch(error){

                                //非IE或IE高版本也兼容:(火狐，谷歌等)

                                ajax = new XMLHttpRequest();                

                       }

                       return ajax;

             }         

2：根据服务器返回的结果局部更新网页（DOM编程）

//监听服务器的响应: onreadystatechange(): 监听服务器状态的返回

ajax.onreadystatechange = function(){

                                //服务器处理的状态ajax.readyState

                               

                                //响应码 ：ajax.status

                                //200: 一切都没问题

                                //404: 页面找不到

                                //500: 服务器代码出错了

                                //alert(ajax.status);

                                if(ajax.readyState==4 && ajax.status==200){

                                         //5.获取服务器返回的结果. responseText 以html格式返回的数据

                                         var curTime = ajax.responseText;

                                         document.getElementById("timeSpanID").innerHTML = curTime;

                                }

                       };

3：准备请求

准备请求方式（GET、POST），准备请求路径

var userName = this.value;  //拿当前value值

//请求方式        //注意：如果是POST提交，必须带上一个请求头：content-type,值为application/x-www-form-urlencoded

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

var method = "GET";

//请求路径

var url = "${pageContext.request.contextPath}/GetTimeServlet2"; //传送的servlet地址

ajax.open(method,url);

4：发送请求，同时携带内容（只有POST才可以）

var content = null;

ajax.send(content);    //get里面填null, post里面填需要传送的值

5：监听服务器的响应

6：获取服务器返回的结果

JSON概念和作用

概念

JSON，JavaScript Object Natation ，javascript对象标记语言，是javascript的子集

JSON是一种轻量级的*数据交换*格式。

Json语法

数据描述方式

:(冒号) :  描述键值对象（名称=值）   例如： name:"eric"

,（逗号）: 描述多个数据之间的并列关系  例如 ：  name:"eric",pass:"123"....

{}（大括号）： 描述的是对象    例如： {name:"eric",pass:"123"}

[](中括号)：  描述的是数组  例如：[{name:"eric",pass:"123"},{name:"jack",pass:"321"}]

 

元素值可具有的类型：string, number, object, array, true, false, null

$.ajax()返回参数设置：

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和

delete也可以使用，但仅部分浏览器支持。

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。 如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格 式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

xml：返回XML文档，可用JQuery处理。

 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

 json：返回JSON数据。

 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个 “?”为正确的函数名，以执行回调函数。

text：返回纯文本字符串。

beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义 HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

            function(XMLHttpRequest){

               this;   //调用本次ajax请求时传递的options参数

            }

complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

          function(XMLHttpRequest, textStatus){

             this;    //调用本次ajax请求时传递的options参数

          }

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

         (1)由服务器返回，并根据dataType参数进行处理后的数据。

         (2)描述状态的字符串。

         function(data, textStatus){

            //data可能是xmlDoc、jsonObj、html、text等等

            this;  //调用本次ajax请求时传递的options参数

error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错

 

json字符串转换工具

导包json-lib

T_Province pro = new T_Province();

                   pro.setId(1);

                   pro.setName("广东省");

                  

                   //排除某个字段不转换

                   JsonConfig jc = new JsonConfig();

                   jc.setExcludes(new String[]{"id"});

                   //如果需要全部获得就不需要增加jc对象

                   JSONArray ja = JSONArray.fromObject(pro,jc);

                   System.out.println(ja.toString());   

struts2整合json插件

原理：org.apache.struts2.json.JSONResult  把值栈数据转换成json字符串

步骤：

1：导入struts2-json插件的jar包

                   struts2-json-plugin-2.3.24.3.jar

2：Action代码

//查询省份

         public String listProvince(){

                   List<T_Province> provinces = addressDao.getAllProvices();

                   //把provinces数据转换成json字符串，并且返回json字符串

                   //把数据放入值栈的映射栈

                   ActionContext.getContext().put("province", provinces);

                   return "listPro";

         }

3：在struts.xml文件中配置，引用json-default包

<package name="default" extends="json-default(json包继承了默认的)" namespace="/">

                            <action name="address_*" class="gz.itcast.web.AddressAction" method="{1}">

                                     <result name="listPro" type="json">

                                               <!-- 指定需要转换的值栈的映射栈中的哪个名称的对象 -->

                                               <param name="root">#province</param>

                                     </result>

                            </action>

</package>                 //蓝色部分要一致

注意点：

1）需要转换的是映射栈，需要指定对象

                  

                   <result name="listPro" type="json">

                                               <param name="root">#province</param>

                   </result>

         2）默认情况下，对象栈的所有数据都会转换成JSON字符串

                   如果某个对象栈的属性不需要转换，则在属性的getter方法上面加上JSON注解

                   @JSON(serialize=false)

                   public Integer getProId() {

                            return proId;

                   }       

jQuery框架

注意：

Window. onload=function()与$(function(){   })与$(document).ready(function()差别

第一是需要整个页面数据加载完毕才能启动，第二个是页面标签树加载完毕启动，

最明显差异，多张img标签加载图片，第一个需要等待，而第二三只需要加载完标签就可以启动

 

概念：

jQuery是一个轻量级的前端的javascript的框架

(模拟jQuery在 day42_JSON&JQuery基础\01.代码\day42_02_myjquery\WebRoot)

jQuery开发步骤

1：导入jQuery的js的文件到项目中

jquery-1.11.1.js

2：在页面上使用<sciript>导入js文件

<script type="text/javascript" src="jquery-1.11.1.js"></script>

3：写代码开头必须是使用名称： $  或者 jQuery

例如：$("#div1").html("jQuery框架赋值");

页面接收json数据

1：后台传输对象时，页面接收格式为对象名.属性   {name: "eric"}

2：后台传输数组时，页面接收格式为数组名[下标]  [ "eric"  ]

Jquery语法

注意区分dom编程和jQuery对象，如果想让dom变成对象，就放入${(dom对象)}中。如果想让jquery变成dom就 btn.get(0)

 

${ 选择器}.方法   

常用jquery选择器

基本选择器

#id : 根据id属性值获取

.class: 根据class属性值获取

div： 根据标签名获取

*: 获取全部标签

#id,.class:  合并多个选择器的结果

属性选择器

A[name]: 查询包含name属性的A

//var elem = $("div[id]");

A[name=value]: 查询name属性值为value的A

//var elem = $("input[name=userName]");

表单选择器

:input: 选择input类型标签

:text:  获取单行文本输入框

基本过滤

:first 获取第一个 

//var elem = $("div:first");

:last  获取最后一个

//var elem = $("div:last");

:eq(i): 获取某一个  ，i从0开始

//var elem = $("div:eq(4)");

:even : 获取偶数个  0 2 4 6....

//var elem = $("div:even");

:odd: 获取奇数个 1 3 5 7...

//var elem = $("div:odd");

:gt  获取下标大于

//var elem = $("div:gt(2)");

:lt 获取下标小于

//var elem = $("div:lt(3)");

:not(): 排除某些

//var elem = $("div:not(.myCls)");

内容过滤

:contains():  获取文本内容为xx

//var elem = $("div:contains(8)");

:empty  获取空标签（没有内容的）

//var elem = $("div:empty");

:has():  获取内容里面的包含某些子标签

//var elem = $("table:has(div)");

可见过滤

:hidden   查询不可见的  ( hiiden   display:none)

//var elem = $("div:hidden");

:visible: 查询可见的

注意：可以多个选择器一起使用

例如：

$(".menu a[name]")   使用了.menu类选择器，空格为层级选择器，a标签，[name]属性选择器

常用jquery方法

val()   获取或设置标签的value值 <input type="button"/>

html()  获取或设置标签的文本内容   <span>xxxx</span>

ready() 页面加载完成后执行ready方法内容

size()  获取jQuery对象里面的对象个数

get(i)  获取jQuery对象里面某个DOM对象

eq(i)   获取jQuery对象的某个jQuery对象

each()  遍历jQuery对象   this: 代表DOM对象  $(this) 代表jQuery对象

parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合

parents() 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

jquery属性

attr: 只能设置非默认值标签的属性：  src,name,value

prop: 设置有默认值标签的属性： checked selected

获取表单属性

:checked     $("input:checked")    点中的单选框选择项

:selected           $("select option:selected")  下拉框选择

Javascript扩展包

Javascript时间选择器：

My97DatePicker：

1:导入My97DatePicker文件夹到js文件下

2:引入js和css

<script type="text/javascript" src="…/js/My97DatePicker/WdatePicker.js"></script>

3:在需要引入的标签中给一个onfocus事件发，和一个class值class="Wdate"

<input type="text" name="leaveItem.endDate" id="endDate"

                                                                                                       //可以给入时间格式

                                                        onfocus="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm:ss‘})"

                                                        class="Wdate"/>

javascript加载树：

zTree插件：

1：导入zTree插件到js下

2：引入相关的css和js

<link rel="stylesheet" href="../../../css/demo.css" type="text/css">

         <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

         <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>

         <script type="text/javascript" src="../../../js/jquery.ztree.core-3.4.js"></script>
3:导入div的展示窗口

<div class="zTreeDemoBackground left">

                   <ul id="treeDemo" class="ztree"></ul>

         </div>

4：写javascript代码展开树

<SCRIPT type="text/javascript">

                   var setting = {

                            view: {

                            showLine: false

                       }

};

 

                   var zNodes =[

                            { name:"父节点1 - 展开", open:true,

                                     children: [

                                               { name:"父节点11 - 折叠",

                                                        children: [

                                                                 { name:"叶子节点111"},

                                                                 { name:"叶子节点112"},

                                                                 { name:"叶子节点113"},

                                                                 { name:"叶子节点114"}

                                                        ]},

                                               { name:"父节点12 - 折叠",

                                                        children: [

                                                                 { name:"叶子节点121"},

                                                                 { name:"叶子节点122"},

                                                                 { name:"叶子节点123"},

                                                                 { name:"叶子节点124"}

                                                        ]},

                                               { name:"父节点13 - 没有子节点", isParent:true}

                                     ]},

                   ];

                  $(document).ready(function(){

                            $.fn.zTree.init($("#treeDemo"), setting, zNodes);

                   });

/*例如：

{ name:"系统模块",open:true,

children: [

{ name:"用户管理",icon:"图片地址" , url:"访问地址",target:"引用哪里"},]}*/

         </SCRIPT>

dtree插件:

1：导入zTree插件到js下

2：引入相关的css和js

<link rel="stylesheet" type="text/css" href="…/js/dtree/dtree.css"/>

 <script type="text/javascript" src="…/js/dtree/dtree.js"></script>

3:写入javascript代码展开

<div class="bodytextmenu" id="shumenu">

             <div class="shumenu" >

                      <script type="text/javascript">

                                     var d = new dTree("d","${path}/js/dtree/");

                                     d.add(0, -1, "办公管理系统");

                                     /* //id, pid, name, url, title, target, icon, iconOpen, open

                                               d.add(21,2,"用户管理","javascript:parent.mainframe.addTab(‘用户管理‘,‘admin/identity/selectUser.jspx‘)","用户管理");

                                               d.add(22,2,"角色管理","javascript:parent.mainframe.addTab(‘角色管理‘,‘admin/identity/selectRole.jspx‘)","角色管理");

                                               d.add(23,2,"操作管理","javascript:parent.mainframe.addTab(‘操作管理‘,‘/admin/identity/mgrModule.jspx‘)","操作管理");

                                               d.add(24,2,"部门管理");

                                               d.add(25,2,"职位管理");

                                     */

                                       $.ajax({

                                         url : "${path}/admin/loadMenuTreeAjax.jspx",

                                         type : "post",

                                         dataType : "json",

                                         async : false,

                                         success : function(adminLoad){

                                                   // data : [{id : ‘‘, pid : ‘‘, name : ‘‘, url : ‘‘},{id : ‘‘, pid : ‘‘, name : ‘‘, url : ‘‘}]

                                                   $.each(adminLoad, function(){

                                                            d.add(this.id, this.pid, this.name, "javascript:parent.mainframe.addTab(‘"+ this.name +"‘,‘"+ this.url +"‘)",this.name);

                                                   });

                                         },

                                         error : function(){

                                                   alert("数据加载失败！");

                                         }

                                     });

                                     document.write(d);

                                     //展开树节点

                                     d.openAll();

                            </script>

             </div>

    </div>

jQuery-zoom放大镜：

1：导入jQuery-zoom插件到js下

2：引入相关的css和js

<script type="text/javascript" src="…/js/jquery-1.11.3.min.js"/>

<script type="text/javascript" src="…/js/jquery-migrate-1.2.1.min.js"/>    

<script type="text/javascript" src="…/js/jqzoom_ev-2.3.1/js/jquery.jqzoom-core.js"/>      

<link rel="stylesheet" type="text/css" href="…/js/jqzoom_ev-2.3.1/css/jquery.jqzoom.css"/>

3：写一个div方便引用多个图片（可不写）

<a href="${path}/images/233.jpg" id="aa">

      <img src="${path}/barcode.jspx" />

</a>

4:写入javascript代码引用

<script type="text/javascript">

      $(function(){

         $("#aa").jqzoom({

            zoomType: "standard", // 指定放大镜的类型 (‘standard‘, ‘drag‘, ‘innerzoom‘, ‘reverse‘)

                lens:true, // 是否加上拖动的蒙版

                preloadImages: false, // 预加载图片(不)

                alwaysOn:false, // 是不是总是显示(不关闭)

                title : false, // 是不是需要显示标题

                zoomWidth : 500, // 控制右边div宽度

                zoomHeight : 500, // 控制右边div高度

                xOffset:0, // 控制右边div离左边的距离

               yOffset:0,  // 控制右边div离上面的距离

               position:"right" //控制div在左边显示

         });

      });

   </script>

jQuery-form表单异步提交插件：

1：导入jQuery-form插件到js下

2：引入相关的css和js

<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>

         <script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>

         <script type="text/javascript" src="${path}/js/jquery.form.js"></script>

3：写入javascript代码引用

$("#表单ID").ajaxForm({

                url : "${path}/asyncForm.jspx", //表单提交地址

                type : "post",   //提交方式

                dataType : "text",   //返回数据类型

                async : true,    //是否异步

                success : function(imgUrl){

                         //alert(imgUrl);

                         $("<img/>").attr("src", "${path}/" + imgUrl)

                                          .width(200)

                                          .height(200).appendTo("#imgs");

                },

                error : function(){

                         alert("数据加载失败！");

                }

            });

EasyUi

EasyUi是特点：

l  easyui是一种基于jQuery的用户界面插件集合

l  easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能

l  使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面

EasyUI的官网地址为：http://www.jeasyui.com/

依赖关系：

easyui里面的继承并不是真的继承，只是一种简单的依赖关系。这种依赖关系主要体现在如下几方面：

依赖者会继承“被依赖者”的属性，进而初始化自己的options；

依赖者会在自身内部初始化的时候，同时会初始化“被依赖者”；

依赖者会通过调用“被依赖者”对象的方法来实现自己和“被依赖者”同名的方法。

 

开发步骤：

1：在项目下导入组件

(1) \jqueryeasyui\jquery-easyui-1.4.5\locale(语言文件夹)一般选择中文和英文就好

(2) \jqueryeasyui\jquery-easyui-1.4.5\themes(样式文件夹)

(3) jquery.easyui.min.js和jquery.min.js

2:在jsp页面中导入引用

<script type="text/javascript" src="../../js/easyui/jquery.min.js"></script>

<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>

<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">

3:引用需要的属性、事件

jquery easyUI对象初始化方式：

方式一：直接在html中的标签上的class内容添加easyui-xxx,想要添加属性和事件就加个

Data-options属性，方法只能js调用

 

方式二：使用js初始化，$(表达式).xxx({属性、事件});

 

写在js中如何使用：

$(表达式).xxx({属性、事件});

 

$(‘#dd‘).draggable({

handle:‘#title‘

});

 

方法的调用：$(表达式).xxx("方法名",方法中参数...);

查看api主意点：

1：api中有各个依赖关系，可以引用依赖关系中的事件方法等等

 

2：事件与属性可以包含在方法中，但是方法不可以，必须另写

$(‘#ss‘).slider({   

    mode: ‘v‘,    //属性

    onComplete: function(value){    //事件

        return value + ‘%‘;   

    }   

});

 

$(‘#ss’).slider(“options”)  //方法

3：树节点有节点属性

 技术分享

常用的方法注意事项

1：DataGrid数据表格

$("#dg").datagrid({

                                     url:"get_user_list_data.jsp",

                                     width:800,  //行号

                                     rownumbers:true,   // 显示行列

                                     pageList:[10],  //可选择的页大小

                                     striped:true,  //斑马线效果

                                     pagination:true,  //分页导航条

idField:"userId",  //添加标识字段，可以用于分页时获取前面页的数据

                                     queryParams:{title:"itcast"},  //添加查询条件

                                     frozenColumns:[[    //冻结属性

                                               {field:‘x‘,checkbox:true},   

                                               {field:‘userId‘,title:‘用户ID‘,width:100}  

                                     ]],

                                     columns:[[    //根据json解析属性

                                               {field:‘name‘,title:‘用户名称‘,width:100},    

                                               {field:‘email‘,title:‘电子邮箱‘,width:100,align:‘center‘},  

                                               {field:‘gender‘,title:‘性别‘,width:100,align:‘center‘,

                                                        formatter: function(value,row,index){

                                                              return value==1?"男":"女";

                                                      },

                                                      styler: function(value,row,index){

                                                                            return value==1?‘color:blue;‘:‘color:red;‘;

                                                                   }

                                                          },  

                                               {field:‘workAge‘,title:‘工龄‘,width:100,align:‘center‘},  

                                               {field:‘birthday‘,title:‘出生日期‘,width:100,align:‘center‘}  

                                     ]],

                                     toolbar: [{   //右上方增加编辑工具条

                                               iconCls: ‘icon-save‘,

                                               handler: function(){alert(‘新增按钮‘);}

                                     },‘-‘,{

                                               iconCls: ‘icon-edit‘,

                                               handler: function(){

                                                        parent.$("#win").window({

                                                                 title:"人员编辑",

                                                                 width:650,

                                                                 height:500,

                                                                 //href:"html/form/form_8_example.html",

                                                                 modal:true,

                                                                 content:"<iframe src=‘html/form/form_8_example.html‘ frameborder=‘0‘ width=‘100%‘ height=‘100%‘></iframe>"

                                                        }).window("open");

                                               }

                                     },‘-‘,{

                                               iconCls: ‘icon-remove‘,

                                               handler: function(){

                                                        var rows = $(‘#dg‘).datagrid("getSelections");

                                                        if(rows.length > 0){

                                                                 var ids = "";

                                                                 for(var i = 0; i < rows.length; i++){

                                                                           ids += rows[i].userId + ",";

                                                                 }

                                                                 ids = ids.substring(0, ids.length-1);

                                                                 $.messager.confirm("提示信息","真的要删除id为 " + ids + " 的数据吗？",function(r){

                                                                           if(r){

                                                                                    $.messager.alert("提示信息","删除数据中...","warning");

                                                                           }

                                                                 });

                                                        } else {

                                                                 $.messager.alert("提示信息","请选择行！","info");

                                                        }

                                               }

                                     },{text:"<input id=‘userName‘ name=‘userName‘/>"

                                     }]

                            });

 

2：Layout布局

常用页面分布注意需要打开页面需要用：

content:"<iframe src=‘" + linkUrl + "‘ frameborder=‘0‘ width=‘100%‘ height=‘100%‘/>

引用内框架标签

<div id="cc" class="easyui-layout" data-options="fit:true">   //设置为true为铺满全部

               <!-- ---------------------------------顶部开始-------------------------------------------- -->

             <div data-options="region:‘north‘" style="height:100px;">

                      <h2>传智播客组织架构管理系统</h2>

                      <div style="width: 100%;text-align: right;">

                                <select id="theme" class="easyui-combobox" style="width:120px;">

                                         <option>default</option>

                                         <option>black</option>

                                         <option>bootstrap</option>

                                         <option>gray</option>

                                         <option>material</option>

                                         <option>metro</option>

                                </select>&nbsp;&nbsp;

                      </div>

             </div>

             <!-- ---------------------------------顶部结束-------------------------------------------- -->

             <!-- ---------------------------------底部开始-------------------------------------------- -->

             <div data-options="region:‘south‘" style="height:50px;text-align: center">

                      传智播客 2016?版权所有

             </div>  

             <!-- ---------------------------------底部结束-------------------------------------------- -->

             <!-- ---------------------------------左边菜单开始-------------------------------------------- -->

             <div data-options="region:‘west‘,title:‘功能菜单‘" style="width:200px;">

                      <div id="aa" class="easyui-accordion" data-options="fit:true">  

                       <div title="人员管理" data-options="iconCls:‘icon-save‘,selected:true" style="width:100%">  

                                <div class="menu">

                                            <ul>

                                                     <li><a href="#" name="user_list.html">人员列表</a></li>

                                                     <li><a href="#" name="html/form/form_8_example.html">人员编辑</a></li>

                                                     <li><a href="#" name="">人员统计</a></li>

                                            </ul>

                                   </div>

                       </div>  

                       <div title="角色管理" data-options="iconCls:‘icon-reload‘" style="padding:10px;">  

                           content2   

                       </div>  

                       <div title="权限管理">  

                           content3   

                       </div>  

                   </div>

             </div>  

             <!-- ---------------------------------左边菜单结束-------------------------------------------- -->

          <!-- ---------------------------------中间内容主显示区开始-------------------------------------------- -->

             <div data-options="region:‘center‘" style="padding:2px;background:#eee;">

                      <div id="tt" class="easyui-tabs" data-options="fit:true">  

                                <div title="欢迎页" style="padding:20px;display:none;">  

                                   <h3> 欢迎使用系统    </h3>

                                </div>  

                            </div>

            

             </div>  

         <!-- ---------------------------------中间内容主显示区结束-------------------------------------------- -->

         </div>

简单实现css光标移动变色

.menu ul{   //css类选择器，可以层级往下

                   margin:0;

                   padding:0;

                   list-style: none;

         }

         .menu ul li{

                   background-color: #113965;

                   color: #fff;

                   width: 200px;

                   border-bottom: 1px solid #fff;

                  

         }

         .menu ul li a{

                   text-decoration:none;

                   color: #fff;

                   width: 100%;

                   display: block;

                   padding:3px;

         }

.menu ul li a:hover{  //css中伪类选择器

                   background-color: #49B5FF;

         }

原文：http://www.cnblogs.com/maofa/p/6406951.html

内容总结

以上是互联网集市为您收集整理的javaScript全部内容，希望文章能够帮你解决javaScript所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1183207.html

来源：【匿名】