Javascript、Dom、JQuery

1、Javascript

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.1 存在形式

1 1、文件形式
2   <script src="../jquery-2.2.0.js" type="text/javascript"></script>
3 2、嵌入HTML中
4 <script type="text/javascript">alert("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

　　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()

常用事件：

onclick
onblur
onfocus

3、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 html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" onclick="CheckAll()" value="全选" />
 9     <input type="button" onclick="CheckReverse()" value="反选" />
10     <input type="button" onclick="CheckCancel()" value="取消" />
11 
12     <table border="1">
13         <thead></thead>
14         <tbody id ='tb1'>
15             <tr>
16                 <td><input type="checkbox" /></td>
17                 <td>11</td>
18             </tr>
19             <tr>
20                 <td><input type="checkbox" /></td>
21                 <td>22</td>
22             </tr>
23             <tr>
24                 <td><input type="checkbox" /></td>
25                 <td>33</td>
26             </tr>
27         </tbody>
28     </table>
29 
30     <script src="jquery-2.2.0.js" type="text/javascript"></script>
31     <script type="text/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 html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>table表格11</title>
  6     <style>
  7         .hide{
  8             display: none;
  9         }
 10         .modal{
 11             position: fixed;
 12             left:50%;
 13             top:50%;
 14              400px;
 15             height: 300px;
 16             background-color: #dddddd;
 17             margin-left:-200px;
 18             margin-top: -150px;
 19         }
 20         .hide{
 21             display: none;
 22         }
 23     </style>
 24     <div id="dialog" class="modal hide">
 25         <form action="" method="get">
 26             <p>主机名:<input type="text" id="hostname" value="wowowowo" /></p>
 27             <p>IP:<input type="text" id="ip" /></p>
 28             <p>端口:<input type="text" id="port" /></p>
 29             <input type="submit" onclick="return SubmitForm()" value="提交" />
 30             <input type="button" onclick="Cancel()" value="取消" />
 31         </form>
 32     </div>
 33 </head>
 34 <body>
 35     <div>
 36         <div>
 37             <div id="m1" onclick="Change(this)">菜单一</div>
 38             <div class="content hide">
 39                 <div>11</div>
 40                 <div>22</div>
 41                 <div>33</div>
 42             </div>
 43         </div>
 44 
 45         <div>
 46             <div id="m2" onclick="Change(this)">菜单二</div>
 47             <div class="content hide">
 48                 <div>中国</div>
 49                 <div>越南</div>
 50                 <div>老挝</div>
 51             </div>
 52         </div>
 53 
 54         <div>
 55             <div id="m3" onclick="Change(this)">菜单三</div>
 56             <div class="content hide">
 57                 <div>北京</div>
 58                 <div>河南</div>
 59                 <div>云南</div>
 60             </div>
 61         </div>
 62     </div>
 63 
 64     <table border="1">
 65         <thead></thead>
 66         <tbody>
 67             <tr>
 68                 <td>1</td>
 69                 <td>2</td>
 70                 <td>3</td>
 71                 <td onclick="get_prev(this);">编辑</td>
 72             </tr>
 73 
 74             <tr>
 75                 <td>11</td>
 76                 <td>22</td>
 77                 <td>33</td>
 78                 <td onclick="get_prev(this);">编辑</td>
 79             </tr>
 80             <tr>
 81                 <td>111</td>
 82                 <td>222</td>
 83                 <td>333</td>
 84                 <td onclick="get_prev(this);">编辑</td>
 85             </tr>
 86         </tbody>
 87     </table>
 88 
 89     <script src="../jquery-2.2.0.js" type="text/javascript"></script>
 90     <script type="text/javascript">
 91 //        function Change(arg){
 92 //            if(arg==1){
 93 //                var menu = $('#m1')
 94 //            }else if (arg==2){
 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 ret=true;
105             //遍历所有的input，只要为空，就将ret 设置为false
106             $(':text').each(function(){
107                 //$(this)==要循环的每一个元素；
108                 var value =$(this).val();
109                 if (value.trim().length==0){
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>

隐藏并单击显示输入框

相关阅读:
前端编程练习：电子表翻盘效果
 前端编程练习：钟表（下）：使用js编写钟表
 前端编程练习：钟表（上）：使用背景图实现效果
 使用原生js编写贪吃蛇小游戏
 前端编程练习：手风琴
 前端编程练习：电子表
 前端编程练习：放大镜
 Winfrom之domainUpDown控件
 Winfrom之MaskedText(高级文本框)
Winfrom之ProgressBar控件(进度条)
原文地址：https://www.cnblogs.com/bravexz/p/5219665.html