【原生js模拟jquery中的addClass和removeClass方法】的更多相关文章

原生js模拟jquery中的addClass和removeClass方法

js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = className; }else { var strClass = obj.className; var arrClass = strClass.split(' '); var arr = []; var index = arrIndex(arrClass,className); if(index…

原生JS模拟jQuery $

模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是TQObject对象?简单来说就是一个自定义的JS对象,其主要目的是为了保存通过各个选择获取的一个或一组DOM对象 function TQObject(){ this.data= [] ; } 1) 模拟$,用于根据指定的选择器获取页面上的元素,并将获取的元素封装到TQObject中返回 var $…

使用原生js模拟jQuery选择器，实现new方法，兼容ie5

// 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"></script> <script> var jQuery = new jQuery() $ = jQuery.dealParams jQuery.ready(function(){ console.log($('#list')); console.log($('li')); c…

原生 JS 与 jQuery 中的 AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换:AJAX 是一种用于创建快速动态网页的技术. AJAX是基于现有的Internet标准,并且联合使用它们: XMLHttpRequest 对象 (异步的与服务器交换数据): JavaScri…

原生JS和jQuery中基本的节点操作

js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要生成的文本节点的内容: **node.appendChild()**接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点: **node.hasChildNodes()**返回一个布尔值,表示当前节点是否有子节点 **node.removeChild()**接受一个子节点作为参数,用于从当…

jQuery 属性操作 - addClass() 和 removeClass() 方法

实例 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("intro"); }); 定义和用法 addClass() 方法向被选元素添加一个或多个类. 该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性. 提示:如需添加多个类,请使用空格分隔类名. 语法 $(selector).addClass(class) 参数 描述 class…

原生js模拟jquery写法

function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == "complete") { fun(); } } } function $(val){ if(val.indexOf("#")==0) { var ob=new Array(); var obj=document.getElementById(val.substring(1));…

js和jquery中有关透明度操作的问题

在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置       透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明度为30%: IE:filter: alpha(opacity:30):       firefox:opacity(0.3): 2 原生js设置透明度 为了兼容IE与其…

JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一致的 Name = "root" Age = function Foo(name,age){ this.Name = name; this.Age = age; this.Func = function(){ console.log(this.Name,this.Age); #this是当…

模拟jQuery中的ready方法及实现按需加载css,js实例代码

这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合了一些书籍内容,总结一下.先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isRea…

原生js和jquery实现图片轮播特效

本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部6.然后是一个图片描述info…

原生js和jquery实现图片轮播特效(转)

本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部6.然后是一个图片描述info…

【前端性能】必须要掌握的原生JS实现JQuery

很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗. 当然,我不是提倡写代码纯用原生JS实现,我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”. 一些感(fei)想(hua): 原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内和j…

原生js替换jQuery各种方法-中文版

原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器.…

原生JS与jQuery操作DOM对比

一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: var textEl = document.createTextNode("Hel…

原生JS和jQuery操作DOM的区别小结

一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象; 直接下标访问, $(DOM对象)[index]; 二.两者操作DOM的对比 一.创建元素节点 1.1 原生JS创建元素/文本节点 document.createElement("p"); 1.2 jQuery创建元素/文本节点 $('<p>…

angularJs中怎么模拟jQuery中的this？

最近自己正在学习angularJs,在学到ng-click时,由于想获取当前点击元素的自身,开始想到了用$index来获取当前元素的索引同样能实现我想要的效果,但是在有些特殊的情况下,使用$index却达不到实际的效果,所以就上网查了下资料,结果就发现了angularJs中怎么模拟jQuery中的this?这篇文章,这不正是我想要的嘛,赶紧按照文中的方法试了一下,果真可以(其实还是自己没有好好的看angularJs的API),很感谢写这篇文章的博主,以下是转载博主的原文: 今天想在Angular…

原生js仿jquery一些常用方法

原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.disp…

原生js、jQuery实现选项卡功能

在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边开始写代码了: HTML代码: <ul> <li class="click">red</li> <li>blue</li> <li>yellow</li> </ul> <div class…

Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比

讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题. 这是一个典型的 B/S 模式. PS. B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户端最主要的应用软件.这种模式统一了客户端,将系统功能实现的核心部分集中到服务器上,简化了系统的开发.维护和使用.客户机上只要安装一个浏览器 B/S 模式 优点:一个服务器可以…

【JS】怎样用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行. $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成.   详细一些.能够从下面几方面对照它们的差别: 1.运行时间 window.onload必须等到页面内包含图片的全部元素载入完成后才干运…

原生js与jquery加载页面元素比较

原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascript"> window.onload = function(){ ...... }; </script> jquery:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快. <…

原生js 与 jQuery对比

1.原生JS与jQuery操作DOM对比  :   https://www.cnblogs.com/QianBoy/p/7868379.html 2.比较jQuery与JavaScript的不同功能实现   :   http://www.cnblogs.com/QianBoy/p/7868291.html 3.原生JS与jQuery事件绑定对比: 原生js  :  onclick绑定的事件具有可覆盖性                 解除绑定方法:   btn1.onclick = null :…

如何在js或者jquery中操作EL表达式的一个List集合

------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型或者内存地址 首先说明,从el表达式拿到的复杂类型,包括内存地址,js是无法直接进行操作的,所以得转换为简单类型,不是直接拿内存地址操作 eval也操作不了内存地址 我先说明思路:就是先用jstl转换为为简单类型,然后对简单类型做操作,示例不写的复杂,看一下就好: /*最牛的判断方式!!!!!!!*…

原生JS和JQuery的区别

1.原生js和jQuery的入口函数加载模式不同 原生js等页面dom加载完成并且图片等资源也加载完成之后才会执行: jQuery则是等页面dom加载完成执行,不会等图片等资源也加载完成: (也就是说如果想通过jQuery的入口函数加载页面之后查询使用资源的属性是不可取的:例如 $(document).ready(function(){ $('img').width();}); )   重复写window.onload=function(){}会被覆盖,也就是只能有一个window.onload…

onload事件与ready事件的区别，原生js与jquery的区别

onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document).ready(function(){ }); 二者的区别主要有: 1.加载模式不同: 原生js会等待页面dom元素加载完毕,并且页面图片也加载完毕才会执行: jquery会等到dom元素都加载完毕,但不会等到图片也加载完毕就执行: 2. 通过原生js可以获取到dom元素的属性值: 通过jquery…

js和jquery中获取非行间样式

样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相同,唯一性) 那么来说说在js和jquery中,有时候需要获取元素的样式,比如说width或者height,在这种情况下如何获取? js中 1.行间样式: 相信大家无论是看书还是咋滴,都知道怎么获取行间样式吧,就是利用一个style: 这种利用style的方式获取的只能是行间样式. 2.非行间样式…

js进阶 12-13 jquery中one方法和trigger方法如何使用

js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包括事件委托了额外参数等 22 //one()函数绑定的事件处理函数都是一次性的 23 $('#btn1').one('click',function(){ 24 //alert('one') 25 $('<div></div>').appendTo($('body')) 26 }) 2…

js进阶 10-3 jquery中为什么用document.ready方法

js进阶 10-3  jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document.ready直接加载完dom树即可加载,document.ready可加载多个 2.document.ready函数怎么写? $(document).ready(匿名函数) 3.window.onload函数怎么写? window.onload=function(){} 4.js中某个元素的某个方法比…

JS与jQuery中html-与-text方法的区别

所有的实例均用下面的html <div id="id0"> <div id="id1"> 直接text <p> <span>文本内容</span> <input value="111222" type="text" /> </p> </div> </div> ==================JavaScript中的研…