十月拾贝
1.@SuppressWarnings
2.getServletContext()
3.struts-tags
4.
5.
6.event.srcElement.tagName.toLowerCase()
7.setInterval() 方法
8.cursor: pointer
9. unselectable="on"
10.Callfunction
11.required : true ,byteRangeLength1:[128]
12.@SuppressWarnings({ "unchecked", "serial", "rawtypes" })
13.StringUtils ：
14.struts2标签--form中的theme属性
15.Collections.emptyList()
16.ActionContext.getContext()的用法心得
17.jsp中的request相关
18.
/**
* 这个@SuppressWarnings注解用来抑制警告信息（抑制多类型的警告）
* 该批注的作用是给编译器一条指令，告诉它对被批注的代码元素内部的某些警告保持静默。
* @SuppressWarnings 允许您选择性地取消特定代码段（即，类或方法）中的警告。
* unchecked -----> to suppress warnings relative to unchecked operations
* （抑制没有进行类型检查操作的警告）
*/
@SuppressWarnings({ "unchecked", "serial" })
publicclass BaMenuAction extends BaseAction<BaMenu>
2.getServletContext()
/**
* 获得服务器路径
* 获取ServletAction上下文对象，
* getServletContext()获取Servlet上下文对象，
* getRealPath()获取服务器的绝对路径。
*/
String apppath = ServletActionContext.getServletContext().getContextPath();
//System.out.println(apppath);
//apppath="courtoa"
3.struts-tags
<%@tagliburi="/struts-tags"prefix="s"%> 标签库
4.<s:select>
<tr>
<tdclass="onelable"> 部门: </td>
<tdclass="onevalue"><s:selectlist="rdeptlist"name="formvo.deptid"id="deptid" =""headerValue="--==请选择==--"listKey="oid"listValue="deptName"theme="rkspsimple"></s:select></td>
</tr>
5.<s:hidden>
在Struts2中可以使用<s:hidden>标签来创建一个HTML隐藏字段。
<s:hidden name="url" value="http://www.yiibai.com" />
它会呈现为下面的HTML代码。
<input type="hidden" name="url" value="http://www.yiibai.com" />
6.event.srcElement.tagName.toLowerCase()
<script type="text/javascript">
function tdclick(){
if(event.srcElement.tagName.toLowerCase()=='td')
alert("行："+(event.srcElement.parentNode.rowIndex+1)
+"列："+(event.srcElement.cellIndex+1));
}
</script>
event.srcElement.tagName.toLowerCase()
event.srcElement从字面上可以看出来有以下关键字：事件,源 他的意思就是：当前事件的源，
我们可以调用他的各种属性 就像:document.getElementById("")这样的功能，
经常有人问 firefox 下的
event.srcElement 怎么用，在此详细说明：
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：
firefox 下的 event.target = IE 下的
event.srcElement
7.setInterval() 方法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
<html>
<body>
<input type="text" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
</body>
</html>
8.cursor: pointer
cursor规则是设定网页浏览时用户鼠标指针的样式，也就是鼠标的图形形状
cursor：pointer设定鼠标的形状为一只伸出食指的手，这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式
另外可以选择其他鼠标指针样式，常用的有default 箭头，crosshair 十字，progress 箭头和沙漏等等
9. unselectable="on"
在IE浏览器中，当input获得焦点时，点击有unselectable="on"属性的标签时，不会触发onblur事件（失去焦点 触发事件）。
10.Callfunction
回调函数callfunction="beforeAdd(),,,closeDialog()"
关闭对话框并重新加载
11.required : true ,byteRangeLength1:[128]
必须输入的字段，字节范围长度
byteRangeLength1:[128]
12.@SuppressWarnings({ "unchecked", "serial", "rawtypes" })
- unchecked to suppress warnings relative to unchecked operations（抑制没有进行类型检查操作的警告）
- serial to suppress warnings relative to missing serialVersionUID field for a serializable class(忽略在serializable类中没有声明serialVersionUID变量)
- rawtypes to suppress warnings relative to un-specific types when using generics on class params(使用generics时忽略没有指定相应的类型)
6.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
13.StringUtils ：
StringUtils 方法的操作对象是 java.lang.String 类型的对象，是 JDK 提供的 String 类型操作方法的补充，并且是 null 安全的(即如果输入参数 String 为 null 则不会抛出 NullPointerException ，而是做了相应处理，例如，如果输入为 null 则返回也是 null 等
2.
要情周报 查看时：（SocketOpenOfficeConnection时报错）报错
java.net.ConnectException: connection failed: socket,host=localhost,port=8100,tcpNoDelay=1: java.net.ConnectException: Connection refused
原因：
远程访问服务器，本地没有该文件。
14.struts2标签--form中的theme属性
struts2中theme属性包括xhtml,html,simple,ajax 。默认是xhtml
theme：设置struts2标签的主题，默认为xhtml。
theme=xhtml时：会默认额外生成tr,td。
theme=simple时：就生成标签所对应的html标签形式。
在默认情况下,表单元素是分布在不同行的。
简言之：加上theme="simple" 后，form中的每个单元元素不会自动换行
http://blog.sina.com.cn/s/blog_81acc3ef01014wyu.html
15.Collections.emptyList()
先说明一下好处有哪些：
1，如果你想 new 一个空的 List ，而这个 List 以后也不会再添加元素，那么就用 Collections.emptyList() 好了。
new ArrayList() 或者 new LinkedList() 在创建的时候有会有初始大小，多少会占用一内存。
每次使用都new 一个空的list集合，浪费就积少成多，浪费就严重啦，就不好啦
2，为了编码的方便。
比如说一个方法返回类型是List，当没有任何结果的时候，返回null,有结果的时候，返回list集合列表。
那样的话，调用这个方法的地方，就需要进行null判断。使用emptyList这样的方法，可以方便方法调用者。返回的就不会是null，省去重复代码。
注意的地方：
这个空的集合是不能调用.add（），添加元素的。因为直接报异常。因为源码就是这么写的：直接抛异常。
16.ActionContext.getContext()的用法心得
为了避免与Servlet API耦合在一起，方便Action类做单元测试，Struts 2对HttpServletRequest、HttpSession和ServletContext进行了封装，构造了三个Map对象来替代这三种对象，在Action中，直接使用HttpServletRequest、HttpSession和ServletContext对应的Map对象来保存和读取数据。
17.jsp中的request相关
//项目名称
String path = request.getContextPath();
//协议+主机服务器名+端口号+项目名称
//http://192.168.1.14:9000/courtoa
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
basePath:http://localhost:8080/test/
getContextPath:/test
getServletPath:/test.jsp
getRequestURI:/test/test.jsp
getRequestURL:http://localhost:8080/test/test.jsp
getRealPath:D:Tomcat 6.0webapps est
getServletContext().getRealPath:D:Tomcat 6.0webapps est
getQueryString:p=fuck
getContextPath（）：得到当前应用的根目录
getScheme（）：它返回当前请求所使用的协议。 一般的应用返回 "http"，对于ssl则返回"https"
getServerName（）：获取服务器名字，如果是在本地的话就是localhost
getServerPort（）：获得服务器的端口号
另外：jsp中获取客户端的浏览器和操作系统信息
string agent =
request.getheader("user-agent");
stringtokenizer st = new stringtokenizer(agent,";");
st.nexttoken();
//得到用户的浏览器名
string userbrowser = st.nexttoken();
//得到用户的操作系统名
string useros = st.nexttoken();
取得本机的信息也可以这样：
操作系统信息
system.getproperty("os.name"); //win2003竟然是win
xp？
system.getproperty("os.version");
system.getproperty("os.arch");
浏览器：
request.getheader("user-agent")
其他
request.getheader(“user-agent”)返回客户端浏览器的版本号、类型
getheader(string name)：获得http协议定义的传送文件头信息，
request. getmethod()：获得客户端向服务器端传送数据的方法有get、post、put等类型
request. getrequesturi()：获得发出请求字符串的客户端地址
request. getservletpath()：获得客户端所请求的脚本文件的文件路径
request. getservername()：获得服务器的名字
request.getserverport()：获得服务器的端口号
request.getremoteaddr()：获得客户端的ip地址
request.getremotehost()：获得客户端电脑的名字，若失败，则返回客户端电脑的ip地址
request.getprotocol()：
request.getheadernames()：返回所有request header的名字，结果集是一个enumeration（枚举）类的实例
request.getheaders(string name)：返回指定名字的request header的所有值，结果集是一个enumeration（枚举）类的实例
18. <object>标签
object标签用于定义一个嵌入的对象，包括：图像、音频、Java applets、ActiveX、PDF以及Flash。该标签允许您规定插入HTML文档中的对象的数据和参数，以及可用来显示和操作数据的代码。
一、显示页面
[COLOR=RED]<object type="text/html" height="100%" width="100%"
data="http://192.168.1.128:9000/courtoa/">
</object>
[/COLOR]
<html>
<body>
<h2>Web Page AS Object</h2>
<object type="text/html" height="100%" width="100%"
data="http://www.baidu.com">
</object>
</body>
</html>
详见：
19. NaN属性
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。
提示：请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
JavaScript 以 NaN 的形式输出 Number.NaN。请注意，NaN 与其他数值进行比较的结果总是不相等的，包括它自身在内。因此，不能与 Number.NaN 比较来检测一个值是不是数字，而只能调用 isNaN() 来比较。
<script type="text/javascript">
var Month=30;
if (Month < 1 || Month > 12)
{
Month = Number.NaN;
}
document.write(Month);
</script>
20. parseInt
parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话，默认是10进制。
比如说parseInt("010",10)就是10进制的结果：10，parseInt("010",2)就是2进制的结果：2，parseInt("010",8)就是8进制的结果：8，parseInt("010",16)就是16进制的结果：16。
下面我来说说没有指定进制单位的时候，默认是10进制，但：如果是里面的Number是0开头的就认为是8进制的，如果是0x开头的就认为是16进制的。
parseInt("10")==>parseInt("010",10)===>10
parseInt("010")==>parseInt("010",8)==>8
parseInt("0x10")==>parseInt("010",16)==>16.
到这里很顺利.
许多事情不是想的那么顺利，比如说如果Number不是我们给的正常数字又怎么解释呢。查了些资料，是这样说的：
parseInt(Number)如果中间的Number遇到不是数字（0-9）的就中断往下解析，就只取不是数字之前的值去运算:
比如parseInt("100x")，就相当于parseInt("100")===》parseInt("100",10)==>100,
又如parseInt("0100x")===>parseInt("0100")===>parseInt("100",8)===>64.
到这里我们似乎无视了一个就是16进制中的有个x，它也不是数字，是不是遇到x也无视了呢。尝试下了发现在这个特殊处理了下，比如
parseInt("0x10")===>parseInt("10",16)===>16和最上面的结果相符，但却和我刚说的，不是字符就自动不解析就应该理解成parseInt("0")相违背。
这里就需要注意下，parseInt里面的Number是这样的，当如果第一个不是0且不是字符就认为是10进制，一切照旧执行，遇到字母就停下来。又当如果是第一个是0，后面那个就需要注意了，如果是x就继续往下走，这里的x不代表数值，只能和前面的0一起组成0x代表16进制的单位，后面的才按上面我们讲的遇到非数字停止解析的规则来。比如parseInt("0xt")==>parseInt("0x")==>parseInt("",16)就是NaN了。
总结下，parseInt(Number)里面的值:
如果是第一位不是0就遇到字母就停止解析，并把字母前面的值作为10进制去解析，如果第一个就是字母那么值就是空，空成了NaN,比如:
parseInt("a")==>parseInt("",10)==>NaN.
parseInt("10a")==>parseInt("10")==>parseInt("10",10)==>10;
如果第一位是0,且第2位不是x也和上面一样遇到字母就停止解析，并把字母前面的值作为8进制去解析,比如:
parseInt("0a")==>parseInt("0")==>parseInt("0",10)==>0.
PS:这个有点特殊，因为0a被解析成了0，还不具备看做是8进制的结构，下面那个就明显了。
parseInt("010a")==>parseInt("010")==>parseInt("10",8)==>8;
如果第一位是0,且第2位是x那后面也和上面一样遇到字母就停止解析，并把字母前面的值作为16进制去解析,比如:
parseInt("0xt")==>parseInt("",16)==>NaN.
parseInt("0x12t")==>parseInt("12",16)==>18.
例子：使用 parseInt
以下例子均返回15:
parseInt("0xF",16);
parseInt("F",16);
parseInt("17",8);
parseInt(021,8);
parseInt("015",10);// parseInt(015, 10); will return 15
parseInt(15.99,10);
parseInt("15,123",10);
parseInt("FXX123",16);
parseInt("1111",2);
parseInt("15 * 3",10);
parseInt("15e2",10);
parseInt("15px",10);
parseInt("12",13);
以下例子均返回 NaN:
parseInt("Hello",8);// Not a number at allparseInt("546",2);// Digits are not valid for binary representations
以下例子均返回 -15：
parseInt("-F",16);parseInt("-0F",16);parseInt("-0XF",16);parseInt(-15.1,10);parseInt(" -17",8);parseInt(" -15",10);parseInt("-1111",2);parseInt("-15e1",10);parseInt("-12",13);
下例中全部返回 4:
parseInt(4.7,10);parseInt(4.7*1e22,10);// Very large number becomes 4parseInt(0.00000000000434,10);// Very small number becomes 4
下面的例子返回 224
parseInt("0e0",16);
一个更严格的解析函数
有时采用一个更严格的方法来解析整型值很有用。此时可以使用正则表达式：
filterInt=function(value){
if(/^(-|+)?([0-9]+|Infinity)$/.test(value))
returnNumber(value);
returnNaN;}
console.log(filterInt('421'));// 421
console.log(filterInt('-421'));// -421
console.log(filterInt('+421'));// 421
console.log(filterInt('Infinity'));// Infinity
console.log(filterInt('421e+0'));// NaN
console.log(filterInt('421hop'));// NaN
console.log(filterInt('hop1.61803398875'));// NaN
console.log(filterInt('1.61803398875'));// NaN21.javascript中的innerHTML
- innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
- 如：<div >这是内容</div> ，
- 我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；
- 也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容';
- 定义和用法
- innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。
- 语法
- Object.innerHTML = "HTML";// 设置
- var html = Object.innerHTML;// 获取
- 例子 1
- 获取段落p的 innerHTML（html内容）
- <html>
- <head>
- <script type="text/javascript">
- function getInnerHTML(){
- alert(document.getElementById("test").innerHTML);
- }
- </script>
- </head><body>
- <p >嗨豆壳 www.hi-docs.com</font></p>
- <input type="button" onclick="getInnerHTML()" value="点击" />
- </body>
- </html>
- 例子 2
- 设置段落p的 innerHTML（html内容）
- <html>
- <head>
- <script type="text/javascript">
- function setInnerHTML(){
- document.getElementById("test").innerHTML = "<strong>设置标签的html内容</strong>";
- }
- </script>
- </head><body>
- <p >嗨豆壳 www.hi-docs.com</font></p>
- <input type="button" onclick="setInnerHTML()" value="点击" />
- </body>
- </html>
21. 在 JavaScript 中创建 JSON 对象
<html>
<body>
<h2>在 JavaScript 中创建 JSON 对象</h2>
<p>
Name: <span ></span><br />
Age: <span ></span><br />
Address: <span ></span><br />
Phone: <span ></span><br />
</p>
<script type="text/javascript">
var JSONObject= {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</body>
</html>
22.通过 JSON 字符串来创建对象
<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span ></span><br />
Last Name: <span ></span><br />
</p>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
var obj = eval ("(" + txt + ")");
document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[0].lastName
</script>
</body>
</html>
22. 访问JSON对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>访问 JSON 内嵌对象。</p>
<p ></p>
<script>
myObj = {
"name":"runoob",
"alexa":10000,
"sites": {
"site1":"www.runoob.com",
"site2":"m.runoob.com",
"site3":"c.runoob.com"
}
}
document.getElementById("demo").innerHTML+= myObj.sites.site1 + "<br>";
// 或者
document.getElementById("demo").innerHTML += myObj.sites["site1"];
</script>
</body>
</html>
结果
访问 JSON 内嵌对象。
www.runoob.com
www.runoob.com
修改数组值:myObj.sites[1] = "Github";
删除数组值:deletemyObj.sites[1];
23.JSON.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法
JSON.parse(text[, reviver])
参数说明：
- text:必需， 一个有效的 JSON 字符串。
- reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
JSON解析实例:
<p></p>
<script> var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }'); document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>
24.eval() 函数
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
eval("alert('Hello world')")
弹窗: Hello world'
在本例中，我们将在几个字符串上运用 eval()，并看看返回的结果：
<script type="text/javascript">
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
var x=10
document.write(eval(x+17))
</script>
输出：
200
4
27
25.writeln() 方法与 write() 方法
/*
writeln() 方法与 write() 方法几乎一样，差别仅在于是前者将在所提供的任何字符串后添加一个换行符。在HTML中，这通常只会在后面产生一个空格；
不过如果使用了 <PRE> 和 <XMP> 标识，这个换行符会被解释，且在浏览器中显示。
*/
document.writeln("<XMP>");
document.writeln("oNaN=parseInt("abc")返回的结果是"+oNaN);
26.在JavaScript中，0，"",false,null,undefined,NaN均表示false，
0，"",false,null,undefined,NaN均表示false，
27.JavaScript使用arguments创建参数可变的函数
JavaScript的函数天然支持可变参数，JavaScript有一个arguments变量可以访问所有传到函数内部的参数。
范例：JavaScript使用arguments创建参数可变的函数
<script type="text/javascript">
/*add函数是一个参数可变的函数*/
function add(){
var result=0;
for(var i=0;i<arguments.length;i++){
//alert(arguments[i]);
result+=arguments[i];
}
return result;
}
alert("add(1,2,3)="+add(1,2,3));//调用add函数时传入3个参数
alert("add(1,2,3,4,5,6)="+add(1,2,3,4,5,6));//调用add函数时传入6个参数
alert("add()="+add());//调用add函数时不传入参数
alert("add(1,"HelloWorld")="+add(1,"HelloWorld"));//调用add函数时传入不同类型的参数
</script>
28.javascript创建动态函数
JavaScript支持创建动态函数，动态函数必须用Function对象来定义（Function是javascript中的一个对象，是固定不变的，规定Function对象的"F"必须大写，当是function的时候，我们知道是定义函数的时候所使用的一个关键字：function funName(x，y)，当是Function的时候（F大写的时候），我们知道是javascript中的对象）
创建动态函数的基本格式：var 变量名 = new Function("参数1"，"参数2"，"参数n"，"执行语句");
看下面的一段代码：
1<script type="text/javascript">
2var square = new Function ("x","y","var sum ; sum = x+y;return sum;");
3 alert("square(2,3)的结果是："+square(2,3));
4</script>
结果:”
square(2,3)的结果是：5
这段代码：
1var square = new Function ("x","y","var sum ; sum = x+y;return sum;");
和下面这段代码：
1function square (x,y){
2var sum;
3 sum = x+y;
4return sum;
5 }
是一摸一样的，只不过一个是动态函数，一个是静态函数。
1<script type="text/javascript">
2var a = "var sum;";
3var b = "sum = x + y;";
4var c = "return sum;";
5var square = new Function ( "x", "y", a+b+c);
6 alert(square (2,3));7</script>
在这里，我们定义了变量a，b，c，我们让a="var sum;"，让b="sum = x+y;"，让c = "return sum;"
这样：var square = new Function ("x","y","var sum ; sum = x+y;return sum;");
我们就可以写成：var square = new Function ( " x", "y",a+b+c);因为a，b，c是三个字符串，字符串相加得到的还是字符串。
我们为什么要把代码分成一小段一小段的代码呢？，把一个字符串分成了若干个独立的字符串的优点就在于我们可以通过修改其中的某些字符串来随时改变函数的作用。
29.JavaScript匿名函数
1var f1 = function(i1, i2) {
2return i1 + i2;
3 }
4 alert(f1(1,2));
这种匿名函数的用法在JQuery中的非常多
alert(function(i1, i2) { return i1 + i2; }(10,10));
直接声明一个匿名函数，立即使用。
30.JavaScript不支持函数的重载
JavaScript没有方法重载的说法，如果两个方法名字一样，即使参数个数不一样，那么后面定义的就会覆盖前面定义，调用方法时永远是调用后定义的那个。
用如下的代码证明JavaScript不支持函数的重载：
1<script type="text/javascript">
2function Test(a){
3 alert(a);
4 }
5function Test(a,b){
6 alert("HelloWorld!");
7 }
8function Test(a,b){
9 alert(a+""+b);
10 }
11
12 Test(20);//调用的是最后定义的那个Test方法
13 Test(30,50);//调用的是最后定义的那个Test方法
14</script>
31.JavaScript中的数组
1<script type="text/javascript">
2var names = new Array();//普通方式声明数组，不需要指明数组的长度
3 names[0] = "孤傲苍狼";
4 names[1] = "白虎神皇";
5 names[2] = "灭世魔尊";
6for (var i = 0; i < names.length; i++) {
7 document.write("names["+i+"] = "+names[i]);
8 document.write("<br/>");
9 }
10
11var pinyins = new Array();
12 pinyins["人"] = "ren";
13 pinyins["口"] = "kou";
14 pinyins["手"] = "shou";
15 document.write("pinyins["人"] = "+pinyins["人"]);
16 document.write("<br/>");
17 document.write("pinyins.手 = "+pinyins.手);//像Hashtable、Dictionary那样用，而且像它们一样效率高。
18 document.write("<br/>");
19//Array的简化声明
20var arr1 = [3, 5];//普通数组初始化
21for (var i = 0; i < arr1.length; i++) {
22 document.write("arr1["+i+"] = "+arr1[i]);
23 document.write("<br/>");
24 }
25</script>
运行结果：
32.JavaScript数组混合使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数组练习：各种数组方法的使用</title>
<style>
div{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;word-wrap:break-word;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var aDiv = document.getElementsByTagName("div");
var aInput = document.getElementsByTagName("input");
var i = 0;
var bS1 = bS2 = true;
var aTmp = [];
//删除/添加第一项
aInput[0].onclick = function ()
{
aTmp = getArray(aDiv[0].innerHTML);
bS1 ?
//删除第一项， shift()方法
(aTmp.shift(), this.value = this.value.replace("删除","添加"), bS1 = false) :
//添加第一项, unshift()方法
(aTmp.unshift("January(1)"), this.value = this.value.replace("添加","删除"), bS1 = true);
//输出
aDiv[0].innerHTML = aTmp.join()
};
//删除/添加最后一项
aInput[1].onclick = function ()
{
aTmp = getArray(aDiv[0].innerHTML);
bS2 ?
//删除最后一项, pop()方法
(aTmp.pop(), this.value = this.value.replace("删除","添加"), bS2 = false) :
//添加最后一项, push()方法
(aTmp.push("December(12)"), this.value = this.value.replace("添加","删除"), bS2 = true);
//输出
aDiv[0].innerHTML = aTmp.join()
};
//复制, concat()方法
aInput[2].onclick = function ()
{
aTmp = getArray(aDiv[1].innerHTML);
//输出
aDiv[1].innerHTML = aTmp.concat(aTmp).toString().replace(/s/g,"")
};
//还原, 利用数组的 length 特点
aInput[3].onclick = function ()
{
aTmp = getArray(aDiv[1].innerHTML);
//设置数组长度
aTmp.length = 10;
//输出
aDiv[1].innerHTML = aTmp.join()
};
//第三组数据还原
aInput[4].onclick = function ()
{
aTmp = ["red","green","blue","white","yellow","black","brown"];
//输出
aDiv[2].innerHTML = aTmp.join()
};
//删除前三项
aInput[5].onclick = function ()
{
aTmp = getArray(aDiv[2].innerHTML);
//删除, 0开始, 删除3个
aTmp.splice(0, 3);
//输出
aDiv[2].innerHTML = aTmp.join()
};
//删除第二至三项
aInput[6].onclick = function ()
{
aTmp = getArray(aDiv[2].innerHTML);
//删除, 2开始, 删除2个
aTmp.splice(1, 2);
//输出
aDiv[2].innerHTML = aTmp.join()
};
//在第二顶插入"orange", "purple"
aInput[7].onclick = function ()
{
aTmp = getArray(aDiv[2].innerHTML);
//插入, 2开始, 插入"orange", "purple"
aTmp.splice(1, 0, "orange", "purple");
//输出
aDiv[2].innerHTML = aTmp.join()
};
//替换第二项和第三项
aInput[8].onclick = function ()
{
aTmp = getArray(aDiv[2].innerHTML);
//插入, 2开始替换
aTmp.splice(1, 2, "#009900", "#0000ff");
//输出
aDiv[2].innerHTML = aTmp.join()
};
//将div中的内容转为数组
//str div对象
function getArray(str)
{
aTmp.length = 0;
str = str.split(",");
for (var i in str)aTmp.push(str[i]);
return aTmp
}
}
</script>
</head>
<body>
<div>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</div>
<input value="删除January(1)" type="button">
<input value="删除December(12)" type="button">
<div>0,1,2,3,4,5,6,7,8,9</div>
<input value="复制" type="button">
<input value="还原" type="button">
<div>red,green,blue,white,yellow,black,brown</div>
<input value="还原" type="button">
<input value="删除前三项" type="button">
<input value="删除第二至三项" type="button">
<input value="在第二项插入(orange, purple)" type="button">
<input value="替换第二项和第三项" type="button">
</body></html>
33.JavaScript中的 shift() 方法
定义和用法
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
语法
arrayObject.shift()
实例
在本例中，我们将创建一个数组，并删除数组的第一个元素。请注意，这也将改变数组的长度：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)
</script>
输出：
George,John,Thomas
George
John,Thomas
34.JavaScript中的 unshift() 方法
定义和用法
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
语法
arrayObject.unshift(newelement1,newelement2,....,newelementX)
说明
unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
请注意，unshift() 方法不创建新的数组，而是直接修改原有的数组。
实例
在本例中，我们将创建一个数组，并把一个元素添加到数组的开头，并返回数组的新长度：
<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)
</script>
输出：
George,John,Thomas
4
William,George,John,Thomas
35.JavaScript中的join() 方法
定义和用法
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
语法
arrayObject.join(separator)
|
参数 |
描述 |
|
separator |
可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。 |
返回值
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。
实例
例子 1
在本例中，我们将创建一个数组，然后把它的所有元素放入一个字符串：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())
</script>
输出：
George,John,Thomas
例子 2
在本例中，我们将使用分隔符来分隔数组中的元素：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
</script>
输出：
George.John.Thomas
36.JavaScript中的oncat() 方法
定义和用法
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
37.JavaScript中的splice()方法
定义和用法
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
说明
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
技术细节
|
JavaScript 版本： |
1.2 |
浏览器支持
所有主流浏览器都支持 splice() 方法。
提示和注释
注释：请注意，splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。
实例
例子 1
在本例中，我们将创建一个新数组，并向其添加一个元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")document.write(arr + "<br />")
</script>
输出：
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
例子 2
在本例中我们将删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,1,"William")document.write(arr)
</script>
输出：
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin
例子 3
在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素，并添加一个新元素 ("William") 来替代被删除的元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,3,"William")document.write(arr)
</script>
输出：
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin
38.JavaScript中的split() 方法
定义和用法
split() 方法用于把一个字符串分割成字符串数组。
语法
stringObject.split(separator,howmany)
|
参数 |
描述 |
|
separator |
必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。 |
|
howmany |
可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 |
实例
例子 1
在本例中，我们将按照不同的方式来分割字符串：
<script type="text/javascript">
var str="How are you doing today?"
document.write(str.split("") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split("",3))
</script>
输出：
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
39. 下拉框可实现select与input功能的简便做法
- <script language="javascript">
- function A(){
- document.getElementById('box').value=
- document.getElementById('SS').options[document.getElementById('SS').selectedIndex].value;
- }
- </script>
- <html>
- <body>
- <div style="position:relative;">
- <span style="margin-left:100px;0px;overflow:hidden" >
- <select style="118px;margin-left:-100;height:25px" onchange="A()" >
- <option value="A">A</option>
- <option value="B">B</option>
- <option value="C">C</option>
- </select>
- </span>
- <input name="box" >
- </div>
- </body>
- </html>
由document.getElementById('box').value= document.getElementById('SS').options[document.getElementById('SS').selectedIndex].value，实现下拉框的值传参到Input里去。
40. JSON模糊查询
Html：
<tr>
<tdalign="left"><span>案由</span>
<!--
<input type="text" name="ay" >
<select style="100px;" ></select>
-->
<!--
<selectid="selectAy"ng-model="binding.value"style="400px;height:26px; overflow:hidden;margin-left: 6px;"onchange="changeAy()"></select>
<inputtype="text"name="ay"id="ay"value=""placeholder="输入内容之后，回车键可进行模糊检索！"onclick="showAy()"onkeypress="checkEnter(event,this);"style="340px;height:26px;position: relative;top:-36px;left:80px;"/>
-->
<input type="text" name="ay" > </select>
</td>
</tr>
Js
//模糊查询-----选择方法
function checkAyValue(){
var ay = document.getElementById("ay").value;
if(ay!="" && ay!= null){
selectAy(ay);
}else{
showAy();
}
}
//模糊查询开始
function selectAy(ay){
$("#selectAy").css({"display":"none"});
var jsonfile = "minshi.json";
if(ajtype.indexOf("民事")!=-1){jsonfile = "minshi.json";}
else if(ajtype.indexOf("刑事")!=-1){jsonfile = "xingshi.json";}
else if(ajtype.indexOf("行政")!=-1){jsonfile = "xingzheng.json";}
else if(ajtype.indexOf("赔偿")!=-1){jsonfile = "peichang.json";}
else if(ajtype.indexOf("执行")!=-1){jsonfile = "zhixing.json";}
var ayName="";
$.ajax({
url: appPath + "clientpage/json/ay/" + jsonfile,//json文件位置
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success: function(data) {//请求成功完成后要执行的方法
//除第一次外，清空select中的option选项
$("#selectAy").empty();
//遍历json数组
$.each(data, function(i, item) {
var s = item.id.indexOf(ay);
if (s !=-1) {
ayName=item.name;
$("#selectAy").append("<option value="" + ayName + "" >" + ayName + "</option>");
}
});
if(ayName==null || ayName == ""){
afterSelectAy();
document.getElementById("ay").value=null;
}else{
changeAy();
}
}
});
}
function changeAy(){
document.getElementById("ay").value=
document.getElementById("selectAy").options[document.getElementById("selectAy").selectedIndex].value;
}
NS4 = (document.layers) ? true : false;
function checkEnter(event,element){
var code = 0;
if (NS4) code = event.which;
else code = event.keyCode;
if (code==13){
$("#ayContent").css({"display":"none"});
checkAyValue();
$("#selectAy").css({"display":""});
$("#selectAy").css({"background-color":"#F2F8FD"});
}
}
function afterSelectAy(){
layer.msg('没有符合您输入要求的案由检索结果，请重新输入进行检索！');
}
function outfocus(){
$("#selectAy").css({"display":"none"});
}
//模糊查询结束
2017-10-31 18:41