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:

<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"; 
        }

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，定获取选中的值

js:

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>";

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));
})

HTML与CSS学习总结（一）

猜你喜欢