day49

省市联动jQuery快速入门

jQuery介绍

1.jQuery是一个轻量级、兼容多浏览器的JavaScript库
2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
  2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
  5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
  7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery内容：

1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax

使用jQuery必须先下载库文件，下载方式：
1. 去官网下载：https://jquery.cuishifeng.cn/jQuery_selector_context.html
            https://jquery.com/
2. bootcdn:
https://www.bootcdn.cn/

jQuery版本

  • 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
  • 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
  • 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么他就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

 拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

jQuery基础语法

$(selector).action()

查找标签

基本选择器

id选择器：$("#id")

标签选择器：$("tagName")

class选择器：$(".className")

配合使用：$("div.c1")  // 找到有c1 class类的div标签
                  $('div#d1')

所有元素选择器：$("*")

组合选择器：

$("#id, .className, tagName")

$('#d1,.c1,p')  # 并列+混用
$('div span')  # 后代
$('div>span')  # 儿子
$('div+span')  # 毗邻
$('div~span')  # 弟弟

层级选择器：

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

 基本筛选器：

$('ul li:first')  # 大儿子 
$('ul li:last')  # 小儿子
$('ul li:eq(2)')		# 放索引
$('ul li:even')  # 偶数索引 0包含在内
$('ul li:odd')  # 奇数索引
$('ul li:gt(2)')  # 大于索引
$('ul li:lt(2)')  # 小于索引
$('ul li:not("#d1")')  # 移除满足条件的标签
$("div:has('h1')")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

练习：
自定义模态框，使用jQuery实现弹出和隐藏功能。
jQuery版自定义版本

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>自定义模态框</title><style>.cover {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: darkgrey;z-index: 999;}.modal {width: 600px;height: 400px;background-color: white;position: fixed;left: 50%;top: 50%;margin-left: -300px;margin-top: -200px;z-index: 1000;}.hide {display: none;}</style>
</head>
<body>
<input type="button" value="弹" id="i0"><div class="cover hide"></div>
<div class="modal hide"><label for="i1">姓名</label><input id="i1" type="text"><label for="i2">爱好</label><input id="i2" type="text"><input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>var tButton = $("#i0")[0];tButton.onclick=function () {var coverEle = $(".cover")[0];var modalEle = $(".modal")[0];$(coverEle).removeClass("hide");$(modalEle).removeClass("hide");};var cButton = $("#i3")[0];cButton.onclick=function () {var coverEle = $(".cover")[0];var modalEle = $(".modal")[0];$(coverEle).addClass("hide");$(modalEle).addClass("hide");}
</script>
</body>
</html>

属性选择器：

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

 例子：

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器：

:text
:password
:file
:radio:text
:password
:file
:radio
:checkbox:submit
:reset
:button
:checkbox:submit
:reset
:button

例子：

$(":checkbox")  // 找到所有的checkbox
$('input[type="text"]')---------->$(':text') 
$('input[type="password"]')---------->$(':password')

 表单对象属性:

:enabled
:disabled
:checked
:selected

例子：
找到可用的input标签

<form><input name="email" disabled="disabled" /><input name="id" />
</form>$("input:enabled")  // 找到可用的input标签

 找到被选中的option：

<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">广州市</option><option value="shenzhen">深圳市</option>
</select>$(":selected")  // 找到所有被选中的option$(':checked')  # 它会将checked和selected都拿到
$(':selected')  # 它不会 只拿selected
$('input:checked')  # 自己加一个限制条件

筛选器方法

下一个元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

 上一个元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

$("div").find("p")----------------->等价于$("div p")

筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")
补充：

.first() // 获取匹配的第一个元素$('div span:first')-------------->$('div span').first()
.last() // 获取匹配的最后一个元素$('div span:last')----------------->$('div span').last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素$('div span:not("#d3")') --------------->$('div span').not('#d3')
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

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

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

相关文章

uniapp生命周期

uniapp生命周期

uniapp生命周期包括应用生命周期、页面生命周期和组件生命周期&#xff1b; 1、应用生命周期 app.vue/uvue是uni-app的朱组件。所有页面都是在app.vue下进行切换&#xff0c;是应用入口文件。但app.vue本身不是页面&#xff0c;这里补鞥编写视图元素&#xff0c;也就没有。 这…
阅读更多...
vue回到顶部组件

