博客园 首页 私信博主 显示目录 隐藏目录 管理 动画 动画

js包

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

posted @ 2017-11-04 19:22  这才是真的阿呆云飞  阅读(1581)  评论(0编辑  收藏  举报