jQuery相关语法规范

LukeLong
659 阅读2分钟

jQuery

jQuery选择器

  • 元素选择器 
    $("p")
$("button")
  • ID选择器 
    $("#id")
  • Class选择器 
    $(".class")
  • 更多 
    $("*")  //选取所有元素
$(this) //选取当前HTML元素

jQuery事件

  • click()
    • 鼠标单击事件
  • dblclick()
    • 鼠标双击事件
  • mouseenter()
    • 鼠标指针穿过
  • mouseleave()
    • 鼠标指针离开
  • mousedown()
    • 鼠标指针移动到元素上方，并且按下鼠标按键
  • mouseup()
    • 在元素上松开鼠标
  • hover()
    • 光标悬停
  • focus()
    • 获得焦点
  • blur()
    • 失去焦点

jQuery效果

  • 隐藏和显示
    • hide(speed,callback)和show(speed,callback)
    • toggle(speed,callback)
      • 显示和隐藏来回切换
  • 淡入淡出
    • fadeIn()
    • fadeOut()
    • fadeToggle()
    • fadeTo(speed,opacity)
      • 淡入元素到给定的不透明度(0-1之间)
      • fadeTo没有默认参数，必须加上速度
  • 滑动
    • slideDown()
    • slideUp()
    • slideToggle()

jQuery动画 - animate()

$(selector).animate({},speed,callback);
  • 实例
$("button").click(function() {
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

jQuery链

  • 相同的元素上运行多条命令，一条接着一条
$("p").css("color","red").slideUp().slideDown()

jQuery HTML

  • 获得内容
    • text()
      • 设置或返回所选元素的文本内容
    • html()
      • 设置或返回所选元素的内容（包括HTML标签）
    • val()
      • 设置或返回表单字段的值
  • 获取属性
    • attr(params)或prop(params)
      • 设置或获取属性值
      • 参数为要获取的属性值的属性
  • 添加元素
    • append()
      • 在被选元素的结尾插入内容
    • prepend()
      • 在被选元素的开头插入内容
    • after()
      • 在被选元素之后插入内容
    • before()
      • 在被选元素之前插入内容
  • 删除元素
    • remove()
      • 删除被选元素
        • 可接受一个参数，对被删元素过滤
    • empty()
      • 从被选元素中删除子元素
  • 获取并设置CSS
    • addClass()
    • removeClass()
    • toggleClass()
    • css()
  • jQuery尺寸相关
    盒子模型
    • width()
    • height()
    • innerWidth()
    • innerHeight()
    • outerWidth()
    • outerHeight()

jQuery遍历

祖先

  • parent()
    • 返回直接父元素
  • parents()
    • 返回所有祖先元素，一直向上直到文档的根元素
  • parentsUntil()
    • 返回介于两个给定元素之间的所有祖先元素

后代

  • children()
    • 返回所选元素的所有直接子元素
  • find()
    • 返回所选元素的后代元素，一直向下直到最后一个后代

同胞

  • siblings()
    • 返回所选元素的所有同胞元素
  • next()
    • 返回所选元素的下一个同胞元素
  • nextAll()
    • 返回所选元素的所有跟随的同胞元素
  • nextUntil()
    • 返回介于两个给定元素之间的所有同胞元素
  • prev()
    • 返回所选元素的上一个同胞元素
  • prevAll()
    • 返回所选元素的所有之前的同胞元素
  • prevUntil()
    • 返回介于两个给定元素之间的所有同胞元素

过滤

  • first()
    • 返回所选元素的首个元素
  • last()
    • 返回所选元素的最后一个元素
  • eq()
    • 返回所选元素的指定索引元素
  • filter()
    • 过滤，不匹配的元素会从集合中删除，匹配的返回
  • not()
    • 返回不匹配的元素

jQuery AJAX

  • load(URL,data,callback)
    • 从服务器加载数据，并把返回的数据放入被选元素中
  • get(URL,callback)
    • 通过HTTP GET请求从服务器请求数据
  • post(URL,data,callback)
    • 通过HTTP POST请求向服务器提交数据
avatar
文章
阅读
粉丝