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