如何用jquery动态添加控件，和设置控件属性

用对应id的控件，动态添加 子控件

for (var i = 0; i < facechatdata.length; i++) {
                        if (rownames == [] || rownames == undefined) {
                            $("#checkoutboxs").append("<input class='ownerCost' type='checkbox'value='" + facechatdata[i].facechatId + "' id='" + facechatdata[i].facechatId + "' name='" + "like" + "' title='" + facechatdata[i].title + "' lay-filter='example' >");
                            $("#checkoutboxs").append("<div class='layui-unselect layui-form-checkbox'><span>" + facechatdata[i].title + "</span><i class='layui-icon layui-icon-ok'></i></div>");
                        } else {
                            if (rownames.indexOf(facechatdata[i].title) > -1) {
                                $("#checkoutboxs").append("<input class='ownerCostChecked' type='checkbox'value='" + facechatdata[i].facechatId + "' id='" + facechatdata[i].facechatId + "' name='" + "like" + "' title='" + facechatdata[i].title + "' lay-filter='example' >");
                                $("#checkoutboxs").append("<div class='layui-unselect layui-form-checkbox layui-form-checked'><span>" + facechatdata[i].title + "</span><i class='layui-icon layui-icon-ok'></i></div>");

                            } else {
                                $("#checkoutboxs").append("<input class='ownerCost' type='checkbox'value='" + facechatdata[i].facechatId + "' id='" + facechatdata[i].facechatId + "' name='" + "like" + "' title='" + facechatdata[i].title + "' lay-filter='example' >");
                                $("#checkoutboxs").append("<div class='layui-unselect layui-form-checkbox'><span>" + facechatdata[i].title + "</span><i class='layui-icon layui-icon-ok'></i></div>");
                            }
                        }
                    }

用class找到父控件，并清空子控件包含(input和div),清除其他的类似

//移除
                    $('.deleteFacechat div').remove();
                    $('.deleteFacechat input').remove();

用class找到对应控件，并设置属性

//清空选中状态
                    $(".ownerCost").prop("checked", false);
                    $(".ownerCostChecked").prop("checked", false);

//选中
                    $(".ownerCostChecked").prop("checked", true);


$("#sub_btn").attr("disabled", "disabled");
                $("#sub_btn").val("提交中...");



对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法

添加删除class

$("p").addClass("selected");



$("p").removeClass("selected");

学习记录：

@{
    Layout = "~/Views/Shared/_Layout1.cshtml";
}

@section styles{ 
    

}


<div class="demohead">
    <label id="t2" class="showT2" style="background-color:aqua">te12t2</label><br />
    <label id="t" class="showText">test</label>
    <input id="edit_text" type="text" value="" placeholder="输入数据" />
    <button>按钮</button>
</div>


@section Scripts{ 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        里面可以是标签名，.class名，#id名
        $("label").hide();
         $() == $(document)

        文档就绪事件 $().ready(function(){}) = $(function(){});
        文档就绪事件：防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
                        如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
                        试图隐藏一个不存在的元素
                        获得未完全加载的图像的大小

        找到.demohead控件下的.showT2控件，记住中间要用空格隔开，直接连在一起不行
        $().ready(function () {
            $('.demohead  .showT2').click(function () {
                $(this).hide();
            });
        });
        找到class为.showT2的label标签
        $().ready(function () {
            $('label.showT2').click(function () {
                $(this).hide();
            });
        });
        找到div控件下的所有label控件，注意中间用空格隔开
        $().ready(function () {
            $('div label').click(function () {
                $(this).hide();
            });
        });
        找到对应属性的label控件，在[]中写属性，不一定是class
        $().ready(function () {
            $('label[class="showT2"]').click(function () {
                $(this).hide();
            });
        });
        找到class为demohead的div控件下所有class为showT2的label控件
        $().ready(function () {
            $('div.demohead label.showT2').click(function () {
                $(this).hide();
            });
        });
        如果想要多种条件一起查找，可以把上面的多个条件用逗号隔开

        元素的事件不只有 单击click ,还有：(鼠标悬停hover 等等)
        双击 dblclick
        失去焦点触发 blur   可以解决表单重复提交的问题，只是推测，还未实施
        得到焦点触发 focus
        鼠标进入 mouseenter
        鼠标离开 mouseleave

        隐藏显示可以传入两个参数，第一个为时间，第二个为回调function(){}
        toggle() == hide() + show()
        动画效果 fadeIn = show    fadeOut = hide    fadeToggle = toggle
        fadeTo  改变透明度 0透明 ~ 1不透明  ,第一个参数为时间
        上下滑动 slideUp和slideDown 和 slideToggle
        自定义动画  +连续动画展示 animate({参数},时间ms,回调)
        动画停止 stop() 停止当前动画,下一个动画可执行   stop(true) 停止所有动画
        var tag = false;
        $(function () {
            $('button').click(function () {
                
                $('.showT2').animate({ height: '200px', opacity: '0.3' }, function () {
                    //该动画执行完，修改style的背景颜色，再执行下一次的动画
                    $('.showT2').css("background-color", 'antiquewhite');
                });
                
                $('.showT2').animate({ width: '200px', opacity: '0.3' });
            });
        });
    </script>
}

学习总结如下：

1、系统的学习Jquery框架，完成这周学习Jquery的计划。
	学习的主要内容有：选择器、事件、动画及回调、自定义动画集合、动画停止stop()和stop(true)的区别。
	text()和html()和append()和prepend()之间的用法及区别。remove()和empty()之间的用法及区别。
	addClass()和removeClass()和toggleClass()和css()设置样式之间的区别。
	width()和innerWidth()和outerWidth()之间尺寸测量的区别。
	children()和find()和find("*")之间寻找子元素的用法和区别。
	学习其他元素遍历的方法有：水平遍历，首尾遍历，指定索引号遍历，filter()过滤，not()过滤。
	学习jquery框架的ajax请求load()，get()和post()。
	jquery框架简写$与其他框架美元符发生冲突解决办法，定义新简写代替美元符，var newTag = $.noConflict()。
	学习jquery数组遍历$.each(list,function(index,value){})。
	学习jquery的一些插件使用，如：消息提醒插件Growl。
	至此对jquery整个框架有了一个全面的认识与理解，之后也会在项目中逐渐深入研究。

 

更多：http://www.runoob.com/jquery/jquery-events.html