但JS原生API写法依旧；并且有时候只不过小写一个Demo，或者产品中只有少量的前端效果或DOM操作，就去花时间&空间引入jQuery，或者React？不免有取宰牛之刀以杀鸡之嫌。...在jQuery的温柔乡里，是否还能记得原生她javascript原生？如果仅为使用个选择器($)或者类似的东西，是否真的有必要加载jQuery？故此了解下JS常用原生写法还是蛮有必要的。...[update-2015-12-07]有看到抛弃jQuery，拥抱原生JavaScript一文中提到，jQuery 代表着传统的以 DOM 为中心的开发模式，但现在复杂页面开发流行的是以 React 为代表的以数据.../状态为中心的开发模式； React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。...event] = handle; } } })(); 原生－DOM绑定事件－优化2 //DOM绑定事件-之惰性加载(调用方去触发BindEvent之时才去做初始化)// var BindEvent
true，右边的就忽略了！...如果左边为假，那么就运行右边的，看看右边的结果如何？如果右边为真，就返回真，否则返回假。 也就是说，不管右边的结果怎样，只要左边为假了，右边就无论如何会被执行一次的。...哦，超过60分就是及格了，所以alert出来的是及格。 如果分数 >= 60 是假的，是骗你的，不就是说分数 了，所以alert出来的是不及格。...if(dom.hasClass(className)){ //如果存在，就去掉这个class dom.removeClass(className...dom.hasClass(className) && dom.addClass(className) 这表示如果dom元素不包含你指定的className，那么 !
安装 npm install cheerio 特点 熟悉的语法：cheerio实现了jQuery的一个子集，去掉了jQuery中所有与DOM不一致或者是用来填浏览器的坑的东西，重现了jQuery...太过于重量级：JSDOM的目标是提供与浏览器一样的DOM环境，但是我们往往不需要这样。...解析html（load） 首先你需要先加载你的HTML。jQuery会自动完成这一步，因为jQuery操作的DOM是固定的。...但是在使用cheerio时我们要手动加载我们的HTML文档 首选的方式如下： var cheerio = require('cheerio'), $ = cheerio.load('如果某个属性值被设置成null，那么该属性会被移除。
大家好，又见面了，我是你们的朋友全栈君。...Cheerio 从jQuery库中去除了所有 DOM不一致性和浏览器尴尬的部分，揭示了它真正优雅的API。 **ϟ 闪电般的块:**Cheerio 工作在一个非常简单，一致的DOM模型之上。...我人会使用JSDOM如果我需要用一个在服务器上的浏览器环境，特别是如果我想要自动化一些功能测试。...###API####我们将用到的标记示例 Apple Orange Pear 这是我们将会在所有的API例子中用到的HTML标记 ####Loading首先你需要加载HTML。...( className ) 检查匹配的元素是否有给出的类名 $('.pear').hasClass('pear') //=> true $('apple').hasClass('fruit') //=
这些库还会把一些常用的代码进行封装。 把一些常用到的方法写到一个单独的 js 文件，使用的时候直接去引用这js文件就可以了，这个 js 文件就是 JavaScript 库。...3、hasClass 是否有某个类；removeClass 移除某个类；addClass 增加一个类。...3、jQuery对象.val();表示获取该对象 value 属性的值； 4、jQuery对象.val("值");表示设置该对象 value 属性的值； 四、页面加载事件 1、DOM中页面加载事件...特点：不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。...特点：不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。
注意事项 不要进行拖动进度条等操作，如果进度条满了，但任务没有完成不会跳转下一课，请稍微耐心一点，因为代码设置了定时器三秒检测一次，请不要自行其他操作，自动无需管。...当刚跳转到下一集的时候会出现几秒的声音，因为需要确保下一课已经加载出来了，包容电脑卡的同学。...$(".videoArea").click(); }, 1000); } if ($(".current_play div b:nth-child(2)").hasClass...('time_icofinish') || $(".current_play div b:nth-child(3)").hasClass('time_icofinish')) { console.log...可以来我们的专业代看网课网站，成绩90以上，包考试，无不良。 点击进入☞网课代看网站 正文到此结束
IntersectionObserver 这个 api 来进行监听，使用方法如下 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法 1、生成观察器 可以在同一个观察者对象中配置监听多个目标元素...的时间到交叉被触发的时间的时间戳 },{ root:监听对象的参照dom元素,如果未传入值或值为null,则默认使用视窗(viewport) rootMargin:'npx,...'...如果使用回调来监视这些更改,则无需调用此方法。调用此方法会清除挂起的相交状态列表,因此不会运行回调。...intersectionObserver.takeRecords() 代码示例: 实现懒加载: const io = new IntersectionObserver(()=>{ // 实例化 默认基于当前视窗...// 停止观察当前元素 避免不可见时候再次调用callback函数 } }) } imgs.forEach((item)=>{ // io.observe接受一个DOM
jQuery 是一个非常实用且实用的库，但随着浏览器对 ES6 的广泛支持（截至撰写本文时超过 96%），现在可能是时候从 jQuery 过渡到原生 JavaScript 了。...DOM 完全加载后再附加事件到 DOM 对象，通常会使用 (document).ready() 或常用的简写 ()。...// jQuery $(document).ready(function() { /* 在 DOM 完全加载后执行操作 */ }); // JavaScript // 定义一个方便的方法并使用它...完全加载后执行操作 */ }); 切换元素类名 通过 classList 属性，您可以方便地在 JavaScript 中添加、删除或切换类名。...，可以使用 .classList.contains() 来代替 jQuery 的 .hasClass()： // 使用 jQuery if ($(".box").hasClass("focus")) {
而且尽量屏蔽了浏览器的兼容性，而且提供了强大的可扩展性，成为了目前非常流行的前端开发框架之一。...因为window.onload事件是在页面的图片、第三方脚本、样式等都下载和加载完成后才会触发。而我们希望是页面的HTML的文档树对象可进行交互就立即绑定DOM的事件和做一些初始化工作。...所以之前的DOM时代的兼容代码 /** * @description 当页面的文档树加载完成后，可以进行交互就立即触发回调函数执行 * @param {function} callback -页面加载完成后调用的回调函数...//jQuery的构造函数： // 第一种用法：可以接受一个回调函数，回调就是在页面加载完成后执行。...，提供了方法css('styleName', 'value') // 如果传一个参数，代表获取，传两个参数代表设置。
在实际开发中，为了提高开发的效率，我们会把常用到的功能封装成方法，这样后期开发需要，拿来即用。 这里分享33个在实际开发中经常需要用到的功能（已封装成方法），分享给到大家。...1、加载js ||css || style const loadRes = function(name, type, fn) { // 加载js || css || style let ref if...const ajax = function(conf) { // ajax操作 let url = conf.url, data = conf.data, senData = [], // 封装后的数据...isForm) { // 如果data是对象，转换为字符串 for (var k in data) { senData.push(encodeURIComponent(k) + '='...== 0) { re = AA[a[0].charAt(i)] + BB[k % 4] + re } k++ } if (a.length > 1) { // 加上小数部分(如果有小数部分
零基础打造自己的 js 类库（1） 写完后，我又陆陆续续地改了很多代码，继而有了下面这个版本，暂且就叫做miniQuery v2.0吧，嘿嘿。...简易ui ： 额，目前只写了一个按钮 我利用零碎时间写了一个礼拜，没想到假模假式的也弄了不少方法了，当然，这些肯定是远远不够的。...不够以后写案例的时候我差不多就可以直接调用这个miniQuery.js了，主要方便了自己，如果觉得有必要，我就可以立即在里面添加新的方法，实现了订制功能。...主要还是用于培养兴趣，我本身不是做前端开发的，但是个人隐约感觉js在未来必定会火，当然现在也非常受欢迎了，我打算继续学下去。 首先来看看miniQuery怎么使用吧。...miniQuery) return; //如果本类库包装不了，就返回 if(miniQuery.length){ //如果是一个类数组元素的话，就获取他的长度
大家好，在前两篇文章里 127个常用的JS代码片段，每段代码花30秒就能看懂（一）和 127个常用的JS代码片段，每段代码花30秒就能看懂（二），我分享了前42段代码，今天我继续分享第三部分，希望对你的日常工作有所帮助...DOM元素是否包含指定的Class样式。...DOM节点后插入新的节点内容 const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);...，然后根据处理后的数组，找出交集，最后从第一个数组中将对应的元素输出。...，感谢你的阅读，如果你喜欢我的分享，麻烦给个关注、点赞加转发哦，你的支持，就是我分享的动力，后续会持续分享剩余的代码片段，欢迎持续关注。
，我也不清楚为啥截图后变成了这个样子。...先给util工具包扩展下面这几个方法： /*判断dom元素是否拥有某个class类*/ hasClass : function(obj, cls) { return obj.className.match...this.hasClass(obj, cls)) obj.className += " " + cls; }, /*移除dom元素中的某个class类*/ removeClass : function...如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。...重写后的按钮事件 //播放按钮 playDom.onclick = function(){ this.style.display = 'none'; pauseDom.style.display
jQuery DOM操作 在没有jQuery之前，DOM的操作相对来说有点麻烦，尤其是DOM节点的搜索。...目前我们已经学习了jQuery的选择器，接下带大家一块学习jQuery的DOM操作，jQuery对DOM操作的封装让我们前端开发工作非常简便、简洁、兼容性好。...jQuery的包装对象(jQuery.fn原型对象)提供了attr(name, value)方法可以读取和设置属性内容。...attr(attrName)方法接受一个字符串参数，就是属性的名称，返回值是属性值，如果dom元素没有此属性则返回undefined。...如果多选，将返回一个数组，其包含所选的值。
empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。 复制节点 clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本.....如果类名存在则删除它, 如果类名不存在则添加它。...判断是否含有某个样式：hasClass() — 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false。...jQuery 5.jQuery 中的事件 在页面加载完毕后, 浏览器会通过 JavaScript 为...它需要等待页面上面所有元素都加载完毕，包括图片，src=“” $(function(){})只需要页面上面的dom元素绘制完毕之后就执行，不含图片或者第三方的连接地址… 事件绑定 我们除了可以直接为页面的元素增加事件
错误的跳转链接 据热心网友 @Zsedczy 反馈（滑稽）使用评论的时候的选填项url填写时如果包含 http(s):// 会导致链接跳转出错（valine会输出重复的 http(s):// url）...刚开始看了下源码，因为修改过所以以为是改了源码的问题，但其实是valine原本就存在的问题。...其实 Valine 默认是不输出 http:// 到 url 的，但是这本身会导致一个问题就是：如果不填（http(s)://）链接会以当前域名做跳转导致404，所以需要稍微调整一下。..._this.hasClass('reUrl')){ _this.addClass('reUrl'); let _thisLinkLen = _thisLink.length...移动端第一次点击链接不会跳转，第二次之后才会执行（遍历不会造成该问题） 0 该bug可用的解决方案 setTimeout一个定时器在定时器规定时间内查找并操作动态加载的dom直到操作完成，移除定时器。
接下来 Robin 开始一周愉快的学习啦~ 一周后，Leo 为 Robin 同学布置了学习作业，开发一个【人员搜索选择】的页面，效果大致如下： [Learn-Array-Liked-Objects-Demo.gif...] Robin 看完这个效果图后，一脸得意的样子，这确实不难呀~ 过几天后，Robin 带着自己写的代码，给 Leo 展示了她的代码，并疑惑的问到： [Learn-Array-Liked-Objects...然而，随着Web应用程序变得越来越强大，尤其一些新增加的功能例如：音频视频编辑，访问WebSockets的原始数据等，很明显有些时候如果使用JavaScript代码可以快速方便地通过类型化数组来操作原始的二进制数据将会非常有帮助...mapFn 可选如果指定了该参数，新数组中的每个元素会执行该回调函数。 thisArg 可选可选参数，执行回调函数 mapFn 时 this 对象。 返回值： 一个新的数组实例。.../index.html 六、总结 本文我们通过一个实际场景，详细介绍了类数组对象在实际开发中的使用，对于常见的类数组对象，我们还介绍了处理方式，能很大程度减少我们处理类数组对象的操作，将类数组统一转成数组
接下来 Robin 开始一周愉快的学习啦~ 一周后，Leo 为 Robin 同学布置了学习作业，开发一个【人员搜索选择】的页面，效果大致如下： Robin 看完这个效果图后，一脸得意的样子，这确实不难呀...二、类数组对象介绍 2.1 概念介绍 所谓 类型化数组对象（简称类数组对象） 是一种类似数组的对象，它提供了一种用于访问原始二进制数据的机制。...然而，随着Web应用程序变得越来越强大，尤其一些新增加的功能例如：音频视频编辑，访问WebSockets的原始数据等，很明显有些时候如果使用JavaScript代码可以快速方便地通过类型化数组来操作原始的二进制数据将会非常有帮助...mapFn 可选如果指定了该参数，新数组中的每个元素会执行该回调函数。 thisArg 可选可选参数，执行回调函数 mapFn 时 this 对象。 返回值：一个新的数组实例。.../index.html 六、总结 本文我们通过一个实际场景，详细介绍了类数组对象在实际开发中的使用，对于常见的类数组对象，我们还介绍了处理方式，能很大程度减少我们处理类数组对象的操作，将类数组统一转成数组
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
