1、appendChild() 、cloneNode()
// 动态添加布局
function add_guides() {
var itm=document.getElementById("add_guide_item");
var cln=itm.cloneNode(true);
document.getElementById("div_add_guide").appendChild(cln);
}
Html:
<div id="div_add_guide">
<div id="add_guide_item">
<input type="text" id="machine_guide" style="width:40px;" value="x轴"/>
<input type="radio" name="sex" value="male" checked/>线轨
<input type="radio" name="sex" value="female"/>硬轨
</div>
</div>
2、点击button修改button的文字
<button id="button">下一步</button>
$("#button").text("处理中");
隐藏于显示:
visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无,即在网页中不占任何的位置。例如:document.getElementById("machine_info_commit").style.display = "none";
var me=document.getElementById("machine_info_commit");
if (me.style.visibility == "hidden") {
me.style.visibility="visible";
} else {
me.style.visibility = "hidden";
}
<script>
js获取单选按钮的值
window.onload = function () {
/* window意思是窗口 onload是加载 意思是页面加载完毕后,才执行里面的js ,所以可以放在顶端*/
var img = document.getElementById("img");
/*获取图片img="id"给变量 img*/
var btn_show = document.getElementById("btn_show");
/*获取显示按钮id="btn_show"给变量 btn_show*/
var btn_hidden = document.getElementById("btn_hidden");
btn_show.onclick = function () {
img.style.display = "block";
}
btn_hidden.onclick = function () {
img.style.display = "none";
}
}
</script>
3、
获取单选框的值有三种方式:
1、$('input:radio:checked').val();
2、$("input[type='radio']:checked").val();
3、$("input[name='rd']:checked").val();
4、编辑框的编辑、不可编辑切换
开启disabled,是input不可以编辑; $("#input_id").attr("disabled","disabled");
关闭disabled;$("#input_id").removeAttr("disabled");
另:设置input为disabled之后,无法使用
var formParam = $("#projectForm").serialize();来获取整个form表单的serialize()值
disabled掉的input值 就不出现在这里面
所以可以使用另外一种方式 设置输入框不可编辑:readonly,使用语法都是一样的;
$("#input_id").attr("readonly","readonly");
$("#input_id").removeAttr("readonly");
原文:https://blog.csdn.net/weixin_42350212/article/details/80997438
5、遍历数组,动态添加tr
<BODY>
<div id="result" style="font-size:16px;color:red;"></div > <table cellpadding = 5 cellspacing = 1 width = 620 id = "project"border = "1" > <tr > <th > 用户名 < /th>
<th>密码</th > </tr>
</table > </BODY>
---------------------
作者:DreamWeaver_Zhou
来源:CSDN
原文:https://blog.csdn.net/DreamWeaver_zhou/article/details/79288791
版权声明:本文为博主原创文章,转载请附上博文链接!
//------------遍历List集合 .each的使用-------------
var obj =[{"name ":"项海军","password ":"123456 "},{"name ":"科比","password ":"333333 "}];
$("#result ").html("遍历List集合.each的使用");
alert(obj);//是个object元素
//下面使用each进行遍历
$.each(obj,function(n,value) {
alert(n+' '+value);
var trs = "";
trs += " < tr > <td > " +value.name+" < /td> <td>" + value.password +"</td > </tr>";
tbody += trs;
});
$("#project").append(tbody);
});
---------------------
作者:DreamWeaver_Zhou 来源:CSDN
原文:https://blog.csdn.net/DreamWeaver_zhou/article/details/79288791
6、遍历一组radio,定获取选中的值
<div>
<input type="radio" name="address" value="0" checked="checked" />苹果
<input type="radio" name="address" value="1" />香蕉
<input type="radio" name="address" value="2" />葡萄
<div>
<input type="button" onclick="setCheck(1)" value="设置选中状态" />
</div>
<div>
<input type="button" onclick="show()" value="获取选中的值" />
</div>
js:
function setCheck(pd) {
var radios = document.getElementsByName("address");
for (var i = 0; i < radios.length; i++) {
if (radios[i].value==pd)
{
radios[i].checked = true;
}
}
}
function show() {
var radios = document.getElementsByName("address");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
}
}
}
7、隐藏属性<element hidden>
想要传递一个固定的m值只需要在表单中插入一个带有hidden属性和值的<iuput>文本框即可,如:
echo "<form action=''><input type='text' name='m' value='1' hidden>起点:<br><input type='text' name='n'><br>终点:<br><input type='text' name='t'><br><input type='submit' value='导航!'></form>";
<input type="hidden" name="field_name" value="value">
8、数组操作
删除:
8.1 直接删除元素:remove(元素)
例如:var emp = ['abs','dsf','sdf','fd'] emp.remove('fd');
8.2 splice(index,len,[item])
index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空;
也可以用来替换/删除/添加数组内某一个或者几个值
//删除起始下标为1,长度为2的一个值(len设置2)
var arr2 = ['a','b','c','d']
arr2.splice(1,2); 结果:
//['a','d']
//替换起始下标为1,长度为1的一个值为‘ttt',len设置的1
var arr = ['a','b','c','d'];
arr.splice(1,1,'ttt');
console.log(arr);
//['a','ttt','c','d']
添加 ---- len设置为0,item为添加的值
ar arr = ['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr);
//['a','ttt','b','c','d'] 表示在下标为1处添加一项'ttt'
Array.map():此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组
Array.forEach():此方法是将数组中的每个元素执行传进提供的函数,没有返回值,直接改变原数组,注意和map方法区分
Array.filter():此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回
Array.every()此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为false:
Array.some()此方法是将所有元素进行判断返回一个布尔值,如果存在元素都满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false:
Array.pop()此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度:
Array.push()此方法是在数组的后面添加新加元素,此方法改变了数组的长度:
Array.unshift()此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度:
参考:http://www.cnblogs.com/jinzhou/p/9072614.html
9、禁止输入表情
9.1方式一
禁止输入表情:
onkeyup="this.value=this.value.replace(/[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g,'')"
onafterpaste="this.value=this.value.replace(/[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g,'')"
9.2方式二:js在用户输入表情时自动过滤掉
<input type="text" id="input" maxlength="10"/>
var noEmoji = function(dom) { var html = $(dom).val(), oldHtml = ""; oldHtml = html; var reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g; if(html.match(reg)) { html = html.replace(reg, ''); } if(html != oldHtml) { $(dom).val(html); } /** * 光标移到最后 */ function endFocus(dom) { var sel = window.getSelection(); var range = document.createRange(); range.selectNodeContents(dom); range.collapse(false); sel.removeAllRanges(); sel.addRange(range); } };
$('#input').keyup(function(){ noEmoji($(this)); })