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"}); | |
| }) | |
| }) |