jQuery学习笔记
来源：互联网 发布：sai mac 打不开 编辑：程序博客网 时间：2024/06/10 22:46
jQuery的优势：
1.轻量级(70k左右)
2.强大的选择器
3.出色的DOM操作封装
4.完善的事件和事件对象兼容机制
5.完善的ajax
6.不污染全局变量($可随时交出控制权)
7.出色的浏览器兼容
8.方便的链式操作
9.隐式迭代(一般情况下不需要for循环遍历dom对象)
10.完善的文档(官方文档相当完备，官方blog每次更新都会有详细说明)
11.丰富的插件
jQuery的不足：
1.不能向下兼容
2.插件兼容
3.插件之间冲突
4.在大型框架中，特别是在开发后台UI框架的时候，jQuery对于动画来说不太给力，需要引用jQuery UI来进行弥补
jQuery选择器的优势：
1.完全支持css1.0~css2.0选择器，支持部分css3选择器，学习曲线平缓，可以快速上手
2.完美的容错机制，即使页面上没有该元素，jQuery也不会报错
第1节课demo1
<!doctype html><html lang="en"> <head> <title>第一节课demo1——演示jQuery的优势之——方便的链式操作</title> </head> <body> <a href="#">aaaaa</a> <script> var a = document.getElementsByTagName("a")[0]; a.style.color = "red"; a.onclick=function() { this.style.border = "10px solid #f90"; }; </script> </body></html>第1节课demo2
<!doctype html><html lang="en"> <head> <title>第一节课demo2——演示jQuery的优势之——方便的链式操作</title> <script src = "jquery.min.js"></script> </head> <body> <a href = "#">aaa</a> <script> var a = $("a"); a.css("color","red").click(function(){ $(this).css("border","10px solid #9aa9aa"); }) </script> </body></html>第1节课demo3
<!doctype html><html lang="en"> <head> <title>第一节课demo3——演示jQuery的优势之——隐式迭代</title> </head> <body> <p>我是第1个标签</p> <p>我是第2个标签</p> <p>我是第3个标签</p> <script> var p = document.getElementsByTagName("p"); for (var i = 0; i < p.length; i++) { p[i].onclick=function() { alert(this.innerHTML); }; } </script> </body></html>第1节课demo4
<!doctype html><html lang="en"> <head> <title>第一节课demo4——演示jQuery的优势之——隐式迭代</title> <script src = "jquery.min.js"></script> </head> <body> <p>我是第1个标签</p> <p>我是第2个标签</p> <p>我是第3个标签</p> <script> var p = $('p'); p.click(function() { alert($(this).html()); }); </script> </body></html>第1节课demo5
<!doctype html><html lang="en"> <head> <title>第一节课demo5</title> <script src ="jquery.min.js"></script> <script> window.onload = function() { alert(1); }; window.onload = function() { alert(2); }; window.onload = function() { alert(3); }; </script> </head> <body> <p> 1.轻量级(70k左右) 2.强大的选择器 3.出色的DOM操作封装 4.完善的事件和事件对象兼容机制 5.完善的ajax 6.不污染全局变量($可随时交出控制权) 7.出色的浏览器兼容 8.方便的链式操作 9.隐式迭代(一般情况下不需要for循环遍历dom对象) 10.完善的文档(官方文档相当完备，官方blog每次更新都会有详细说明) 11.丰富的插件 </p> </body></html>第2节课demo1
<!doctype html><html lang="en"> <head> <title>第二节课demo1——DOM对象和jQuery对象的区别</title> <script src = "jquery.min.js"></script> </head> <body> <p id = "textp">dom对象和jQuery对象的区别</p> <script> // var p = $('#textp'); // alert(p.html()); var p = document.getElementById('textp'); alert(p.innerHTML); </script> </body></html>第2节课demo2
<!doctype html><html lang="en"> <head> <title>第二节课demo2——jQuery对象和DOM对象之间的相互转化</title> <script src = "jquery.min.js"></script> </head> <body> <input type = "text" id = "test" value = "123"></input> <script> // var test = $('#test'); // alert(test.val()); // 1.DOM对象转为jQuery对象——使用index // alert(test[0].value); // 2.DOM对象转为jQuery对象——使用get方法 // alert(test.get(0).value); var test = document.getElementById('test'); // alert(test.value); // jQuery对象转为DOM对象——只需要加上$()即可 alert($(test).val()); </script> </body></html>第2节课demo3
<!doctype html><html lang="en"> <head> <title>第二节课demo3——解决jQuery库和其它库的共存</title> <script src = "jquery.min.js"></script> <script src = "prototype.js"></script> </head> <body> <input type = "text" id = "a" value = "aaa"></input> <script> jQuery.noConflict() // var sowhat = jQuery.noConflict() alert($F('a')); alert(jQuery('#a').val()); </script> </body></html>第3节课demo1
<!doctype html><html lang="en"> <head> <title>第三节课demo1——演示jQuery之出色的浏览器兼容</title> <script src = "jquery.min.js"></script> // 在IE6中不能正常显示 <style> div>a{color:red;} </style> <script> // 在IE6中能正常显示 $(function(){ $('div>a').css('color',red); }); </script> </head> <body> <div> <a>123</a> <p><a>12345678</a></p> </div> </body></html>第3节课demo2
<!doctype html><html lang="en"> <head> <title>第三节课demo2——jQuery完美的容错机制</title> <script src = "jquery.min.js"></script> </head> <script> window.onload=function() { var p1 = document.getElementById("test2"); p1.style.color = "red"; } /**$(function() { var p1 = $("#test2"); p1.css('color','red'); });**/ </script> <body> <input id = "test" type = "text" value = "1234"/> </body></html>第3节课demo3
<!doctype html><html lang="en"> <head> <title>第三节课demo3——jQuery选择器种类</title> </head><style> /** 一、基本选择器 #id 选择ID的元素 .class 类名选择器 element 标签选择器 * 选择所有元素 E1,E2,E3,E4...,En多重选择器二、层次选择器 E F 选择E元素所有的后代元素 E>F选择E元素的子元素，子选择器 E+next选择E元素后面紧邻的兄弟元素，等价于.next() E~siblings,选择E元素后的所有兄弟元素，等价于.nextAll() **/ /**#test{color:red;}**/</style><script src = "jquery.min.js"></script><script> $(function() { /**$('#test').css('color','green');**/ /**$('body>*').css('border','5px solid blue');**/ /**$('#test,#test2').css('color','red');**/ /**$('div p').css('color','red');**/ /**$('div+p').css('color','red');**/ /**$('div').next().css('color','red');**/ $('div~p').css('color','red'); })</script> <body> <div><p id = 'test0'>1234567</p></div> <p id = 'test'>1234</p> <p id = 'test2'>12345</p> <p id = 'test3'>123456</p> <div><p id = 'test4'>1234567</p></div> </body></html>第4节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第四节课demo1——基本过滤选择器</title><!-- :first 选取第一个元素 :last 选取最后一个元素 :not(E)除了E元素之外的所有元素 :even偶数选择器 :odd奇数选择器 :eq()选取指定索引的元素 :gt()选取大于指定索引的元素 :lt()选取小于指定索引的元素 :header选取h1,h2,h3,h4,h5,h6标签 :animated选取正在执行动画的元素 :lang()语言代码选择器，1.9版本新增，没什么用，基本用不到，坑爹 :root根元素选择器，1.9版本新增，没什么用，坑爹 :target选择由文档URI格式化识别码表示的目标元素，没用，1.9新增，坑爹--><style> #go{ width:100px; height:100px; background:green; position:absolute; left:0; top:0; }</style> </head> <body> <p><span>我是</span>第1个<em>标签</em></p> <p>我是第2个标签</p> <p class = "a">我是第3个标签</p> <p>我是第4个标签</p> <p>我是第5个标签</p> <p>我是第6个标签</p> <h1>我是h1标签</h1> <h2>我是h2标签</h2> <h3>我是h3标签</h3> <h4>我是h4标签</h4> <h5>我是h5标签</h5> <h6>我是h6标签</h6> <div id = "go"></div> <script> // $('p:first').css('background','red'); // $('p:last').css('background','blue'); // $("p:not('.a')").css('background','blue'); // $('p:not(\'.a\')').css('background','blue'); // $('p:even').css('background','blue'); // $('p:eq(0)').css('background','blue'); // $('p:gt(1)').css('background','blue'); // $('p:lt(1)').css('background','blue'); // $('h1').css('background','blue'); // $('h6').css('background','yellow'); $('#go').animate({'left':'500'},1000); // 选中所有的动画元素将其背景色变为黄色 $(':animated').css("background","yellow"); </script> </body></html>第4节课demo2
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第四节课demo1——内容过滤选择器</title><!-- 1.:contains()选取含有文本内容的元素 2.:has()选择指定元素的元素 3.:empty选择不包含子元素或文本空元素 4.:parent选取含有子元素或者文本的元素--><style> p{height:30px;line-height:30px;}</style> </head> <body> <p>1.选取含有文<strong>本内容</strong>的元素</p> <p>2.:has()选择指<strong>本内容</strong>定元素的元素</p> <p>3.:empty选择不包含子元素或文本空元素</p> <p></p> <p><a href="###"></a></p> <p>4.:选取含有子元素或者文本的元素</p> <script> // $('p:contains(\'has()选择指定元\')').css('background','yellow').show().siblings().hide(); // $('p:has(strong)').css('background','red'); // empty要求没有文本，而且没有子元素 // $('p:empty').css('background','blue'); $('p:parent').css('background','orange'); </script> </body></html>第4节课demo3
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第四节课demo3——可见性选择器</title> <!-- 1.:hidden选取所有不可见元素 2.:visible选取所有可见元素 --> <style> /* .hide{opacity:0.2} */ .hide{display:none} </style> </head> <body> <div class="hide">我是个不可见的DIV</div> <div>我是个可见的DIV</div> <script> // alert($('div:hidden').html()); alert($('div:visible').html()); </script> </body></html>第5节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第五节课demo1——其它选择器</title> <!-- 一、属性选择器 1.[attr]选择拥有此属性的选择器 2.[attr=value]指定属性值的选择器 3.[attr1][attr2][attr3]复合属性选择器 4.略坑爹属性选择器（手册上过一遍） 二、子元素过滤选择器 1.:first-child选择父元素第一个子元素 2.:last-child选择父元素最后一个子元素 3.:only-child选择元素中只包含一个元素的元素 4.:nth-child(表达式)选取父元素中的第X个元素，X由表达式决定 5.first-of-type选取所有相同元素的第一个兄弟元素 1.9新增 6.last-of-type选取所有相同元素的最后一个兄弟元素 1.9新增 7.:nth-last-child(表达式)选择所有他们父元素的第n个子元素。计算从最后一个元素开始到第一个 1.9+ 8.:only-of-type :nth-of-type(表达式) :nth-last-of-type(表达式) 三、表单元素选择器 1. 四、表单属性选择器 1.:enabled选择所有可用元素 2.:disabled选择所有不可用元素 3.:checked选择可有选中元素 4.:selected选择所有被选中的选项元素 5.:focus选择当前获取焦点的元素 --> <style> #test{display:none;/**apacity:0;visibility:hidden;**/} </style> </head> <body> <!-- <p title ="js" myattr = "testattr">这段代码即是css代码中加的注释说明</p> <p title ="js" myattr = "yours">for my love</p> <div title = "language">浏览器不会解释也不会被直接呈现给浏览者</div> --> <div> <input type = "text" value = "我是文本"/> <input type = "text" value = "我是不能修改的文本" disabled = "disabled"/> <input type = "submit" value = "我是提交按钮"/> <input type = "button" value = "我是按钮"/> <input type = "password" value = "我是密码框"/> <input type = "file" value = "我是文件"/> <input type = "radio" value = "我是单选按钮"/> <input type = "image" value = "我是图片选择按钮"/> <input type = "reset" value = "我是重置按钮"/> <input type = "checkbox" value = "我是复选按钮"/> <input type = "hidden" value = "我是隐藏文本"/> <select> <option value = "选择一"></option> <option value = "选择二">选择二</option> <option value = "选择三" selected = "selected">选择三</option> </select> <textarea value = "我是文本框" id = "test"></textarea> </div> <script> // $('p[myattr="testattr"]').css('background','red'); // $('p[myattr="testattr"][title]').css('background','red'); // $('p[title]').css('background','red'); // alert($(':input').length); // alert($(':text').length); // alert($(':text').length); // $(':text').css('background','red'); // alert($(':image').val()); // alert($('input[type=checkbox]').val()); // alert($('div:visible').html()); // alert($('div:hidden').val()); alert($('select[selected=selected]').val()); </script> </body></html>第6节课demo1
<!doctype html><html lang="en"> <head> <title>第六节课demo1——jQuery筛选</title> <script src = "jquery.min.js"></script><!-- jQuery的筛选 1.eq()选择指定索引的元素 2.filter(表达式)筛选指定表达式的元素 3.first()选择第一个元素 4.last()选择最后一个元素 5.is()检测元素是否返回布尔值 6.has()保留包含指定后代的元素，去掉那些不含有指定后代的元素 7.not()从匹配的元素集合中移除指定的元素 8.map()将一组元素转换成其它数组 9.slice()根据指定的下标范围，选取匹配的元素集合--> </head> <body> <p class="first">我是第个1元素</p> <p id="second">我是第个2元素</p> <p>我是第个3元素</p> <p>我是第个4元素</p> <p>我是第个5元素</p> <p>我是第个6元素</p> <!--<form> <input type = "text" value="111"/> <input type = "text" value="222"/> <input type = "text" value="333"/> <input type = "text" value="444"/> </form> <p></p>--> <script> // $("p").eq(0).css("background","red"); // $("p").filter(':odd').css("background","red"); // $("p").filter(':even').css("background","red"); // $("p").filter('.first').css("background","red"); // $("p").filter('#second').css("background","red"); // $("p").first().css("background","red"); // $("p").last().css("background","red"); // alert($("p").is()); /**$('p').click(function(){ if ($(this).is(".first")){ $(this).css("background","red"); } });**/ // $("p").not(".first").css("background","red"); /**var arr = $('input').map(function(){ return $(this).val(); }).get().join(','); alert(typeof arr); $('p').html(arr);**/ // $('p').slice(0,1).css("background","red"); $('p').slice(-2,-1).css("background","red"); </script> </body></html>第6节课demo2
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第六节课demo1——jQuery遍历</title> <!-- 1.children()选取子元素 2.parent()选取父元素 3.parents()选取祖先元素 4.parentsUntil()所有的父辈元素，知道遇到匹配的那个元素为止 5.offsetParent()返回父元素中第一个其position设为relative或者absolute的元素，仅对可见元素有效 6.next()选择后面紧临的兄弟元素 7.nextAll()查找当前元素之后所有的同辈元素 8.nextUntil()所有的同辈元素，知道遇到匹配的那个元素为止 9.prev()前一个兄弟元素 10.preAll()前面所有的兄弟元素 11.prevUtil()所有的兄弟元素，知道遇到匹配的那个元素为止 12.siblings()前后所有的兄弟元素 13.closest()从元素本身开始，在DOM树上逐级向上级元素匹配，并返回最先匹配的祖先元素 14.contents文字的子元素，包括文字和注释节点 15.end()终止在当前链的最新过滤操作，并返回匹配元素的以前状态 16.andself1.8版本中已废弃 17.addBack()添加堆栈中元素集合到当前元素，一个选择性的过滤选择器 18.each()遍历一个jQuery对象，为每个匹配元素执行一个函数 --> </head> <body> <!-- <div id = "outer"> outer: <div id = "wrap"> wrap: <p id = "p1">我是第1个wrap的孩子</p> <p id = "p2">我是第2个wrap的孩子</p> <p>我是<span>第3个wrap</span>的孩子</p> <p id = "p4">我是第4个wrap的孩子</p> <div>我是div标签</div> </div> </div> --> <form> <input type="text" name="" value="我是第1个input值"></input> <input type="text" name="" value="我是第2个input值"></input> <input type="text" name="" value="我是第3个input值"></input> <input type="text" name="" value="我是第4个input值"></input> <input type="text" name="" value="我是第5个input值"></input> </form> <script> // $("#wrap").children('p').css("background","red"); // $("#wrap").parents().css("background","red"); // $("#wrap").parents('#outer').css("background","red"); // $("#p1").nextAll().css("background","red"); // $("#p1").nextAll('p').css("background","red"); // $("#p2").prev().css("background","yellow"); // $("#p4").prevAll().css("background","yellow"); // $("#p4").prevAll('#p1').css("background","yellow"); // $('span').parent().css("background","red").end().css("background","yellow"); // $('#p1').nextAll().addBack().css("background","red"); $('input').each(function(){ alert($(this).val()); }); </script> </body></html>第6节课demo3
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第六节课demo3——特殊符号的处理：使用转义符</title> </head> <body> <form> <input type="checkbox" name="gender[]" value = "男">男</input> <input type="checkbox" name="gender[]" value = "女">女</input> <input type="checkbox" name="gender[]" value = "保密">保密</input> <input type="submit" name="gender">提交</input> <input type="reset" name="gender">重写</input> </form> <script> $("input[name='gender\\[\\]']").click(function() { alert($(this).val()); }); </script> </body></html>第7节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第七节课demo1——表格隔行变色</title> <style> #mytable{ width:500px; border:1px solid red; border-collapse:collapse; } #mytable td{ border:1px solid red; } </style> </head> <body> <table id="mytable"> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> </table> <script> /*var trs = $('#mytable tr'); for (var i = 0; i < trs.length; i++) { if (i%2 == 0) { // trs[i].style.background="#fedcba"; $(trs[i]).css("background","#fedcba"); } else { // trs[i].style.background="#abcdef"; $(trs[i]).css("background","#abcdef"); } }*/ /*$('#mytable tr:even').css("background","#abcdef"); $('#mytable tr:odd').css("background","#fedcba");*/ $('#mytable tr').filter(':even').css("background","#abcdef").end().filter(':odd').css("background","#fedcba"); </script> </body></html>第8节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第八节课demo1——原生js的tab标签页</title> <style> *{ padding: 0; margin: 0; } ul{ list-style-type: none; } body{ margin: 50px; } #ul{ height: 30px; margin-bottom: 10px; } #ul li{ height: 30px; line-height: 30px; padding: 0 15px; border: 1px solid #abcdef; float: left; margin-right: 3px; cursor: pointer; } #ul li.current{ background: #abcdef; } #content div{ width: 300px; height: 200px; border: 1px solid #abcdef; display: none; } #content div.show{ display: block; } </style> </head> <body> <ul id = "ul"> <li class="current">java</li> <li>ruby</li> <li>python</li> </ul> <div id = "content"> <div class="show">java的介绍</div> <div>ruby的介绍</div> <div>python的介绍</div> </div> <script> var ul = document.getElementById("ul"); var li = ul.getElementsByTagName("li"); var content = document.getElementById("content"); var div = content.getElementsByTagName("div"); for (var i = 0; i < li.length; i++) { li[i].index=i; li[i].onclick=function() { for (var i = 0; i < li.length; i++) { li[i].className=""; div[i].style.display="none"; } div[this.index].style.display="block"; this.className="current"; } } </script> </body></html>第8节课demo2
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第八节课demo1——jQuery的tab标签页</title> <style> *{ padding: 0; margin: 0; } ul{ list-style-type: none; } body{ margin: 50px; } #ul{ height: 30px; margin-bottom: 10px; } #ul li{ height: 30px; line-height: 30px; padding: 0 15px; border: 1px solid #abcdef; float: left; margin-right: 3px; cursor: pointer; } #ul li.current{ background: #abcdef; } #content div{ width: 300px; height: 200px; border: 1px solid #abcdef; display: none; } #content div.show{ display: block; } </style> </head> <body> <ul id = "ul"> <li class="current">java</li> <li>ruby</li> <li>python</li> </ul> <div id = "content"> <div class="show">java的介绍</div> <div>ruby的介绍</div> <div>python的介绍</div> </div> <script> $("#ul li").click(function() { /*$(this).addClass("current").siblings().removeClass("current"); $("#content>div").eq($(this).index()).show().siblings().hide();*/ $(this).addClass("current").siblings().removeClass("current") .parent().next().children("div") .eq($(this).index()).show().siblings().hide(); }); </script> </body></html>第9节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第九节课demo1——</title> <!-- 1.创建节点：用$()来创建节点；用字符串来创建节点 2.插入节点： 内部插入：append;appendTo;prepend;prependTo; 外部插入：after();insertAfter();before();insertBefore(); 3.包裹节点： wrap()将所有匹配元素单独包裹； wrapAll()将所有匹配元素用一个元素包裹； wrapInner()将所有匹配的元素的子内容用其它标签包裹； 4.删除节点： remove()删除节点 empty()清空节点 unwrap()删除元素的父元素1.4+ detach()删除节点，但保留jQuery对象 5.复制节点 clone(bool)克隆节点 6.替换节点 replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素 replaceAll()用指定的元素替换掉所有选择到匹配到的元素 7.操作DOM节点属性 attr(key,value)获取添加属性值 removeAttr()删除属性值 prop()同attr() removeProp同removeAttr() --> <style> .a{ background: red; } .aa{ color: #fff; } .b{ background: #abcdef; } </style> </head> <body> <!-- <p>111111</p> --> <!-- <p>我是第一个P标签</p> <p>我是第二个P标签</p> --> <!-- <a href="#">点击</a> --> <!-- <p>我是P标签</p> --> <p title="js" class="a aa">11111</p> <script> // var newElement = $('<div>div标签</div>'); // $('body').append(newElement); // var newElement = "<div>我是用字符串方法创建的标签</div>"; // $('body').append(newElement); // var strong = $('<strong>我是被插入的新节点</strong>'); // $('p').append(strong); // strong.appendTo($('p')); // $('p').prepend(strong); // strong.prependTo($('p')); // $('p').after(strong); // $('p').before(strong); // $('p').wrap('<div></div>'); // $('p').wrapAll('<div></div>'); // $('p').wrapInner('<div>111</div>'); /*$('a').click(function() { alert(1111); }); var newA = $('a').clone(true); // 默认false $('body').append(newA);*/ // $('p').replaceWith('<strong>我是strong标签</strong>'); // $('<strong>我是strong标签</strong>').replaceAll($('p')); // $('p').attr('title','livescript'); // $('p').attr('class','b'); // $('p').removeAttr('class'); </script> </body></html>第10节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <!-- 操作样式 1.addClass() 2.removeClass() 3.toggleClass()切换样式 4.hasClass()判断是否有样式 5.css()设置匹配元素的css样式 6.height()获取高度 7.innerHeight()获取padding的高度，不包括border 8.outerHeight(bool)参数为true时获取内外边距和border的高度 9.width()获取宽度 10.innerWidth()获取包括padding的高度，不包括border 11.outerWidth()参数为true时获取内外边距和border的宽度 12.offset()获取元素的位置 13.offsetParent()离匹配元素最近的有position属性的元素 14.position()相对于offsetParent()的坐标 15.scrollTop()纵向滚动条的位置 16.scrollLeft()横向滚动条的位置 --> <title>第10节课demo1——</title> <style type="text/css"> /*.bgred{ background: red; } .white{ color:#fff; } p{ height: 30px;border:10px solid red;padding:10px;margin:10px; } *{ margin:0; } p{ margin:50px; }*/ /*div{ position: relative; left: 20px; top: 20px; width: 200px; height: 200px; background: red; } p{ position: absolute; left: 50px; top:100px; width: 50px; height: 50px; background: yellow; }*/ input{ position: fixed; top: 50px; } </style> </head> <body style="height:8000px"> <!-- <p>我是p标签</p> --> <!-- <div><p>1111</p></div> --> <input type="button" name="" value="滚动条"/> <script type="text/javascript"> // $('p').addClass('bgred').addClass('white'); //$('p').addClass('bgred white'); /*$('p').click(function() { $('p').toggleClass('bgred white'); });*/ // $('p').css('background','red').css('color','white'); /*$('p').css({ 'background':'red', 'color':'white', 'border':'10px solid #abcdef', });*/ // alert($('p').innerHeight()); // innerHeight()方法获得到的高度不把border和margin计算进去，但会把padding值计算进去 // outerHeight()方法如果参数不写，为默认值false，不会把margin值计算进去，如果参数为true，会把border，margin，padding都计算进去 /*alert('我是outerHeight获得到的高度：'+$('p').outerHeight()); alert('我是innerHeight获得到的高度：'+$('p').innerHeight());*/ /*var a = $('p').offset(); alert(a.left);*/ /*var a = $('p').position(); var b = $('p').offset(); alert(a.left); alert(b.left);*/ $('input').click(function() { alert($(window).scrollTop()); }); </script> </body></html>第11节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第11节课demo1——设置和获取节点内的html和文本</title> <!-- text()获取匹配元素的文本节点 html()获取匹配元素的dom节点或者文本节点 --> </head> <body> <p>111<strong style="background: red">22</strong>111</p> <script type="text/javascript"> // text()有参数时修改标签的值，没有参数时返回标签的值 // 如果里面有子标签，则只能通过html获得到子标签的内容 // alert($('p').html()); // alert($('p').text()); // $('p').text('22222'); </script> </body></html>第12节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第12节课demo1——实例</title> <!-- a.查看、修改、删除 b.滚动公告 --> <style type="text/css"> table{ width: 600px; border: 1px solid #abcdef; border-collapse: collapse; } tr{ height: 30px; } th{ border: 1px solid #abcdef; } td{ border: 1px solid #abcdef;text-align: center; } td a{ margin-right: 5px;color: #f00; } .popDiv{ width: 500px; border: 1px solid red; padding: 10px; position: absolute; left: 50%; margin-left: -250px; top: 100px; background: #fff; display: none; } .popDiv p{ border-bottom: 1px solid red; } </style> </head> <body> <table id = "table"> <tr> <th>姓名</th> <th>年龄</th> <th>身高</th> <th>工资</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>26</td> <td>176</td> <td>12000</td> <td><a href="#" class='view'>查看</a><a href="#">修改</a><a href="#" class='del'>删除</a></td> </tr> <tr> <td>李四</td> <td>25</td> <td>167</td> <td>10000</td> <td><a href="#" class='view'>查看</a><a href="#">修改</a><a href="#" class='del'>删除</a></td> </tr> <tr> <td>王五</td> <td>30</td> <td>170</td> <td>15000</td> <td><a href="#" class='view'>查看</a><a href="#">修改</a><a href="#" class='del'>删除</a></td> </tr> </table> <div class = 'popDiv'> <p><strong>姓名：</strong><span></span></p> <p><strong>年龄：</strong><span></span></p> <p><strong>身高：</strong><span></span></p> <p><strong>工资：</strong><span></span></p> <a href="#" class = 'close'>关闭</a> </div> <script> $('.view').click(function() { // $('.popDiv').show(); var maskHeight = $(document).height(); var maskWidth = $(document).width(); // 添加遮罩测层 $('<div class = "mask"></div>').appendTo($('body')); $('div.mask').css({ 'opacity': 0.4, 'background': '#000', 'position': 'absolute', 'left': 0, 'top': 0, 'width': maskWidth, 'height': maskHeight, 'z-index': 2 }); var arr = []; $(this).parent().siblings().each(function(){ arr.push($(this).text()); // alert($(this).text()); }); // alert(arr); $('.popDiv').show().children().each(function(i){ $(this).children('span').text(arr[i]); }); $('.close').click(function(){ $(this).parent().hide(); $('.mask').remove(); }); }); $('.del').click(function(){ $(this).parents('tr').remove(); }); </script> </body></html>第13节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第13节课demo1——滚动公告</title> <!-- --> <style type="text/css"> *{ padding:0; margin:0; } body{ margin:50px; } ul{ list-style-type: none; } li{ height: 30px;line-height: 30px; } </style> </head> <body> <ul> <li>我是第1条滚动公告</li> <li>我是第2条滚动公告</li> <li>我是第3条滚动公告</li> <li>我是第4条滚动公告</li> <li>我是第5条滚动公告</li> <li>我是第6条滚动公告</li> <li>我是第7条滚动公告</li> <li>我是第8条滚动公告</li> <li>我是第9条滚动公告</li> </ul> <script> setInterval(function(){ var li = $('ul>:first').clone(); $('ul>:first').remove(); $('ul').append(li); },2000); </script> </body></html>第14节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第13节课demo1——滚动公告</title> <!-- jquery中的事件和事件对象 1.加载文档事件 a.ready()略 b.$.holdReady(bool)暂停或恢复ready事件 //类似$.方法名叫做jquery的工具函数 c.load(),unload()1.8中移除 2.鼠标事件 a.click()单击左键事件 b.dblclick()双击左键事件 c.focusin()获得焦点事件，可作用于父级 d.focusout()失去焦点事件，可作用于父级 e.mousedown()鼠标按下事件，和click()有区别 f.mouseup()鼠标抬起事件 g.mousemove()鼠标移动事件 h.mouseover()鼠标进入事件 i.mouseout()鼠标离开事件 j.mouseenter()鼠标进入事件 k.mouseleave()鼠标离开事件 - hover()同时绑定mouseenter()和mouseleave()事件 3.键盘事件 a.keydown() b.keyup() c.keypress() 4.表单事件 a.focus()获得焦点事件 b.blur()失去焦点事件 c.change()表单值改变事件 d.select()表单元素被选中时的事件,只能用于Input[text]和textarea e.submit()表单提交事件 5.浏览器事件 a.resize()浏览器窗口改变大小事件 b.scroll()浏览器滚动条移动时发生的事情 c.error()1.8中废弃 6.事件对象 event.pageX获取鼠标相对于文档的x轴坐标 event.pageY获取鼠标相对于文档的y轴坐标 event.preventDefault()阻止浏览器默认行为 event.stopPropagation()阻止冒泡 event.which监听键盘输入和鼠标操作 其它略 7.绑定事件的方法 a.bind();绑定事件 b.unbind()移除事件 c.on()绑定事件 d.off()移除事件 e.one()执行一次事件，然后销毁事件 f.delegate()虽然未被废弃，但官方推荐使用on()代替 g.undelegate()用off代替 8.移除事件的方法 9.事件冒泡（略） 10.事件命名空间 --> <style> *{ padding: 0; } ul{ list-style-type: none; } body{ margin: 50px; } div{ width: 200px; height: 24px; line-height: 24px; text-align: center; border: 1px solid #ccc; } ul{ width: 200px; border: 1px solid #ccc; display: none; } ul li{ height: 24px; line-height: 24px; } ul li:hover{ background: #cfcfcf; } </style> </head> <body style='height:3000px;width: 3000px'> <p>这是一个P标签</p> <!-- <input value='123'></input> --> <!-- <input type='select' name='' id='' value="123"></input> --> <!-- <input type='password' name='' id=''></input> --> <!-- <input type='file' name='' id=''></input> --> <!-- <span style='display: none'>asdfdsad</span> --> <!-- <form id = 'form1' action="www.baidu.com"> <input type="text" name=""/> <input type="password" name=""/> <input type="submit" name="" value='提交'/> </form> --> <!-- <input id = "input"></input> --> <!-- <div> <input type="text" value ="123456"/><span style="display: none">获得焦点后显示</span> <p><input type="text" value ="654321"/></p> </div> --> <!-- <input type="text" name="" style='position: fixed;top: 10px;left: 10px'/> --> <!-- <div>请选择城市</div> <ul> <li>北京</li> <li>天津</li> <li>上海</li> <li>重庆</li> </ul> <a href="http://pan.baidu.com/share/link?shareid=543954&uk=4211285463">jquery实例视频教程</a> --> <script> /*$('p').click(function(){ alert($(this).text()); });*/ /*$('p').dblclick(function(){ alert($(this).text()); });*/ /*$('div').focusin(function(){ $('div>span').show(); }); $('div').focusout(function(){ $('div>span').hide(); });*/ /*$('p').mousedown(function(){ alert(123); });*/ /*$(document).mousemove(function(e){ // console.info('x轴坐标：'+e.pageX+'y轴坐标：'+e.pageY); $('#input').val('x:'+e.pageX+'y:'+e.pageY); });*/ /*$('p').mouseover(function(){ $(this).css('background','red'); });*/ /*$('p').mouseout(function(){ $(this).css('background','none'); });*/ /*$(document).mouseover(function(){ $('p').css('background','none'); });*/ /*$(document).mouseenter(function(){ $('p').css('background','red'); }); $(document).mouseleave(function(){ $('p').css('background','none'); });*/ /*$('input').keydown(function(){ alert($(this).val()); });*/ /*$('input').keyup(function(){ alert($(this).val()); });*/ /*$('input').keypress(function(){ alert($(this).val()); });*/ /*$('input').focus(function(){ $('span').show(); }).blur(function(){ $('span').hide(); });*/ /*$('input').change(function(){ $('span').show(); });*/ /*$('input[type=file]').change(function(){ $('span').show(); });*/ /*$('input').select(function(){ $('span').show(); });*/ /*$("input[type=password]").select(function(){ $('span').show(); });*/ /*$('#form1').submit(function(e){ // alert('提交成功！！！！'); // e.preventDefault(); });*/ /*$(window).resize(function(){ alert('浏览器窗口大小已改变！！！'); });*/ /*$(window).scroll(function(){ console.info('滚动条正在滚动！！！'); });*/ /*$(document).click(function(e){ var x = e.pageX; var y = e.pageY; $('input').val(x+','+y); });*/ /*$('div').click(function(e){ $('ul').show(); e.stopPropagation(); }); $(document).click(function(){ $('ul').hide(); });*/ /*$('p').bind('click',function(){ alert($(this).text()); }); $('p').mouseover(function(){ $(this).css('background','red'); }); // $('p').unbind('click'); $('p').unbind('click mouseover');*/ /*$('p').one('click',function(){ alert($(this).text()); });*/ /*$('body').delegate('p','click',function(){ $(this).append('<p>这是新增的p标签</p>'); });*/ /*$('p').bind('click',function(){ $('body').append('<p>这是新增的p标签</p>'); });*/ /*$('body').on('click','p',function(){ $('body').append('<p>这是新增的p标签</p>'); });*/ // 命名空间 $('p').bind('click.background',function(){ $(this).css('background','red'); }); $('p').bind('click.color',function(){ $(this).css('color','white'); }); $('p').unbind('click.color'); </script> </body></html>第15节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第15节课demo1——事件补充</title> <!-- 1.hover()用法 2.trigger() 3.triggerHandler()阻止事件冒泡 --> <style> p{ background-color: #f00;padding: 20px; } a{ background-color: #abc;padding: 20px; } </style> </head> <body> <!-- <p>这是一个p标签</p> --> <p><a href="#">点击</a></p> <script> /*$('p').hover(function(){ $(this).css('background','red'); },function(){ $(this).css('background','none'); });*/ $('a').click(function(){ alert('我是a，我被点击了！！！'); }); /*$('a').trigger('click');*/ $('p').click(function(){ alert('我是p，我被点击了！'); }); // $('a').trigger('click'); $('a').triggerHandler('click'); </script> </body></html>第16节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第16节课demo1——</title> <!-- 1.基础动画 show()显示 hide()隐藏 toggle()切换显示和隐藏 2.渐变动画 fadeln() fadeOut() fadeTo() fadeToggle() 3.滑动动画 slideDown() slideUp() slideToggle() 4.自定义动画 animate() 5.动画队列 stop() dequeue() finish() delay() jQuery.fx.interval()，设置运行的时间，不推荐 --> <style> p{ padding: 10px; border: 1px solid #aef; width: 300px; display: none; } a{ color: red; padding: 50px; margin: 10px; } div{ width: 100px; height: 100px; background-color: #abcdef; position: absolute; left: 0; top: 30px; } </style> </head> <body> <!-- <a href="###">点击</a> <p>1.hover()用法 2.trigger() 3.triggerHandler()阻止事件冒泡</p> --> <input type='button' id = "run" value='运行'></input> <input type='button' id = "stop" value='stop'></input> <input type='button' id = "dequeue" value='dequeue'></input> <input type='button' id = "finish" value='finish'></input> <input type='button' id = "delay" value='delay'></input> <div></div> <script> /*$('a').click(function(){ // $('p').hide(10000); // 10000代表毫秒数 $('p').hide('slow'); // fast、slow、normal });*/ /*$('a').click(function(){ $('p').show('slow'); // fast、slow、normal });*/ /*$('a').click(function(){ $('p').toggle('slow'); // fast、slow、normal });*/ /*$('a').click(function(){ if($('p').is(':visible')){ $('p').hide(500); } else { $('p').show(500); } });*/ /*$('a').click(function(){ if($('p').is(':visible')){ $('p').fadeOut(500); } else { $('p').fadeIn(500); } });*/ /*$('a').click(function(){ $('p').fadeTo(500,0.3); });*/ /*$('a').click(function(){ $('p').fadeTo(500,0.3,function(){ alert('fadeTo方法执行完成'); }); });*/ /*$('input').click(function(){ $('div').animate({ 'left':'800px' }); });*/ /*$('input').click(function(){ $('div').animate({ 'left':'800px', 'top':'400px', 'opacity':'0.2' },3000,function(){ $(this).css('background-color','#f90'); }); });*/ /*$('input').hover(function(){ $('div').stop().slideDown(500); },function(){ $('div').stop().slideUp(500); });*/ /*$('input').hover(function(){ $('div').stop(false,true).slideDown(500); },function(){ $('div').stop(false,true).slideUp(500); });*/ /*$('input').click(function(){ $('div').animate({'top':'500px'},6000) .animate({'left':'800px'},6000) .animate({'top':'30px'},6000) .animate({'left':'0px'},6000); });*/ jQuery.fx.interval=3000; $('#stop').click(function(){ $('div').stop(true,false); }); $('#dequeue').click(function(){ $('div').dequeue(); }); $('#finish').click(function(){ $('div').finish(); }); $('#delay').click(function(){ $('div').slideUp(500).delay(1000).fadeIn(500); }); </script> </body></html>第17节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第17节课demo1——jQuery中动画算法的插件</title> <style> div{ width: 20px; height: 20px; background: #abcdef; padding: 20px; left: 0; top: 30px; position: absolute; } </style> </head> <body> <input type="button" value="点击"></input> <div></div> <script> $('input').click(function(){ $('div').animate({ 'left':'+=200px' },2000); }); /*$('input').click(function(){ $('div').animate({'top':'500px'},6000) .animate({'left':'800px'},6000) .animate({'top':'30px'},6000) .animate({'left':'0px'},6000); });*/ </script> </body></html>第18节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第18节课demo1——表单选择框实例</title> </head> <body> <div id="checkbox"> <input type="checkbox" name="" checked="checked" />吃 <input type="checkbox" name=""/>喝 <input type="checkbox" name=""/>嫖 <input type="checkbox" name=""/>赌 </div> <div> <input type="button" name="" id="checkAll" value="全选"/> <input type="button" name="" id="checkReverse" value="反选"/> <input type="button" name="" id="checkNone" value="全不选"/> <div> <script> $('#checkAll').click(function(){ $('#checkbox>:checkbox').attr('checked',true); }); $('#checkNone').click(function(){ $('#checkbox>:checkbox').attr('checked',false); }); $('#checkReverse').click(function(){ $('#checkbox>:checkbox').each(function(){ $(this).attr('checked',!$(this).attr('checked')); }); }); </script> </body></html>第19节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第19节课demo1——页面搜索实例</title> <style> table{ width: 500px; border: 1px solid #abcdef; border-collapse: collapse; } tr{ height: 20px; border: 1px solid #abcdef; } th,td{ border: 1px solid #abcdef; text-align: center; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> </tr> <tr> <td>张三</td> <td>男</td> <td>30</td> <td>74874874888</td> </tr> <tr> <td>李四</td> <td>男</td> <td>32</td> <td>16816816888</td> </tr> <tr> <td>移动客服</td> <td>女</td> <td>21</td> <td>10086</td> </tr> <tr> <td>移动充值</td> <td>女</td> <td>21</td> <td>13816681978</td> </tr> </table> <input type="text" name=""/> <input type="button" value="搜索"/> <script> $('input[type=button]').click(function(){ var text = $('input[type=text]').val(); $('table tr:not(":first")').hide().filter(':contains("'+text+'")').show(); }); </script> </body></html>第20节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <title>第20节课demo1——</title> </head> <body> <textarea style="height: 200px;width: 200px"></textarea> <span>你还可以输入<strong style="color: red">140</strong>个字</span> <script> var maxLength=140; $("textarea").keyup(function(){ var l = $(this).val().length; $('strong').text(maxLength-l); /*if($('strong').text()<0){ alert("不能超过140个字"); }*/ if(parseInt($('strong').text())<0){ $('strong').text(0); var val = $(this).val().substring(0,140); $(this).val(val); } }); </script> </body></html>第21节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <script src = "demo21.js"></script> <title>第21节课demo1——eval、jquery插件编写</title> <!-- eval:可以将字符串解析成js代码 编写插件的两种方式： 类级别开发 对象级别开发（常用，99%都是这种） --> <style> div{ height: 100px; width: 100px; background-color: #f90 } </style> </head> <body> <div></div> </body> <script> // $.zixueit.myAlert("我是通过调用插件弹出的警告框"); // $.myAlert2(); /*var a = '[1,2,3,4]'; var b = eval(a); alert(typeof b); alert(b[0]);*/ /*$.zixueit.centerDiv($('div'));*/ $.zixueit.centerDiv($('div')).css('background-color','red'); </script></html>第22节课demo1
<!doctype html><html lang="en"> <head> <script src = "jquery.min.js"></script> <script src = "jQuery-table1.0.js"></script> <title>第22节课demo1——eval、jquery插件编写</title> <style> table{ width: 100%; border-collapse: collapse; border: 1px solid #abcdef; } th,td{ height: 36px; border: 1px solid #abcdef; text-align: center; } .evenRow{background-color: #f90;} .oddRow{background-color: #a30;} .currentRow{background-color: #asd;} </style> </head> <body> <!-- 开发一个需求奇数行颜色是#abcdef，偶数行颜色是#f90，当鼠标移动到对应行的时候，该行颜色变为#a23，离开时又变回原来的颜色 --> <table id = 'mytable'> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>工资</th> </tr> <tr> <td>小张</td> <td>男</td> <td>26</td> <td>12000</td> </tr> <tr> <td>小陈</td> <td>男</td> <td>25</td> <td>13000</td> </tr> <tr> <td>TOM</td> <td>男</td> <td>30</td> <td>20000</td> </tr> <tr> <td>小丽</td> <td>女</td> <td>22</td> <td>25000</td> </tr> <tr> <td>小美</td> <td>女</td> <td>25</td> <td>26000</td> </tr> </table> <script type="text/javascript"> $('#mytable').table(); </script> </body></html>阅读全文
0 0
- 【学习笔记】JQuery学习笔记
- jQuery 学习笔记 + jQuery-UI 学习笔记
- 【jQuery 学习笔记】初识jQuery
- jQuery 学习笔记------jQuery选择器
- jquery学习笔记----初识jquery
- jQuery学习笔记--jQuery Ajax
- jquery学习笔记
- jquery选择器学习笔记
- jQuery学习笔记
- 【jquery】学习笔记
- jQuery学习笔记
- jquery学习笔记
- jquery 学习笔记
- JQuery学习笔记
- Jquery学习笔记
- JQuery学习笔记
- jQuery学习笔记
- jquery学习笔记(二)
- mysql的event schedule 可以让你设置你的mysql数据库再某段时间执行你想要的动作【mysql事件调度器】
- ICSE 2017 Do Developers Read Compiler Error Messages? 阅读笔记
- H5PostMessages实现跨页面通信
- Netty浅析
- 第八章El表达式第五节el表达式集合操作
- jQuery学习笔记
- 根据月份运算天数
- MVP post请求
- 制作HTML5游戏2.0
- 《HTML之列表标签》
- a/b输出商数Q和余数R 先除a 后余a string 每个字符 ---'0' 变成 int 形
- 神经网络与深度学习第二周-2-Logistic Regression with a Neural Network mindset
- 哈希散列(HASH)原理
- Angular.JS和Spring MVC之文件上传的兼容
