让你熟知jquery见鬼去吧
$
是jquery最具代表的符号,当然php也是,但是二者不能同日而语;不得不说jquery的选择器是大家赞不绝口的,在它1.x版本中对ie兼容性是最好的,这要归功于$
选择器;
现在呢,html5的降临,移动端的巨大发展,让我们可以慢慢弃用这臃肿的工具,轻装上阵,打死你个龟孙儿
document.querySelector()
和document.querySelectorAll(str)
这对兄弟jquery2.x版本选择器的核心,我们可以简单的封装一个函数来代替jquery的$$
function $$(els){
var dom = document.querySelectorAll(els);
if(dom.length==1){
return dom[0]
}else {
return dom;
}
}
document.querySelector("selector1,selector2,...")
返回要查询的首个元素document.querySelectorAll("selector1,selector2,...")
返回查询的全部元素
可以使用元素的 id, 类, 类型, 属性, 属性值等
是时候放弃removeClass()和addClass()了
下面介绍的就是classList
返回元素的类名,作为 DOMTokenList 对象(官方解释),下面就举栗子来说明其作用吧
<div id="demo"></div>
<script type="text/javascript">
$$("#demo").classList.add("c1","c2")
//位div添加class="c1 c2"
$$("#demo").classList.remove("c1","c2")
//移除c1 c2类名,如果其中有一个是不存在的不会影响存在的类名的移除
$$("#demo").classList.item(0)
//第一个类名
$$("#demo").classList.toggle("c1")
//如果有c1这个类名就移除,如果没用就添加
$$("#demo").classList.contains("c1")
//判断是否有这个类名,true false
</script>
下面是一些原生js替代jquery的某些方法的代码片段
//尾部追加DOM元素。
$("#demo").append($(child));// jQuery写法
$$("#demo").appendChild(child);
//头部插入DOM元素
$("#demo").prepend($(child));// jQuery写法
$$("#demo").insertBefore(child, $$("#demo").childNodes[0])
//删除元素
$("#demo").remove();// jQuery写法
$$("#demo").parentNode.removeChild($$("#demo"))
ps 对于很多移动端的所谓h5页面来说,主要的是动画效果,dom操作的复杂程度不高,我们就不必要去引用一个我们用的不多的jquery,虽然zepto也不是很大,其实原生的还不止这些,例如:element.getBoundingClientRect()
function getRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left,
width : rect.width,
height : (rect.bottom - rect.top)
}
}
不说这是干嘛地,自己查吧~~
原文链接:http://azq.space/blog/html5-d...
公众号
本文转载于猿2048:让你熟知jquery见鬼去吧
让你熟知jquery见鬼去吧的更多相关文章
- APIJSON,让接口见鬼去吧!
我: APIJSON,让接口见鬼去吧! https://github.com/TommyLemon/APIJSON 服务端: 什么鬼? 客户端: APIJSON是啥? 我: APIJSON是一种JSO ...
- APIJSON,让接口和文档见鬼去吧!
我: APIJSON,让接口和文档见鬼去吧! https://github.com/TommyLemon/APIJSON 服务端: 什么鬼? 客户端: APIJSON是啥? 我: APIJSON是一种 ...
- 【转】APIJSON,让接口见鬼去吧!
我: APIJSON,让接口和文档见鬼去吧! https://github.com/TommyLemon/APIJSON 服务端: 什么鬼? 客户端: APIJSON是啥? 我: APIJSON是一种 ...
- 让<未将对象引用到实例>见鬼去吧!
未将对象引用到实例,即NullReferenceException异常,我相信这是c#编程中最常见的错误之一,至少我在做项目的过程中,有很多时候都会抛出这个异常.每当这个异常出现的时候,我都会头皮一紧 ...
- 见鬼了,swiper
1.今天不知怎么swiper的onInit函数不起作用,怎么弄都不行: 把以前能行的案例的包都导进去还是不行,但是onSlideChangeEnd可以触发,晕死了.... 不,它触发了一次onInit ...
- poj3225 线段树区间操作 (见鬼)
细节处理实在太重要了. #include<cstdio> #include<cstring> #define MT 65533*4 #define Maxn MT*4 int ...
- jquery replace方法去空格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一封来自恶魔的挑战邀请函,那些你见过或者没见过的C语言指针都在这里了
前言 相信大多数的同学都是第一门能接触到语言是C/C++,其中的指针也是比较让人头疼的部分了,因为光是指针都能专门出一本叫<C和指针>的书籍,足见指针的强大.但如果不慎误用指针,这些指针很 ...
- 细说 Form (表单)
细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...
随机推荐
- Python:tkinter无法同时显示多个image的解决方法
0.问题 在用Tkinter进行编程时,需要在一个Frame下显示多个图片,但是不管怎么设置都是只显示最后一张,就像这样: 代码 for i in range(3): ... image=ImageT ...
- Python:绘图添加中文标题
(20条消息) Python绘图如何显示中文标题_wulei_1107103372的博客-CSDN博客_python画图中文标题 plt.rcParams['font.sans-serif'] = [ ...
- k8s全方位监控 -prometheus实现短信告警接口编写(python)
1.prometheus短信告警接口实现(python)源码如下: import subprocess from flask import Flask from flask import reques ...
- 【NumPy】 之常见运算(np.around、np.floor、np.ceil、np.where)(转)
原博客链接:https://blog.csdn.net/tz_zs/article/details/80775256 np.around: 四舍五入取整 n = np.array([-0.746, 4 ...
- 06-CircuitBreaker断路器
1.介绍 Spring Cloud Circuit breaker provides an abstraction across different circuit breaker implement ...
- RhaPHP 微信公众号管理系统
框架网址https://www.rhaphp.com/ 开发手册网址:: https://www.kancloud.cn/langleigelang/rhaphp/588488 git 克隆,如果克隆 ...
- php 23种设计模式 - 设计模式简介以及分类
一. Introduction[介绍] 设计模式:提供了一种广泛的可重用的方式来解决我们日常编程中常常遇见的问题.设计模式并不一定就是一个类库或者第三方框架,它们更多的表现为一种思想并且广泛地应用在系 ...
- Map 集合
<零基础学Java > Map 集合 在程序中需要存储具有映射关系就需要使用Map集合了. Map集合由Map接口.Map接口的实现类组成. Map 接口 Map接口没有Collectio ...
- nginx配置负载均衡分发服务器笔记
记录学习搭建nginx负载均衡分发服务器的过程笔记 1.服务器IP:192.168.31.202(当前需要搭建nginx负载均衡分发的服务器)安装好nginx 2.在服务器IP:192.168.31. ...
- 前端经典面试题vue面试题
1.什么是MVVM? MVVM是一种设计思想. Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑: View 代表UI 组件,它负责将数据模型转化成UI 展现出来,View ...