jQuery - 小鸟系列之DOM操作

最新推荐文章于 2022-05-17 22:07:27 发布

原创最新推荐文章于 2022-05-17 22:07:27 发布 · 494 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery中DOM操作

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了使用jQuery进行网页元素的选择、属性及样式的操作方法。包括如何判断元素状态、添加或删除样式、创建与删除节点等实用技巧。

判断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);				//右偏移