day09

文章目录

  • 一、jQuery简介
    • 1. 介绍
    • 2. 使用
        • 1)引入
        • 2)工厂函数 - $()
        • 3)原生JS对象与jQuery对象
        • 4)jQuery获取元素
        • 5)操作元素内容
        • 6)操作标签属性
        • 7)操作标签样式
        • 8)根据层级结构获取元素
        • 9)元素的创建,添加,删除
        • 10)动画
        • 11)jQuery事件处理
    • 3.实现下拉列表框的三级联动
      • 1. 页面效果
      • 2. 代码分析
        • 1. 页面元素
        • 2. 初始代码
        • 3. 绑定省份
        • 4. 绑定城市

一、jQuery简介

1. 介绍

jQuery是JS的工具库,对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善,更便捷的方法。

2. 使用

1)引入

先引入jquery文件,才能使用jquery语法

1. CDN 有网
2. 本地文件(常用)
2)工厂函数 - $()

"$()"函数用于获取元素节点,创建元素节点或将原生JS对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象,包含了一系列 jQuery 操作的方法。
例 :

 //$()获取元素节点,需传入字符串的选择器$("h1")$("#d1")$(".c1")$("body,h1,p")
3)原生JS对象与jQuery对象

原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要,互相转换 :

  1. 原生JS转换jQuery对象
    $(原生对象),返回 jQuery 对象
  2. jQuery对象转换原生JS对象
    • 方法一 : 根据下标取元素,取出即为原生对象
      var div = $(“div”)[0];
    • 方法二 : 使用jQuery的get(index)取原生对象
      var div2 = $(“div”).get(0);
4)jQuery获取元素

jQuery通过选择器获取元素,$(“选择器”)
选择器分类 :

  1. 基础选择器
标签选择器:$("div")
ID 选择器:$("#d1")
类选择器:$(".c1")
群组选择器:$("body,p,h1")
  1. 层级选择器
后代选择器: $("div .c1")
子代选择器: $("div>span")
相邻兄弟选择器: $("h1+p")  匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器: $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素
  1. 过滤选择器
    需要结合其他选择器使用。
:first匹配第一个元素 例:$("p:first")
:last匹配最后一个元素 例:$("p:last")
:odd匹配奇数下标对应的元素
:even匹配偶数下标对应的元素
:eq(index)匹配指定下标的元素
:lt(index)匹配下标小于index的元素
:gt(index)匹配下标大于index的元素
:not(选择器)否定筛选,除()中选择器外,其他元素
  1. 子元素过滤选择器
:first-child匹配第一个子元素
:last-child匹配最后一个子元素
:nth-child(n)匹配第n个子元素(n从1开始计数)
5)操作元素内容
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val()  //设置或读取表单元素的值,等价于原生value属性
6)操作标签属性
  1. attr(“attrName”,“value”)
    设置或读取标签属性
  2. prop(“attrName”,“value”)
    设置或读取标签属性
    注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写
  3. removeAttr(“attrName”)
    移除指定属性
7)操作标签样式
  1. 为元素添加id/class属性,对应选择器样式
  2. 针对类选择器,提供操作class属性值的方法
addClass("className")	//添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
  1. 操作行内样式
css("属性名","属性值")  //设置行内样式
css(JSON对象)			 //设置一组CSS样式
/*
JSON对象:常用数据传输格式
语法 :{"width":"200px","height":"200px","color":"red"}*/
8)根据层级结构获取元素
  1. parent()
    返回父元素
  2. parents(‘selector’)
    返回满足选择器的祖先元素
  3. children()/children(“selector”)
    返回所有直接子元素/返回满足选择器的直接子元素
  4. find(“selector”)
    返回所有的后代元素(包含直接与间接)
  5. next()/next(“selector”)
    返回下一个兄弟元素/返回下一个兄弟元素,必须满足选择器
  6. prev()/prev(“selector”)
    返回前一个兄弟元素/返回前一个兄弟元素,要求满足选择器
  7. siblings()/siblings(“selector”)
    返回所有的兄弟元素/满足选择器的所有兄弟元素
9)元素的创建,添加,删除
  1. 创建
    使用$(“标签语法”),返回创建好的元素
var div = $("<div></div>");	//创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用,设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>");	//创建的同时设置内容,属性和样式
  1. 添加至页面
    1)作为子元素添加
$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作为第一个子元素添加至$obj中

2)作为兄弟元素添加

$obj.after(newObj);		//在$obj的后面添加兄弟元素
$obj.before(newObj);	//在$obj的前面添加兄弟元素

