关于javascript3级的信息

jsp中利用javascript实现三级联动

js代码

创新互联建站主营长泰网站建设的网络公司,主营网站建设方案,重庆App定制开发,长泰h5小程序开发搭建,长泰网站营销推广欢迎长泰等地区企业咨询

//级联菜单

var province = ['江西省','江苏省','浙江省','甘肃省','江西省','江苏省','浙江省','甘肃省'];

var city = Array(

new Array ('南昌市','赣州市','抚州市','上饶市'),

new Array('杭州市','温州市','宁波市'),

new Array('南京市','苏州市','昆山市','太仓市'),

new Array('兰州市','敦煌市','兰楼市'),

new Array ('南昌市','赣州市','抚州市','上饶市'),

new Array('杭州市','温州市','宁波市'),

new Array('南京市','苏州市','昆山市','太仓市'),

new Array('兰州市','敦煌市','兰楼市')

)

//遍历省份

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

var opt = document.createElement('option'); //创建一个结点

opt.value = province[i]; //在value显示

opt.innerHTML = opt.value; //页面显示

document.getElementById('big').appendChild(opt);

}

//省份值改变的时候调用函数

function show_small(){

//alert( document.getElementById('big').selectedIndex);//拿到下标

document.getElementById('small').innerHTML="";//清空 appendChild会追加

var index = document.getElementById('big').selectedIndex;

for(var i=0;icity[index-1].length;i++){ //注意下标

var opt = document.createElement('option');

opt.value = city[index-1][i];

opt.innerHTML = opt.value;

document.getElementById('small').appendChild(opt);

}

}

html代码

!-- 级联菜单--

select id="big" onchange="show_small()"

option value=""--select--/option

/select

select id="small"

option value=""--select--/option

/select

手上刚好有个二级联动的，三级联动的你可以自己看着加进去，希望对你有帮助

js三级目录(原生js)

粗糙运用原生js完成三级目录

!DOCTYPE html

html

head

meta charset="utf-8"

title/title

style type="text/css"

*{margin: 0;padding: 0;}

body{

font-size: 12px!important;

}

.box{

width: 66px;

margin:66px auto;

}

/* 一级li样式 */

li{list-style: none;}

.yijimulu{

width: 66px;

height: 24px;

display: flex;

justify-content: center;

align-items: center;

box-sizing: border-box;

background-color: orange;

color: #333333;

position: relative;

cursor: pointer;

}

/* 二级ul样式 */

.erjiul{

position: absolute;

top: -1px;

left: 65px;

display: none;

}

.erjili,.sanjiLi{

width: 66px;

height: 24px;

display: flex;

justify-content: center;

align-items: center;

box-sizing: border-box;

background-color: orange;

color: #333333;

position: relative;

cursor: pointer;

}

.sanjiul{

position: absolute;

top: -1px;

left: 65px;

display: none;

}

/style

/head

body

div class="box"/div

script

var obox = document.querySelector('.box')

function Message(box) {

this.box = box

// 创建一级目录方法

this.CreatOne()

// 创建二级目录方法

this.CreatTwo()

// 创建三级目录

this.CreatThree()

}

// 创建一级目录

Message.prototype.CreatOne = function (){

// 创建一级ul

this.ul = document.createElement('ul')

// 创建一级li

this.ul.innerHTML = `

li一级目录/lili一级目录/lili一级目录/lili一级目录/lili一级目录/li

`

// 添加一级ul到div内

this.box.appendChild(this.ul)

// console.log(this.ul)

// 获取一级ul内所有li并起名

this.oli = this.ul.querySelectorAll('li')

// 循环出一级ul内所有li并起名设置样式

for (let i = 0;i this.oli.length;i++) {

this.oli[i].className = 'yijimulu'

// 设置一级样式鼠标划入效果

this.oli[i].addEventListener('mouseenter',()={

// 清空一级目录鼠标移入效果

for(let i = 0;i this.oli.length;i++) {

this.oli[i].style.border = 'none'

this.oli[i].style.color = '#333333'

this.bulname[i].style.display = 'none'

}

this.oli[i].style.border = '1px solid red'

this.oli[i].style.color = 'white'

this.bulname[i].style.display = 'block'

},false)

// 设置一级目录鼠标移出效果

this.oli[i].addEventListener('mouseleave',()={

this.oli[i].style.border = 'none'

this.oli[i].style.color = '#333333'

this.bulname[i].style.display = 'none'

},false)

}

}

// 创建三级目录

