首页
学习
活动
专区
圈层
工具
发布

【JavaScript】网页交互的灵魂舞者

内部样式 JavaScript 可以在 html 的 script 标签里进行编辑,通过 alert 方法可以实现一个浏览器弹窗的效果 alert...let name = 'zhangsan'; const 声明常量的,声明后不能修改 const name = 'zhangsan'; JavaScript 的变量可以存放不同的类型的值,一个 var...,JavaScript 的数组的大小可以更改,里面也可以存储很多类型 var arr = [1, 2, 'haha', false]; 再来看新增,数组下标为 - 1 时的值也可以更改,也可以不按照下标顺序新增...) $( ) 是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素 Selector 选择器, ⽤来"查询"和"查找" HTML 元素 action 操作, 执⾏对元素的操作 的代码通常都写在 document ready 函数中 ,这样可以保证在文档加载完之后才能对页面进行操作 JQuery⽅法 说明 text() 设置或返回所选元素的⽂本内容 html() 设置或返回所选元素的内容

61210

个人使用mac OS和win OS的差异

苹果 macOS 操作系统和 Windows 操作系统在很多方面有所不同,主要体现在以下几个方面: 用户界面:macOS 和 Windows 的用户界面风格不同。...(如果你使用多个输入法以便用不同的语言键入内容,这些快捷键会更改输入法而非显示“聚焦”。了解如何更改冲突的键盘快捷键。)...Command-上箭头:打开包含当前文件夹的文件夹。 Command-Control-上箭头:在新窗口中打开包含当前文件夹的文件夹。 Command-下箭头:打开所选项。...按住 Command 键点按窗口标题:查看包含当前文件夹的文件夹。 了解如何使用 Command 键或 Shift 键在“访达”中选择多个项目。...Option-Command-V:粘贴样式:将拷贝的样式应用到所选项。 Option-Shift-Command-V:粘贴并匹配样式:将周围内容的样式应用到粘贴在该内容中的项目。