3)移除元素

$obj.remove();	//移除$obj
10)动画
1. 显示和隐藏 show(2000,callback)/hide(2000,callback)
2. 下拉和上推 slideDown()/slideUp()(块元素才能实现)
3. 淡隐淡现方式显示 fadeOut()/fadeIn()
4. 动画函数,可以实现自定义动画 animate 函数
11)jQuery事件处理
  1. 文档加载完毕
    原生JS 方法:window.onload
    jQuery:
//语法一 
$(document).ready(function (){//文档加载完毕后执行
})
//语法二 
$().ready(function (){//文档加载完毕后执行
})
//语法三 
$(function(){//文档加载完毕后执行
})

区别:
原生onload事件不能重复书写,会产生覆盖问题;jquery中对事件做了优化,可以重复书写ready方法,依次执行

  1. 事件绑定方式
    事件名称省略 on 前缀
  //on("事件名称",function)$("div").on("click",function(){});//新版本使用的多些//bind("事件名称",function)$("div").bind("click",function(){});//1.6-1.8间的版本//事件名作为方法名$("div").click(function(){});  
  1. this 表示事件的触发对象,在 jquery 中可以使用,注意转换类型。this为原生对象只能使用原生的属性和方法,可以使用$(this)转换为jquery对象,使用 jquery 方法。

3.实现下拉列表框的三级联动

1. 页面效果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 代码分析

1. 页面元素

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 初始代码

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. 绑定省份

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. 绑定城市

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/223649.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

当下流行的直播技术demo演示

nginx-http-flv-module&#xff08;更新不是很频繁&#xff09; SRS: https://ossrs.net/lts/zh-cn/&#xff08;独立官网&#xff0c;目前最新稳定版version5&#xff09; 基于SRS搭建直播demo演示&#xff1a; 一、搭建流媒体服务器 参见官网&#xff1a;https://ossrs.ne…

2023.12.22 关于 Redis 数据类型 String 常用命令

目录 引言 String 类型基本概念 SET & GET SET 命令 GET 命令 MSET & MGET MSET 命令 MGET 命令 SETNX & SETEX & PSETEX SETNX 命令 SETEX 命令 PSETEX 命令 计数命令 INCR 命令 INCRBY 命令 DECR 命令 DECRBY 命令 INCRBYFLOAT 命令 总结…

docker笔记2-docker 容器

docker 容器的运行 docker run 镜像名&#xff1a;版本标签&#xff1a; 创建 启动容器 docker run 镜像名 &#xff0c;如果镜像不存在&#xff0c;则会在线下载镜像。 注意事项&#xff1a; 容器内的进程必须处于前台运行状态&#xff0c;不能后台&#xff08;守护进程运行…

iOS - 真机调试的新经验

文章目录 获取真机 UDIDPlease reconnect the device.iOS 开发者模式Fetching debug symbols 很久没有在真机运行 iOS 测试了&#xff0c;今天帮忙调试&#xff0c;发现很多东西都变了&#xff0c;有些东西也生疏了&#xff0c;在这里记录下。 获取真机 UDID 创建Profile 需要…

Spark编程实验三:Spark SQL编程

目录 一、目的与要求 二、实验内容 三、实验步骤 1、Spark SQL基本操作 2、编程实现将RDD转换为DataFrame 3、编程实现利用DataFrame读写MySQL的数据 四、结果分析与实验体会 一、目的与要求 1、通过实验掌握Spark SQL的基本编程方法&#xff1b; 2、熟悉RDD到DataFram…

【qt信号槽-5】信号槽相关注意事项记录

背景&#xff1a; 信号槽是qt很重要的概念&#xff0c;遇到问题帮助没少看。其中就有signals and slots这一章节&#xff0c;说得很到位。 概念琐碎&#xff0c;记录备忘。不对之处望指正。 【qt信号槽-1】槽函数重写问题&#xff0c;qt_metacall和qt_static_metacall-CSDN博…

百模大战中的AI行业:新趋势与未来发展

文章目录 每日一句正能量前言技术进步应用拓展行业变革人才竞争后记 每日一句正能量 人生最重要的价值是心灵的幸福&#xff0c;而不是任何身外之物。 前言 随着科技的迅猛发展&#xff0c;人工智能&#xff08;AI&#xff09;已经成为引领技术革命的重要驱动力之一。在当前的…

Jmeter、postman、python 三大主流技术如何操作数据库?

