jQuery封装框架

最新推荐文章于 2023-07-12 15:39:49 发布

loc_c

最新推荐文章于 2023-07-12 15:39:49 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/Mr_Cccc/article/details/53671193

版权

  jQuery封装框架 

  第一步，先导入jQuery：<script src="js/jQuery-2.2.2.js"></script> 

  注意：尽量将js代码放在<body>标签后边，效率问题 

  attr( )：一个参数获取属性值，两个参数是设置属性值 

  removeAttr( )：移除属性 

  addClass / removeClass：动态添加或删除class，这个方法删除是将class设置为空，而removeAttr是直接删除属性 

  addClass方法设置class属性，调用方法的时候可传递一个函数，最后返回一个值 

  toggleClass方法： 

  html()封装了js里边的innerHTML属性 

  text()：获取到元素内部的文本内容 

  注意： 

  不推荐使用js和jQuery混合使用 

  获取集合中制定下标的元素：$("li").eq() 或 first() 或 last() 

  判断当前元素是否有指定的class属性，获取到一个集合，取出集合中的所有内容，默认返回第一个元素的内容 

  hasClass() 

  each()：循环取出内容： 

  filter()：从集合中筛选出符合指定条件的元素 

  has()：包含，获取的元素内部的条件是否符合要求 

  find()：针对的是子类 

  is()：用来判断是否满足指定条件 //判断元素之间的关系时，直接写，如果判断属性，则要加冒号 

  eg： 
 $ 
 ( 
 this 
 ). 
 is 
 ( 
 ":selected" 
 ) 

  文档处理 

  append()：默认将内容放在最后 

  prepend()：将元素追加到所有子元素的前面 

  prependTo()：将选中的元素，加入到目标位置，语法与前两个相反 

  eg：$("label").prependTo("#div1") 

  before()/after()：添加到指定元素的前后 

  replaceAll()：替换元素 

  empty()：将选中的元素内容请空 

  remove()：删除节点 

  clone()：克隆，传true表示连带时间一起克隆，false表示只克隆元素 

  获取css样式 

  css("")：传入要获取的参数 

  设置样式：两个参数 

  css("","") 

  修改多个样式，传入一个json对象 eg：css({"color":"red","font-size":"20px"}) 

  事件处理 

  change(function(){}) //下拉框改变点选触发 

  on("click",function( ){ } )：动态绑定事件，第一个参数是事件类型 

  on绑定多个事件，一个处理，直接在事件类型处添加事件 

 
 绑定多个事件，不同的处理：在on括号内传入一个json对象 

  hover()：鼠标移动进入和移出，在括号内写两个function，第一个表示over状态，第二个是out 

  效果（动画） 

  hide(毫秒数)：隐藏元素，可以填slow，normal，fast，也可以直接写毫秒数 

  show(毫秒数)：显示内容，改变宽和高，最终显示全部 

  eg：$("#div1").show(2000,function(){}); 

  slideDown(毫秒数)/slideUp：以滑动的方式显示和隐藏 

  slideToggle(毫秒数)：显示的时候就隐藏，隐藏的就显示 

  fadeIn/fadeOut(毫秒数)：通过改变透明度的方式显示/隐藏 

  delay(毫秒数)：设置某个动作的延时执行 

关注