工作中的技术总结_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 函数。

posted on 2021-08-25 10:14 OwlInTheOaktree 阅读(35) 评论(0) 编辑收藏举报

工作中的技术总结_JQuery_20210825

工作中的技术总结_JQuery_20210825

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

2、.ready() 相关

3、.click 相关

4、.css() 相关

5、.hide() 相关

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论