工作中的技术总结_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. C#.Net筑基-解密委托与事件

    委托与事件是C#中历史比较悠久的技术,从C#1.0开始就有了,核心作用就是将方法作为参数(变量)来传递和使用.其中委托是基础,需要熟练掌握,编程中常用的Lambda表达式.Action.Func都是委 ...

  2. 解密prompt系列35. 标准化Prompt进行时！ DSPy论文串烧和代码示例

    一晃24年已经过了一半,我们来重新看下大模型应用中最脆弱的一环Prompt Engineering有了哪些新的解决方案.这一章我们先看看大火的DSPy框架,会先梳理DSPy相关的几篇核心论文了解下框架 ...

  3. 手把手教Linux驱动10-platform总线详解

    platform总线是学习linux驱动必须要掌握的一个知识点. 本文参考已发布:Linux 3.14内核 一.概念 嵌入式系统中有很多的物理总线:I2c.SPI.USB.uart.PCIE.APB. ...

  4. 通过 GitHub Actions 实现代码的自动编译和发布

    GitHub Actions 是一个非常强大的工具,可以用来实现各种自动化任务,包括自动编译和发布 release.以下是一个基本的工作流程,展示如何使用 GitHub Actions 实现这一目标: ...

  5. Java 查询 MMDB 数据库

    MMDB-Lookup | GitHub Lookup.java: import java.io.File; import java.net.InetAddress; import com.faste ...

  6. Java并发之原子变量及CAS算法-下篇

    Java并发之原子变量及CAS算法-下篇 概述 本文主要讲在Java并发编程的时候,如果保证变量的原子性,在JDK提供的类中是怎么保证变量原子性的呢?.对应Java中的包是:java.util.con ...

  7. JDK有用的新特性-Java Record

    目录 Java Record Record使用 Instance Methods 静态方法 Static Method Record 的构造方法 step1: 紧凑和定制构造方法 Record 与 与 ...

  8. Zeppelin 学习

    Zeppelin 遇到的问题: 1. 在interpreter 界面配置 dependency management 了以后,报 Error setting properties for interp ...

  9. 一次Java性能调优实践【代码+JVM 性能提升70%】

    这是我第一次对系统进行调优,涉及代码和JVM层面的调优.如果你能看到最后的话,或许会对你日常的开发有帮助,可以避免像我一样,犯一些低级别的错误.本次调优的代码是埋点系统中的报表分析功能,小公司,开发结 ...

  10. C语言linux系统fork函数

    References: c语言fork函数 linux中fork()函数详解 一.fork函数简介 作用 在linux下,C语言创建进程用fork函数.fork就是从父进程拷贝一个新的进程出来,子进程 ...