1、前言 只要是做测试工作的&#xff0c;必然会接触到数据库&#xff0c;数据库在工作中的主要应用场景包括但不限于以下&#xff1a; 功能测试中&#xff0c;涉及数据展示功能&#xff0c;需查库校验数据正确及完整性&#xff1b;例如商品搜索功能 自动化测试或性能测试中&a…

UnityHub无法打开项目问题,打开项目闪退回到hub界面

UnityHub无法打开项目问题&#xff0c;打开项目闪退回到hub界面 UnityHub启动项目闪烁unity界面之后立刻闪退到UnityHub界面情况一&#xff1a;这里这个问题我遇到了很多次情况都不太一样&#xff0c;我先说下我遇到的第一种问题也就是最好解决的一种。许可证到期导致闪退 情况…

怎么为pdf文件添加水印?

怎么为pdf文件添加水印&#xff1f;PDF是一种很好用的文件格式&#xff0c;这种格式能够很有效的保护我们的文件&#xff0c;但有时可能还会被破解&#xff0c;这种时候在PDF上添加水印就是比较好的方法。 综上所述&#xff0c;PDF是保密性很强的文件&#xff0c;但添加水印能够…

在Linux下探索MinIO存储服务如何远程上传文件

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 创建Buckets和Access Keys二. Linux 安装Cpolar三. 创建连接MinIO服务公网地…

系列十一(面试)、如何查看JVM的参数?

一、查看JVM的参数 1.1、概述 上篇文章介绍了JVM的参数类型&#xff0c;通过jinfo可以查看JVM的默认参数&#xff0c;本章介绍另外一种查看JVM参数的方式。 1.2、 分类 JVM中提供了三种方式查看JVM的参数信息&#xff0c;这三种方式又分为两类&#xff0c;即&#xff1a;查看默…

04_线性表

线性表 顺序表顺序表的实现顺序表的遍历顺序表的容量可变顺序表的时间复杂度java中ArrayList实现 链表单向链表单向链表API设计java中LinkedList实现 链表的复杂度分析链表反转快慢指针中间值问题单向链表是否有环问题有环链表入口问题 循环链表约瑟夫问题 栈栈概述生活中的栈计…

HTTP前端请求

目录 HTTP 请求1.请求组成2.请求方式与数据格式get 请求示例post 请求示例json 请求示例multipart 请求示例数据格式小结 3.表单3.1.作用与语法3.2.常见的表单项 4.session 原理5.jwt 原理 HTTP 请求 1.请求组成 请求由三部分组成 请求行请求头请求体 可以用 telnet 程序测…

持续集成交付CICD:GitLabCI 封装Python类 并结合 ArgoCD 完成前端项目应用发布

目录 一、实验 1. 环境 2. Python代码实现获取文件 3.Python代码实现创建文件 4.Python代码实现更新文件 5.GitLab更新库文件与运行流水线 6.ArgoCD 完成前端项目应用发布 二、问题 1.Python获取GitLab指定仓库文件报错 2. K8S master节点运行Python代码报错 一、实验…

【网络编程】网络通信基础——简述TCP/IP协议

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】【Java系列】 本专栏旨在分享学习网络编程的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一、ip地…

C/C++ 基础函数

memcpy&#xff1a;C/C语言中的一个用于内存复制的函数&#xff0c;声明在 string.h 中&#xff08;C是 cstring&#xff09; void *memcpy(void *destin, void *source, unsigned n);作用是&#xff1a;以source指向的地址为起点&#xff0c;将连续的n个字节数据&#xff0c;…

如何利用PPT绘图并导出清晰图片

在写论文的过程中&#xff0c;免不了需要绘图&#xff0c;但是visio等软件绘图没有在ppt上绘图比较熟练&#xff0c;尤其流程图结构图. 但是ppt导出的图片也不够清晰&#xff0c;默认分辨率是96dpi&#xff0c;而杂志投稿一般要求至300dpi。解决办法如下&#xff1a; 1.打开注…

通过 Higress Wasm 插件 3 倍性能实现 Spring-cloud-gateway 功能

作者&#xff1a;韦鑫&#xff0c;Higress Committer&#xff0c;来自南京航空航天大学分布式系统实验室 导读&#xff1a;本文将和大家一同回顾 Spring Cloud Gateway 是如何满足 HTTP 请求/响应转换需求场景的&#xff0c;并为大家介绍在这种场景下使用 Higress 云原生网关的…

【银行测试】相关专业知识点+核心业务系统性能方法(汇总)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、银行测试相关专…