jQuery
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <input type="text"/> <div id="i1"> <div class="item"></div> <div class="item"> <div class="c1">123</div> <a>百度</a> </div> <div class="item"></div> </div> <div id="i2"></div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> <script src="js/jquery-1.12.4.js"></script> <script> // jQuery文档地址：http://www.php100.com/manual/jquery/ // jQuery调用：jQuery.xxx 或 $().xxx //jQuery选择器和class选择器类似 $('#i1').addClass('hide'); //id选择器 $('.item').addClass('hide'); //class选择器 $('.item a').addClass('hide'); //层级选择器 $('div').addClass('oo'); //标签选择器 $('.tem,div') //组合选择器 $('li:first'); //获取匹配的第一个元素 //jQuery筛选器 $('#i1').find('.item') //id为i1的标签下的class为item的所有标签 //属性选择器 $("input[name='newsletter']").attr("checked", true); //获取所有name为newsletter的input标签，并设置checked属性为true </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 600px; width: 200px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #1459a2; color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script> function ShowMenu(ths) { // console.log(ths); // Dom中的标签对象 //$(ths) // Dom标签对象转换成jQuery标签对象（便利） //$(ths)[0] // jQuery标签对象转换成Dom标签对象 //点击哪个菜单，哪个菜单对应的内容标签移除hide，其他菜单对应的body添加hide $(ths).next().removeClass('hide'); //当前标签的下一个标签去除class为hide的类 $(ths).parent().siblings().find('.body').addClass('hide'); //为当前标签的父标签的兄弟标签中class为body的标签添加class=hide } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="CheckAll()" /> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <table border="1"> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> </tbody> </table> <script src="js/jquery-1.12.4.js"></script> <script> //prop：jQuery中专门用来做全选、反选的 // 全选 function CheckAll() { $("#tb input[type='checkbox']").prop('checked',true); //id为tb的标签下的所有type为checkbox的input标签，全部设置checked为true } // 取消 function CancleAll() { $("#tb input[type='checkbox']").prop('checked',false); //id为tb的标签下的所有type为checkbox的input标签，全部设置checked为false } // 反选 function ReverseAll() { //each：jQuery提供的循环功能 $("#tb input[type='checkbox']").each(function (i) { //i为循环的每个标签的索引 //this代指当前循环的每一个标签 if($(this).prop('checked')){ //如果当前标签是选中状态，就取消选中 $(this).prop('checked',false); }else { //反之，就选中 $(this).prop('checked',true); } }) } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <div> <p> <a onclick="Add(this);"> + </a> <input type="text" /> </p> </div> <script src="js/jquery-1.12.4.js"></script> <script> function Add(ths) { //clone()：复制标签及标签内的全部html内容 var p = $(ths).parent().clone(); //复制p标签所有html内容 p.find('a').text(' - '); //将+换成- p.find('a').attr('onclick','Remove(this);'); //修改属性onclick为Remove(this); $(ths).parent().parent().append(p); //将复制的p标签追加到div标签 } function Remove(ths) { $(ths).parent().remove(); //删除p标签 } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ width: 200px; height: 600px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" >菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script> // $(function () { // // 当文档树加载完毕后，自动执行 // }); $(function(){ // 当文档树加载完毕后，自动执行 $('.item .title').click(function(){ //绑定click事件，相当于onclick // this,$(this) $(this).next().removeClass('hide'); $(this).parent().siblings().find('.body').addClass('hide'); }); }); /*另一种绑定方法 $('.item .title').bind('focus', function () { $(this).next().removeClass('hide'); $(this).parent().siblings().find('.body').addClass('hide'); }) */ </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="Add();" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { //delegate：延时绑定事件---指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 //使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 //为ul标签下的li标签绑定click事件（只有当click事件发生时才进行绑定） $('ul').delegate('li','click',function () { alert($(this).text()); }) }); function Add() { var tag = document.createElement('li'); tag.innerText = '666'; $('ul').append(tag); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 204px; } </style> </head> <body> <div> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名" /> <!--<span>用户名不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="password" label="密码" /> <!--<span>密码不能为空</span>--> </div> <input type="submit" /> </form> </div> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { //页面框架加载完成后自动执行的函数 BindCheckValid(); }); function BindCheckValid() { $('form input[type="submit"]').click(function () { $('form .item span').remove(); //如果原来有span标签，就删除 var flag = true; //返回值，默认为true //获取所有输入框，并循环 $('form .c1').each(function () { var val = $(this).val(); //获取当前输入框的value值 if(val.trim().length == 0) { //输入为空，提示并阻止form提交 var tag = document.createElement('span'); tag.innerText = $(this).attr('label') + '不能为空'; $(this).after(tag); //将span标签添加到当前输入框标签的后面 flag = false; //将flag置为false // return false; } }); return flag; }); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> function f(){ //使用jQuery的each循环，如果在each中的匿名函数中return： // return：则只是终止当前被循环的元素的函数，继续执行其他元素的函数。------相当于for循环中的continue //return false：则整个each循环都被终止-----相当于for循环中的break $.each([11,22,33,44],function(k,v){ if(v == 22){ //return ; // continue-----结果：11 33 44 return false; //break----结果：11 } console.log(v); }) } f(); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script src="js/jquery-1.12.4.js"></script> <script> //jQuery扩展 // 扩展对象本身，定义在extend中的函数，可以使用$调用 $.extend({ min: function(a, b) { return a < b ? a : b; }, //min：函数名，后面的function是具体函数 max: function(a, b) { return a > b ? a : b; } }); //jQuery调用自定义的jQuery扩展函数 $.min(2,3); // => 2 $.max(4,5); // => 5 //扩展元素的新方法 jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); //使用自定义的jQuery扩展方法 $("input[type=checkbox]").check(); $("input[type=radio]").uncheck(); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/extend.js"></script> <script> //将jQuery扩展放入外部文件形成一个自定义的jQuery插件 //这种方式优点：自执行、闭包 //闭包：用一个函数将扩展所用到的所有内容包含，可以确保扩展不会受其他插件定义的相同的变量，函数等影响 $.min(2,3); </script> </body> </html>
//自执行函数 (function (jq) { jq.extend({ min: function(a, b) { return a < b ? a : b; }, //min：函数名，后面的function是具体函数 max: function(a, b) { return a > b ? a : b; } }) })(jQuery);
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 204px; } </style> </head> <body> <div> <form> <div class="item"> <!--自定义属性：require="true"是否为空，true为不允许 min-len="6"输入字符小长度--> <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6" /> <!--<span>用户名不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="password" label="密码" /> </div> <div class="item"> <input class="c1" type="text" name="phone" label="手机" require="true" phone="true" /> </div> <input type="submit" /> </form> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/form_extend.js"></script> <script> $(function () { //调用自定义jQuery插件来进行表单验证 $.CheckValid(); }); </script> </body> </html>
/** * Created by Administrator on 2016/12/24. */ //自定义jQuery表单验证插件 (function (jq) { //错误信息提示函数 function ErrorMessage(obj,message) { var tag = document.createElement('span'); tag.innerText = message; obj.after(tag); //将span标签添加到当前输入框标签的后面 } jq.extend({ CheckValid: function () { jq('form input[type="submit"]').click(function () { jq('form .item span').remove(); //如果原来有span标签，就删除 var flag = true; //返回值，默认为true //获取所有输入框，并循环 jq('form .c1').each(function () { if($(this).attr('require')) { //require为true，不允许允许为空 var val = $(this).val(); //获取当前输入框的value值 if(val.trim().length == 0) { //输入为空，提示并阻止form提交 ErrorMessage($(this),$(this).attr('label') + '不能为空'); //错误提示 flag = false; //将flag置为false return false; } var minLen = $(this).attr('min-len'); if(minLen) { //有最小长度限制，进行判断 var minLenInt = parseInt(minLen); //将字符串转换为数字 if(val.length < minLenInt){ //输入长度小于定义的最小长度，提示信息并阻止提交 ErrorMessage($(this),$(this).attr('label') + '最小长度为' + minLen); flag = false; //将flag置为false return false; } } var phone = $(this).attr('phone'); if(phone) { //phone属性存在，判断输入是否是手机格式 var phoneReg = /^1[3|5|8]\d{9}$/; //定义匹配手机格式的正则表达式 //phoneReg.test(val):用正则表达式去匹配输入的值，成功则返回true，失败返回false if(!phoneReg.test(val)){ //没匹配成功，提示并阻止提交 ErrorMessage($(this),$(this).attr('label') + '格式错误'); flag = false; //将flag置为false return false; } } } }); return flag; }); } }) })(jQuery);
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script src="js/jquery-1.12.4.js"></script> <script> //定义正则表达式 // 定义正则表达式也可以 reg= new RegExp() // /.../ 用于定义正则表达式 // /.../g 表示全局匹配 // /.../i 表示不区分大小写 // /.../m 表示多行匹配，多行匹配是每行都进行一次正则匹配（每行当做一个新的匹配对象）-----如果没有m，即使换行也是整体当做一个字符串进行匹配 var pattern = /^Java\w*/gm; var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; result = pattern.exec(text); //匹配 // test(string) 检查字符串中是否和正则匹配，匹配则返回true，不匹配返回false //只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$ n = 'uui99sdf'; reg = /\d+/; reg.test(n); //结果：---> true // exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。 //非全局模式 //获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配） var pattern = /\bJava\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text);//结果：["JavaScript"] var pattern = /\bJava(\w*)\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text); //结果：["JavaScript","Script"]---只获取匹配的第一个结果，后面是该结果的分组匹配 //全局模式 //需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕 var pattern = /\bJava\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text); //结果：["JavaScript"]------再执行该语句，就获得下一个匹配结果 var pattern = /\bJava(\w*)\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) //结果：["JavaScript","Script"]---获取匹配的第一个结果，后面是该结果的分组匹配。再次执行该语句就获取下一个匹配结果和其分组匹配 //字符串中正则相关方法 // obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效) // obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部 // obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项， // $数字：匹配的第n个组内容； // $&：当前匹配的内容； // $`：位于匹配子串左侧的文本； // $'：位于匹配子串右侧的文本 // $$：直接量$符号 var text = "JavaScript 6 is more fun than 7 Java or 8 JavaBeans!"; text.replace(/\d+/,'Pthon$&'); //在数字前加Python </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; } </style> </head> <body> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src=""> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content"> <div menu="function1" class="section" style='background-color:green;'> <h1>第一章</h1> </div> <div menu="function2" class="section" style='background-color:yellow;'> <h1>第二章</h1> </div> <div menu="function3" class="section" style='background-color:red;'> <h1>第三章</h1> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function(){ // 自动执行 Init(); }); function Init(){ $(window).scroll(function() { // 监听窗口滚动事件 // 获取滚动条高度 var scrollTop = $(window).scrollTop(); // console.log(scrollTop); // 当滚动到50像素时，左侧带菜单固定 if(scrollTop > 50){ $('.catalog').addClass('fixed'); }else{ $('.catalog').children().removeClass('active'); $('.catalog').removeClass('fixed'); } // 循环所有的内容 $('.content').children().each(function(){ // 当前标签距离顶部高度(顶部指的是整个文档的顶部，而不是当前窗口的顶部) var offSet = $(this).offset(); // 高度，左边有多远 // offSet.top // offSet.left // 自身高度 var height = $(this).height(); //offSet<滚动高度<offSet+height // 当前内容位于用户阅览区 if(scrollTop>offSet.top && scrollTop< offSet.top + height){ // console.log(scrollTop,offSet.top,height) // $(this) 当前内容标签 /* var target = $(this).attr('menu'); $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); return false; */ var docHeight = $(document).height(); var winHeight = $(window).height(); // 如果，滚轮到达底部，则显示最后一个菜单 if(docHeight == winHeight+scrollTop) //滚动高度+窗口高度=文档高度，表示已经拉倒底部 { $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active'); }else{ var target = $(this).attr('menu'); $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); } return false; } }); }); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>test</title> <style> .c1{ height: 2000px; background-color: gray; } .c2{ color: red; position: fixed; right: 50px; bottom: 50px; } </style> </head> <body> <div class="c1"></div> <div class="c2">返回顶部</div> <script src="jquery-1.12.4.js"></script> <script> //jQuery中的hover方法实现事件切换，当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数 $('.c2').hover(function () { $('.c2').css('color','red'); //返回顶部代码 // $(window).scrollTop(0,0); //使用scrollTop直接返回顶部 // $('body').scrollTop(0,0); //animate该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。 // 只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。 // $(document.body).animate({scrollTop:0},1000); //使用animate方法，在1000毫秒内返回顶部 $('html body').animate({scrollTop:0},1000); },function () { $('.c2').css('color','yellow'); }) </script> </body> </html>
