目录
- 类库和框架的区别
- 写法
- 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"});
属性
$('#test').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
obj.addClass('类名')
obj.removeClass('类名')
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()
$("p").fadeIn()
$("p").fadeOut()