HTML与CSS学习总结（一）
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:
线轨
硬轨
2、点击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";
}
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
---------------------
作者：DreamWeaver_Zhou
来源：CSDN
原文：https://blog.csdn.net/DreamWeaver_zhou/article/details/79288791
版权声明：本文为博主原创文章，转载请附上博文链接！
//------------遍历List集合 .each的使用------------- js: function setCheck(pd) { 7、隐藏属性<element hidden> 想要传递一个固定的m值只需要在表单中插入一个带有hidden属性和值的 echo ""; 8、数组操作 删除： 8.1 直接删除元素：remove(元素) 例如：var emp = ['abs','dsf','sdf','fd'] emp.remove('fd'); 也可以用来替换/删除/添加数组内某一个或者几个值 添加 ---- len设置为0，item为添加的值 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方式一 禁止输入表情： 用“==”判断等于；用“===”判断恒等于 方法二： 失去焦点事件 的方法 οnblur="方法名（）" 如下： 聚焦事件的方法 οnfοcus=“方法名2（）” $("#btn").click(function(){ 实际应用中 有些浏览器会异常，需要设置，一般不建议这样读取；
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 > " + value.password +" ";
tbody += trs;
});
$("#project").append(tbody);
});
---------------------
作者：DreamWeaver_Zhou 来源：CSDN
原文：https://blog.csdn.net/DreamWeaver_zhou/article/details/79288791
6、遍历一组radio，定获取选中的值
苹果
香蕉
葡萄
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);
}
}
}
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'] ar arr = ['a','b','c','d']; arr.splice(1,0,'ttt'); console.log(arr); //['a','ttt','b','c','d'] 表示在下标为1处添加一项'ttt'
ο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在用户输入表情时自动过滤掉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：
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();
});
}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方法
$("#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/7877998816、读取本地文件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);
// }
}
你可能感兴趣的:(web前端)