不同代码做的网站后期维护情况,wordpress 发码插件,网站后台管理系统展望,网站建设个人主页图1、Javascript JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 1.1 存在形式 1 1、文件形式
2 script src../jqu…1、Javascript JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 1.1 存在形式 1 1、文件形式
2 script src../jquery-2.2.0.js typetext/javascript/script
3 2、嵌入HTML中
4 script typetext/javascriptalert(123);/script 1.2、代码块的位置 通常在body标签内的代码底部 1.3、变量和函数的声明 1 1、全局变量和局部变量2 name“jerry”3 var name “jerry”4 5 2、基本函数和自执行函数6 function foo(arg){7 console.log(arg);8 9 }
10 (function (arg) {
11 alert(arg);
12 }) (jerry) 1.4、字符串常用方法和属性 1 obj.trim()
2 obj.charAt(index)
3 obj.substring(start,end)
4 obj.indexof(char)
5 obj.length 1.5、数组 1、声明如var array Array() 或者 var array []
2、添加obj.push(ele) 追加obj.unshift(ele) 最前插入obj.splice(index,0,content) 指定索引插入
3、移除obj.pop()obj.shift()obj.splice(index,count)
4、切片obj.slice(start,end)
5、合并newArray obj1.concat(obj2)
6、翻转obj.reverse()
7、字符串化obj.join(_)
8、长度obj.length 1.6 循环 1 var a 123456789;
2 for (var i 0;i 10;i){
3 console.log(a[i]);
4 }
5
6 for (var item in a){
7 console.log(a[item]);
8 } 2、DOM编程 文件对象模型Document Object Model简称DOM是W3C组织推荐的处理可扩展标志语言的标准编程接口 2.1、选择器 document.getElementById(id)document.getElementsName(name)document.getElementsByTagName(tagname)2.2、常用函数 创建标签document.createElement(a) var link document.createElement(a) link.href http://www.baidu.com link.innerText 百度 不要写成value var divMain document.getElementById(ddd) var btn document.createElement(input) btn.type botton btn.value 我是动态的 //数据库获取 divMain.appendChild(btn) divMain.innerText divMain.innerHTML a idinner我是font colorred 红/font色/a alert(document.getElementById(inner).innerText) alert(document.getElementById(inner).innerHTML) 获取或者修改样式 obj.className 获取或设置属性 setattribute(key,val) getattribute(key) 获取或修改样式中的属性 obj.style属性 注明js中的属性和css中的属性名称可能不一致 background-color style.background font-size style.fontSize margin-top style.marginTop 提交表单 document.getElementById(form).submit() 常用事件 onclickonbluronfocus3、JQuery讲解 jQuery是一个兼容多浏览器的javascript库核心理念是write less,do more(写得更少,做得更多)对javascript进行了封装是的更加便捷的开发并且在兼容性方面十分优秀。 1、选择器和筛选器 2、属性 3、CSS 4、文档处理 5、事件 6、扩展 7、AJAX 更多关于JQuery的讲解请见如下链接http://www.php100.com/manual/jquery/ 3.1、功能菜单全选、单选、反选 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 titleTitle/title6 /head7 body8 input typebutton οnclickCheckAll() value全选 /9 input typebutton οnclickCheckReverse() value反选 /
10 input typebutton οnclickCheckCancel() value取消 /
11
12 table border1
13 thead/thead
14 tbody id tb1
15 tr
16 tdinput typecheckbox //td
17 td11/td
18 /tr
19 tr
20 tdinput typecheckbox //td
21 td22/td
22 /tr
23 tr
24 tdinput typecheckbox //td
25 td33/td
26 /tr
27 /tbody
28 /table
29
30 script srcjquery-2.2.0.js typetext/javascript/script
31 script typetext/javascript
32 function CheckAll(){
33 $(#tb1).find(:checkbox).prop(checked,true);
34
35 }
36 function CheckReverse(){
37 $(#tb1).find(:checkbox).each(function () {
38 if($(this).prop(checked)){
39 $(this).prop(checked,false);
40 }else {
41 $(this).prop(checked,true);
42 }
43 });
44 }
45 function CheckCancel(){
46 $(#tb1).find(:checkbox).prop(checked,false)
47 }
48 /script
49 /body
50 /html 单选、多选、反选功能的实现 3.2、隐藏输入框 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 titletable表格11/title6 style7 .hide{8 display: none;9 }10 .modal{11 position: fixed;12 left:50%;13 top:50%;14 width: 400px;15 height: 300px;16 background-color: #dddddd;17 margin-left:-200px;18 margin-top: -150px;19 }20 .hide{21 display: none;22 }23 /style24 div iddialog classmodal hide25 form action methodget26 p主机名:input typetext idhostname valuewowowowo //p27 pIP:input typetext idip //p28 p端口:input typetext idport //p29 input typesubmit οnclickreturn SubmitForm() value提交 /30 input typebutton οnclickCancel() value取消 /31 /form32 /div33 /head34 body35 div36 div37 div idm1 οnclickChange(this)菜单一/div38 div classcontent hide39 div11/div40 div22/div41 div33/div42 /div43 /div44 45 div46 div idm2 οnclickChange(this)菜单二/div47 div classcontent hide48 div中国/div49 div越南/div50 div老挝/div51 /div52 /div53 54 div55 div idm3 οnclickChange(this)菜单三/div56 div classcontent hide57 div北京/div58 div河南/div59 div云南/div60 /div61 /div62 /div63 64 table border165 thead/thead66 tbody67 tr68 td1/td69 td2/td70 td3/td71 td οnclickget_prev(this);编辑/td72 /tr73 74 tr75 td11/td76 td22/td77 td33/td78 td οnclickget_prev(this);编辑/td79 /tr80 tr81 td111/td82 td222/td83 td333/td84 td οnclickget_prev(this);编辑/td85 /tr86 /tbody87 /table88 89 script src../jquery-2.2.0.js typetext/javascript/script90 script typetext/javascript91 // function Change(arg){92 // if(arg1){93 // var menu $(#m1)94 // }else if (arg2){95 // var menu $(#m2)96 // }else {97 // var menu $(#m3)98 // }99 // console.log(menu.text())
100 // }
101 function SubmitForm(){
102 //获取form表单中input中的值
103 //判断值是否为空
104 var rettrue;
105 //遍历所有的input只要为空就将ret 设置为false
106 $(:text).each(function(){
107 //$(this)要循环的每一个元素
108 var value $(this).val();
109 if (value.trim().length0){
110 $(this).css(border-color,red);
111 ret false
112 }else {
113 $(this).css(border-color,green);
114 }
115 });
116 return ret;
117 }
118
119 function get_prev(ths){
120 // $(arg).siblings(),遍历所有兄弟内容
121 // 循环多个标签中的每一个标签
122 //每一个标签被循环时都会执行map内部的函数并获取其返回值
123 //将所有的返回值封装到一个数组列表中
124 //返回列表
125 //
126 var list [];
127 $.each($(ths).prevAll(),function(i){
128 var item $(ths).prevAll()[i];
129 //this
130 var text $(item).text();
131 list.push(text);
132 });
133 var new_list list.reverse();
134 //在弹出框的hostname中设置值
135 $(#hostname).val(new_list[0]);
136 $(#ip).val(new_list[1]);
137 $(#port).val(new_list[2]);
138 $(#dialog).removeClass(hide);
139 }
140
141
142 /script
143
144
145 /body
146 /html 隐藏并单击显示输入框 转载于:https://www.cnblogs.com/bravexz/p/5219665.html
