首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

你可能不需要 jQuery使用原生 JavaScript 进行开发

很多 JavaScript 开发人员,包括我在内,都很喜欢 jQuery。...因为它简单,因为它有很多丰富插件可供使用,和其它优秀工具一样,jQuery 让我们开发人员能够更轻松开发网站和 Web 应用。   ...然而,另一方面,作为前端开发基础框架,jQuery 包含大量兼容性代码和扩展功能,其中有很多在你整个项目中可能都不会用到。...其实如果你只是针对现代浏览器,很多功能使用原生 JavaScript 就可以实现,即使是拖后腿低版本 IE 浏览器,兼容性也是很容易处理。 ?   ...下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery功能。如果你打算自己开发一个小基础框架,可以好好参考一下这些代码实现。

1.1K10
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery介绍与常见选择使用

jQuery核心特性可以总结为:具有独特链式语法和短小清晰多功能接口;具有高效灵活css选择器,并且可对CSS选择进行扩展;拥有便捷插件扩展机制和丰富插件。...jQuery独特选择器、链式操作、事件处理机制和封装完善AJAX都是其他JavaScript库望尘莫及。...进行压缩,最后到目前使用UglifyJS进行压缩。)...2.强大选择器。jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创高级而复杂选择器。...,其他选择使用方式可以参考以下jQuery中文文档: https://www.jquery123.com/ 简单事件注册: 通过选择器搜索出来对象包装后是jQuery对象,所以不能使用DOM中事件注册方式

2.7K10

js与jQuery区别以及jQuery选择器和方法使用

目录 使用jQuery js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 ---- js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 使用jQuery jQuery...是什么:jQueryJavaScript类库,封装了很多js代码。...官网:http://jquery.com/ 为什么要学jQuery:可以简化JavaScript开发,jQuery中包含有:选择器,CSS样式,HTML事件处理,JS动画 以及丰富插件等等,而且浏览器兼容性很高...3.3.1 建议下载开发版本 2、HBuilder使用 创建项目 3、把jQuery库复制到项目中js文件夹中 4、引入jQuery库文件: 注意:script标签中不要写内容,写jQuery代码就再写一对...选择器还可以组合多个一起使用,可以分为并集和交集。

15.3K10

JQuery简述、使用方法和选择

JQ简述1 1、 jQuery出现背景(Javascript遇到问题) 选择器功能弱 DOM操作繁琐之极 浏览器兼容性不好 动画效果弱 2、什么是 jQuery(概念) jQuery...(javaScriptQuery)JavaScript 代码库 官方网站:http://jquery.com/ 3、目前 jQuery 有三个大版本: 1.x:兼容ie678,使用最为广泛,官方只做...除非特殊要求,一般不会使用 3.x 版本,很多老 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护版本。 注:推荐学习时使用1.x版本,功能更加完善,所学习到东西更多。...(…….); 作用 2:$(selector) 选择jQuery具有强大选择器功能 ?...使用准备 ? JQ中常用选择器 一、基本选择器 1、id选择器 通过元素id获取相关元素 ? 2、元素选择器 获得body内相关元素,如div、input等 ?

1.1K10

HTML5中类jQuery选择器querySelector使用

简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery选择器...这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法使用差不多语法,都是接收一个字符串参数,这个参数需要是合法CSS选择语法。...querySelector 该方法返回满足条件单个元素。按照深度优先和先序遍历原则使用参数提供CSS选择器在DOM进行查找,返回第一个满足条件元素。...先看个例子,比如我们有个div它样式类为'foo:bar',当然我知道你一般不会这样写。当我们需要选择时候,就需要将其中冒号进行转义,否则抛错。...理解这点后,可以来看一个更有趣例子了。比如我们要选择类名里面含反斜杠元素。是的,我们需要一共使用四个反斜杠!才能正常工作。 ?

3.2K70

使用 JavaScript 进行数据分组最优雅方式

