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" οnclick="CheckAll()" value="全選" />
 9     <input type="button" οnclick="CheckReverse()" value="反選" />
10     <input type="button" οnclick="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             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     </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" οnclick="return SubmitForm()" value="提交" />
 30             <input type="button" οnclick="Cancel()" value="取消" />
 31         </form>
 32     </div>
 33 </head>
 34 <body>
 35     <div>
 36         <div>
 37             <div id="m1" οnclick="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" οnclick="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" οnclick="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 οnclick="get_prev(this);">編輯</td>
 72             </tr>
 73 
 74             <tr>
 75                 <td>11</td>
 76                 <td>22</td>
 77                 <td>33</td>
 78                 <td οnclick="get_prev(this);">編輯</td>
 79             </tr>
 80             <tr>
 81                 <td>111</td>
 82                 <td>222</td>
 83                 <td>333</td>
 84                 <td οnclick="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>

隱藏并單擊顯示輸入框

轉載于:https://www.cnblogs.com/bravexz/p/5219665.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/396767.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/396767.shtml
英文地址，請注明出處：http://en.pswp.cn/news/396767.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！