工作中的技术总结_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. 【CMake系列】10-cmake测试 ctest

    cmake作为一个强大的构建系统指导工具,同时也提供了测试功能,可用于项目的单元测试等,也可以与其他测试框架协作,如googletest,共同完成项目开发中的测试工作,本节我们就来学习 如何借助cma ...

  2. Ubuntu16.04使用命令行安装jdk1.8

    在Ubuntu中安装jdk过于麻烦,有时设置不好可能就没有办法使用,卸载也难以卸载干净,所以这篇文章使用相对简单的命令行来安装jdk,只需简单的四个命令,省去许多麻烦,下面是方法. 进入Ubuntu打 ...

  3. zabbix 4.0修改页面LOGO

    基本页面展示 一.Logo icon-sprite.svg是一个集合的图片,logo和一级菜单栏里面的图标是在这上面平移得到的 第一种方法 1.  zabbix安装好以后的默认LOGO如下: 2.   ...

  4. 多队列网卡-虚拟机Linux系统设置

    多队列网卡配置 作者使用的是ubuntu 20.04,VMWARE 首先查看系统上的网卡 ip a # 查看网卡信息 查看ens33是否支持多队列网卡,如果是下图这种情况就是不支持多队列网卡. cat ...

  5. [kernel] 带着问题看源码 —— 脚本是如何被 execve 调用的

    前言 在<[apue] 进程控制那些事儿>一文的"进程创建-> exec -> 解释器文件"一节中,曾提到脚本文件的识别是由内核作为 exec 系统调用处理 ...

  6. 5个必知的高级SQL函数

    5个必知的高级SQL函数 SQL是关系数据库管理的标准语言,用于与数据库通信.它广泛用于存储.检索和操作数据库中存储的数据.SQL不区分大小写.用户可以访问存储在关系数据库管理系统中的数据.SQL允许 ...

  7. spark 新建一个column并用另一column的最大值赋值

    finalDF.withColumn("NEW_COLUMN", max("start_date").over()).show()   Ref: https:/ ...

  8. 像 Mysql 和 MongoDB 这种大型软件在设计上都是精益求精的，它们为什么选择B树，B+树这些数据结构？

    为什么 MongoDB (索引)使用B-树而 Mysql 使用 B+树? B 树与 B+ 树,其比较大的特点是:B 树对于特定记录的查询,其时间复杂度更低.而 B+ 树对于范围查询则更加方便,另外 B ...

  9. 用Python实现阿拉伯数字转换成中国汉字

    要将阿拉伯数字转换成中国汉字表示的数字,我们需要一个映射表来转换每个数字,并且处理不同位数的数字(如十.百.千.万等). 1. Python实现阿拉伯数字转换成中国汉字 下面是一个完整的Python代 ...

  10. JavaScript习题之填空题

    1. JavaScript有两种引⽤数据类型:__数组___.__对象__.2. Javascript通过__setTimeout___延迟指定时间后,去执⾏某程序.3. Javascript⾥Str ...