2023_JQuery学习笔记

news/2024/7/11 0:42:52 标签: jquery, 学习, javascript

JQuery

官网:https://jquery.com/

1-选择器

选择器包括 :

  1. 选择器 :对元素的获取

  2. 筛选器:对已经获取到的元素集合进行二次筛选

基本选择器:

语法: $(选择器)

返回值:放在一个数组里面返回的

注意: id选择器只能选择第一个

特殊选择器

语法: $(选择器)

对你已经存在的选择器进行修饰

  1. :first    第一个元素

  2. :last  最后一个元素

  3. :eq(数字)  按照索引排列的第几个

  4. :odd 按照索引排列的奇数个

  5. :even 按照索引排列的偶数个

筛选器

对JQuery的元素集合进行二次筛选

  1. first() 元素集合里面的第一个

  2. last() 元素集合的最后一个

  3. next() 同级后面的第一个元素

  4. nextAll() 同级后面的全部元素

  5. nextAll(选择器) 同级后面的指定元素

  6. nextUntil()  和nextAll() 是一样的用法

  7. nextUntil(选择器)  获取当前元素后面的所有兄弟元素,直到选择器元素为止(不包括选择器和第一个)

  8. prev() 同级前面的第一个元素

  9. prevAll()  同级前面的全部元素

  10. prevUntill() 和prevAll()是一样的

  11. prevUntill(选择器) 获取当前元素前面面的所有兄弟元素,直到选择器元素为止(不包括选择器和第一个)

  12. parent() 获取到当前元素的父元素

  13. parents() 获取到所有的父元素集合

  14. children() 获取所有子元素

  15. siblings() 获取所有兄弟元素,自己除外 siblings(选择器) 可以选择具体的兄弟元素

  16. find() 获取所有后代元素

2-操作文本

html()

语法:元素.html()

作用:获取该元素的文本内容

语法:元素.html(“内容”)

作用:设置该元素的文本,完全覆盖

text()

语法:元素.text()

作用:获取该元素的文本内容

语法:元素.text(“内容”)

作用:设置该元素的文本,不设置html结构

val()

语法:元素.val()

作用:获取该表单的value ,用于表单

语法:元素.val(“内容”)

作用:设置该value的文本

3-操作类名

addClass()

语法:元素.addClass(“类名”)

作用:添加类名

removeClass()

语法:元素.removeClass(“类名”)

作用:删除类名

hasClass()

语法:元素.hasClass(“类名”)

作用:判断是否有该类名

返回: boolean

toggleClass()

语法:元素.toggleClass(“类名”)

作用:有就添加,没有就删除

操作元素样式

css()

语法:元素.css(“width”)

作用:获取元素样式

语法:元素.css(“width”,300)

作用:设置元素样式

语法:元素.css({  })    对象写法

作用:设置元素样式

绑定事件

on()

基础绑定:

语法1:元素.on(事件类型,事件处理函数)

事件委托:

语法2:元素.on(事件类型,“事件源元素的子代或后代元素” ,事件处理函数)

image

基础绑定:

语法3:元素.on(事件类型,复杂数据类型 ,事件处理函数)

复杂数据类型:用于传递给事件的参数

获取数据: e.data

image

事件委托加传递参数

语法4:元素.on(事件类型,选择器 , 数据类型 ,事件处理函数)

复杂数据类型:用于传递给事件的参数

获取数据: e.data

image

one()

  • 也是用来绑定事件的方法

  • 和 on()方法的参数和使用形式一模一样

  • 只不过绑定的事件只能执行一次

节点操作

创建节点:

语法: $(html结构字符串)

插入节点:

内部插入:

append()

语法: 父元素.append(子元素)

作用:把子元素插入到父元素内部,放在末尾的位置

appendTo()

语法: 子元素.append(父元素)

作用:把子元素插入到父元素内部,放在末尾的位置

prepend()

语法: 父元素.prepend(子元素)

作用:把子元素插入到父元素内部,放在前面的位置

prependTo()

语法: 子元素.prepend(父元素)

作用:把子元素插入到父元素内部,放在前面的位置

外部插入:

after()

语法:存在元素.after(插入元素)

作用:把插入元素排在元素的后面,以兄弟关系出现

insertAfter()

语法:插入元素.insertAfter(存在元素)

