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 条评论
登录 后参与评论

相关文章

  • Neo4j 数据库指令

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    星辉
  • HTML/CSS基础

    子元素的外边距隔着父元素的内边距和边框. 当这两项都不存在的时候, 父子元素垂直外边距相邻, 产生叠加.

    星辉
  • windows常用DOS命令

    在Windows系统中,可以使用Netstat命令查看端口。在“命令提示符”窗口中运行“netstat-a-n”命令,即可看到以数字形式显示的TCP和UDP连接...

    星辉
  • 一周AI要闻回顾 | FB新研究颠覆CNN,加州新政允许无人卡车路测

    量子位筛选整理出过去一周Top 10,从技术新突破、政策新风向和产业新动态3大方面,为你提供最新趋势参考。

    量子位
  • 简易数字频率计(verilog HDL设计)(2020维护版本)

    这篇博客大概是2017年写的,目前已经是2020年8月不到,今天维护了一下但是并未保存,很受伤,不得不重新在维护一次。

    Reborn Lee
  • Java Maven项目之Nexus私服搭建和版本管理应用

    目录: Nexus介绍 环境、软件准备 Nexus服务搭建 Java Maven项目版本管理应用 FAQ 1、Nexus介绍 Nexus是一个强大的Mave...

    哎_小羊
  • NSArray 排序方法的实现

    Compare method Either you implement a compare-method for your object: -(NSCompar...

    阿新
  • Spring Security笔记:Remember Me(下次自动登录)

    前一节学习了如何限制登录尝试次数,今天在这个基础上再增加一点新功能:Remember Me. 很多网站,比如博客园,在登录页面就有这个选项,勾选“下次自动登录”...

    菩提树下的杨过
  • 美国喜提刷脸登机,官方开心发通告,竟马上引发公民不适

    就在这两天,美国海关和边境保护局,全称U.S. Customs and Border Protection (CBP),正欢天喜地宣传一件新技术应用的新成果。

    量子位
  • Spring Boot + Vue前后端分离项目,Maven自动打包整合

    现在各类项目为了降低项目、服务模块间的高度耦合性,提出了“前后端分离”,而前后端分离的项目该如何打包呢?

    xcbeyond

扫码关注云+社区

领取腾讯云代金券