对数据进行分组,是我们在开发中经常会遇到需求,使用 JavaScript 进行数据分组方式也有很多种,但是由于没有原生方法支持,我们自己实现数据分组函数通常都比较冗长而且难以理解。...在看这个提案,之前,我们先来回顾下我们以前在 JavaScript 里是怎么分组。...{ groupedBy[item.type].push(item); } else { groupedBy[item.type] = [item]; } } reduce 使用...Array.prototype.filter,代码看起来很容易阅读,但是性能很差,你需要对数组进行多次过滤,而且如果 type 属性值比较多情况下,还需要做更多 filter 操作。..., items.filter((item) => item.type === type), ]), ); 是不是很让人崩溃 ~ Array.prototype.groupBy 好了,如果使用

6.4K52

代码详解:使用JavaScript进行面向对象编程指南

对象,即我们相互交流一个载体,有其属性和方法。对象是面向对象编程核心,不仅用于JavaScript,而且还适用于Java、C语言、C++等。不再考虑单个变量和函数,而选择自给型对象。...book1 instanceof Book > true 1.3 Object.create()方法 JavaScript每个对象都将从主对象创建。任何时候使用大写字母“O”时,指都是主对象。...以上例子创建了一个原始对象book1,并为作者和标题赋值。可以看到原始对象中汇总函数: image.png 下面将Object.create() 方法进行详细介绍。 2....复用/继承 JavaScript继承是一种机制,允许我们使用现有的类创建一个新类。也就是子类继承父类所有属性和行为。 一般来说,JavaScript不是一种基于类语言。...关键字“类”是在ES6中引入,但它是语法糖,JavaScript仍然是基于原型。在JavaScript中,继承是通过使用原型来实现。这种模式称为行为委托模式或原型继承。

72720

使用AmplifyJS和JQuery编写更好更优雅javascript事件处理代码

事件(或消息)是一种经常使用软件设计模式。可以减少消息处理者和消息公布者之间耦合,比方J2EE里面的JMS规范。设计模式中观察者模式(也叫公布/订阅模式)。...这对于javascript代码相同适用。之前写JQuery相关博客中。具体介绍了JQuery事件处理机制和特性,具体可以參考这个文件夹下文章。...JQuery事件处理事实上就是使用了公布/订阅模式,包含它提供命名空间机制、自己定义事件都非常棒,可是JQuery事件处理有一个缺陷:JQuery事件都是和DOM元素相关,可是非常多时候我们并不须要...仅仅希望使用事件公布/订阅这样机制。 代码1:假设某个DOM元素不存在。那么不能依靠它使用事件公布和订阅。...,通过AmplifyJS使用方式能够看到。

63830

Web前端知识(四)

