首页
学习
活动
专区
圈层
工具
发布

JavaScript奇淫技巧(一)

---- 清空数组的快速做法 常规方法: var array = [1,2,3,4,5]; array = []; 通常我们采用上述办法,但这种方法有严重缺陷!它实际上并没有清空原本的数组对象!...,他们都采用给数组赋上[]的方式,clearArray1成功清空数组,而clearArray2却不行。...冷门方法: 为了避免上述方法的种种弊端,可以使用以下方式来清空数组: array.splice(0,array.length); 本方法借助JS提供的splice函数,删除本数组的所有元素。...---- JQuery对象与JS DOM对象相互转化 JQuery——>DOM对象 //现有一个JQuery对象: $("#id"); //转化成DOM对象 $("#id")[0] PS:$(“xxx”...DOM对象——>JQuery对象 //现有一个DOM对象: var dom = document.getElementById("id"); //转化成JQuery对象 $(dom) ---- 判断数组中是否存在某对象

1.3K60

$.each()与$(selector).each()区别详解

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过...each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等 在javaScript开发过程中使用$each可以大大的减轻我们的工作量。...看下jQuery中的each实现(网络摘抄)  function (object, callback, args) { //该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数...== false; value = object[++i]) {} /*object[0]取得jQuery对象中的第一个DOM元素,通过for循环, 得到遍历整个jQuery对象中对应的每个DOM...是类似于 function(index, elem) { ... } 的方法。

2.3K120
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    「理论」jQuery选择器Sizzle原理分析(上)

    作者:朱胜--腾讯web前端工程师 @IMWeb前端社区 一、前沿 DOM选择器(Sizzle)是jQuery框架中非常重要的一部分,在H5还没有流行起来的时候,jQuery为我们提供了一个简洁,方便,...Sizzle选择器有哪些特点呢? 1. 高效,Sizzle通过很多方法来实现了极致的访问速度,为我们搜索DOM节点提供了一个很好的指导,号称是当时最快的DOM选择器引擎。 2....我们考虑下HTML的基本结构,HTML被浏览器首先解析为DOM树类似于下面的结构: 假如我们要查询ad2这个div,$("#div[name=wrapper] div[name=ad2]") (1)按从左往右的思路...通过创建编译函数,通过空间换时间的方式,来提高相同选择符的查询性能,每个选择符查询之后都会被词法分析,然后创建为过滤函数,只要对种子集合执行过滤函数即可,后面会详细介绍。...这里有几个细节说明一下,tokenize函数实现的过程是很多编译器实现的一种方式,比如js代码在执行之前也是从字符串需要进行词法分析,编译优化再执行的过程,通过tokenize可以让机器能理解我们的数据

    1.4K10

    全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

    所以有两种方式可以获取到 DOM 对象:get(0) 方式与下标[0] 9.选择器(非常重要) 选择器就是一个字符串,是用来定位dom对象的。...$("#id,.class,标签名") jQuery基础知识总结 10.表单选择器 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单,均可做出相应选择。...$(选择器).text(值) : 有参数方式,对数组中所有 DOM 对象的文字显示内容进行统一赋值。...$(选择器).html(值):有参数调用,用于设置 DOM 数组中所有元素的在网页上显示的文本内容。...的数据,包含请求方式、数据、回调方法等 下边介绍的是 $.ajax() 函数中参数 async : 布尔值,表示请求是否异步处理。

    8K10

    《众妙之门:JavaScript 与 jQuery 技术精粹》部分要点摘录

    以下内容来自于《众妙之门:JavaScript 与 jQuery 技术精粹》一书,为本人在阅读的时候感觉有必要记录的地方记录而来。...MyNamespace 会报错,变量之前么有做声明。较好的处理方式: 方式一 if (!...最终产品的可用性和语义性如何? 是否明白在发生神马?(当出错时候能否快速定位问题?) 与其他语言的交互性如何? 维护人员是否专注? 是否有测试方案,升级或扩展是否简单易行?...NaN > "number" //NaN 是一个数字   NaN === NaN > false //NaN 不等于任何值   new Array() == false > true //空数组 ==...(通过DOM 脚本生成的元素) delegate() 在jQuery 1.4.2 中出现的未来弥补live()无法直接用于链式结构。

    95170

    DOM 高级工程师不完全指南

    获取单个 DOM 元素 向 document.querySelector 中传入任何有效的 css 选择器,即可选中单个 DOM 元素: ?...为了减少对宝贝键盘的损耗,我一般会这么干: ? 保护机械键盘,从我做起。 少年,爬上这棵 DOM 树 上述内容的主题是查找 DOM 元素,这是一个自上而下的过程:从父元素向其包含的子元素发起查询。...如果你有以下 HTML: ? 然后操作一下,把 搞到 的后面去: ? 于是我们就得到了这样的结果: ? 替换 DOM 元素 replaceChild?...至此,我们有了一个 DOM 观察者 observer,也有了一个完整可用的 DOM 变化后的回调函数 callback,就差一个需要被观测的 DOM 元素了: ?...配置对象支持如下字段: attributes: Boolean,是否监听元素属性的变化 attributeFilter: String[],需要监听的特定属性名称组成的数组 attributeOldValue

    92710

    DOM 高级工程师不完全指南

    获取单个 DOM 元素 向 document.querySelector 中传入任何有效的 css 选择器,即可选中单个 DOM 元素: ?...为了减少对宝贝键盘的损耗,我一般会这么干: ? 保护机械键盘,从我做起。 少年,爬上这棵 DOM 树 上述内容的主题是查找 DOM 元素,这是一个自上而下的过程:从父元素向其包含的子元素发起查询。...如果你有以下 HTML: ? 然后操作一下,把 搞到 的后面去: ? 于是我们就得到了这样的结果: ? 替换 DOM 元素 replaceChild?...至此,我们有了一个 DOM 观察者 observer,也有了一个完整可用的 DOM 变化后的回调函数 callback,就差一个需要被观测的 DOM 元素了: ?...配置对象支持如下字段: attributes: Boolean,是否监听元素属性的变化 attributeFilter: String[],需要监听的特定属性名称组成的数组 attributeOldValue

    97910

    【深入浅出jQuery】源码浅析2--奇技淫巧

    在细节上做的真的很好,这里首先定义了一个对象变量、一个字符串变量、数组变量,要注意这 3 个变量本身在下文是有自己的用途的(可以看到,jQuery 作者惜字如金,真的是去压榨每一个变量的作用,使其作用最大化...地址开始执行,而当保存了 concat 方法的入口 core_concat 时,完全就可以省去前面两个步骤,从而提升一些性能; 2、另外一点,借助 call 或者 apply 的方式调用,让一些类数组可以直接调用数组的方法...就如上面是示例,jQuery 对象是类数组类型,可以直接调用数组的 slice 方法转换为数组类型。...有了钩子,你可以将差不多任何东西保持在可控范围内。 从设计模式的角度而言,这种钩子运用了策略模式。...连贯接口 无论 jQuery 如今的流行趋势是否在下降,它用起来确实让人大呼过瘾,这很大程度归功于它的链式调用,接口的连贯性及易记性。

    1.3K92

    jQuery 入门指南教程

    基础语法 $(selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作 示例...注意dom对象和jQuery对象是有区别的,调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。...对于jQuery对象只能使用jQuery的方法,而dom对象只能使用dom的方法,如要获取第三个元素的内容。...$.makeArray() 将对象转化为数组。 $.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。 $.isArray() 判断某个参数是否为数组。...$.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。 $.isFunction() 判断某个参数是否为函数。

    1.7K11

    JavaWeb——XML入门详解(概述、语法、约束、Jsoup解析、Xpath解析)

    2、指令(了解):结合CSS的 3、标签:名称自定义的, 规则: 名称可以包含字母、数字以及其他的字符 名称不能以数字或者标点符号开始 名称不能以字母 xml(或者 XML、Xml 等等)开始 名称不能包含空格...,操作xml文档操作方式有两种: 解析(读取):将文档中的数据读取到内存中; 写入:将内存中的数据保存到xml文档中,持久化的存储。...1)解析xml的方式 1、DOM:将标记语言文档一次性加载至内存,在内存中形成一颗dom树               优点:操作方便,可以对文档进行CRUD的所有操作,一般用于服务器              ...2)常见的解析器 JAXP:DOM方式解析,SUN公司提供,支持dom和sax两种思想,性能不佳,基本不用; DOM4J:DOM方式解析,一款优秀的解析器 Jsoup:DOM方式解析,jsoup 是一款...它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。 PULL:SAX方式解析,Android内置的解析器。

    1.6K30

    前端基础知识总结

    dom对象添加子对象 each是对数组,json和dom数组等的遍历,对每个元素调用一次处理函数 $.each(循环的内容,处理函数):表示使用jQuery的each,循环数组,每个数组成员都会执行后面的处理函数一次...(index,element){处理程序}) index:数组的下标 都是自定义的形参,名称自定义 element:数组的对象 dom对象和jQuery对象 dom对象:使用JavaScript的语法创建的对象叫做...对象,注意:jQuery表示的对象都是数组 var jobj = $("#txt1") jobj就是使用jQuery语法表示的对象,是jQuery对象,也是数组,现在数组中就一个值 dom对象可以和jquery...对象互相转换 dom对象转jquery 语法:$(dom对象) jquery对象转dom对象 语法:从数组中获得第一个对象,第一个对象就是dom对象,使用[0]或者get(0) 为什么要进行...dom和jQuery的转换 目的是要使用对象的方法或者属性 当dom对象时,可以使用dom对象的属性或者方法,要想使用jQuery提供的函数,必须要是jQuery对象才行 命名建议:在命名jQuery对象时

    1.9K50

    JQuery基础概念知识

    其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。 jQuery,顾名思议,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。...文档说明:Jquery有完整的API开发文档,比如jQuery1.11.0_20140330.chm,手册查询非常方便,即查即用 代码和html内容分离:使用Jquery不用再在html里面插入一堆js...,否则页面很可能出现乱码.UTF-8 是没有国家的编码,也就是独立于任何一种语言,任何语言都可以使用 Document是网页的标题名称 要使用JavaScript脚本首先要导入js的库文件,即导入jquery...('')是固定格式 以上获取文本框输入值使用的是Dom对象的方法,Dom(documnet),其对象有getElementById()这个方法,可以按html标签内的id名来获取到dom对象 var account...中的String类型(注意:不要混用Java中的各种方法),Js有其自己的各种函数来操作字符串,使用之前要确定正确 比较字符串可以用if(account=="example")等方式来比较;其对象还有length

    1.6K10

    jQuery的三种$()

    就是在点击页面上的任何一个链接时的触发事件。确切地说,就是jQuery用这个标签构建了一个对象$("a"),函数 click()是这个jQuery对象的一个(事件)方法。... 而操作这段HTML的是如下一条语句: alert($("div>p").html()); $()中的是一个查询表达式,也就是用“div>p”这样一个查询表达式构建了一个jQuery对象,...2、$()可以是$(element),即一个特定的DOM元素。如常用的DOM对象有document、location、form等。...3、$()可以是$(function),即一个函数,它是$(document).ready()的一个速记方式。...$('ul li')和$('ul[li]')虽然返回的都是一个jQuery数组,但两者的含义正好相反。前者是要找下所有子孙,而后者却是在找所有子孙为的数组。

    1.1K30

    5 个提升你 JS 编码水平的实例

    •作者:陈大鱼头•github: KRISACHAN[1] 虽然 2020 的今天,各种前端框架、工具林立,而这些框架跟工具也帮我们提前解决了不少麻烦的问题,但是工具始终是工具,扎实的基本功才是最核心的.../类数组对象封装 如果我们使用 ES5/ES6+的数组 API,很容易就能够对数组进行各类的循环操作,但是如果我们要循环一个类数组对象呢?...元素节点的偏移量 如果有用过jQuery的童鞋,就一定不会忘记$('').offset()这个 api 的强大功能,这个 api 可以轻易获取元素的偏移量,那么如果我们不用jQuery该怎么实现呢?...,这里是利用requestAnimationFrame对opacity通过递归的方式进行修改。..., ...acc }); const obj = Array.from(new Array(20), createList).reduce(listReducer); 如果你、喜欢探讨技术,或者对本文有任何的意见或建议

    1.3K20
    领券