Message.prototype.CreatTwo = function () {

// this.oli是一级子li目录

// 创建二级目录ul

this.bul = document.createElement('ul')

// 添加到一级li里  this.oli

for (let i = 0;i this.oli.length;i++) {

this.oli[i].innerHTML = '一级目录ul/ul'

}

// 获取所有二级ul

this.bulname = this.ul.querySelectorAll('ul')

for (let i = 0;ithis.bulname.length;i++){

// 给二级ul起名

this.bulname[i].className = 'erjiul'

// 创建二级li

this.bulname[i].innerHTML = `li二级目录/lili二级目录/lili二级目录/lili二级目录/lili二级目录/li`

this.bli = this.bulname[i].querySelectorAll('li')

// console.log(this.bli)

for (let i = 0;ithis.bulname.length;i++) {

this.bli[i].className = 'erjili'

}

}

// 获取所有二级Ul下的li

// 先通过所有二级ul的类名获取到所有的二级ul

}

// 创建三级目录

Message.prototype.CreatThree = function () {

// 先获取到所有的二级li

this.twoli = this.ul.querySelectorAll('.erjili')

// console.log(this.twoli)

// 创建三级ul

for (let i = 0;ithis.twoli.length;i++) {

// console.log(this.twoli)

this.twoli[i].addEventListener('mouseenter',()={

// console.log(this.twoli[i])

for(let i = 0;ithis.twoli.length;i++){

this.twoli[i].style.border = 'none'

this.twoli[i].style.color = '#333333'

this.culclass[i].style.display = 'none'

}

this.twoli[i].style.border = '1px solid red'

this.twoli[i].style.color = 'white'

this.culclass[i].style.display = 'block'

},false)

this.twoli[i].addEventListener('mouseleave',()={

this.twoli[i].style.border = 'none'

this.twoli[i].style.color = '#333333'

this.culclass[i].style.display = 'none'

},false)

}

this.cul = document.createElement('ul')

for (let i = 0;ithis.twoli.length;i++) {

this.twoli[i].innerHTML = '二级目录ul/ul'

this.culname = this.twoli[i].querySelector('ul')

this.culname.className = 'sanjiul'

this.culname.innerHTML = `li三级目录/lili三级目录/lili三级目录/lili三级目录/lili三级目录/li`

// 获取所有三级Li

this.culclass = this.ul.querySelectorAll('.sanjiul')

for (let i = 0;ithis.culclass.length;i++) {

this.cli = this.culclass[i].querySelectorAll('li')

for (let  i = 0;ithis.cli.length;i++){

// this.cli = this.culclass[i].querySelectorAll('li')

this.cli[i].className = 'sanjiLi'

}

}

this.threeli = this.ul.querySelectorAll('.sanjiLi')

console.log(this.threeli)

for (let i = 0;i this.threeli.length;i++) {

this.threeli[i].addEventListener('mouseenter',()={

for (let i = 0;ithis.threeli.length;i++) {

this.threeli[i].style.border = 'none'

this.threeli[i].style.color = '#333'

}

this.threeli[i].style.border = '1px solid red'

this.threeli[i].style.color = 'white'

},false)

}

}

}

var msg = new Message(obox)

/script

/body

/html

《JavaScript高级程序设计》第3版与第2版有何差异

第3版全新的内容就有5章，涵盖了全新的HTML5 API，比如历史状态管理、Canvas、离线应用、Web Workers，等等。在全书各章里，我也增加了ECMAScript 5带来的变化，包括严格模式的限制和如何使用新API创建对象。原有内容也都更新了最新浏览器支持信息，包括移动平台浏览器的支持情况（不过，浏览器支持情况永远跟不上变化）。另外，这一版还为ECMAScript Harmony增加了一个附录，以便读者提前了解一下未来的情形。

译者在翻译过程中比对的信息

本书第2版正文22章，另有两个附录。第3版则有25章，4个附录。作者在博客中提到的新增的5章大致应该如下。

第11章：DOM扩展

第15章：使用Canvas绘图

第16章：HTML5脚本编程

第23章：离线应用与客户端存储

第25章：新兴的API

之所以说大致是这5章，主要因为它们跟“HTML5及相关规范”都有联系。而事实上，可以算得上新增的不止这几章，以下几章内容基本上也算是全新的。

第20章：JSON（介绍浏览器对JSON序列化及字符串解析的原生API）

第21章：Ajax与Comet（介绍Ajax及长轮询和HTTP流——Comet）

附录A：ECMAScript Harmony

附录B：严格模式

除此之外，更新内容比较多的还有以下几章——主要区别是ECMAScript 5新增的严格模式下一些基本语法结构的变化及限制，还有新的语言特性（比如新增的数组操作方法、事件类型等）以及DOM3级事件模块相关的更新：

第3章：语言基础

第5章：引用类型

第13章：事件

目前，本书正在翻译中。图灵会在保证质量的前提下，尽量加快本书的出版进度，希望这个体现ECMAScript 5和HTML5规范的新版本早日与中文读者见面。