4.Web前端框架 4.1. jQuery框架 4.1.1.jQuery概述 4.1.1.1.jQuery框架概述 jQuery是一款优秀javaScript库.jQuery已经集成了JavaScript...而这个“”就是jQuery当中最重要且独有的对象:jQuery对象 $(function () {}); 执行一个匿名函数 $(‘#idName’); 进行执行ID元素选择 $(‘#idName...还封装了一些特殊功能 CSS 操作方法 1.获取与修改宽高. 不带值为获取,带值为修改....它完全继承了 CSS 风格,可以对 DOM 元 素标签名、属性名、状态等进行快速准确选择,并且不必担心浏览器兼容性,写法更加简洁。...代码实战: 切换显示隐藏 我们在使用.show()和.hide()时候,如果需要一个按钮切换操作,需要进行一些条件判 断。

7.4K30

jQuery笔记(1) (多图)

,比如获取元素等/ 简单理解:就是一个JS文件,里面对我们原生JS代码进行了封装,存放在里面,这样我们可以快速高效地使用这些封装好功能了....//此处是DOM加载完成入口 }) jQuery顶级对象$ 是jQuery别称,在代码中可以使用jQuery代替,但是一般为了方便,通常都使用jQuery顶级对象,相当于原生JavaScript...jQuery对象本质是: 利用$DOM对象包装后产生对象(伪数组形式存储) 打印boxjQuery对象: 注意: jQuery对象只能使用jQuery方法,DOM对象则使用原生JavaScript...( ) 返回是最近一级父级元素 亲爸爸 children(selector) 只选择亲儿子 相当于'>' find(selector) 选中所有的子代元素 先来做一个微博下拉菜单案例...让下拉菜单显示方法 鼠标离开后ul继续隐藏 siblings(selector) 查找所有的兄弟元素 eq(index) 根据索引选择元素 但是更推荐下面这种,如果index为变量时方便修改

9K10

jQuery通过id选择器绑定双击事件,和appendTo()方法使用详解

selected",document);==>$("option:selected");//不可以 var alloptions = $("option:selected",$("#id"));//选择哪个下拉...(select)列表被选中值(第二种写法) var alloptions = $("option:selected",#id);//这个是另外一种写法也是可以被识别的(第三中写法)...var alloptions = $("option:selected",this);//指的是当前下拉下表函数下,选中中值(第四种写法) alert(alloptions.length...); //appendTo()把所有匹配元素追加到另一个指定元素元素集合中。...//实际上,使用这个方法是颠倒了常规$(A).append(B)操作,即不是把b追加到a,而是把a追加到b $("option:selected",this).appendTo($("

1.1K20

jQuery文件下载方法及引入HTML语法

jQuery下载去jQuery网站下载文件包,点击主页“Download”之后,进入下载页面,可以选择production版本进行下载,但是点击进去之后,浏览器并不会直接下载相关文件,而是跳转到一个...“密密麻麻”都是jQuery代码页面,仔细查看浏览器地址栏中url便可知,该页面其实就是jQuerymin版文件,可以使用下面这种方法,下载jQuery文件:右键点击该页面,在弹出菜单中选择另存为...,在另存为菜单中默认保存后缀名为".js",如果不是,可以在下拉菜单选择该类型选项,然后保存即可下载jQuery文件了。...鄙人下载是最新版本jquery-3.7.1.min.js提示:jQuery文件扩展名是".js",下载完之后,无需安装,使用直接引入即可使用jQuery。...jQuery引入HTML方法jQuery是js文件,引入HTML方法与引入JavaScript文件方法一样,在HTMLhead标签内使用script标签引入,比如:<script src="..

19621

JQuery 入门 - 附案例代码

jquery 使用javascript开发过程中,有许多缺点: 查找元素方法单一,麻烦。...到底是什么 jQuery官网 http://jquery.com/ jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。...注意:jQuery选择器返回jQuery对象。 jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多扩展性选择器。...层级选择器 名称 用法 描述 子代选择器 $(“ul>li”); 使用>号,获取儿子层级元素,注意,并不会获取孙子层级元素 后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下所有...$(selector).position(); jQuery事件机制 JavaScript中已经学习过了事件,但是jQueryJavaScript事件进行了封装,增加并扩展了事件处理机制。

13.8K10

为 WordPress 增加按分类搜索功能并自定义外观

那么思路比较明确,我们在评论模块表单中,增加一个 select 下拉选项,然后输出网站分类目录让用户可以选择,之后提交给 index.php 就可以了。...潜行者m 这次就是用这种方法,下面就来介绍一下。 输出对应结构 先要自己做一个结构,然后使用 CSS 进行修饰,达到你想要下拉菜单样式。这里我是用了两个 div 和 ul 来模拟。...其中一个表示当前选项,另一个表示下拉菜单内容。 然后在下拉菜单里面,使用一段 php 来调用输出对应 分类目录名称 和对应 目录id 。...具体代码可以参考下面这段,可以根据自己结构进行合理修改。 <?...一开始想到使用 JavaScript 按照 WordPress 搜索格式构造一个 URL,然后发现这是多么白痴。直接使用 jQuery 同步 select 选项就好了。

1.2K10

前台开发从头说起:谈谈CSS选择

实际上css还支持一些更丰富选择符。但是能够被浏览器广泛支持其实主要就是上面这几种,其它选择符在css中往往用来区别处理不同浏览器,或者用在jQuery一类框架中。本文就不提了。...css下拉菜单》一文中用到下拉菜单结构。...在那个示例中,没有使用任何class或者id,但是我们通过不同优先级元素+后台选择符,对结构中不同层次ul、li、a实现了精确定位。...仍然以上面的下拉菜单列表为例。首先使用 ul a 对父级菜单链接应用样式,然后用ul ul a就可以精确定位到次级菜单链接,应用新样式,对ul a定义进行覆盖。...但是借助于javascript,非常轻松,比如在jQuery中,我们可以用 $("ul ul:nth(2) li:nth(2)”) 或者 $("ul ul”).eq(1).find(“li”).eq(1

1K70
领券