曾经的超级明星类库jQuery未来也许不再会被前端程序猿追捧了!
添加页面元素
jQuery代码:
$('i').prepend('<div>--New Element--</div>');
JS代码:
var parent = document.querySelector(".container");
var p = document.createElement("p");
parent.prepend("Some text", p);
注意这个方法目前还是实验阶段,可能你的浏览器并不支持需要使用polyfill来使得浏览器支持
删除页面元素
jQuery代码:
$('i').remove();
JS代码:
elem.remove();
插入页面元素
jQuery代码:
$elem.before($someOtherElem);
JS代码:
elem.before(someOtherElem);
替换页面元素
jQuery代码:
$elem.replaceWith($someOtherElem);
JS代码:
elem.replaceWith(someOtherElem);
找到最近的匹配元素
jQuery代码:
$elem.closest("div");
JS代码:
elem.closest("div");
目前的浏览器支持
如果想看看浏览器对以上API的支持程度,大家可以使用caniuse来查看jquery风格的DOM操作的支持兼容性情况
淡入淡出效果
jQuery代码:
$elem.fadeIn();
CSS代码:
.thingy {
display: none;
opacity: 0;
transition: .8s;
}
JS代码:
elem.style.display = "block";
requestAnimationFrame(() => elem.style.opacity = 1);
只绑定一次事件
jQuery代码
$elem.one("click", someFunc);
JS代码(过去使用的方式)
function dostuff() {
alert("some stuff happened");
this.removeEventListener("click", dostuff);
}
var button = document.querySelector("button");
button.addEventListener("click", dostuff);
JS代码(现代使用的简化版本)
elem.addEventListener('click', someFunc, { once: true, });
或者
elem.addEventListener('click', myClickHandler, {
once: true,
capture: true
});
动画效果
jQuery
$elem.animate({
width: "20%",
opacity: 0.1,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 500);
JS
var elem = document.querySelector('.animate-me');
elem.animate([
{
transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)',
transformOrigin: '50% 0',
filter: 'blur(40px)',
opacity: 0
},
{
transform: 'translateY(0) scaleY(1) scaleX(1)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
], 1000);
Ajax请求处理
jQuery代码
$.ajax('https://some.url', {
success: (data) => { /* do stuff with the data */ }
});
JS代码
fetch('https://some.url')
.then(response => response.json())
.then(data => {
// do stuff with the data
});
当然上面有部分JS代码在浏览器中执行的可能并不完整,但是基本所有的javascript都可以找到对应的polyfill来解决相关的兼容性问题,如下:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
曾经的超级明星类库jQuery未来也许不再会被前端程序猿追捧了!的更多相关文章
- X因素 开启它就能让你成为超级明星
开启它就能让你成为超级明星" title="X因素 开启它就能让你成为超级明星"> "只要努力就能成为明星!"记得电影学院的不少老师都这样告诫学 ...
- jquery 未来元素事件示例 on() delegate() live()
jquery 1.7版后建议使用on() $(document).on("click","#green",function(){$(this).after('& ...
- 程序猿Web面试之jQuery
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/powertoolsteam/article/details/32325013 又到了一年一度的 ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile jQuery Mobile 是创建移动 web 应用程序的框架. jQuery Mobile 适用于所有流行的智能手机和平板电脑. jQuery Mobile 使用 HTM ...
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- 砸金蛋:jQuery+PHP实现的砸金蛋中奖程序
原文 砸金蛋:jQuery+PHP实现的砸金蛋中奖程序 砸金蛋被广泛应用于庆典活动.商家促销.电视娱乐等场合,它的趣味.悬念能迅速活跃现场气氛.同样,我们也可以将砸金蛋应用到WEB网站上,用于开展线上 ...
- 借助微软提供的url重写类库URLRewriter.dll(1.0)实现程序自动二级域名,域名需要泛解析
二级域名和系统中会员帐号自动关联,也就是系统中注册一个会员,会员自动就可以通过二级域名来访问,比如我的帐号是zhangsan,我在morecoder.com注册后,访问zhangsan.morecod ...
随机推荐
- GUN WINDOW 工具
GNU utilities for Win32 CoreUtils for Windows 或者 完整的 package dd for windows Unix ports - WHICH, TEE ...
- Android 之窗口小部件高级篇--App Widget 之 RemoteViews
Android 之窗口小部件高级篇--App Widget 之 RemoteViews 在之前的一篇博文(Android 之窗口小部件详解--App Widget)中,已经介绍了App Widget的 ...
- 关于iosApp审核问题
求各位大神指导!!!!我上周app打包上传给APPstore准备发布,可是苹果官方发来邮件,说我引用了非公有选择,原文如下: Non-public API usage: The app referen ...
- 通俗易懂地讲解 __block 变量
__block 变量 一般来说,在block内只能读取在同一个作用域的变数而且没有办法修改在block外定义的任何变量,此时若我们想要这些变数能够在block中被修改,就必须在前面挂上__block的 ...
- NSNotification的使用(对观察者模式最通俗、易懂的讲解)
这是一个观察者模式. 首先在你需要监听的类中加入观察者: - (void)addObserver:(id)observer selector:(SEL)aSelector name:(NSString ...
- java.security.InvalidKeyException: Illegal key size aes解密失败
使用微信时定期提示:java.security.InvalidKeyException: Illegal key size和 com.qq.weixin.mp.aes.AesException: ae ...
- Mysql一个非常有用的内置函数今天碰到要把MySQL数据库中的varchar转换成date类型进
Mysql一个非常有用的内置函数 今天碰到要把MySQL数据库中的varchar转换成date类型进行时间的比较和查询.在网上找了找,发现MySQL也跟其他数据库一样有自己内置的转换函数:str_to ...
- TextView字体,行距,html格式,超链接,最大长度的设定
颜色,大小 <!-- 设置字体的大小,推荐用sp做单位:字体颜色以#开头 --> <TextView android:id="@+id/textView1" an ...
- 解决 dotNetZip 解压乱码的问题,支持ZIP分卷解压缩
using (ZipFile zip = ZipFile.Read("D:\\test\\2007.zip",System.Text.Encoding.Default)) { fo ...
- [PHP] 6种负载均衡算法
CP from : https://www.cnblogs.com/SmartLee/p/5161415.html http://www.dataguru.cn/thread-559329-1-1. ...