jquery的dom操作
jquery的强项在于对DOM的操作,在一定程度上大大简化了js的编写,它可以分为xml dom、html dom和css dom,下面简单的代码段演示一些基本的操作,属性样式的改变以及对结点的各种操作。
【1】样式属性
l 增删换判样式/属性
//给id 为first的元素添加 .one 样式
$('#b1').click(
function(){
$('#first').attr("class","one");
}
);
//追加样式: addClass()
$('#b2').click(
function(){
$('#first').addClass("one");
}
);
//移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
$('#b3').click(
function(){
$('#first').removeClass("one");
}
);
//切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
$('#b4').click(
function(){
$('#first').toggleClass("one");
}
);
//判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
$('#b5').click(
function(){
window.alert($('#first').hasClass("one"));
}
);
【2】结点操作
l 内部插入/外部插入结点
//添加重庆li到上海下(使用dom的传统方法)
function test1(){
varmyli=document.createElement("li");
myli.setAttribute("id","cq");
myli.setAttribute("name","chongqing");
myli.innerHTML="重庆";
document.getElementById("city").appendChild(myli);
}
//添加重庆li到 上海下面
$('#b1').click(
function(){
//方法一:一步到位法
$myli=("<liid='cq' name='chongqing'>重庆</li>");
//先使用内部最后插入
//$('#city').append($myli);
//如果使用appendTo则应该这样写
//$myli.prependTo($('#city'));
//方法二:逐步添加我们的dom对象
$myli=$("<li></li>");
$myli.text("重庆");
$myli.attr("id","cq");
$myli.attr("name","chongqing");
//把$myli添加到上海后
$('#city').append($myli);
}
);
//添加成都li到 北京前面
$('#b2').click(
function(){
//方法一:一步到位法
$myli=("<liid='cd' name='chengdu'>成都</li>");
//先使用内部前面插入
$('#city').prepend($myli);
//$myli.prependTo($('#city'));
}
);
//添加成都li到 北京和重庆之间
//使用外部插入法
$('#b4').click(
function(){
//一步到位法
//$("#bj").after("<liid='cd' name='chengdu'>成都</li>");
$("<liid='cd' name='chengdu'>成都</li>").insertAfter($('#bj'));
}
);
//添加成都li到 吉林前面
$('#b5').click(
function(){
//一步到位法
var$jl=$("<li id='cd' name='chengdu'>成都</li>");
//$("#jl").before($jl);
$jl.insertBefore($('#jl'));
}
);
//使用内部插入法把反恐li移动天津后
$('#b3').click(
function(){
$('#city').append($('#fk'));
}
);
l 移动结点
JQuery当找不到需要的标记是也不会报错,但是js却是会报错的
//使用外部插入法把反恐li移动天津后
$('#b2').click(
function(){
$("#tj").after($('#fk'));
}
);
l 删除结点
//删除所有p
$('#b1').click(
function(){
$("p").remove();
}
);
//删除上海这个li
$('#b3').click(
function(){
$("#sh").remove();
}
);
l 清空结点
//清空所有p
$('#b2').click(
function(){
$("p").empty();
}
);
l 复制结点
$("p").click(
function(){
window.alert($(this).text());
}
);
//不克隆段落p的事件
//$("p").clone().insertAfter($('button'));
//连同段落p的事件一起克隆
$("p").clone(true).insertAfter($('button'));
l 替换结点
//将段落p替换掉
//$('p').replaceWith("<inputtype='button' value='按钮'><br/>");
$("<ahref='#'>sohu</a>").replaceAll($("p"));
l 遍历结点
取得匹配元素的所有子元素:children()。该方法只考虑子元素而不考虑任何后代元素。
取得匹配元素后面紧邻的同辈元素的集合:next();
取得匹配元素前面紧邻的同辈元素的集合:prev();
取得匹配元素前后所有的同辈元素:siblings()
//查找所有子元素(class为one的div的所有子元素)
$("#b2").click(
function(){
$(".one").children().each(
function(){
window.alert($(this).text());
}
);
//指定获取第一个子孩子
//window.alert($(".one").children().eq(0).text());
}
);
//查找.one后面的所有同辈元素
$("#b3").click(
function(){
$(".one").nextAll().each(
function(){
window.alert($(this).text());
}
);
//获取.one后面第二个兄弟
//window.alert($(".one").nextAll().eq(1).text());
}
);
//查找.one后面的所有同辈元素,取一个用next(),多个nextAll()
$("#b3").click(
function(){
$(".one").nextAll().each(
function(){
window.alert($(this).text());
}
);
//获取.one后面第二个兄弟
//window.alert($(".one").nextAll().eq(1).text());
}
);
//查找.one前面的所有同辈元素,取一个用prev(),多个prevAll()
$("#b4").click(
function(){
$(".one").prevAll().each(
function(){
window.alert($(this).text());
}
);
//获取.one前面第1个兄弟
//window.alert($(".one").prevAll().eq(0).text());
//window.alert($(".one").prev().text());
}
);
//获取所有的同辈元素
$("#b5").click(
function(){
$(".one").siblings().each(
function(){
window.alert($(this).text());
}
);
}
);