工作中的技术总结_JQuery_20210825

JQuery此前接触不多，所以先把此次接触的一些基本操作

1、DOM节点的取值或者赋值：

语法：

$(selector).val(value)
参数 描述
value 可选。规定被选元素的新内容。

使用细节 selector参数我一般是使用ID，使用过Class作为参数，但是效果并没有体现出来。这个设置值的方式 一般是 input这类的有value的标签使用

具体使用如下

$("#historyPatternFileCommentValue").val(patternFileCommentOld) // 可以传入变量

$("#checkMode").val("check"); // 可以传入 字符串或数字（根据JavaScript教程最后都会被转换为字符串）

$('#patternFileComment').val($('#getPatternFileComment').val()) // 可以获取值再进行传递

使用函数设置 Value 属性的值

$(selector).val(function(index,oldvalue))

W3C教程

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("input:text").val(function(n,c){

      return c + " Gates";

    });

  });

});

</script>

</head>

<body>

<p>Name: <input type="text" name="user" value="Bill" /></p>

<button>设置文本域的值</button>

</body>

</html>
2、.ready() 相关

在文档加载后激活函数：

$(document).ready(function(){

  $(".btn1").click(function(){

    $("p").slideToggle();

  });

}); // W3C 教程

定义和用法

当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。

ready() 函数规定当 ready 事件发生时执行的代码。

ready() 函数仅能用于当前文档，因此无需选择器。

允许使用以下三种语法：

语法 1

$(document).ready(function)

语法 2

$().ready(function)

语法 3

$(function)
参数 描述
function 必需。规定当文档加载后要运行的函数。

提示和注释

提示：ready() 函数不应与 <body onload=""> 一起使用。

在项目中的实例：

