前端学习 day11 : JQuery,基本选择器,过滤选择器,筛选选择器

最新推荐文章于 2024-05-06 00:10:39 发布
最新推荐文章于 2024-05-06 00:10:39 发布
阅读量622 收藏
点赞数
分类专栏： 前端学习 文章标签： 数据库 java database
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whosedad/article/details/121525969
版权

1.JQuery

1.1        什么是JQuery

(1)、JavaScript与jQuery比较

js:  1、入口函数只有一个，window.onload

  1. 浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
  2. DOM错综复杂，实现简单的效果很麻烦
  3. 代码容错性差，出错后导致后面的代码不执行

jQuery:  1、市场占有率稳步上升，代码比较少，功能强大

2、DOM比较强大，事件处理，完全解决了浏览器的兼容性问题

3、ajax操作（比较好）

(2)、什么是jQuery

1、jQuery是一个JavaScript函数库。

2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。

(3)、为什么使用jQuery

最低0.47元/天 解锁文章
别摆烂好吗·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQUERY选择器--筛选选择器
qq_56248592的博客
10-11 280
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筛选选择器</title> <script src="jquery-3.6.js"></script> </head> <body> <ol> <li>borther元素1</li>.
筛选选择器
weixin_34199405的博客
11-12 143
转载于:https://www.cnblogs.com/tcpblog/p/9949290.html
jquery各种选择器和函数(2)
最新发布
2401_84091742的博客
05-06 279
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
jQuery 选择器/筛选
又是再见?
07-06 356
• 基本过滤选择器 a. :fitst 选取第一个元素 b. :last选取最后一个元素 c. :not() 选取除指定之外的元素 d. :even 偶数选择器 e. :odd 奇数选择器 f. :eq()选取指定索引的元素 g. :gt()选取大于指定索引的元素 h. :lt()选取小于指定索引的元素 i. :header选取h1,h2,h3,h4,h5,h6标签 j. :a
选择器 筛选
theowl的专栏
12-07 449
:first V1.0概述 获取第一个元素 示例 描述: 获取匹配的第一个元素 HTML 代码: list item 1 list item 2 list item 3 list item 4 list item 5 jQuery 代码: $('li:first'); 结果: [
6.筛选选择器
dkbfhbh的博客
08-29 223
基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器
jQuery ui带时间的日期选择器代码
11-10
标题"jQuery ui带时间的日期选择器代码"所指的就是如何在jQuery UI的日期选择器基础上添加时间选择的功能。 首先，我们需要确保引入了jQuery和jQuery UI的相关库。这通常意味着在HTML文件的`<head>`部分包含以下...
timepicker:基于jQuery的时间选择器插件
05-19
基于jquery的一款时间选择器组件，每次重新打开时间会重置 主要思路 定义全局变量year，month，day，使用函数对其进行操作，最终达到展示效果 封装组件方法 $.extend({ timePickerCom: function(name) { ... ...
jquery做个日期选择适用于手机端示例
10-20
在本文中，我们将探讨如何使用jQuery创建一个适用于手机端的日期选择器。日期选择器是网页表单中常见的一种交互元素，特别是在移动设备上，它提供了用户友好的方式来选择日期。以下是一个简单的步骤和相关JavaScript...
bootstrap-duration-picker：引导时间选择器
01-30
引导时间选择器用于选择持续时间的Javascript库。 应用插件的目标输入将包含持续时间（以秒为单位）。安装使用凉亭： bower install bootstrap-duration-picker使用NPM： npm install bootstrap-duration-picker或者...
jQuery手机移动端日期时间选择代码
06-10
<title>jQuery日期时间选择器 <script src="https://code.jquery.com/jquery-3.x.min.js"></script> <script src="js/datepicker.js"></script> 选择日期和时间..."> $(function() { $('#datetimepicker...
jquery选择器之筛选选择器
kevin_love_it的博客
11-17 535
jquery筛选选择器
过滤选择器（筛选）
小白学编程
08-18 1146
基本过滤选择器（：） :first 选择第一个元素。$(“div：first”)选择第一个<div> :last 选择最后一个元素。$(“div:last”)选择最后一个<div> :not（选择器）选取不满足（去掉）“选择器”条件的元素， $(“input:not(.myClass)”)选取样式名不是myClass的<input> 4、:even、：o...
jQuery 遍历 - 过滤---first--last---eq--not--filter方法（二十五）
有 prepare , No out
12-31 3251
缩写搜索元素的范围 三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。 其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。 jQuery first() 方法 first() 方法返回被选元素的首个元素。 下面的例子选取首个 元素内部的第
jQuery选择器之基本筛选选择器
qq_33130209的博客
03-31 367
筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，下面是基本选择器的描述： $(":first")：匹配第一个元素 $(":last")：匹配最后一个元素 $(":not(selector)")：一个用来过滤的选择器，选择所有元素去除不匹配给定的选择器元素 $(":eq(index)")：在匹配的集合中选择索引值为index的元素 $(":gt(index)")：选择匹配集
jQuery之筛选选择器(方法)
06-15 941
筛选选择器的功能与过滤选择器有点相似，但是用法不一样，筛选选择器主要是方法 名称 用法 描述 children(selector) $('ul').children('li') 相当于$('ul > li')，子选择器 find(selector) $('ul').find('li') 相当于$('ul li')，后代选择器 siblings(selector) $('#first').siblings('l
jQuery 筛选选择器 | 筛选方法
qq_39368007的博客
11-27 528
jQuery 筛选选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
JQuery之基本筛选选择器简介（一部分）
TravelAlone的博客
02-17 298
JQuery对象之基本筛选器 第一个 第一个--- 第二个 第二个--- 第三个 第三个--- 第四个 第四个--- 第五个 第五个--- //筛选第一个元素，格式：$("pre:first") 筛选pre的第一个元素 $(".div:first").cs
筛选选择器案例
weixin_43750162的博客
04-05 228
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-1.7.1.min.js" ></script> <sc...
日期选择器组件的js代码
08-08
### 回答1： 日期选择器组件的 JavaScript 代码可以这样写： ``` let currentDate = new Date(); let datePicker = document.getElementById('date-picker'); datePicker.value = currentDate.toISOString().substr(0, 10); datePicker.addEventListener('change', (event) => { currentDate = new Date(event.target.value); console.log(currentDate); }); ``` 这段代码会创建一个日期选择器组件，并将当前日期设置为默认值。当用户选择一个新的日期时，会触发 `change` 事件，并将新的日期保存到 `currentDate` 变量中。 ### 回答2： 日期选择器是一种常见的网页组件，用于用户选择日期。它通常由HTML、CSS和Javascript代码组成。 HTML部分包括一个输入框和一个用于显示日期的面板。输入框用于显示所选日期，并与面板进行交互。面板通常是一个下拉菜单或弹出窗口，用于展示日期选项。 CSS部分用于设置样式和布局，使日期选择器看起来更加美观和易于使用。可以设置输入框的大小、背景颜色和字体样式，以及面板的位置和动画效果等。 Javascript代码是日期选择器的核心部分，用于处理用户的交互和计算日期。它主要包括以下几个功能： 1. 初始化：当页面加载时，日期选择器需要初始化为一个默认日期。可以使用Javascript的日期对象来获取当前日期，并更新输入框和面板的显示。 2. 打开和关闭面板：当用户点击输入框时，需要弹出日期选择面板供其选择日期。可以使用Javascript的事件监听器来监听输入框的点击事件，并在事件触发时显示面板。另外，还可以在面板外部点击时关闭面板。 3. 选择日期：当用户在面板上选择一个日期时，需要更新输入框的显示为所选日期。可以使用Javascript的事件监听器来监听面板上日期的点击事件，并在事件触发时更新输入框的值。 4. 日期计算：在某些情况下，需要根据用户选择的日期进行一些计算。例如，计算所选日期的前一天或后一天。可以使用Javascript的日期对象和相关方法来进行日期的计算，并在计算完成后更新输入框的值。 综上所述，日期选择器组件的Javascript代码主要包括初始化、打开和关闭面板、选择日期和日期计算等功能。通过与HTML和CSS代码的配合，可以实现一个具有良好交互性和美观性的日期选择器组件。 ### 回答3： 日期选择器（Date Picker）是一种常见的组件，用于在网页或应用程序中选择日期。这里提供一个基本的日期选择器组件的JS代码示例。 首先，需要在HTML中创建一个用于显示日期的文本框，并为其指定一个唯一的ID，例如： ```html <input type="text" id="datepicker"> ``` 接下来，在JavaScript中，先获取要操作的文本框元素： ```javascript var datepicker = document.getElementById("datepicker"); ``` 接下来，我们可以使用第三方库或自己编写的函数来实现日期选择器的功能。下面是一个简单的实现示例： ```javascript datepicker.addEventListener("click", function() { var currentDate = new Date(); // 获取当前日期 var year = currentDate.getFullYear(); // 获取当前年份 var month = currentDate.getMonth(); // 获取当前月份 var day = currentDate.getDate(); // 获取当前日期 // TODO: 显示日期选择器的界面，例如使用弹出框或下拉框的形式 // TODO: 监听用户选择日期的事件，并更新文本框的值 }); ``` 代码中，我们首先获取当前日期的年、月、日，然后显示日期选择器的界面供用户选择日期。接着，我们监听用户选择日期的事件，并在事件发生时更新文本框的值。 需要注意的是，上述代码只提供了一个基本的框架，并没有具体实现日期选择器的显示和更新功能。具体实现还需要根据实际需求选择不同的方法，如使用第三方库如jQuery UI的Datepicker插件，或自己编写逻辑来处理日期选择器的功能。 希望这个简单的代码示例能帮助您理解日期选择器组件的基本原理和实现方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值