用对应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整个框架有了一个全面的认识与理解,之后也会在项目中逐渐深入研究。