jq和zepto

目录

  • 类库和框架的区别
  • 写法
  • jq操作样式
  • 属性
  • 事件
  • class
  • dom操作
  • 效果

类库和框架的区别

  • jq jq是一个功能丰富,轻量级的类库
  • zepto.js zepto.js 是更轻量级的类库,比jq的打开速度快的多,同样兼容jq的代码
  • apicloud apicloud是一个框架
  • 类库 提供了很多api,相当于一个仓库,里面有各种各样的工具,你需要用到什么就去找这些工具。
  • 框架 相当于买了一个新房子,现在是一个空壳,需要去装修

写法

$(selector).action();
selector: 选择器名称
action: jq对象的一个方法

jq操作样式

  • 获取样式的值
$('div').css("background");
  • 操作一个样式
$('.kk').css("样式名称","样式值");
  • 操作多个样式
$('#wrap').css({"样式名称1":"样式值1","样式名称2":"样式值2"});

属性

  • 获取html内容
$('#test').html()
  • 修改html内容
$('#test').html('<p>段落</p>')
  • 获取不带标签的文本内容
$('#test').text()
  • 修改文本内容
$('#test').text('hahaah')
  • 获取表单字段的值
$('#btn').val()
  • 修改表单字段的值
$('#btn').val('222222')
  • 获取属性的值
$('#test-wb').attr('href')
$('#test-img').attr('data-src')
  • 删除属性
$('#test-img').removeAttr('src')

事件

$('#ck').on('click',function(){
})
  • click 鼠标点击事件
  • mouseenter 鼠标移入
  • mouseleave 鼠标移出
  • bind 事件绑定

class

  • 添加class
obj.addClass('类名')
  • 删除class
obj.removeClass('类名')
  • 切换添加删除class
obj.toggle('类名')

dom操作

  • 在被选元素的末尾添加内容 可同时插入到好几个元素里面
$('.inner').append('<p>Test</p>')
  • 在被选元素的开始添加内容
$('.inner').prepend('<p>Test</p>')
  • 在被选元素之前的部分添加内容
$('.inner').before('<p>Test</p>')
  • 在被选元素之后的部分添加内容
$('.inner').after('<p>Test</p>')

效果

  • 展示
$("p").show()
  • 隐藏
$("p").hide()
  • 向上滑动
$("p").slideUp()
  • 向上滑动
$("p").slideUp()
  • 向下滑动
$("p").slideDown()
  • 向下滑动
$("p").slideDown()
  • 淡入 与bind属性相关联
$("p").fadeIn()
  • 淡出
$("p").fadeOut()

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券