5.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Mac下键盘使用

    如果您使用多个输入源以便用不同的语言键入内容,这些快捷键会更改输入源而非显示 Spotlight。 空格键 快速查看:使用快速查看来预览所选项。...Command-Delete 在包含“删除”或“不存储”按钮的对话框中选择“删除”或“不存储”。 Fn–上箭头 向上翻页:向上滚动一页。 Fn–下箭头 向下翻页:向下滚动一页。...Shift–上箭头 将文本选择范围扩展到上一行相同水平位置的最近字符处。 Shift–下箭头 将文本选择范围扩展到下一行相同水平位置的最近字符处。...Option-Command-V 粘贴样式:将拷贝的样式应用到所选项。 Option-Shift-Command-V 粘贴并匹配样式:将周围内容的样式应用到粘贴在这个内容中的项目。...Command–上箭头 打开包含当前文件夹的文件夹。 Command–Control–上箭头 在新窗口中打开包含当前文件夹的文件夹。 Command–下箭头 打开所选项。

    4K130

    【前端基础篇】JavaScript之jQuery介绍

    前言 在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果,更易理解喔 JQuery基本介绍和使用方法 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: ⽹⻚内容 ⽹⻚结构 ⽹⻚样式...JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器. jQuery中所有选择器都以 开头:()....⽤⼾对于⻚⾯的⼀些操作(点击,选择,修改等)操作都会在浏览器中产⽣⼀个个事件,被JS获取到,从⽽进⾏更复杂的交互操作. 浏览器就是⼀个哨兵,在侦查敌情(⽤⼾⾏为)....$(this).css("background-color", "white"); }); // 当用户离开 #inputId 输入框时,背景颜色会恢复为白色 hover(): 当鼠标悬停在元素上时触发两个不同的函数...$("#selectElement").change(function(){ alert("选择的值是: " + $(this).val()); }); // 当用户选择不同的选项时,弹出当前选择的值

    3.3K10

    Mac 键盘快捷键

    (如果您使用多个输入源以便用不同的语言键入内容,这些快捷键会更改输入源而非显示“聚焦”。了解如何更改冲突的键盘快捷键。)...Command–上箭头:打开包含当前文件夹的文件夹。 Command–Control–上箭头:在新窗口中打开包含当前文件夹的文件夹。 Command–下箭头:打开所选项。 右箭头:打开所选文件夹。...按住 Command 键点按窗口标题:查看包含当前文件夹的文件夹。 了解如何使用 Command 或 Shift 在“访达”中选择多个项目。...Option–Shift–上箭头:将文本选择范围扩展到当前段落的段首,再按一次则扩展到下一段落的段首。...Option-Command-V:粘贴样式:将拷贝的样式应用到所选项。 Option-Shift-Command-V:粘贴并匹配样式:将周围内容的样式应用到粘贴在该内容中的项目。

    4.3K20

    Mac快捷键

    如果您使用多个输入源以键入不同的语言,那么这些快捷键会更改输入源,而非显示 Spotlight。空格键快速查看:使用快速查看预览所选项。...Control-K删除插入点与行或段落末尾处之间的文本。Command-Delete在包含“删除”或“不存储”按钮的对话框中选择“删除”或“不存储”。Fn–上箭头向上翻页:向上滚动一页。...Shift–Option–上箭头将文本选择范围扩展到当前段落的段首,再按一次则扩展到下一段落的段首。Shift–Option–下箭头将文本选择范围扩展到当前段落的段尾,再按一次则扩展到下一段落的段尾。...Command-Option-V粘贴样式:将拷贝的样式应用到所选项。Command-Shift-Option-V粘贴并匹配样式:将周围内容的样式应用到粘贴在该内容中的项目。...Command–上箭头打开包含当前文件夹的文件夹。Command–Control–上箭头在新窗口中打开包含当前文件夹的文件夹。Command–下箭头打开所选项。

    2.8K20

    MacBook Pro最全快捷键指南——高效型选手必备

    如果任何打开的文稿有未存储的更改,系统就会询问您要不要存储这些更改。 Shift-Command-Q 退出登录您的 macOS 用户帐户。系统将提示您确认。...Command-Delete 在包含“删除”或“不存储”按钮的对话框中选择“删除”或“不存储”。 Fn–上箭头 Page Up:向上滚动一页。 Fn–下箭头 Page Down:向下滚动一页。...Control-L 将光标或所选内容置于可见区域中央。 Control-P 上移一行。 Control-N 下移一行。 Control-O 在插入点后插入一行。...Option-Command-V 粘贴样式:将拷贝的样式应用到所选项。 Option-Shift-Command-V 粘贴并匹配样式:将周围内容的样式应用到粘贴在这个内容中的项目。...Command–上箭头 打开包含当前文件夹的文件夹。 Command–Control–上箭头 在新窗口中打开包含当前文件夹的文件夹。 Command–下箭头 打开所选项。

    9.6K40

    jQuery Cheat—Sheet(jQuery学习笔记)

    在页面中选取所有元素: $("p") id选择器 通过 id 选取元素语法如下: $("#test") .class 选择器 jQuery 类选择器可以通过指定的 class 查找元素。...在下面的实例中,当点击事件在某个 元素上触发时,隐藏当前的元素: $("p").click(function(){ $(this).hide(); }); 双击事件 当双击元素时,会发生...**Chaining 允许我们在一条语句中运行多个 jQuery 方法**(在相同的元素上) ### jQuery 方法链接 有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery...、结构以及样式。"...- text() - 设置或返回所选元素的文本内容 - html() - 设置或返回所选元素的内容(包括 HTML 标记) - val() - 设置或返回表单字段的值 下面的例子演示如何通过 text

    18.3K30

    分享一些实用的Chrome DevTools技巧

    有一些您可能还不知道的小功能,现在给大家分享一下: 在“Elements”面板中拖放 在“Elements”面板中,您可以拖放任何 HTML 元素来更改其位置。 ?...在控制台中引用当前选定的元素 在“Elements”面板中选择一个节点,然后在控制台输入 $0 就可以引用它。 ?...提示:如果您使用jQuery,则可以输入$($0)以访问此元素上的jQuery API。 使用控制台中操作的最后一个值 使用 $_ 引用在控制台执行的前一操作的返回值 ?...第二个 :hov 可以查看所选元素触发的状态,这样就可以看到当它处于活动状态,悬停状态,焦点状态的样式。 ?...找到CSS属性的定义位置 cmd+click(在 Windows 上是 ctrl+click)元素面板中的 CSS 属性,DevTools 会在 Source 面板中将您指向定义的位置。 ?

    1.9K00

    可视化 | SDTF线上3D地球动态可视化产品,呈现大气科学学科数据

    创建步骤 第一步-选择CSV文件(不超过4个) 先点击【选择CSV文件 > 未选择文件】,然后点选一个或框选多个文件,最后点击【打开】;所选文件需满足以下条件: 1....如果选择多于一个文件,需注意所选的文件都具有相同分辨率; 2....数据的纬向、经向数量之比为2:1; 第二步-选择与所选文件相匹配的网格分辨率 第三步-输入缺失值的填充值并确认 示例文件为-999;若文件无缺失值,或默认填充值为空,直接点击【确认】即可。...第四步-选择色标及其样式 关于【默认】样式,色标范围对应数据范围;关于【以0为中心】的样式,色标正中间的颜色对应数值0。 第五步-点击【创建实例!】...更改色标及其样式 可以根据个人需求,在更改色标及其样式后,再次点击【创建实例!】,即可创建对应的新实例。 3. 查看不同颜色对应的数值 可以点击右侧色条,查看不同颜色对应的数值。

    1.2K10

    mac全选文字的快捷键_MACBOOK最全快捷键指南

    如果任何打开的文稿有未存储的更改, 系统就会询问您要不要存储这些更改。shft- Command-Q退出登录您的 macos用户帐户。...Control-K删除插入点与行或段落末尾处之间的文本 Command- Delete在包含“删除”或“不存储”按钮的对话框中选择“删除”或“不存储”。 Fn-上箭头 Page Up:向上滚动一页。...Control-L将光标或所选内容置于可见区域中央。 Contro|-P上移一行。 Contro|-N下移一行。 Control-O在插入点后插入一行。...Option- Command-V粘贴样式:将拷贝的样式应用到所选项。 Option- Shift- Command-V粘贴并匹配样式:将周围内容的样式应用到粘贴在这个內容中的项目。...Command- Contro|上箭头在新窗口中打开包含当前文件夹的文件夹。 Command-下箭头打开所选项。 Command-“调度中心”显示桌面。即使您未在“访达”窗口中,这个快捷键也有效。

    3.5K10

    MarkMyWords mac(高级Markdown编辑器)激活版

    MarkMyWords mac图片MarkMyWords mac软件功能支持您的写作任务的功能OneClick样式对于每种标记语言,都可以使用预定义的OneClick样式列表,因此,如果不想键入,只需单击一次即可...当然,可以使用集成的OneClick-Style-Editor来更改所有OneClick-Style,还可以创建新样式或其他小的文本片段。语法突出显示MarkMyWords可以为您突出显示您的标记。...Keyboard-Magic只需按一下制表键就可以缩进所选文本,使缩进保持在新行上,自动创建列表项,自动关闭括号等。另外,您可以使用“一键式编辑器”创建选项卡触发的动作,以在某些动作上插入自定义文本。...标题导航标题导航弹出窗口允许您通过提供标题作为锚点来快速访问当前文档的不同部分。自定义编辑器这是事实,不同的人,不同的需求。...MarkMyWords让您选择自己喜欢的字体,字体大小和-color,background-color,甚至让您为所选文本选择背景色。另外,还可以选择使用粗插入点光标来获得更好的可见性。

    91220

    不得不佩服,美观小巧的网页内容编辑器——ContentTools

    它被设计为: 与框架无关的库不使用任何JavaScript框架(没有JQuery),但可以很好地使用它们。 灵活的ContentTools软件包由5个库组成,每个库或可以独立使用。...通过属性对话框中的最后一个选项卡,可以查看所选元素的内部HTML代码并直接对其进行更新。 使用 第一步是下载JS,CSS和其他关联的项目文件: 下载仓库并打开/ build文件夹,包括预构建的源文件。...当用户从视口底部的检查器栏中选择标签时,这些标签就会出现。尽管可以将样式设置为适用于所有标签,但是仅显示适用于标签类型的样式。 ? 我们将添加可应用于段落标记的单一样式.author。...每种样式均声明为一个Style实例,该实例使用显示名称,CSS类和可以应用该样式的标签列表初始化。我们需要添加相关的CSS来支持这种样式,因此在HTML的开头添加: ......区域名称在同一页面中必须唯一。 保存更改 最后,我们希望在用户保存页面时得到通知,以便我们可以将每个区域的更新内容存储在文件或数据库中。为此,我们监听由编辑器触发的保存事件。

    3.5K10

    前端特效开发 | JS实现聚光灯看图效果

    当用户的鼠标移入到某一张图片时,“镁光灯”即聚焦在当前的图片上,这张图片就高亮的展示出来,同时为了更突出所选的这张图片,就把没有被选择到的其它图片添加阴影透明。...针对如上的说法,特地在CSS样式中封装了一个叫做active的类名,其中主要设置的是鼠标移入后会展示的状态,所以在书写上只需要借助添加或者移除类名即可操作。...具体如下所示: // 当鼠标悬停在列表项上时... $('.spotlight ul li').hover(function(){ //...找到它里面的图像,并添加活动类,并更改不透明度为1(...无透明度) $(this).find('img').addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项,并更改其中的图像的不透明度为我们在...img').addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项,并更改其中的图像的不透明度为我们在

    5.5K50

    jQuery 选择器

    层叠样式表 良好地继承了css选择器语法,还继承了其获取页面元素便捷高效的特点 于css不同,jQuery选择器获取元素后,为该元素添加的是行为 有良好的兼容性 优势 1. ...层级选择器之间的相似与不同点: 1)层级选择器都有一个参考节点 2)后代选择器包含子选择器的选择的内容 3)一般兄弟选择器包含相邻兄弟选择的内容 4)相邻兄弟选择器和一般兄弟选择器所选择到的元素...Css:type=”hidden”  隐藏域 在可见性选择器中需要注意的是,选择器 :hidden获取的元素不仅包括样式属性display为“none”的元素,还包括文本隐藏域和visibility:hidden...补充 表格样式:将相邻边线折成一个,并且填充表格内的空格 jQuery选择器注意事项 1. ...而代码: /1不带空格的jQuery选择器 var $t b= $(".test:hidden") ; 选取的是隐藏的class 为“test" 的元素。 最后: ? (C) 房上的猫 。

    3.6K90

    为Vue2集成UIkit

    在实际开发中,还有很多常用组件,例如,分页、按钮、输入框、导航栏、日期/时间选择器、图片输入,等等。很明显的是这些组件的通用性已不单单存在于一个项目内,而是所有的项目都需要!...Vue社区上也有一些包装UIkit的库,如vuikit,但它的文档实在太少了,甚至从一开始的安装配套都做得非常差,基本上是脱离了UIkit的核心样式包和核心脚本编写的。...安装 虽然在AngularJS、React和Vue的项目中jQuery从来都是一个不受欢迎的库。..."uikit-css" 制作UIkit的Vue插件 上述的写法还是不够DRY,为了使用一个包就得引入多个不同的依赖库,这种做法实在很难看,此时我们可以选择一个Vue的最佳做法,就是用插件形式来包装这种零碎化的引入方式...$,这个变量其实是对jQuery的一个内部引用,准确地说这是在引用jQuery的脚本后由jQuery注册到浏览器的window全局变量上的jQuery实例。

    1.7K20
    领券