简写:
$(document).ready(function(){
alert("Hello");
});
可简写为
$(function(){
alert("Hello");
});
解决jQuery和其它库的冲突方法之一:
var $j = jQuery.noConflict();
$j(function(){
alert("Hello");
});
更改样式:
<div id="div1">id为div1</div>
$("#div1").css("background","#bbffaa");
判断某个元素是否存在:
if($("#cr").length > 0) //$("#cr")获取的是对象,不能用if($("#cr"))
alert("存在");
else
alert("不存在");
判断checkbox是否选择:
if($("#ID").attr("checked")==true)
或
if($("#ID").is(":checked"))
获取div内容:
$('#divID').html();
文本框赋值:
$('#ID').val(1);
checkbox全选和全不选:
1、当分别有全选和全不选时
<input name="friendIds" type="checkbox" value="1" />
<input name="friendIds" type="checkbox" value="2" />
<input name="friendIds" type="checkbox" value="3" />
<span id="selectall" style="cursor:pointer">全选</span> |
<span id="deselectall" style="cursor:pointer">全不选</span>
$("#selectall").click(function() {
$("input[type=checkbox][name=friendIds]").attr("checked", true);
//或: $("[name=friendIds]:checkbox").attr("checked", true);
});
$("#deselectall").click(function() {
$("input[type=checkbox][name=friendIds]").attr("checked", false);
//或: $("[name=friendIds]:checkbox").attr("checked", false);
});
2、当只有一个复选框时
<input id="allSel" type="checkbox" />全选/全不选
$("#allSel").click(function() {
$("input[type=checkbox][name=friendIds]").attr("checked", this.checked);
//或: $("[name=friendIds]:checkbox").attr("checked", this.checked);
});
获取checkbox选中的值:
$("#test").click(function() {
var selectVal = "";
$("[name='friendIds']:checked").each(function(){
selectVal += $(this).val() +",";
});
selectVal = selectVal.slice(0,-1);
alert(selectVal);
});
checkbox绑定change事件
$("input[name='applyItem']").change(function(){
if(this.checked){
$("#tb" + this.value).show();
}else{
$("#tb" + this.value).hide();
}
});
checkbox绑定事件2
$(document).ready(function(){
$("input[name='ckb']").change(function(){
calSelTotal();
});
});
function calSelTotal(){
var r = 0;
$("input[name='ckb']:checkbox:checked").each(function(){
r += parseFloat($(this).val());
});
alert(r);
}
表单序列化:
$("#save").click(function(){
jQuery.get("Save.page", jQuery("#form1").serialize(),
function (data, textStatus){ alert("服务器端返回的数据:" + data);}
);
})
post提交:
$("#CommentSave").click(function(){
jQuery.post("Save.page", {activityId:$("#Id").val(), body:$("#body").val()},
function (data, textStatus){
if(data == "1") {
alert("留言成功!");
}
else
alert("留言失败!");
}
);
})
选中下拉框:
$(document).ready(function(){
$("#btn1").click(function(){
$("#sex").val("1");
});
$("#btn2").click(function(){
$("#sex option").each(function(){
if($(this).text()=="女"){
$(this).attr("selected",true);
}
})
});
});
<select id="sex" >
<option value="0">不限</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<br />
<input type="button" id="btn1" value="根据value选中"/>
<br />
<input type="button" id="btn2" value="根据text选中"/>
切换状态:
$("#panel h5.head").toggle(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
})
<div id="panel">
<h5 class="head">标题1</h5>
<div class="content">
内容1
</div>
</div>
表格变色:
.even{background:#fff38f} /*偶数行*/
.odd{background:#ffffee} /*奇数行*/
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
表格当前行点击高亮,并将当前行的单选框设为选中:
$("tbody>tr").click(function(){
$(this)
.addClass("selected")
.siblings().removeClass("selected")
.end() //返回到当前$(this)对象
.find(":radio").attr("checked",true); //将当前行的单选框设为选中
});
此外,当初始化表格时如果默认有单选框被选中,则
$("table :radio:checked").parent().parent().addClass("selected");
复选框控制表格行高亮:
$("tbody>tr").click(function(){
if($(this).hasClass("selected")) {
$(this)
.removeClass("selected")
.find(":checkbox").attr("checked",false);
}else{
$(this)
.addClass("selected")
.find(":checkbox").attr("checked",true);
}
});
也可简化成:
$("tbody>tr").click(function(){
var hasSelected = $(this).hasClass("selected");
$(this)[hasSelected?"removeClass":"addClass"]("selected");
.find(":checkbox").attr("checked",!hasSelected );
});
选项卡效果:
var $div_li = $("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); //获取当前单击的<li>元素在全部<li>元素中的索引
$("div.tab_box > div") //选取子节点
.eq(index).show() //显示<li>元素对应的<div>元素
.siblings().hide(); //隐藏其它同辈的<div>元素
}).hover(function(){ //添加光标滑过效果
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
<ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
获取outerHTML:
jQuery.fn.outerHTML = function () {
return $($('<div></div>').html(this.clone())).html();
}
input输入框回车事件:
$("#txtPassword").bind('keyup', function(event){
if(event.keyCode == "13"){
Login();
}
});