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()