工作中的技术总结_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. 再探 游戏 《 2048 》 —— AI方法—— 缘起、缘灭（4） —— state-of-the-art

    <2048>游戏在线试玩地址: https://play2048.co/ 该游戏的解法比较不错的资料为外网的一个讨论帖子: What is the optimal algorithm fo ...

  2. 开源的 P2P 跨平台传文件应用「GitHub 热点速览」

    就在上周,发完那篇文章之后不久,我就有幸获得了 GitHub Models 服务公测的访问权限,所以就体验了一下 Playground 聊天功能. 起初,我以为这是"微软菩萨"降临 ...

  3. Linux信号量（3）-内核信号量

    概念 Linux内核的信号量在概念和原理上和用户态的System V的IPC机制信号量是相同的,不过他绝不可能在内核之外使用,因此他和System V的IPC机制信号量毫不相干. 如果有一个任务想要获 ...

  4. debian10环境安装rtpengine

    操作系统 :debian 10.13_x64 rtpengine版本:10.5 最新的debian12环境可通过apt直接安装rtpengine,但工作中有时候还会涉及到debian10这样的老系统, ...

  5. python开发环境安装-包含Anaconda的安装配置和pycharm的安装

    一. 需要得安装包 1.  Anaconda3-5.3.0-Windows-x86_64.exe  python环境 2.pycharm-professional-2021.2.2.exe      ...

  6. Ubuntu上snmp安装、配置、启动及远程测试完整过程

    说明 关于一个完整的教程,还是那句话,国内的要么不完整,要么就太旧了,而且思路也不清晰,所以这里写一篇完整的给大家分享一下. 虽然对于Linux主机的监控可以通过执行特定的命令来完成,但是相比之后,通 ...

  7. 关于centos7下所有指令失效

    起因: 疑似宝塔更新修复后,本地所有环境变量集体不生效 问题环境 xshell环境下ssh连接 问题描述: - bash: xxx not fund - 环境变量无法保存 - 所有的保存方式都是临时生 ...

  8. RedisCluster集群架构原理与通信原理

    redis 参考目录: 生产级Redis 高并发分布式锁实战1:高并发分布式锁如何实现 https://www.cnblogs.com/yizhiamumu/p/16556153.html 生产级Re ...

  9. C#自定义控件—指示灯

    C#用户控件之指示灯 在体现通讯状态.运行状态等用一个靓眼的指示灯如何做? 思路(GDI) 外环用笔绘制(Pen),内圆用画刷(SolidBrush); 两个方法(用笔画圆,用画刷填充圆的内部): 绘 ...

  10. 如何使用 Redis 实现后台房间的数据管理？

    ​  ​摘要:利用 Redis 实现房间业务管理的实践与思考. 文|即构业务后台开发团队 在一些互动场景中,比如语音聊天室.电商直播等,成员控制.连麦.献花.发弹幕等互动功能,通常要求后台服务器能够储 ...