C语言基础学习PYTHON——基础学习D17
20181014内容纲要：
1、jQuery介绍
2、jQuery功能介绍
（1）jQuery的引入方式
（2）选择器
（3）筛选
（4）文本操作
（5）样式操作
（6）属性操作
（7）文本处理
（8）css处理
（9）位置
（10）事件
（11）jQuery扩展
3、实例展示
4、小结
5、推荐
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：https://www.cnblogs.com/hq-blog/p/8590275.html
推荐2：https://www.cnblogs.com/WSX1994/p/9115048.html
写博客其实并非易事！
我是尾巴~
本次推荐：http://jquery.cuishifeng.cn/index.html
详细请看这里！
虽不才，才要坚持~