jQuery(document).ready(function () {

            Fileupload.init('patternFileUpload', null);

            Fileupload.init('patternFileUpload1', null);

            $(document).keypress(function (event) {

                var keycode = (event.keyCode ? event.keyCode : event.which);

                if (keycode == '13') {

                    event.preventDefault();

                    event.stopPropagation();

                }

            }); // 也就是完成一些DOM文档渲染后的初始化和数据准备工作
3、.click 相关

定义和用法

当单击元素时，发生 click 事件。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

语法

触发被选元素的 click 事件：

$(selector).click()

添加函数到 click 事件：

$(selector).click(function)
参数 描述
function 可选。规定当 click 事件发生时运行的函数。

菜鸟教程实例：

$("p").click(function(){

    alert("段落被点击了。");

});

项目实例：

$("#button2").click(

            function () {

                var l = Ladda.create(this);

                Common.showConfirm('confirm', null,

                    Common.message.COMMON015, function () {

                        $("#patternFileComment").removeClass("is-invalid");

                        if ($("#patternFileComment").val().trim() == "" && $("#patternFileComment").val().length > 0) {

                            $("#patternFileComment").addClass("is-invalid");

                            Common.showConfirm('error', '出错', Common.message.COMMON044, null, null);

                            return;

                        }

                        l.start();

                        $("#checkMode").val("check");

                        $('#equipmentType').val($('#oldEquipmentType').val())

                        $('#patternFileNameValue').val($('#oldFileName').val())

                        $('#addCopy').val("copy")

                        $('#patternFileComment').val($('#getPatternFileComment').val())

                        $("#addForm").submit();

                    }, null);

            }); // 点击就会 出现小窗口，在窗口中进行数据提交的确认 等操作 会给出相应的提示信息
4、.css() 相关

定义和用法

css() 方法返回或设置匹配的元素的一个或多个样式属性。

返回 CSS 属性值

返回第一个匹配元素的 CSS 属性值。

注释：

当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。

语法：

$(selector).css(name)

$(selector).css(name,cssValue)


// 实例 取得第一个段落的 color 样式属性的值：

$("p").css("color");

// 实例 设置 <p> 元素的颜色：

$(".btn1").click(function(){

  $("p").css("color","red");

});

// W3C 教程
参数 描述
name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。
5、.hide() 相关
$(".upload-block").hide();

定义和用法

如果被选的元素已被显示，则隐藏该元素。

语法

$(selector).hide(speed,callback)
参数 描述
speed 可选。规定元素从可见到隐藏的速度。默认为 "0"。可能的值：毫秒 （比如 1500）"slow""normal""fast"在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback 可选。hide 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。除非设置了 speed 参数，否则不能设置该参数。(www.w3school.com.cn/jquery/effect_hide.asp)

提示和注释

提示：如果元素已经是完全 可见，则该效果不产生任何变化，除非规定了 callback 函数。

工作中的技术总结_JQuery_20210825的更多相关文章

  1. 工作中常见的五种技术leader

    力不从心型 在工作中有种技术leader,总认为自己是最好的.在方案设计的时候,自己有一种方案,下属有一种方案.leader非要别人听他的.如果两种方案没有优劣之分,比较建议的做法是让真正实施的人按照 ...

  2. Linux 运维工作中的经典应用ansible（批量管理）Docker容器技术(环境的快速搭建)

    一 Ansible自动化运维工具 Python 在运维工作中的经典应用 ansible(批量管理操作) .安装ansible(需要bese epel 2种源) wget -O /etc/yum.rep ...

  3. Git-【技术干货】工作中Git的使用实践

    Git-[技术干货]工作中Git的使用实践 置顶 2019-09-17 21:02:16 web洋仔 阅读数 11444更多 分类专栏: Git   版权声明:本文为博主原创文章,遵循CC 4.0 B ...

  4. 工作的思考十七：工作中容易犯的错误 - Delay

    其实IT是一个很严谨的行业,不管是从代码角度还是从日常的工作分配都是按计划来的. 从今年年初到现在,在我的工作中出现了两次“Delay”,第一次不以为然,虽然上司也找过我谈话,但没意识到问题的严重性. ...

  5. 收集一些工作中常用的经典SQL语句

    作为一枚程序员来说和数据库打交道是不可避免的,现收集一下工作中常用的SQL语句,希望能给大家带来一些帮助,当然不全面,欢迎补充! 1.执行插入语句,获取自动生成的递增的ID值 INSERT INTO ...

  6. 我在华为，软件测试人员在工作中如何运用Linux？

    从事过软件测试的小伙们就会明白会使用Linux是多么重要的一件事,工作时需要用到,面试时会被问到,简历中需要写到.对于软件测试人员来说,不需要你多么熟练使用Linux所有命令,也不需要你对Linux系 ...

  7. 工作中比较重要的经验分享-2016-bypkm

    工作中总有一些经验能让人记忆深刻,能让人终生受用,相比技术而言,经验是宝贵的.无价的.在我的博客中,主要是技术类的博文,那些东西是相对死板的,价值也相对低廉.今天就记录一下我在工作中一次比较重要的经验 ...

  8. 工作中，ES6 可能掌握这些就足够了

    刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...

  9. AJAX 概念 优势 发展前景 工作原理 底层技术 状态 缺点 框架

    1. 概念 Ajax asynchronous JavaScript and XML , 异步js和xml. 这种解释已经过时了, 现在ajax就是, 允许浏览器和服务器通信, 而无需刷新当前页面的技 ...

  10. 谈谈我从工作中理解的CDN

    一.CDN定义 CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过 ...

随机推荐

  1. 通过JUnit源码分析学习编程的奇技淫巧

    打开 Maven仓库,左边选项栏排在第一的就是测试框架与工具,今天的文章,V 哥要来聊一聊程序员必备的测试框架JUnit 的源码实现,整理的学习笔记,分享给大家. 有人说,不就一个测试框架嘛,有必要去 ...

  2. Binance 如何使用 Quickwit 构建 100PB 日志服务(Quickwit 博客)

    三年前,我们开源了 Quickwit,一个面向大规模数据集的分布式搜索引擎.我们的目标很宏大:创建一种全新的全文搜索引擎,其成本效率比 Elasticsearch 高十倍,配置和管理显著更简单,并且能 ...

  3. AD LDAP

    Ref: Windows 域之 LDAP与AD [安全科普]AD域安全协议(三)LDAP AD 域服务简介(一)- 基于 LDAP 的 AD 域服务器搭建及其使用 https://milestone- ...

  4. plotly dash

    https://community.plotly.com/t/callback-on-graph-slider-change-which-property-to-use-as-input/33979/ ...

  5. python 或者 pyspark 和 java 交互, pyspark 里怎么调用自定义的 jar 包

    1. python 直接访问 jar 里面的类 先定义java文件,然后要访问java class, 需要有gateway server 和 entrypoint, 到时候python就可以连接上ga ...

  6. R-Adapter：零样本模型微调新突破，提升鲁棒性与泛化能力 | ECCV 2024

    大规模图像-文本预训练模型实现了零样本分类,并在不同数据分布下提供了一致的准确性.然而,这些模型在下游任务中通常需要微调优化,这会降低对于超出分布范围的数据的泛化能力,并需要大量的计算资源.论文提出新 ...

  7. 小tips：npm与npx的区别

    npm npm是Node.js的软件包管理器,其目标是自动化的依赖性和软件包管理. 这意味着,可以在package.json文件中为项目指定所有依赖项(软件包),当需要为其安装依赖项时,只要运行npm ...

  8. Angular 18+ 高级教程 – 初识 Angular

    Before Starting 深入学习 Angular 是一件非常耗时耗力的事情. 实施 Angular 到项目中同样也是一件非常耗时耗力的事情. 在我们做出这么大的投入之前,我们有必要先思考以下几 ...

  9. CSS & JS Effect – Textarea Autoresize

    前言 这是一个很普遍的体验, 而且实现起来也很简单哦 参考 YouTube – How to Auto Resize Textarea using HTML CSS & JavaScript ...

  10. SpringBoot——整合SSM（主要整合MyBatis）

    基于SpringBoot整合SSM SpringBoot整合Spring(不存在) SpringBoot整合SpringMVC(不存在) SpringBoot整合MyBatis(主要) Spring整 ...