从 jQuery 到 React 我最近的任务是用 React 重构一个使用 jQuery 写的功能。这个过程困难重重，因为大量的 jQuery 分散在代码段中。...如果你之前为了改变一个功能而在 HTML 模板或 JavaScript 中查找 find 一个 .class 或者 #ID 选择器，你应该明白我说的。...所有按钮、输入框等的交互状态都由这个 wrapper / container 元素分享。 共享状态 - 这种状态由多个元素共享。比如，从页面其它位置的日期下拉框中更新日历。...菜单和日历在不同的容器中，但是它们的状态是共享的。 我将用 jQuery 和 ReactJS 做的 4 个例子解释共享/独立状态的概念。...在这个例子中，我们通过 .Mood__name 和 .Mood__button-name 选择器分享 mood name ，并且通过一个容器中的按钮去更新另一个容器中的 emoji 。
除非特殊要求， 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。 目前该版本是官方主要更新维护的版本。...标签选择器（元素选择器） 语法： $(“html标签名”) 获得所有匹配标签名称的元素 id选择器 语法： $(“#id的属性值”) 获得与指定id属性值匹配的元素 类选择器 语法： $(“.class...的属性值”) 获得与指定的class属性值匹配的元素 并集选择器 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素 层级选择器 后代选择器 语法： $("A B ") 选择A元素内部的所有...’]”) 包含指定属性等于指定值的选择器 复合属性选择器 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器 过滤选择器 首元素选择器 语法： :first 获得选择的元素中的第一个元素...尾元素选择器 语法： :last 获得选择的元素中的最后一个元素 非元素选择器 语法： :not(selector) 不包括指定内容的元素 偶数选择器 语法： :even 偶数，从 0 开始计数 奇数选择器
jquery的版本问题 官网下载地址：http://jquery.com/download/ jQuery版本有很多，分为1.x 2.x 3.x 1.x和2.x版本jquery都不再更新版本了，现在只更新...jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。...jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。...注意：jQuery选择器返回的是jQuery对象。 jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。...age变量的值. // var age = 18; // console.log("我的名字是age"); //思考题: //为什么是给li标签设置鼠标移入事件
7、大于索引选择器 8、小于索引选择器 9、标题选择器 五、表单过滤选择器 1、可用元素选择器 2、不可用元素选择器 3、选中选择器 4、选中选择器（下拉框） ---- Hello，大家好，我是灰小猿...2、入口函数 同时在jQuery中，这样的事件绑定是需要写在一个入口函数中去的，在 的代码段中建立入口函数的语法是： $(function(){ }); 在这里需要注意的是...（下拉框） 语法：$(“A:selected”) 作用：获得下拉框选中的元素 // 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4" $("#b4").click(...，第一个选中选择器的作用对象是单选/复选框，而第二个选中选择器的作用对象是下拉框，同时对于第二种选择器，它的作用内容是下拉框中的包含在内的选项，因此在使用时应当使用“>...框架中五种选择器的使用就先和大家分享到这里，之后还会继续和小伙伴们分享jQuery的选择器、DOM操作以及jQuery的高级进阶内容。
代码就再写一对script标签 1、代码对比 案例1：点击按钮获取文本框中的值(JS对比jQuery)，如下图 JS版： jQuery版： 先引入jQuery库 jQuery选择器：用来选中元素 1.1...> 我是第一个div中的 第2个span标签 我是第一个div中的 第3个span标签 我是第一个div中的第二个p标签 ...我们应该先确定最大的： 表单选择器： 我们先来看一下文档中的表单选择器，这里面基本上表单中的每一个元素都有，我们主要讲一下单选，多选 和 下拉框的选择器。...，$(this).val();表示选中的选项的value值 下拉： 接着看咱们的最后一个 下拉。...下拉要注意了，单选 和多选直接就是找到选中的选项就行，可是下拉select标签中还有标签，我们要获取的是select中option选项的值，所以这个地方要注意写法。
script标签 js与jQuery代码对比 案例1：点击按钮获取文本框中的值(JS对比jQuery)，如下图 JS版： jQuery版： 先引入jQuery库 jQuery选择器：用来选中元素 ...> 我是第一个div中的 第2个span标签 我是第一个div中的 第3个span标签 我是第一个div中的第二个p标签 ...我们应该先确定最大的： 表单选择器： 我们先来看一下文档中的表单选择器，这里面基本上表单中的每一个元素都有，我们主要讲一下单选，多选 和 下拉框的选择器。...，$(this).val();表示选中的选项的value值 下拉： 接着看咱们的最后一个 下拉。...下拉要注意了，单选 和多选直接就是找到选中的选项就行，可是下拉select标签中还有标签，我们要获取的是select中option选项的值，所以这个地方要注意写法。
各个版本的下载：https://code.jquery.com/ 版本介绍： 1x ：兼容 IE 678 等低版本浏览器， 官网不再更新 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新...1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 。...对象，这样能够调用功能更加强大的jQuery中的方法。...基础选择器和层级选择器案例代码 我是div 我是nav div 我是p <...事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。
选择的索引值 4. var maxIndex=jQuery("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery...为Select插入一个Option(第一个位置) 3. jQuery("#select_id option:last").remove(); //删除Select中索引值最大Option...(最后一个) 4. jQuery("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)...5. jQuery("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 6. jQuery("#select_id...option[text='4']").remove(); //删除Select中Text='4'的Option 内容清空： jQuery("#select_id").empty();
③多选框选中元素 点击该按钮，能选取多选框中已经被选中的元素，同时将选中的值在控制台上打印。 ④下拉框选中元素 点击该按钮，能选取下拉框中已经被选中的元素，同时将选中的值在控制台上打印。...例子都是文本框，其实按钮也是可以的。 ③表单对象属性选择器：选中元素 格式：$("input:checked")。即匹配所有被选中的元素 。 例子中是多选框，其实单选框，下拉框也都可以使用该选择器。...使用attr("属性名")也可以获取对应属性值。 ④表单对象属性选择器：下拉框选中元素 格式：$("select option:selected")。即匹配所有被选中的元素 。...例子中是多选框，其实单选框，下拉框也都可以使用该选择器。 使用each()方法可以遍历多个元素。 使用attr("属性名")也可以获取对应属性值。 六、总结 选择器之间是可以叠加使用的。...比如层级选择器中可以包含基本选择器。 jQuery中的选择器实在是太多了，通过网络查询到jQuery对应里的选择器： ? 遇到不会的就可以查看下文档，讲解也很详细，还有案例分析。
[dom中定义的class的值]"); >>ID选择器 形如:$("#[dom中定义的ID的值]"); >>标签名选择器 形如:$("[标签名称]"); >>复合选择器 ...[dom中定义的class的值] [标签名称]");或 $("#[dom中定义的ID的值] [标签名称]"); 这四类选择器定义的都是以美元符号$开始后跟着左右括号，括号中的值视不同的选择器而不同,这里不多缀诉...如果是ID选择器，则jQuery对象中没有prevObject这个参数，因为ID本身就是唯一的，例如上面的代码，如果在html中定义了两个ID，jQuery选择器永远只会选择第一个匹配的，如果你只需要在...p")[4]); 已经学会使用选择器了，现在我讲解下jQuery选择器的常用的方法和属性: next():下一个节点 样例：$('.2').next(); prev(...(单选、多选)、选取的(下拉)、提交...
这些选择器的用法和 CSS 的语法非常相似，结合 jQuery 类库的方法你可以很方便快速地定位页面中任何元素，并为其添加响应的行为。 2、选择器的组成 选择器一般由“特殊符号”+“字符串”组成。...3、如何使用选择器获取元素 语法：(“选择器”) ，如 (“#mydiv”)。...在网页中，每个 id 名称只能使用一次[0, 1]，class 允许重复使用 [0, n]。 1.1、id 选择器 #id，用法：$(“#myDiv”) 返回值单个元素的组成的集合。...说明：这个就是直接选择 html 中的 id=“myDiv”。 1.2、元素选择器 Element，用法：$(“div”) 返回值元素集合。...说明：这个标签是直接选择 HTML 代码中 class=”myClass” 的元素或元素组（因为在同一 HTML 页面 中 class 是可以存在多个同样值的元素）。
//此处是DOM加载完成的入口 }) jQuery的顶级对象$ 是jQuery的别称,在代码中可以使用jQuery代替,但是一般为了方便,通常都使用 是jQuery的顶级对象,相当于原生JavaScript...中的window.把元素利用包装成jQuery对象,就可以调用jQuery的方法. jQuery对象和DOM对象 用原生的开始获取的对象就是DOM对象 jQuery方法获取的元素就是jQuery对象...常用API 目标: (感觉好累) jQuery选择器 $('选择器') 里面选择器直接写CSS选择器即可,但是要加引号 jQuery设置属性 $('div').css('属性','值')...筛选选择器 :first :even 注意这个和CSS的是不一样的,jQuery的是建立在索引号的基础上的偶数 :eq(index) jQuery筛选方法(重要) parent...先休息啦,今天也学了10个视频(虽然很少),但是我累了555 本来打算晚上发的，但是发现很多我做的东西没了，比如给一些重点的地方划线啥的，都消失了。。好无语啊，明天再搞搞就发 现在去看帅哥
） //jQuery目前正在更新的版本 3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）,3.x版本只是在原来的基础上增加了一些新的特性。...2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。...【练习：隔行变色案例.html】 【练习：开关灯案例】 选择器 什么是jQuery选择器 jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。...”, ”red”); 获取到的li元素中的最后一个 【案例：隔行变色】 筛选选择器(方法) 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。...，推荐给li注册事件，这样通过index方法才能获取到正确的索引值。
jQuery下拉框搜索模糊查询实现在web开发中，经常会遇到需要在下拉框中进行搜索并进行模糊查询的需求。jQuery是一个广泛应用于前端开发的JavaScript库，可以帮助我们实现这样的功能。...>jQuery实现搜索功能接下来，使用jQuery编写代码实现下拉框的搜索功能。我们可以监听输入框的输入事件，然后根据输入的内容来筛选下拉框中的选项，从而实现模糊查询。...跨浏览器兼容：jQuery封装了一些常见的浏览器兼容性问题，帮助开发者避免繁琐的兼容性处理。核心概念选择器：jQuery的选择器允许开发者通过CSS选择器选择元素，并对其进行操作。...动画效果：jQuery通过内置的动画方法，使得开发者可以轻松实现元素的动画效果，如淡入淡出、滑动等。...通过jQuery的选择器和事件处理方法，实现了简单的交互效果。总结通过上述代码，我们实现了使用jQuery在下拉框中进行模糊查询的功能。
$("#dom对象的id值") class选择器：class表示css中的样式，使用样式的名称定位dom对象。 $(".class样式名") 标签选择器：使用标签的名称定位dom对象。...$("#id,.class,标签名") jQuery基础知识总结 10.表单选择器 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。...); 选择指定下拉列表的被选中元素 $("选择器 > option:selected") var obj=("#select1>option:selected"); 12.jQuery中绑定事件...DOM 对象的 【value 属性】 $(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值 $(选择器).val(值)：有参形式调用;对数组中所有 DOM...选择器).append(" 我动态添加的 div ") 可以增加任意的页面元素 13.2.6 html函数 设置或返回被选元素的内容（相当于JS中innerHTML）。
在前端的舞台上，下拉列表是常见的用户交互元素，但有时候我们想要更多的交互体验。通过巧妙运用 JQuery，我们可以实现下拉列表中选中条目的左右移动功能，为用户提供更加灵活的选择方式。...本篇博客将深入研究 JQuery 中实现这一功能的方法和实际应用，为你揭示这个简单而强大的小交互。前言下拉列表作为用户界面中常见的选择元素，提供了方便用户选择的途径。...JQuery 下拉列表选中条目移动实现原理实现下拉列表选中条目的左右移动，主要涉及以下几个步骤：使用 HTML 创建一个下拉列表，并添加一些选项。使用 JQuery 选择器获取选中的下拉列表。...实际应用场景下拉列表选中条目的左右移动功能在实际应用中有着广泛的使用场景，以下是一些例子：1. 时间选择器在时间选择器中，用户可以通过左右方向键快速切换时、分、秒等时间单位，提高选择效率。<!...在前端的世界中，让我们共同为用户创造更为便捷、愉悦的交互体验吧！我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
在本文中，我将介绍 jQuery 的历史、优点、缺点以及为什么你仍要用它。 什么是jQuery？...在一些简单的或普通的网站中，性能缓慢几乎不会引起注意，并且可能是为了更多功能所做的折衷，但是在每一毫秒都很重要的大型复杂网站中，jQuery 一般会降低此类网站的性能。...动画 jQuery 中的动画是通过 .animate 方法实现的。...如何在2019年使用jQuery 要在项目中使用jQuery，有几种方法可以入门。 在撰写本文时的最新版本是 3.4.1 压缩的生产版本或未压缩的开发版本。...技能需求率低也表明用更新的库或框架可能会更好，因为有更多的就业机会。 我建议学习 jQuery 以及在项目中用它实现一些基本的功能（技多不压身）。文档能够帮你很快入门。
3.JQuery流行程度 jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...1、使用jquery一定要引入jquery库吗？ 答案： 是2、jquery中的到底是什么？ 答案： 核心函数3、怎么为按钮添加点击响应函数的？...例如：$("我是span标签");是jquery对象 6.通过JQuery包装的Dom对象，也是JQuery对象 7.通过JQuery提供的API查询到的对象，是JQuery对象...(selector) 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 :eq(index) 匹配一个给定索引值的元素...:gt(index) 匹配所有大于给定索引值的元素 :lt(index) 匹配所有小于给定索引值的元素 :header 匹配如 h1, h2, h3之类的标题元素 :animated 匹配所有正在执行动画效果的元素
领取专属 10元无门槛券
手把手带您无忧上云
