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" οnclick="setCheck(1)" value="设置选中状态" />
</div>
<div>
<input type="button" οnclick="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方式一
禁止输入表情：
οnkeyup="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));
})10、下拉表单方式1：
<select name="tigong" id="tigong">
<option value="null">--全部--</option>
<option value="aa">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="其他">其他</option>
</select>
document.getElementsByName("tigong")[0].value='喜剧';
document.getElementById("tigong").value
$("#tigong option:selected").text()
动态生成：
document.body.onclick = function(){
if(document.getElementById('vselect') === null){
document.body.innerHTML = "";
var select = document.createElement("select");
select.setAttribute('id','vselect');
select.options[0] = new Option("加载项1", "");
select.options[1] = new Option("加载项2", "");
this.appendChild(select);
}
}11、js中判断字符串相等
用“==”判断等于；用“===”判断恒等于
12、点击空白取消元素
document.onclick=function(e) {
var display = $('.on_changes');
if (!display.is(e.target) && display.has(e.target).length === 0) {
display.hide();
}
// $(".on_changes").style.display = "none";
}13、输入框失去焦点时的隐藏：
方法一：
$(document).ready(
function(){
$('input').blur(function () {
var display = $('.on_changes');
display.hide();
});
}方法二：
失去焦点事件 的方法 οnblur="方法名（）" 如下：<input type="text" οnblur="bluree()">
聚焦事件的方法 οnfοcus=“方法名2（）”
14、点击图片，更换图片
var imgs = ['/static/img/mobile/create_sales_connect_click.png', '/static/img/mobile/create_sales_connect.png'];
var len = imgs.length;
var current = 0;
function setServiceListClick(textColor) {
$("#connect_service_text").css("color",textColor);
var target = document.getElementById('btn_connect_service');
target.src = imgs[current];
current = ++current == len ? 0 : current;
}15、load方法
$("#btn").click(function(){
$("#div1").load("txt/text.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success"){
alert("加载成功");
alert(responseTxt);
}
if(statusTxt=="error"){
alert("error:"+xhr.status+":"+xhr.statusTxt);
}
});
});
上面代码中：
1. responseTxt:包含调用成功时的结果内容
2. statusTxt:包含调用状态
3. xhr:包含XMLHttpRequest对象。
实际应用中
————————————————
版权声明：本文为CSDN博主「Alex_usr」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_32447321/article/details/78779988
16、读取本地文件js
//读取文件 ：对浏览器设置有要求
function readFile() {
var fso, ts, s;
var ForReading = 1;
// fso = new ActiveXObject("Scripting.FileSystemObject");
// ts = fso.OpenTextFile("d:\\aa.txt", ForReading);
// s = ts.ReadLine();
// // document.getElementById("aa").innerHTML = s;
// while (!ts.AtEndOfStream) {
// s = ts.ReadLine();
// // document.getElemen
// alert(""+s);
// }
}
有些浏览器会异常，需要设置，一般不建议这样读取；
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
