动态添加div
$('').append('<div></div>')
ajax实现搜索功能
<inputid='search'></input>
$("#search").keyup(function(){
.ajax({
url: '......',
data: datas,
type: 'POST',
dataType: 'json',
success: function (data) {
//搜索后处理的数据
},
});
});
在某个div后动态添加div
$('').after('<div>新的div</div>')
jQuery怎么根据某个特定的值动态让select下的option选中
$("#select").val(1); //就可以让下拉框为1的值选中。
Js实现Select动态添加option
$.ajax({
type:'post',
url:BASE_PATH+"/sys/game",
success:function (data) {
for (var i=0; i<data.length; i++){
document.getElementById('select_game_name').options.add(newOption(data[i].name))
}
}
})
});
jQuery实现Select动态添加option${‘#_select’}.append('<option value="' + v.id + '">'+ v.name + '</option>');
设置placeHolder
$("textarea[name='model.username']").attr("placeholder","抄送人以分号结尾");
让div水平排列方法:
1. 给div加入属性style="float:left"(横向无缝排列)
2.给div加入属性style="display:inline-block"
比如:
<style>
.divide-equally {
display:inline-block;
}
</style>
3.通过width属性分布百分比
<style>
.divide-equally {
width:20%;
}
</style>
如何添加分隔符
采用<hr />。
<h4 style="text-align: center"><b>标题</b></h4>
<hr class="style-two">
<style>
hr.style-two {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(toright, #ccc, #333, #ccc);
}
</style>
点击文字选中checkbox复选框 checkbox绑定文字
实现的代码如下:第一种方法:文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。
实现代码如下:
<input type="checkbox" id="check1"value="123" name="name" class="check">
<label for="check1">姓名</label>
<br>
<input type="checkbox" id="check2"value="456" name="name" class="check">
<label for="check2">密码</label>
第二种方法:把文字和checkbox包含在<label>标签内
代码如下:
<label><input type="checkbox"id="11" class="check" /> 测试</label>
全部代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin:0;padding:0; list-style: none;font-family: '微软雅黑'}
.box {width: 400px; overflow: hidden; padding: 20px;}
input,label{vertical-align:middle;}
.check {width: 18px; height: 18px;}
label{font-size: 18px;}
</style>
</head>
<body>
<div>
<form>
<!--第一种:文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同. -->
<input type="checkbox" id="check1"value="123" name="name">
<label for="check1">姓名</label>
<br>
<input type="checkbox" id="check2"value="456" name="name">
<label for="check2">密码</label>
<br>
<!-- 第二种:把文字和checkbox包含在<label>标签内 -->
<label><input type="checkbox"id="11" /> 测试</label>
</form>
</div>
</body>
</html>
Jquery例子
1.$("textarea[name='model.username']").attr("placeholder","抄送人以分号结尾");
2.$("select[ name='model.recordtype']").val(‘赋值’);
3.alert($(v).parent().parent().find("td:eq(1)").text());
4.alert($(v).parent().parent().find("td:eq(4)").children().val());
5.
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有id="test" 的元素
$("#test").text()
$("#test").html() :jquery获取a标签的值 <a href="#">这是a的值</a>
$("#test").val()
$(".font").eq(0).text("dd");
给<input type=”date” />赋值(或后端赋值给前端input)
赋值的格式为:2018-04-26(中间用横线连接)
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
Jquery遍历table
1. $("#table_id tbody tr").each(function(){
var a = $(this).children();//获取每一行
var arr=a[2].innerText;//取得第三列的值
if(arr......比较)
a[1].firstElementChild.setAttribute("checked","checked");
//给第二列添加一个属性checked
});
table_id是table的id,接着tbogy tr是为了更进一步找到这元件。
2. $("#jar-model-result-table tbodytr").each(function(){
var b= $(this).find(".region").text();
if (b == ""){
$(this).find(".split").attr("class","pink2");
}
});
Jquery判断复选框是否被选中
<label><input type="checkbox"id="lowercase" name="lowercase" checked="checked"/> a ~ z </label>
var isChecked = $('#cb').prop('checked');
//或
var isChecked = $('#cb').is(":checked");
******************************************************************************
checkbox全选效果未整理:
autocomplete="off" id="check_all_game"/>
<label class="lbl">全选</label>
</div>
<div class="items col-xs-4 condition">
<div class="ace-settings-item">
<input type="text" class="gameId" value="${game.id}" style="display: none;">
<input type="checkbox" class="ace ace-checkbox-2 isnot" ${_isChecked} autocomplete="off" />
<label class="lbl">${game.name}</label>
</div>
</div>
$("#check_all_game").change(function() {
if($("#check_all_game").is(":checked") == true){
$(".condition").each(function () {
$(this).find(".isnot").prop("checked", true);
});
}else {
$(".condition").each(function () {
$(this).find(".isnot").prop("checked", false);
});
}
});
备注:
//判断checkbox 是否选中
$("#id").is(":checked");//选中,返回true,没选中,返回false
//设置checkbox为选中状态
$("#id").prop("checked",true);
//设置checkbox为不选中状态
$("#id").prop("checked",false);
Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作:
https://www.cnblogs.com/gsyun/p/6972674.html