1、base.js
| /*语法： $("选择器") 工厂函数 */ |
| | |
| | /*寻找页面中name属性值是haha的元素*/ |
| | $("[name=‘haha‘]").click(function(){ |
| | $("#myDiv").css({"height":50,"width":50,"background":"red"}); |
| | /*css(json格式)*/ |
| | }) |
| | |
| | |
| | /*js书写*/ |
| | function changeDiv(){ |
| | document.getElementById("myDiv").style.height="50px"; |
| | document.getElementById("myDiv").style.width="50px"; |
| | document.getElementById("myDiv").style.backgroundColor="pink"; |
| | } |
| |
2、function.js
| $(function(){ // 简写方式 等同于 window.onload |
| | |
| | alert("页面的html结构加载完毕之后就执行！"); |
| | |
| | |
| | }) |
| | |
| | $(document).ready(function(){ |
| | |
| | }) |
3、showAndHidden.js
| /*初识jQuery(function(){ |
| | 当我们的鼠标移动到li上面，div中的图片显示 |
| | $("li").mouseover(function(){ |
| | //$(this).children("div").css({"display":"block"}); |
| | $(this).children("div").show(); |
| | }).mouseout(function(){鼠标移出 |
| | //$(this).children("div").css({"display":"none"}); |
| | $(this).children("div").hide(); |
| | }) |
| | })*/ |
| | |
| | $(function(){ |
| | /*复合事件 整合了鼠标移出和移入*/ |
| | $("li").hover(function(){//mouseover |
| | $(this).children("div").show(); |
| | },function(){ //mouseout |
| | $(this).children("div").hide(); |
| | }) |
| | }) |
4、htmlAndText.js
| $(function(){ |
| | //获取页面中的div innerHTML="" 会编译html标签 |
| | //$("#myDiv").html("<img src=‘../images/cat.jpg‘ height=‘50px‘ width=‘50px‘/>"); |
| | // innerText 文本内容 |
| | $("#myDiv").text("<img src=‘../images/cat.jpg‘ height=‘50px‘ width=‘50px‘/>"); |
| | }) |
5、link.js
| $(function(){ |
| | /*链式操作 在操作第一个div的同时 操作 第2个div |
| | $("h1").css({"background":"red"}).next().css({"background":"pink"}) |
| | .next().css({"background":"yellow"}); |
| | */ |
| | $("div").css({"background":"yellow"}); |
| | }) |
| | |
| | /** |
| | 注释的说明： |
| | |
| | 01. 开发阶段： 便于团队内部人员阅读，方便后续维护 |
| | 02. 维护阶段： 把我们写好的注释提取成文档！哪怕我们在项目中删除注释！不影响维护！ |
| | 03. 生产阶段： 建议删除注释，减少文件的大小！提升用户的体验！ |
| | |
| | |
| | */ |
6、addClass.js
| $(function(){ |
| | //获取页面中所有的div动态增加类样式 之前js中使用的是 className="类名" |
| | /*$("div").hover(function(){ |
| | $(this).addClass("haha"); 增加样式 |
| | },function(){ |
| | $(this).removeClass("haha");删除样式 |
| | })*/ |
| | |
| | /*所有div的点击事件*/ |
| | $("div").click(function(){ |
| | $(this).toggleClass("haha"); |
| | }) |
| | |
| | |
| | }) |
7、changeAll.js
| $(function(){ |
| | |
| | //通过js获取dom对象 |
| | var domDiv= document.getElementById("myDiv"); |
| | // domDiv.html(); 是jquery对象才能使用的 |
| | //把dom对象转换成jquery对象 |
| | $(domDiv).html("就这么神奇的转换成了query对象"); |
| | |
| | //获取第二个盒子 |
| | var $jqueryDiv= $("#second"); |
| | // 需要把jquery转换成dom对象 |
| | //$jqueryDiv[0].innerHTML="转换成dom对象了！"; |
| | $jqueryDiv.get(0).innerHTML="转换成dom对象了!!！"; |
| | |
| | }) |
8、overAndEnter.js
| $(function(){ |
| | |
| | //获取div的鼠标移入事件 |
| | /* $("#father").mouseover(function(){ |
| | $(this).css({"border":"1px solid red"}); |
| | })*/ |
| | $("#father").mouseenter(function(){ |
| | $(this).css({"border":"1px solid red"}); |
| | }) |
| | }) |
jquery-1.8.3.js
jquery-1.8.3.min.js
jquery-ui.js
jquery.ui.tabs.js
jquery.validate.js
js包
原文地址：http://www.cnblogs.com/yunfeioliver/p/7784206.html