D17——C語言基礎學PYTHON
C語言基礎學習PYTHON——基礎學習D17css
20181014內容綱要：html
一、jQuery介紹前端
二、jQuery功能介紹node
（1）jQuery的引入方式jquery
（2）選擇器編程
（3）篩選設計模式
（4）文本操做瀏覽器
（5）樣式操做app
（6）屬性操做框架
（7）文本處理
（8）css處理
（9）位置
（10）事件
（11）jQuery擴展
三、實例展現
四、小結
五、推薦
1 jQuery介紹
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。
jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。
jQuery的核心特性能夠總結爲：具備獨特的鏈式語法和短小清晰的多功能接口；具備高效靈活的css選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。
官方網站列出了下列支持jQuery的瀏覽器：
FirefoX 2．0+
Internet Explorer 6+
Safari 3+
Opera 10．6+
Chrome 8+
2 jQuery功能介紹
（1）jQuery的引入方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--css的兩種引入方式--> 7 <link rel="stylesheet" href="csswenjian"> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <div id="i1">123</div> 15 16 <!--jQuery的兩種引入方式--> 17 <script src="jquery-1.12.4.js"></script> 18 <script> 19 $("#i1") 20 </script> 21 </body> 22 </html>
（2）選擇器
1. id $('#id') 2. class <div class='c1'></div> $(".c1") 3. 標籤 <div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') 4. 組合a <div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') $('.c2') $('a,.c2,#i10') 5. 層級 $('#i10 a') 子子孫孫 $('#i10>a') 兒子 6. 基本 :first :last :eq() 7. 屬性 $('[alex]') 具備alex屬性的全部標籤 $('[alex="123"]') alex屬性等於123的標籤 <input type='text'/> <input type='text'/> <input type='file'/> <input type='password'/> $("input[type='text']") $(':text')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <input type="button" value="全選" onclick="checkAll();"> 10 <input type="button" value="反選" onclick="reverseAll();"> 11 <input type="button" value="取消" onclick="cancelAll();"> 12 <table border="1"> 13 <thead> 14 <tr> 15 <th>選項</th> 16 <th>IP</th> 17 <th>端口</th> 18 </tr> 19 </thead> 20 <tbody class="tb"> 21 <tr> 22 <td><input type="checkbox" /></td> 23 <td>1.1.1.1</td> 24 <td>80</td> 25 26 </tr> 27 <tr> 28 <td><input type="checkbox" /></td> 29 <td>1.1.1.1</td> 30 <td>80</td> 31 32 </tr> 33 <tr> 34 <td><input type="checkbox" /></td> 35 <td>1.1.1.1</td> 36 <td>80</td> 37 38 </tr> 39 <tr> 40 <td><input type="checkbox" /></td> 41 <td>1.1.1.1</td> 42 <td>80</td> 43 44 </tr> 45 <tr> 46 <td><input type="checkbox" /></td> 47 <td>1.1.1.1</td> 48 <td>80</td> 49 </tr> 50 </tbody> 51 </table> 52 53 <script src="jquery-1.11.3.js"></script> 54 <script> 55 function checkAll() { 56 $(":checkbox").prop('checked',true); 57 } 58 function cancelAll() { 59 $(':checkbox').prop('checked',false); 60 } 61 function reverseAll() { 62 $(":checkbox").each(function (k) { 63 //this 代指當前循環的每個元素 64 //console.log(k,this) 65 //這是經過Dom實現的反選 66 /*if(this.checked){ 67 this.checked = false; 68 } 69 else{ 70 this.checked = true; 71 }*/ 72 //這是jquery實現的反選 73 /*if($(this).prop('checked')){ 74 $(this).prop('checked',false); 75 }else { 76 $(this).prop('checked',true); 77 }*/ 78 //三元運算 79 var v = $(this).prop("checked")?false:true; 80 $(this).prop("checked",v) 81 }) 82 } 83 </script> 84 </body> 85 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .header{ 8 background-color: black; 9 color: wheat; 10 } 11 .content{ 12 min-height: 50px; 13 } 14 .hide{ 15 display: none; 16 } 17 </style> 18 </head> 19 <body> 20 <div style="height: 400px;width: 200px;border: 1px solid #dddddd"> 21 <div class="item"> 22 <div class="header">標題1</div> 23 <div class="content">內容1</div> 24 </div> 25 <div class="item"> 26 <div class="header">標題2</div> 27 <div class="content hide">內容2</div> 28 </div> 29 <div class="item"> 30 <div class="header">標題3</div> 31 <div class="content hide">內容3</div> 32 </div> 33 </div> 34 <script src="jquery-1.12.4.js"></script> 35 <script> 36 $(".header").click(function () { 37 //console.log(this); 38 //獲取當前標籤 $(this) 39 //獲取某個標籤的下一個標籤 40 //獲取某個標籤的父標籤 41 //獲取全部的兄弟標籤 42 //添加、移除樣式 43 44 //鏈式編程 45 //$(this).next().removeClass('hide'); 46 //$(this).parent().siblings().find('.content').addClass('hide'); 47 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide'); 48 }) 49 </script> 50 </body> 51 </html>
（3）篩選
篩選 $('#i1').next() $('#i1').nextAll() $('#i1').nextUntil('#ii1') <div> <a>asdf</a> <a>asdf</a> <a id='i1'>asdf</a> <a>asdf</a> <a id='ii1'>asdf</a> <a>asdf</a> </div> $('#i1').prev() $('#i1').prevAll() $('#i1').prevUntil('#ii1') $('#i1').parent() $('#i1').parents() $('#i1').parentsUntil() $('#i1').children() $('#i1').siblings() $('#i1').find() $('li:eq(1)') $('li').eq(1) first() last() hasClass(class)
（4）文本操做
文本操做： $(..).text() # 獲取文本內容 $(..).text(「<a>1</a>」) # 設置文本內容 $(..).html() $(..).html("<a>1</a>") $(..).val() $(..).val(..)
（5）樣式操做
樣式操做：
addClass
removeClass
toggleClass
（6）屬性操做
屬性操做： # 專門用於作自定義屬性 $(..).attr('n') $(..).attr('n','v') $(..).removeAttr('n') <input type='checkbox' id='i1' /> # 專門用於chekbox,radio $(..).prop('checked') $(..).prop('checked', true) PS: index 獲取索引位置
（7）文本處理
文檔處理：
append
prepend
after
before
remove
empty
clone
（8）css處理
css處理
$('t1').css('樣式名稱', '樣式值')
點贊：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字體大小，位置
（9）位置
位置： $(window).scrollTop() 獲取 $(window).scrollTop(0) 設置 scrollLeft([val]) offset().left 指定標籤在html中的座標 offset().top 指定標籤在html中的座標 position() 指定標籤相對父標籤(relative)標籤的座標 <div style='relative'> <div> <div id='i1' style='position:absolute;height:80px;border:1px'></div> </div> </div> $('i1').height() # 獲取標籤的高度 純高度 $('i1').innerHeight() # 獲取邊框 + 純高度 + ？ $('i1').outerHeight() # 獲取邊框 + 純高度 + ？ $('i1').outerHeight(true) # 獲取邊框 + 純高度 + ？ # 純高度，邊框，外邊距，內邊距
（10）事件
DOM： 三種綁定方式
jQuery：
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
*******************
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
阻止事件發生
return false
# 當頁面框架加載完成以後，自動執行
$(function(){
$(...)
})
（11）jQuery擴展
jQuery擴展：
- $.extend $.方法
- $.fn.extend $(..).方法
(function(){
var status = 1;
// 封裝變量
})(jQuery)
3 實例展現
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .model{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 500px; 15 height: 400px; 16 margin-left: -250px; 17 margin-top: -250px; 18 background-color: #eeeeee; 19 z-index: 10; 20 } 21 .shadow{ 22 position: fixed; 23 top: 0; 24 left: 0; 25 right: 0; 26 bottom: 0; 27 opacity: 0.6; 28 background-color: black; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body> 34 <a onclick="addElement();">添加</a> 35 <table border="1" class="tb"> 36 37 <div class="model hide"> 38 <div> 39 <input name="hostname" type="text"/> 40 <input name="port" type="text"/> 41 </div> 42 <div> 43 <input type="button" value="取消" onclick="cancelModel();"/> 44 <input type="button" value="肯定" onclick="confirmModel();"/> 45 </div> 46 </div> 47 <div class="shadow hide"></div> 48 49 <tr> 50 <td>1.1.1.1</td> 51 <td>80</td> 52 <td> 53 <a class="edit">編輯</a> | <a class="del">刪除</a> 54 </td> 55 </tr> 56 <tr> 57 <td>1.1.1.2</td> 58 <td>80</td> 59 <td> 60 <a class="edit">編輯</a> | <a class="del">刪除</a> 61 </td> 62 </tr> 63 <tr> 64 <td>1.1.1.3</td> 65 <td>80</td> 66 <td> 67 <a class="edit">編輯</a> | <a class="del">刪除</a> 68 </td> 69 </tr> 70 <tr> 71 <td>1.1.1.4</td> 72 <td>80</td> 73 <td> 74 <a class="edit">編輯</a> | <a class="del">刪除</a> 75 </td> 76 </tr> 77 </table> 78 <script src="jquery-1.12.4.js"></script> 79 <script> 80 function addElement() { 81 // $(".model").removeClass('hide'); 82 // $(".shadow").removeClass('hide'); 83 $(".model,.shadow").removeClass('hide'); 84 } 85 function cancelModel() { 86 $(".model,.shadow").addClass('hide'); 87 $('.model input[type="text"]').val(''); 88 } 89 function confirmModel() { 90 var trs = []; 91 $('.nodel input[type="text"]').each(function () { 92 var td = document.createElement('td'); 93 td.innerHTML = "用戶輸入的值"； 94 95 }) 96 } 97 $('.edit').click(function () { 98 $(".model,.shadow").removeClass('hide'); 99 var tds = $(this).parent().prevAll(); 100 //console.log(tds[0]); 101 //console.log(tds[1]); 102 var port = $(tds[0]).text(); 103 var host = $(tds[1]).text(); 104 $('.model input[name="hostname"]').val(host); 105 $('.model input[name="port"]').val(port); 106 }) 107 $('.del').click(function () { 108 $(this).parent().parent().remove(); 109 }) 110 </script> 111 112 </body> 113 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 </style> 11 </head> 12 <body> 13 <input id="i1" type="button" value="開關"/> 14 <div class="c1 hide">我愛學習</div> 15 16 <script src="jquery-1.12.4.js"></script> 17 <script> 18 $('#i1').click(function () { 19 // if($('.c1').hasClass('hide')){ 20 // $('.c1').removeClass('hide'); 21 // }else { 22 // $('.c1').addClass('hide'); 23 // } 24 //jquery也提供了實現這樣功能的函數 25 $('.c1').toggleClass('hide'); 26 }) 27 </script> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .model{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 500px; 15 height: 400px; 16 margin-left: -250px; 17 margin-top: -250px; 18 background-color: #eeeeee; 19 z-index: 10; 20 } 21 .shadow{ 22 position: fixed; 23 top: 0; 24 left: 0; 25 right: 0; 26 bottom: 0; 27 opacity: 0.6; 28 background-color: black; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body> 34 <a onclick="addElement();">添加</a> 35 <table border="1"> 36 37 <div class="model hide"> 38 <div> 39 <input name="hostname" type="text"/> 40 <input name="port" type="text"/> 41 </div> 42 <div> 43 <input type="button" value="取消" onclick="cancelModel();"/> 44 </div> 45 </div> 46 <div class="shadow hide"></div> 47 48 <tr> 49 <td target="hostname">1.1.1.1</td> 50 <td target="port">80</td> 51 <td> 52 <a class="edit">編輯</a> | <a>刪除</a> 53 </td> 54 </tr> 55 <tr> 56 <td target="hostname">1.1.1.1</td> 57 <td target="port">80</td> 58 <td> 59 <a class="edit">編輯</a> | <a>刪除</a> 60 </td> 61 </tr> 62 <tr> 63 <td target="hostname">1.1.1.1</td> 64 <td target="port">80</td> 65 <td> 66 <a class="edit">編輯</a> | <a>刪除</a> 67 </td> 68 </tr> 69 <tr> 70 <td target="hostname">1.1.1.1</td> 71 <td target="port">80</td> 72 <td> 73 <a class="edit">編輯</a> | <a>刪除</a> 74 </td> 75 </tr> 76 </table> 77 <script src="jquery-1.12.4.js"></script> 78 <script> 79 function addElement() { 80 // $(".model").removeClass('hide'); 81 // $(".shadow").removeClass('hide'); 82 $(".model,.shadow").removeClass('hide'); 83 } 84 function cancelModel() { 85 $(".model,.shadow").addClass('hide'); 86 $('.model input[type="text"]').val(''); 87 } 88 $('.edit').click(function () { 89 $(".model,.shadow").removeClass('hide'); 90 var tds = $(this).parent().prevAll(); 91 tds.each(function () { 92 //this 代指每一個td 93 //獲取td的屬性值 94 var n = $(this).attr('target'); 95 //獲取td中的內容 96 var text = $(this).text(); 97 var a1 = '.model input[name="'; 98 var a2 = '"]'; 99 var temp = a1 + n + a2; 100 $(temp).val(text); 101 }) 102 //console.log(tds[0]); 103 //console.log(tds[1]); 104 // var port = $(tds[0]).text(); 105 // var host = $(tds[1]).text(); 106 // $('.model input[name="hostname"]').val(host); 107 // $('.model input[name="port"]').val(port); 108 }) 109 </script> 110 111 </body> 112 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .menu{ 11 height: 38px; 12 background-color: #eeeeee; 13 line-height: 38px; 14 } 15 .active{ 16 background-color: brown; 17 } 18 .menu-item{ 19 float: left; 20 border: 1px solid red; 21 padding: 0 5px; 22 cursor: pointer; 23 } 24 .content{ 25 min-height: 100px; 26 border: 1px solid #eeeeee; 27 } 28 </style> 29 </head> 30 <body> 31 <div style="width: 700px;margin: 0 auto"> 32 <div class="menu"> 33 <div class="menu-item active" a="1">菜單一</div> 34 <div class="menu-item" a="2">菜單二</div> 35 <div class="menu-item" a="3">菜單三</div> 36 </div> 37 <div class="content"> 38 <div b="1">內容一</div> 39 <div class="hide" b="2">內容二</div> 40 <div class="hide" b="3">內容三</div> 41 </div> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $('.menu-item').click(function () { 46 $(this).addClass('active').siblings().removeClass('active'); 47 var target = $(this).attr('a'); 48 $('.content').children("[b='" + target + "']").removeClass('hide').siblings().addClass('hide'); 49 }) 50 </script> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .menu{ 11 height: 38px; 12 background-color: #eeeeee; 13 line-height: 38px; 14 } 15 .active{ 16 background-color: brown; 17 } 18 .menu-item{ 19 float: left; 20 border: 1px solid red; 21 padding: 0 5px; 22 cursor: pointer; 23 } 24 .content{ 25 min-height: 100px; 26 border: 1px solid #eeeeee; 27 } 28 </style> 29 </head> 30 <body> 31 <div style="width: 700px;margin: 0 auto"> 32 <div class="menu"> 33 <div class="menu-item active">菜單一</div> 34 <div class="menu-item">菜單二</div> 35 <div class="menu-item">菜單三</div> 36 </div> 37 <div class="content"> 38 <div >內容一</div> 39 <div class="hide">內容二</div> 40 <div class="hide">內容三</div> 41 </div> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $('.menu-item').click(function () { 46 $(this).addClass('active').siblings().removeClass('active'); 47 var v = $(this).index(); 48 $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide'); 49 }) 50 </script> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input id="t1" type="text" /> 9 <input id="a1" type="button" value="添加"/> 10 <input id="a2" type="button" value="刪除"/> 11 <input id="a3" type="button" value="複製"/> 12 13 <ul id="u1"> 14 <li>1</li> 15 <li>2</li> 16 </ul> 17 <script src="jquery-1.12.4.js"></script> 18 <script> 19 $('#a1').click(function () { 20 var v = $('#t1').val(); 21 var temp = "<li>" + v + "</li>"; 22 $('#u1').append(temp); //在後面追加 23 //$('#u1').prepend(temp); //在前面追加 24 //$('#u1').after(temp); //在同級後面 25 //$('#u1').before(temp); //在同級前面 26 }); 27 $('#a2').click(function () { 28 var index = $('#t1').val(); 29 $('#u1 li').eq(index).remove(); 30 //$('#u1 li').eq(index).empty(); 31 }) 32 $('#a3').click(function () { 33 var index = $('#t1').val(); 34 var v = $('#u1 li').eq(index).clone(); 35 $('#u1').append(v); 36 }) 37 </script> 38 </body> 39 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .container{ 8 padding: 80px; 9 border: 1px solid #dddddd; 10 } 11 .item{ 12 position: relative; 13 width: 40px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="container"> 19 <div class="item"> 20 <span>贊</span> 21 </div> 22 </div> 23 <div class="container"> 24 <div class="item"> 25 <span>贊</span> 26 </div> 27 </div> 28 <div class="container"> 29 <div class="item"> 30 <span>贊</span> 31 </div> 32 </div> 33 <div class="container"> 34 <div class="item"> 35 <span>贊</span> 36 </div> 37 </div> 38 <div class="container"> 39 <div class="item"> 40 <span>贊</span> 41 </div> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $('.item').click(function () { 46 addElement(this); 47 }); 48 function addElement(self) { 49 var fontSize = 15; 50 var top = 0; 51 var right = 0; 52 var opacity = 1; 53 54 var tag = document.createElement('span'); 55 $(tag).text('+1'); 56 $(tag).css('color','green'); 57 $(tag).css('position','absolute'); 58 $(tag).css('fontSize',fontSize + "px"); 59 $(tag).css('top',top + "px"); 60 $(tag).css('right',right + "px"); 61 $(tag).css('opacity',opacity); 62 $(self).append(tag); 63 64 var obj = setInterval(function () { 65 fontSize = fontSize + 5; 66 top = top - 5; 67 right = right - 5; 68 opacity = opacity - 0.2; 69 $(tag).css('fontSize',fontSize + "px"); 70 $(tag).css('top',top + "px"); 71 $(tag).css('right',right + "px"); 72 $(tag).css('opacity',opacity); 73 74 if(opacity<0){ 75 clearInterval(obj); 76 $(tag).remove(); 77 } 78 },100); 79 } 80 </script> 81 </body> 82 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="height: 100px; width: 100px;overflow: auto"> 9 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 10 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 11 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 12 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 13 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 14 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 15 </div> 16 <div style="height: 1000px;"></div> 17 <script src="jquery-1.12.4.js"></script> 18 19 </body> 20 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input id="t1" type="text" /> 9 <input id="a1" type="button" value="添加"/> 10 <input id="a2" type="button" value="刪除"/> 11 <input id="a3" type="button" value="複製"/> 12 13 <ul id="u1"> 14 <li>1</li> 15 <li>2</li> 16 </ul> 17 <script src="jquery-1.12.4.js"></script> 18 <script> 19 $('#a1').click(function () { 20 var v = $('#t1').val(); 21 var temp = "<li>" + v + "</li>"; 22 $('#u1').append(temp); //在後面追加 23 //$('#u1').prepend(temp); //在前面追加 24 //$('#u1').after(temp); //在同級後面 25 //$('#u1').before(temp); //在同級前面 26 }); 27 $('#a2').click(function () { 28 var index = $('#t1').val(); 29 $('#u1 li').eq(index).remove(); 30 //$('#u1 li').eq(index).empty(); 31 }) 32 $('#a3').click(function () { 33 var index = $('#t1').val(); 34 var v = $('#u1 li').eq(index).clone(); 35 $('#u1').append(v); 36 }) 37 $('ul').delegate('li','click',function () { 38 var v = $(this).text(); 39 alert(v); 40 }) 41 </script> 42 </body> 43 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--先執行本身綁定的事件，而後跳轉--> 9 <a onclick="Clickon" href="http://www.baidu.com">百度</a> 10 只執行綁定的事件，不跳轉 11 <a onclick="return Clickon" href="http://www.baidu.com">百度</a> 12 <a id="i1" onclick="return Clickon" href="http://www.baidu.com">百度</a> 13 14 <script src="jquery-1.12.4.js"></script> 15 <script> 16 function Clickon() { 17 alert(123); 18 return false; 19 } 20 $('#i1').click(function () { 21 alert(456); 22 return false; 23 }) 24 </script> 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .error{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <form id="f1" action="s5開關功能.html" method="POST"> 14 <div><input name="n1" type="text" /></div> 15 <div><input name="n2" type="password" /></div> 16 <div><input name="n3" type="text" /></div> 17 <div><input name="n4" type="text" /></div> 18 <div><input name="n5" type="text" /></div> 19 20 <input type="submit" value="提交" /> 21 </form> 22 <script src="jquery-1.12.4.js"></script> 23 <script> 24 //當頁面框架加載完成後自動執行 25 $(function () {}); 26 //當頁面全部元素徹底加載完畢後執行 27 $(':submit').click(function () { 28 var flag = true; 29 $('.error').remove(); 30 $('f1').find('input[type="text"],input[type="password"]').each(function () { 31 var v = $(this).val(); 32 if(v.length <= 0){ 33 flag = false; 34 var tag = document.createElement('span'); 35 tag.className = "error"; 36 tag.innerHTML = "必填"; 37 $(this).after(tag); 38 //return false; 39 } 40 }) 41 /*這是對於表單中只含有一個input標籤時 42 var v = $(this).prev().val(); 43 if(v.length > 0){ 44 return true; 45 }else{ 46 alert("請輸入內容"); 47 return false; 48 }*/ 49 }) 50 51 </script> 52 </body> 53 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script src="jquery-1.12.4.js"></script> 9 <script> 10 //第一種擴展方式 11 $.extend({ 12 'kanghui':function(){ 13 return 'shuaige'; 14 } 15 }); 16 var v = $.kanghui(); 17 alert(v); 18 //第二種擴展方式 19 $.fn.extend({ 20 'kanghui':function () { 21 return 'shuaige' 22 } 23 }); 24 var v = $('#i1').kanghui(); 25 alert(v); 26 </script> 27 </body> 28 </html>
4 小結
一入前端深似海，不過確實挺好玩，也不算難。可是想和作事兩碼事。
不少事情不是想象的那麼簡單仍是要作好計劃，循序漸進，有條不紊。
調節好本身吧~不能一蹶不振!
5 推薦
推薦1：http://www.javashuo.com/article/p-ktwrpymi-d.html
推薦2：http://www.javashuo.com/article/p-hhyjrodo-r.html
寫博客其實並不是易事！
我是尾巴~
本次推薦：http://jquery.cuishifeng.cn/index.html
詳細請看這裏！
雖不才，纔要堅持~
相關文章
- 1. D04——C語言基礎學PYTHON
- 2. D16——C語言基礎學PYTHON
- 3. D15——C語言基礎學PYTHON
- 4. 從C語言快速學會Python語言基礎入門
- 5. C語言基礎
- 6. C#基礎語言
- 7. c語言基礎
- 8. C#語言基礎
- 9. C 語言基礎
- 10. c語言（基礎）
- 更多相關文章...
- • R 語言基礎 - R 語言教程
- • Kotlin 基礎語法 - Kotlin 教程
- • Kotlin學習（一）基本語法
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. D04——C語言基礎學PYTHON
- 2. D16——C語言基礎學PYTHON
- 3. D15——C語言基礎學PYTHON
- 4. 從C語言快速學會Python語言基礎入門
- 5. C語言基礎
- 6. C#基礎語言
- 7. c語言基礎
- 8. C#語言基礎
- 9. C 語言基礎
- 10. c語言（基礎）