zoukankan      html  css  js  c++  java
  • js和jq动态操作元素总结

    写在前面的话:

      最近忙于面试,博客少有更新。这样不好,我要自我检讨。回归正题,今天想借四月份的最后一天总结一下js和jq动态操作元素的各种方法。

    动态创建元素:

            //js 创建元素
                var div=document.createElement('div');
                //jq 创建元素
                var obj=$("<div>");//或者obj=$("<div></div>")

    jquery 也可以一次性创建多个元素

    $("<div id='jqdiv0'><div id='jqdiv1'><div id='jqdiv2'>");//或者 $("<div id='jqdiv0'><div id='jqdiv1'><div id='jqdiv2'></div></div></div>");
                

     动态添加元素:

            //js 创建元素
                var div=document.createElement('div');
                //jq 创建元素
                var obj=$("<div>");
                //js 添加元素到页面
                document.getElementById("jsdiv").appendChild(div);
                //jq 添加元素到页面
                $("#jqdiv").append(obj);
        

    动态的移除元素:

             //js 创建元素
                var div=document.createElement('div');
                //jq 创建元素
                var obj=$("<div>");
                //js 添加元素到页面
                document.getElementById("jsdiv").appendChild(div);
                //jq 添加元素到页面
                $("#jqdiv").append(obj);
                //js 移除元素
                    //第一种
                document.getElementById("jsdiv").removeChild(div);
                    //第二种
                document.getElementById("jsdiv").innerHTML="";
                //jq 移除元素
                    //第一种
                $("#jqdiv").children('div').remove();
                    //第二种
                $("#jqdiv").empty();

     动态的添加属性:

            //js 设置属性
                jsdivChild.setAttribute('style','border:2px solid red;');//jq 设置属性
                jqdivChild.attr('style',"border:3px solid blue");

    动态的移除属性:

            //js 移除属性
                jsdivChild.removeAttribute('style');
                //jq 移除属性
                jqdivChild.removeAttr('style');
  • 相关阅读:
    前言
    echarts踩坑---容器高度自适应
    vue中刷新页面时去闪烁,提升体验方法
    2018.11.7
    07-sel-express 框架快速搭建案例
    第三方包 vue-resource
    zepto.js-定制zepto步骤
    CSS-单位em 和 rem
    ES6-个人学习大纲
    响应式布局
  • 原文地址:https://www.cnblogs.com/lin494910940/p/12810378.html
Copyright © 2011-2022 走看看