工作中的技术总结_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. springboot中统一日志输出logback

    1.背景 为了便于分析和记录系统的运行,一个系统输出其运行的关键日志是非常必要的 比如输出:请求参数.请求url.请求方式.执行的sql.重要操作的日志.响应结果等 而这些日志中,大部分不需要我们手动 ...

  2. 如何利用HMMER鉴定基因家族成员

    通常我们用的都是通过blast比对来确定我们需要的家族成员,首先是比对序列,再次是需要目标物种的蛋白序列,来进行比对,通常比对的时候我们都需要设定e-value值.今天我们来学习一下利用HMMER来鉴 ...

  3. 安装RabbitMQ遇到的一些坑

    Ubantu18.0正确安装RabbitMQ 1.安装erlang 因为RabbitMQ需要erlang语言的支持,所以我们需要先安装erlang. sudo apt-get install erla ...

  4. mybatis 中 实体类字段为 month SQL 会报错的问题

    因为 month 是 mysql 的关键字 ,所以 你的实体类字段改成 months months months months months months就行了

  5. 2024年智能革命：HarmonyOS NEXT与盘古大模型5.0的颠覆性融合

    引言 2024年,这一年注定在全球智能设备市场的历史上写下浓墨重彩的一笔.作为全球科技巨头,华为再次以其前瞻性的布局,推动了技术与应用的深度融合.在这个充满变革的时代,华为通过不断扩展的鸿蒙生态系统, ...

  6. LaTeX 编译中文文档

    介绍 LaTeX 原生不支持中文.为了添加中文的功能,我们需要引入宏包.XeLaTeX 原生支持中文.不过由于默认使用的字体是英文字体,我们需要设置中文字体之后才能用.不过由于一些原因,在使用 LaT ...

  7. 😶‍🌫️ SpringBoot中MongoDB的骚操作用法

    不知道大家在工作项目中有没有使用MongoDB,在哪些场景中使用.MongoDB作为NoSQL数据库,不像SQL数据库那样,可以使用Mybatis框架. 如果需要在SpringBoot中使用Mongo ...

  8. ipv6 知识

    ref: 网络编程懒人入门(十一):一文读懂什么是IPv6 https://cloud.tencent.com/developer/article/1551346 IT知识大全:IPv6详解

  9. 为什么C++ 单例局部static初始化是线程安全的？

    为什么C++ 单例局部static初始化是线程安全的? const bg::AppSettings& bg::AppSettings::GetInstance() { static AppSe ...

  10. IntelliJ Idea 常用快捷键参照列表

    IntelliJ Idea 常用快捷键参照列表 Ctrl+Shift + Enter,语句完成 "!",否定完成,输入表达式时按 "!"键 Ctrl+E,最近的 ...