判断checkbox是否被选中
$("#checkboxID").is(":checked")
判断元素是否存在
if ( $("#elementID").length > 0 ){
alert("存在");
}
属性操作
//查找属性节点
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
alert($("p").attr("title")); //显示"选择你最喜欢的水果."
//设置单个的属性值
$("p").attr("title","新设置的属性值");
//一次性为同一个元素设置多个属性
$("p").attr({"title":"your title","name":"test"});
//删除属性
$("p").removeAttr("title");
样式操作
//追加样式
$("p").addClass("another");
//移除样式
$("p").removeClass("another").removeClass("hight");
或者
$("p").removeClass("another hight");
//移除全部样式
$("p").removeClass();
//切换操作(控制元素重复切换显示)
$("#btnsearch").click(function(){
$("#pLike").toggle(function(){
//显示元素
},function(){
//隐藏元素
});
});
//切换样式(如果类名存在则删除它,如果类名不存在则添加它)
$("#btnsearch").click(function(){
$("p").toggleClass("another"); //重复切换类名"another"
});
//判断是否含有某个样式
$("p").hasClass("another");
节点操作
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
var newli1=$("<li title='香蕉'>香蕉</li>");
var newli2=$("<li title='柿子'>柿子</li>");
$("ul").append(newli1).append(newli2);
//类似插入节点方法还有 appendTo(),prepend(),prependTo(),after(),insertAfter(),before(),insertBefore()
//删除节点
$("ul li:eq(1)").remove(); //获取第2个<li>元素节点后,将它从网页中删除
$("ul li").remove("li[title!=菠萝]"); //将<li>元素中属性title不等于"菠萝"的<li>元素删除
//清空节点
$("ul li:eq(1)").empty(); //获取第2个<li>元素节点后,清空此元素里的内容
//复制节点
$("ul li").click(function(){
$(this).clone(true).appendTo("ul"); //true, 表示复制元素的同时复制元素中所绑定的事件
});
//替换节点
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); //p标签被替换掉了
$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); //和上面替换效果一样
//包裹节点
$("p").wrap("<b></b>"); //将所有的元素进行单独包裹
$("p").wrapAll("<b></b>"); //将所有匹配的元素用一个元素来包裹
$("p").wrapInner("<b></b>"); //将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来
设置和获取HTML、文本和值
//获取和设置元素的HTML内容
$("p").html(); //获取<p>元素的HTML代码
$("p").html("<strong>你最不喜欢的水果是?</strong>"); //设置<p>元素的HTML代码
//获取和设置元素中的文本内容
$("p").text(); //获取<p>元素的文本内容
$("p").text("你最不喜欢的水果是?"); //设置<p>元素的文本内容
//获取和设置元素的值
$("#txtID").val();
$("#txtID").val("");
//val() 还可以使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的选项被选中
//select(下拉列表框)
$("#selectID").val("选择2号"); $("#selectID").val(["选择2号","选择3号"]); //选择2号,选择3号为value值
//checkbox(多选框)
$(":checkbox").val(["check2","check3"]); //check2,check3为value值
//radio(单选框)
$(":radio").val(["radio2"]); //radio2为value值
遍历节点
//children()
//用于取得匹配元素的子元素集合 children()方法只考虑子元素而不考虑任何后代元素
var body = $("body").children();
var p = $("p").children();
var ul = ("ul").children();
alert(body.length); //2
alert(p.length); //0
alert(ul.length); //3
for (var i = 0,len = ul.length; i < len; i++) {
alert(ul[i].innerHTML); //循环输出<li>元素的HTML内容
};
//next() //用于取得匹配元素后面紧邻的同辈元素
//从DOM数的结构中可以知道<p>元素的下一个同辈节点是<ul>,因此可以通过next()方法来获取<ul>元素
$("p").next();
//prev() //用于取得匹配元素前面紧邻的同辈元素
$("ul").prev();
//siblings() //用于取得匹配元素前后所有的同辈元素
$("p").siblings();
CSS-DOM操作
$("p").css("color"); //获取<p>元素的样式颜色
$("p").css("color","red"); //设置<p>元素的样式为红色
$("p").css({"fontSize":"30px","backgroundColor":"#888888"}); //设置多个样式属性
//设置透明度
$("p").css("opacity","0.5");
//offset() //获取元素在当前视窗的相对偏移
var offset = $("p").offset();
alert(offset.left); //左偏移
alert(offset.top); //右偏移