http://www.cnblogs.com/wupeiqi/articles/5433893.html JavaScirpt 正则，字符串三个方法 DOM 查找： 直接查找 间接查找 --getElementById --getElementsByTagName 操作： 值 innerText innerHtml value class： className classList.add classList.remove 样式： <input type='text' style="color:red;font-size:40px;"/> tag = ..... tag.style.color = 'red'; tag.style.fontSize = '40px'; 属性： <input id='i1' name='n1' alex='sb' type='text' style="color:red;font-size:40px;"/> setAttribute getAttribute removeAttribute ===> tabObj.checked = true ===>jQuery: 操作数据，prop(checked,true) 标签： 创建标签： 字符串 对象 将标签添加到HTML中 字符串形式的标签： p1.insertAdjacentHTML('beforeEnd',tag); 对象形式的标签： p1.insertAdjacentElement('afterBegin',document.createElement('p')) xxx.insertBefore(tag,xxx[1]) 点赞： 创建标签，定时器（大小，位置，透明度） 1、this，当前触发事件的标签 2、createElement 3、appendChild 4、setInterval创建定时器 clearInterval删除定时器 5、removeChild删除子标签 定时器 setTimeOut,clearTimeout setInterval,clearInter 事件： 1、this，当前触发事件的标签 2、全局事件绑定 window.onKeyDown = function(){} 3、event，包含事件相关内容 4、默认事件 自定义优先：a,form 默认优先：checkbox jQuery 模块，Dom和JavaScript， 1.12.. --> ... 2.x --> IE9 查找： 选择器 id选择器 标签选择器 类选择器 组合 层级 #i1 .c1 $('input:eq(1),#i1 .item') 筛选器 $('#i1').find('.item') $('#i1').eq(1) 操作： CSS 属性 $('#i1').html() # 获取html内容 $('#i1').html("<span>123</span>") # 设置html内容 text() val() 文本操作 事件： - 优化 1、如何使用jQuery绑定 2、当文档加载完毕后，自动执行 $(function(){ ... }); 3、延迟绑定 4、return false; 扩展： JavaScirpt 正则，字符串三个方法 $.login Form表单验证（） Ajax： 偷偷发请求 -- jQuery循环 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--绑定事件，获取焦点onfocus(鼠标点击),失去焦点onblur(鼠标移走)--> <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" /> <input id="i2" type="text"/> <script type="text/javascript"> function Focus(){ //console.log('Focus'); //获取标签，清空 var tag = document.getElementById('i1'); if(tag.value == "请输入关键字"){ tag.value = ""; } } function Blur(){ //console.log('blur'); //移除标签，赋予 var tag = document.getElementById('i1'); var val = tag.value; if(val.trim().length == 0){ tag.value = "请输入关键字"; } } </script> </body> </html> 模态对话框 中间对话框，隐藏，显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*隐藏，加!important最优先*/ .hide{ display: none !important; } /*遮罩层*/ .shade{ position: fixed; top:0; bottom: 0; left: 0; right: 0; /*background-color: black;*/ /*opacity: 0.6;*/ background-color: rgba(0,0,0,.6); z-index: 1000; } /*对话框层*/ .modal{ height: 200px; 400px; background-color: white; position: fixed; top: 50%; left: 50%; margin-left: -200px; margin-top: -100px; z-index: 1001; } </style> </head> <body> <div style="height: 2000px;background-color: #dddddd;"> <input type="button" value="点我" onclick="ShowModal();"/> </div> <div id="shade" class="shade hide"></div> <div id="modal" class="modal hide"> <a href="javascript:void(0);" onclick="HideModal();">取消</a> </div> <script> // 点击显示 function ShowModal(){ var t1 = document.getElementById('shade'); var t2 = document.getElementById('modal'); t1.classList.remove('hide'); t2.classList.remove('hide'); } // 点击隐藏 function HideModal(){ var t1 = document.getElementById('shade'); var t2 = document.getElementById('modal'); t1.classList.add('hide'); t2.classList.add('hide'); } </script> </body> </html> 表格，全选，取消，反选 -----版本1，不能复选 <!DOCTYPE html> <html lang="en"> <head> <meta 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" id="test"/></td> <td>1</td> <td>11</td> </tr> <tr> <td><input type="checkbox" id="test1"/></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" id="test2"/></td> <td>3</td> <td>33</td> </tr> </tbody> </table> <script> //全选，遍历input配置checked等于checked(勾选) function CheckAll() { //获取指定内容 var tb = document.getElementById('tb') var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.setAttribute('checked','checked'); } } //取消,去掉checked function CancleAll() { var tb = document.getElementById('tb') var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.removeAttribute('checked'); } } //反选，判断是否为真(是否勾选，勾选即取消，反之则勾选) function ReverseAll() { var tb = document.getElementById('tb') var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; if(ck.checked){ ck.checked = false; ck.removeAttribute('checked'); }else{ ck.checked = true; ck.setAttribute('checked','checked'); } } } </script> </body> </html> -------版本2,完整版本 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1" > <thead> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> </tbody> </table> <script> function CheckAll(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked = true; } } } function CancelAll(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked = false; } } } function ReverseCheck(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; if(inp.checked){ inp.checked = false; }else{ inp.checked = true; } } } } </script> </body> </html> 点赞功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ padding: 50px; position: relative; } </style> </head> <body> <div class="item"> <a onclick="Favor(this);">赞1</a> </div> <div class="item"> <a onclick="Favor(this);">赞2</a> </div> <div class="item"> <a onclick="Favor(this);">赞3</a> </div> <script> function Favor(ths){ // ;ths=> this=> 当前触发事件的标签 var top = 49; var left = 71; var op = 1; var fontSize = 18; var tag = document.createElement('span'); tag.innerText = '+1'; tag.style.position = 'absolute'; tag.style.top = top + "px"; tag.style.left = left + "px"; tag.style.opacity = op; tag.style.fontSize = fontSize + 'px'; ths.parentElement.appendChild(tag); var interval = setInterval(function(){ top -= 10; left += 10; fontSize += 5; op -= 0.1; tag.style.top = top + "px"; tag.style.left = left + 'px'; tag.style.opacity = op; tag.style.fontSize = fontSize + 'px'; if(opt <= 0.2){ clearInterval(interval); ths.parentElement.removeChild(tag); } },50); } </script> </body> </html> DOM实现返回顶部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .back{ position: fixed; right: 20px; bottom: 20px; color: red; } .hide{ display: none; } </style> </head> <body onscroll="BodyScroll();"> <div style="height: 2000px;background-color: #dddddd;"></div> <div id="back" class="back hide" onclick="BackTop();">返回顶部</div> <script> function BackTop(){ document.body.scrollTop = 0; } function BodyScroll(){ var s = document.body.scrollTop; var t = document.getElementById('back'); if(s >= 100){ t.classList.remove('hide'); }else{ t.classList.add('hide'); } } </script> </body> </html> overflow: auto 滚动条 <div style="overflow:auto; 250px; height:auto; border:1px solid #000;"></div> DOM 为空验证提交表单，为空不允许提交，不为空提交 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://www.baidu.com"> <input type="text" id="username"/> <input type="submit" value="提交" onclick="return SubmitForm();"/> </form> <script> function SubmitForm(){ var user = document.getElementById('username'); if(user.value.length > 0){ // 可以提交 return true; }else{ // 不可提交，提示错误 alert('用户名输入不能为空'); return false; } } </script> </body> </html> JQUERY http://www.php100.com/manual/jquery/ JQUERY 全选，取消，反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="p1"> <p>hhh</p> </div> <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="jquery-1.12.4.js"></script> <script> function CheckAll(){ $('#tb input[type="checkbox"]').prop('checked',true); } function CancleAll(){ $('#tb input[type="checkbox"]').prop('checked',false); } function ReverseAll(){ $('#tb input[type="checkbox"]').each(function(i){ // this 当前标签 // $(this)当前标签的jQuery对象 if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } }); } </script> </body> </html> 小说网站布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } h1{ padding: 0; margin: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ 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; 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; 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; 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; border: 1px solid red; } </style> <body onscroll="ScrollEvent();"> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </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" id="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" id="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div> </div> <script> function ScrollEvent(){ var bodyScrollTop = document.body.scrollTop; if(bodyScrollTop>50){ document.getElementsByClassName('catalog')[0].classList.add('fixed'); }else{ document.getElementsByClassName('catalog')[0].classList.remove('fixed'); } var content = document.getElementById('content'); var sections = content.children; for(var i=0;i<sections.length;i++){ var current_section = sections[i]; // 当前标签距离顶部绝对高度 var scOffTop = current_section.offsetTop + 60; // 当前标签距离顶部，相对高度 var offTop = scOffTop - bodyScrollTop; // 当前标签高度 var height = current_section.scrollHeight; if(offTop<0 && -offTop < height){ // 当前标签添加active // 其他移除 active var menus = document.getElementById('catalog').children; var current_menu = menus[i]; current_menu.classList.add('active'); for(var j=0;j<menus.length;j++){ if(menus[j] == current_menu){ }else{ menus[j].classList.remove('active'); } } break; } } } </script> </body> </html> DOM实现隐藏菜单：点击菜单弹出内容，其它菜单收回 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ 200px; height: 600px; border: 1px solid #dddddd; overflow: auto; } <!--逐层选择器调用,配置所有body标签选择器中的内容格式--> .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" 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> <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> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> function ShowMenu(ths){ // console.log(ths); // Dom中的标签对象 //$(ths) // Dom标签对象转换成jQuery标签对象（便利） //$(ths)[0] // jQuery标签对象转换成Dom标签对象 $(ths).next().removeClass('hide'); $(ths).parent().siblings().find('.body').addClass('hide'); } </script> </body> JQUERY实现隐藏菜单：点击菜单弹出内容，其它菜单收回 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ 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" 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> <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> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> function ShowMenu(ths){ // console.log(ths); // Dom中的标签对象 //$(ths) // Dom标签对象转换成jQuery标签对象（便利） //$(ths)[0] // jQuery标签对象转换成Dom标签对象 $(ths).next().removeClass('hide'); $(ths).parent().siblings().find('.body').addClass('hide'); } </script> </body> </html> JQUERY实现隐藏菜单：点击菜单弹出内容，其它菜单收回 当文档树加载完毕后，自动执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ 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="jquery-1.12.4.js"></script> <script> $(function(){ // 当文档树加载完毕后，自动执行 $('.item .title').click(function(){ // 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 lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://www.baidu.com"> <input type="text" id="username" /> <input type="submit" value="提交" onclick="return SubmitForm();" /> </form> <script> function SubmitForm(){ var user = document.getElementById('username'); if(user.value.length > 0 ){ // 可以提交 return true; }else{ // 不可提交，提示错误 alert('用户名输入不能为空'); return false; } } </script> </body> </html> JQUERY 点击加减框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p> <a onclick="Add(this);"> + </a> <input type="text" /> </p> </div> <script src="jquery-1.12.4.js"></script> <script> function Add(ths){ var p = $(ths).parent().clone(); p.find('a').text(' - '); p.find('a').attr('onclick', 'Remove(this);'); $(ths).parent().parent().append(p); } function Remove(ths){ $(ths).parent().remove(); } </script> </body> </html> 点击按钮加内容，点击内容显示数值窗口对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="Add();" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function(){ /* $('li').click(function () { alert($(this).text()); }); */ $("ul").delegate("li","click",function(){ alert($(this).text()); }); }); function Add(){ var tag = document.createElement('li'); tag.innerText = '666'; $('ul').append(tag); } </script> </body> </html> JQUERY 功能学习 jQuery 库可以通过一行简单的标记被添加到网页中 jQuery 是一个 JavaScript 函数库 jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 可以通过下面的标记把 jQuery 添加到网页中： <head> <script type="text/javascript" src="jquery.js"></script> </head> 请注意，<script> 标签应该位于页面的 <head> 部分。 1. 基础 jQuery 实例 jQuery 的 hide() 和show 函数，隐藏和显示 HTML 文档中所有的 <p> 元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.12.4.js"></script> </head> <body> <h2> 这是头部</h2> <p>第一行</p> <p>第二行</p> <input id="btnShow" type="button" value="显示" /> <input id="btnHide" type="button" value="隐藏" /> <script type="text/javascript"> $("#btnShow").bind("click", function(event) { $('p').show(); }); $("#btnHide").bind("click", function(event) { $('p').hide(); }); </script> </body> </html> 只隐藏p元素，一个按钮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $('p').hide(); }); }); </script> </head> <body> <h2> 这是头部</h2> <p>第一行</p> <p>第二行</p> <button type="button">点我</button> </body> </html> 2.下载 jQuery 共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读） jquery.js 测试使用 jquery.min.js 正式环境用，精简 引用 <head> <script src="jquery-1.12.4.js"></script> </head> 3.jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions） $(this).hide() 隐藏当前的 HTML 元素(使用this,this为当前html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $(this).hide(); }); }); </script> </head> <body> <button type="button">Click me</button> </body> </html> $("#test").hide() 隐藏 id="test" 的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $("#test").hide(); }); }); </script> </head> <body> <h2>头部</h2> <p>段一</p> <p id="test">段二</p> <button type="button">Click me</button> </body> </html> $("p").hide() 隐藏所有 <p> 元素。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $("p").hide(); }); }); </script> </head> <body> <p>fdsdafasdfdsaf</p> <p>fdsdafasdfdsaf</p> <p>fdsdafasdfdsaf</p> <p>fdsdafasdfdsaf</p> <p>fdsdafasdfdsaf</p> <button type="button">Click me</button> </body> </html> $(".test").hide() 隐藏所有 class="test" 的元素。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $(".test").hide(); }); }); </script> </head> <body> <h2>头部</h2> <p class="test">段一</p> <p>段二</p> <button type="button">Click me</button> </body> </html> jQuery 语法总结 为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class="test" 的所有元素 $("#test").hide() - 隐藏所有 id="test" 的元素 文档就绪函数 在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中 $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，如果有空元素或图片会加载很慢，所以不完全加载加快速度 隐藏部分文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <!--.ex类标签文本全部支持 点击 隐藏--> <script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <!--.ex类标签文本统一样式--> <style type="text/css"> div.ex { background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } </style> </head> <body> <h3>中国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>联系人：张先生<br /> 北三环中路 100 号<br /> 北京</p> </div> <h3>美国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>联系人：David<br /> 第五大街 200 号<br /> 纽约</p> </div> </body> </html> 效果 - 淡入淡出 实现元素的淡入淡出效果 淡入 jQuery fadeIn() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <!--DIV图形是diaplay:none不显示的，利用选择器查到id，fadeIn带入--> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </head> <body> <p>演示带有不同参数的 fadeIn() 方法。</p> <button>点击这里，使三个矩形淡入</button> <br><br> <div id="div1" style="80px;height:80px;display:none;background-color:red;"></div> <br> <div id="div2" style="80px;height:80px;display:none;background-color:green;"></div> <br> <div id="div3" style="80px;height:80px;display:none;background-color:blue;"></div> </body> </html> 淡出 jQuery fadeOut() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <!--DIV图形是显示的，利用选择器查到id，fadeOut带出--> <!--fadeOut(3000)的3000为时间--> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); }); </script> </head> <body> <p>演示带有不同参数的 fadeOut() 方法。</p> <button>点击这里，使三个矩形淡出</button> <br><br> <div id="div1" style="80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="80px;height:80px;background-color:green;"></div> <br> <div id="div3" style="80px;height:80px;background-color:blue;"></div> </body> </html> 淡入淡出一起实现 jQuery fadeToggle() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <!--fadeToggle()实现淡入淡出--> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> </head> <body> <p>演示带有不同参数的 fadeToggle() 方法。</p> <button>点击这里，使三个矩形淡入淡出</button> <br><br> <div id="div1" style="80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="80px;height:80px;background-color:green;"></div> <br> <div id="div3" style="80px;height:80px;background-color:blue;"></div> </body> </html> 效果 - 滑动 滑动方法可使元素上下滑动 jQuery slideDown() 向下滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip{ margin: 0px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html> jQuery slideUp() 向上滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip{ margin: 0px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; } </style> </head> <body> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html> jQuery slideToggle() 上下滑动连用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html> jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <button id="stop">停止滑动</button> <div id="flip">点击这里，向下滑动面板</div> <div id="panel">Hello world!</div> </body> </html> jQuery stop() 动画（带有参数） 从左向右移动100px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ // animate为动画参数，此left是从左边开始，最大移动100px $("#start").click(function(){ $("div").animate({left:'100px'},5000); $("div").animate({fontSize:'3em'},5000); }); //无true的，stop停止当前，排队的继续执行 $("#stop").click(function(){ $("div").stop(); }); // 单true为停止所有 $("#stop2").click(function(){ $("div").stop(true); }); // 双true是全部停止，但要呈现最后状态 $("#stop3").click(function(){ $("div").stop(true,true); }); }); </script> </head> <body> <button id="start">开始</button> <button id="stop">停止</button> <button id="stop2">停止所有</button> <button id="stop3">停止但要完成</button> <p><b>"开始"</b> 按钮会启动动画。</p> <p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p> <p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p> <p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> <div style="background:#98bf21;height:100px;200px;position:absolute;">HELLO</div> </body> </html> jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值