vue回到顶部组件

组件代码 <!--返回顶部组件--> <template><transition :name"transitionName"><divv-show"visible":style"customStyle"class"back-to-ceiling"click"backToTop"><svgwidth"16"heigh…
阅读更多...
vue生命周期

vue生命周期

1、vue声明周期及生命周期函数 vue声明周期 每一个vue实例从创建到销毁的过程&#xff0c;就是这个vue实例的生命周期。在这个过程中&#xff0c;他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程&#xff1b; 生命周期&#xff1a;…
阅读更多...
postgresql数组重叠（有共同元素）查询

postgresql数组重叠（有共同元素）查询

直接上最终代码&#xff1a; select distinct id from a where string_to_array(in_area,,) && (select ARRAY_AGG( code) from areas where code like 11% or code 100000)::TEXT[] pg语法&#xff1a; 表 9.48显示了可用于数组类型的运算符。 表 9.48。数组运算符…
阅读更多...
大数据之LibrA数据库系统告警处理（ALM-12012 NTP服务异常）

大数据之LibrA数据库系统告警处理（ALM-12012 NTP服务异常）

告警解释 当节点NTP服务无法与主OMS节点NTP服务正常同步时间时产生该告警。 当节点NTP服务与主OMS节点NTP服务正常同步时间时恢复该告警。 告警属性 告警ID 告警级别 可自动清除 12012 严重 是 告警参数 参数名称 参数含义 ServiceName 产生告警的服务名称。 Rol…
阅读更多...
分布式多主关系数据库的底线业务优势

分布式多主关系数据库的底线业务优势

当今的应用程序&#xff08;包括企业应用程序&#xff09;需要始终开启且始终可用&#xff0c;并且通常必须为全球用户提供服务&#xff0c;这些用户无论身在何处都希望获得几乎即时的响应时间。 应对这些挑战不仅仅意味着让用户更满意&#xff1a;每个能够解决低延迟和超高可…
阅读更多...
唇形驱动媲美头部厂商，青否数字人SaaS系统6.0重磅发布！

唇形驱动媲美头部厂商，青否数字人SaaS系统6.0重磅发布！

青否数字人SaaS系统6.0重磅发布&#xff01;唇形驱动效果及清晰度媲美硅基等头部厂商&#xff0c;同时优化数字人短视频模块。 唇形驱动媲美头部 青否数字人SaaS系统6.0版本重点优化了唇形驱动&#xff0c;AI技术已经实现与真人形象的1:1克隆&#xff0c;唇形、牙齿和舌头高清…
阅读更多...
当科技遇上神器：用Streamlit定制AI可视化问答界面

当科技遇上神器：用Streamlit定制AI可视化问答界面

Streamlit是一个开源的Python库&#xff0c;利用Streamlit可以快速构建机器学习应用的用户界面。 本文主要探讨如何使用Streamlit构建大模型外部知识检索的AI问答可视化界面。 我们先构建了外部知识检索接口&#xff0c;然后让大模型根据检索返回的结果作为上下文来回答问题。…
阅读更多...
【AUTOSAR】【以太网】DoIp

【AUTOSAR】【以太网】DoIp

AUTOSAR专栏——总目录_嵌入式知行合一的博客-CSDN博客文章浏览阅读217次。本文主要汇总该专栏文章，以方便各位读者阅读。https://xianfan.blog.csdn.net/article/details/132072415 目录 一、概述 二、功能描述 2.1 Do
阅读更多...
DNS 域名解析协议

DNS 域名解析协议

作用 将域名转化位IP地址 域名 用’ . ’ 隔开的字符串&#xff0c;如&#xff1a;www.badu.com,就是为了赋予IP特殊含义。 一级域名 .com &#xff1a;公用 .cn&#xff1a;中国 .gov&#xff1a;政府 .us&#xff1a;美国 .org&#xff1a;组织 .net&#xff1a;网站 对应一级…
阅读更多...
HTML脚本、字符实体、URL

HTML脚本、字符实体、URL