作用:把插入元素排在元素的后面,以兄弟关系出现

before()

语法:存在元素.insertAfter(插入元素)

作用:把插入元素排在元素的前面,以兄弟关系出现

insertBefore()

语法:插入元素.insertAfter(存在元素)

作用:把插入元素排在元素的前面,以兄弟关系出现

删除节点:

remove()

语法:元素.remove()

作用:把自己从父元素中移出

empty()

语法:元素.empty()

作用:把自己变成空标签,把所有后代节点全部移出

替换节点:

replaceWith()

语法:换下节点.replaceWith(换上节点)

replaceAll()

语法:换上节点.replaceWith(换下节点)

克隆节点

clone()

语法:元素集合.clone()

属性操作

三种操作属性方法:

  1. attr() 和 removeAttr()

  2. prop() 和 removeProp()

  3. data() 和 removeData()


http://www.niftyadmin.cn/n/179461.html

相关文章

12.0 自定义SystemUI下拉状态栏和通知栏视图(十九)之悬浮通知布局

1.前言 在进行12.0的系统rom产品定制化开发中,在12.0中针对systemui下拉状态栏和通知栏的定制UI的工作开发中,原生系统的下拉状态栏和通知栏的视图UI在产品开发中会不太满足功能, 所以根据产品需要来自定义SystemUI的下拉状态栏和通知栏功能,首选实现的就是下拉通知栏左滑删…

run_demo.py

README 使用<作者提供的预训练模型 in /pretrained_ckpt> 模型&#xff1a;SpixelNet_bsd_ckpt.tar 网格大小&#xff1a;16x16 输入数据的路径&#xff1a;/demo/inputs 输出数据的路径&#xff1a;/demo/spixel_viz python run_demo.py --data_dir./demo/inputs --da…

dev SplashScreenManager 实现加载进度条

一、新建SplashScreen1 窗体 二、SplashScreen1 窗体后端代码 重写ProcessCommand 实现实时更新文本 #region Overridespublic override void ProcessCommand(Enum cmd, object arg){base.ProcessCommand(cmd, arg);SplashScreenCommand command (SplashScreenCommand)cmd;if…

学习系统编程No.11【重定向的本质】

引言&#xff1a; 北京时间&#xff1a;2023/3/27/7:05&#xff0c;哈哈哈&#xff0c;首先是开心&#xff0c;因为上篇博客热榜目前第15&#xff0c;让我初步掌握了上热榜的小妙招&#xff0c;不单单只是要日更&#xff0c;还有非常多的上榜小技巧&#xff0c;但是首先连续更…

JavaWeb学习总结(十三)文件上传与文件下载

JavaWeb学习总结&#xff08;十三&#xff09;文件上传与文件下载 文件的上传和下载&#xff0c;是非常常见的功能。很多的系统中&#xff0c;或者软件中都经常使用文件的上传和下载。 比如&#xff1a;QQ 头像&#xff0c;就使用了上传&#xff1b;邮箱中也有附件的上传和下载…

springboot会话

springbootSpringBoot基础课程内容前言1. SpringBootWeb快速入门1.1 需求1.2 开发步骤1.2.1 创建SpringBoot工程&#xff08;需要联网&#xff09;1.2.2 定义请求处理类1.2.3 运行测试1.3 Web分析2. HTTP协议2.1 HTTP-概述2.1.1 介绍2.2.2 特点2.2 HTTP-请求协议2.3 HTTP-响应协…

Java基础知识 | 常见面试题(上):基本数据类型

撰写成一问一答的形式&#xff0c;每次回答都默写&#xff0c;对比参考答案后&#xff0c;再默写出更恰当的答案。 相关内容 Java基础知识 | 常见面试题&#xff08;上&#xff09;&#xff1a;基础概念和常识 Java基础知识 | 常见面试题&#xff08;上&#xff09;&#xff1a…

九、MyBatis的缓存

一、MyBatis的一级缓存【默认开启】 1.一级缓存是SqlSession级别的&#xff0c;通过同一个SqlSession查询的数据会被缓存&#xff0c;下次查询相同的数据&#xff0c;就会从缓存中直接获取&#xff0c;不会从数据库重新访问 2.一级缓存失效的4种情况 不同的SqlSession对应不同…