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()本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年09月23日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读