HTML脚本&#xff1a; JavaScript 使 HTML 页面具有更强的动态和交互性。 <script> 标签用于定义客户端脚本&#xff0c;比如 JavaScript。<script> 元素既可包含脚本语句&#xff0c;也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验…
阅读更多...
Doris常用语句

Doris常用语句

SWITCH mysql_report; SWITCH mysql_floweda; SWITCH mysql_base; SWITCH internal;select * from mysql_floweda.flow_eda.eda_flow;select * from mysql_report.cz_report.etl_flow; select * from mysql_report.cz_report.etl_flow_log;#外部数据物化视图 create materi…
阅读更多...
Vue路由导航（replace、push、forward、back、go）

Vue路由导航（replace、push、forward、back、go）

Vue路由导航&#xff08;replace、push、forward、back、go&#xff09; 先了解栈结构&#xff0c;再学习以下内容 栈的数据结构&#xff1a;先进后出&#xff0c;后进先出。原理&#xff1a;push将元素压入栈内&#xff0c;pop将元素弹出&#xff0c;栈有分别有栈底指针和栈顶…
阅读更多...
C++11 initializer_list 轻量级初始化列表的使用场景（让自定义类可以用初始化列表的形式来实例化对象）

C++11 initializer_list 轻量级初始化列表的使用场景（让自定义类可以用初始化列表的形式来实例化对象）

initializer_list 是 C11 中的一个特性&#xff0c;它允许你使用花括号 {} 中的值列表来初始化容器或数组。通常用于初始化标准库容器&#xff0c;比如 std::vector、std::set、std::map 以及数组。 场景一&#xff1a;用初始化列表初始化容器 std::vector<int> arr {…
阅读更多...
Java中Deque栈对象的增删查（所有方法详解）

Java中Deque栈对象的增删查（所有方法详解）

1、Deque栈的增删查方法总结 2、方法增删查 栈顶添加&#xff1a;push、offFirst栈尾添加&#xff1a;add、offer、offerLast栈顶删除&#xff1a;remove、pop、poll、pollFirst栈尾删除&#xff1a;pollLast栈顶查看&#xff1a;peek、peekFirst栈尾查看&#xff1a;peekLast…
阅读更多...
搭载基于RK3229的Android5.1修改开机默认桌面Launcher

搭载基于RK3229的Android5.1修改开机默认桌面Launcher

1、找到ActivityManagerService.java 在..\rk3229_5.1_box\frameworks\base\services\core\java\com\android\server\am目录找到ActivityManagerService.java文件。在文件里找到startHomeActivityLocked函数里的setDefaultLauncher。 boolean startHomeActivityLocked(int use…
阅读更多...
WebService客户端几种实现方式

WebService客户端几种实现方式

客户端几种实现方式&#xff08;转载&#xff09; Demo-HttpClient public static void main(String[] args) throws Exception {//soap服务地址String url "http://10.104.168.38:6906/sip/services/XJSSServices?wsdl";StringBuilder soapBuilder new StringBu…
阅读更多...
软件设计模式原则（一）迪米特法则

软件设计模式原则（一）迪米特法则

开一个小专题——详细总结一下软件设计模式原则&#xff0c;这部分在《软计》和《java设计模式》中算是很重要的知识点&#xff0c;值得展开详细讲解一下~首先介绍的是【迪米特法则】 一.定义 迪米特法则又称为最少知识原则&#xff0c;其定义为&#xff1a;一个软件实体应当尽…
阅读更多...
微众银行备用金怎么取出来

微众银行备用金怎么取出来

在这个数字时代里&#xff0c;互联网金融产品以其便捷性和创新性逐渐成为我们日常生活中不可或缺的一部分。微众银行作为国内领先的互联网银行&#xff0c;其旗下的微众备用金产品凭借其灵活、便捷的特性&#xff0c;深受消费者喜爱。那么&#xff0c;微众备用金怎么借钱出来呢…
阅读更多...
JavaScript中BOM与DOM

JavaScript中BOM与DOM

BOM window对象 所有的浏览器都支持window对象&#xff0c;他表示浏览器窗口&#xff0c; 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。全局函数是 window 对象的方法。 接下来要讲的HTML DOM 的 document 也是…
阅读更多...
最新文章

Copyright @ 2022~2023