这篇博客详细介绍了jQuery中如何进行DOM操作，包括替换节点、包裹节点、属性操作和样式操作。在替换节点部分，展示了如何将`<p>`元素替换为`<strong>`元素。接着，通过实例讲解了包裹节点的不同用法。在属性操作中，演示了设置、获取和删除`<p>`元素`title`属性的方法。最后，详细阐述了如何改变和检查元素的样式，如设置、添加、删除class以及判断元素是否具有特定class。
6、替换节点
<body>
<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
<scripttype="text/javascript">
$(function(){
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
// 同样的实现：$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
});
</script>
7、包裹节点
实例一：
<body><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
<ul><li title='苹果'>苹果</li><li title='橘子'>橘子</li><li title='菠萝'>菠萝</li></ul>
</body>
<script type="text/javascript">
$(function(){$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来});
</script>
实例二：
<body><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong><ul><li title='苹果'>苹果</li><li title='橘子'>橘子</li><li title='菠萝'>菠萝</li></ul>
</body>
<script type="text/javascript">
$(function(){$("strong").wrap("<b></b>");});
</script>
实例三：
<script type="text/javascript">
$(function(){$("strong").wrapAll("<b></b>");});
</script>
实例四：
<script type="text/javascript">
$(function(){$("strong").wrapInner("<b></b>");});
</script>
8、属性操作
<body>
<input type="button"value="设置<p>元素的属性'title'"/>
<inputtype="button" value="获取<p>元素的属性'title'"/>
<inputtype="button" value="删除<p>元素的属性'title'"/>
<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
<scripttype="text/javascript">
$(function(){
//设置<p>元素的属性'title'
$("input:eq(0)").click(function(){
$("p").attr("title","选择你最喜欢的水果.");
});
//获取<p>元素的属性'title'
$("input:eq(1)").click(function(){
alert( $("p").attr("title") );
});
//删除<p>元素的属性'title'
$("input:eq(2)").click(function(){
$("p").removeAttr("title");
});
});
</script>
9、样式操作
<body>
<inputtype="button" value="输出class类"/>
<inputtype="button" value="设置class类"/>
<inputtype="button" value="追加class类"/>
<inputtype="button" value="删除全部class类"/>
<inputtype="button" value="删除指定class类"/>
<inputtype="button" value="重复切换class类"/>
<inputtype="button" value="判断元素是否含有某个class类"/>
<pclass="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
<scripttype="text/javascript">
$(function(){
//获取样式
$("input:eq(0)").click(function(){
alert( $("p").attr("class") );
});
//设置样式
$("input:eq(1)").click(function(){
$("p").attr("class","high");
});
//追加样式
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
//删除全部样式
$("input:eq(3)").click(function(){
$("p").removeClass();
});
//删除指定样式
$("input:eq(4)").click(function(){
$("p").removeClass("high");
});
//重复切换样式
$("input:eq(5)").click(function(){
$("p").toggleClass("another");
});
//判断元素是否含有某样式
$("input:eq(6)").click(function(){
alert( $("p").hasClass("another") )
alert( $("p").is(".another") )
});
});
</script>
10、设置和获取HTML,文本和值
<body><input type="button" value="获取<p>元素的HTML代码"/><input type="button" value="获取<p>元素的文本"/><input type="button" value="设置<p>元素的HTML代码"/><input type="button" value="设置<p>元素的文本"/><input type="button" value="设置<p>元素的文本(带HTML)"/><input type="button" value="获取按钮的value值"/><input type="button" value="设置按钮的value值"/>
<p title="选择你最喜欢的水果." ><strong>你最喜欢的水果是?</strong></p><ul><li title='苹果'>苹果</li><li title='橘子'>橘子</li><li title='菠萝'>菠萝</li></ul></body>
实例一：
<script type="text/javascript">
$(function(){//获取<p>元素的HTML代码$("input:eq(0)").click(function(){alert( $("p").html() );});//获取<p>元素的文本$("input:eq(1)").click(function(){alert( $("p").text() );});//设置<p>元素的HTML代码$("input:eq(2)").click(function(){$("p").html("<strong>你最喜欢的水果是?</strong>");});//设置<p>元素的文本$("input:eq(3)").click(function(){$("p").text("你最喜欢的水果是?");});//设置<p>元素的文本$("input:eq(4)").click(function(){$("p").text("<strong>你最喜欢的水果是?</strong>");});//获取按钮的value值$("input:eq(5)").click(function(){alert( $(this).val() );});//设置按钮的value值$("input:eq(6)").click(function(){$(this).val("我被点击了!");});});
</script>
实例二：
<body><input type="text" id="address" value="请输入邮箱地址"/> <br/><br/><input type="text" id="password" value="请输入邮箱密码"/> <br/><br/><input type="button" value="登陆"/></body>
<script type="text/javascript">
$(function(){$("#address").focus(function(){ // 地址框获得鼠标焦点var txt_value = $(this).val(); // 得到当前文本框的值if(txt_value=="请输入邮箱地址"){$(this).val(""); // 如果符合条件，则清空文本框内容}});$("#address").blur(function(){ // 地址框失去鼠标焦点var txt_value = $(this).val(); // 得到当前文本框的值if(txt_value==""){$(this).val("请输入邮箱地址");// 如果符合条件，则设置内容}})
$("#password").focus(function(){var txt_value = $(this).val();if(txt_value=="请输入邮箱密码"){$(this).val("");}});$("#password").blur(function(){var txt_value = $(this).val();if(txt_value==""){$(this).val("请输入邮箱密码");}})});
</script>
实例三：
<script type="text/javascript">
$(function(){$("#address").focus(function(){ // 地址框获得鼠标焦点var txt_value = $(this).val(); // 得到当前文本框的值if(txt_value==this.defaultValue){$(this).val(""); // 如果符合条件，则清空文本框内容}
});$("#address").blur(function(){ // 地址框失去鼠标焦点var txt_value = $(this).val(); // 得到当前文本框的值if(txt_value==""){$(this).val(this.defaultValue);// 如果符合条件，则设置内容}})
$("#password").focus(function(){var txt_value = $(this).val();if(txt_value==this.defaultValue){$(this).val("");}
});
$("#password").blur(function(){var txt_value = $(this).val();if(txt_value==""){$(this).val(this.defaultValue);}
})});</script>
实例四：
<body><input type="button" value="设置单选下拉框选中"/><input type="button" value="设置多选下拉框选中"/><input type="button" value="设置单选框和多选框选中"/>
<br/><br/>
<select id="single"><option>选择1号</option><option>选择2号</option><option>选择3号</option></select>
<select id="multiple" multiple="multiple" style="height:120px;"><option selected="selected">选择1号</option><option>选择2号</option><option>选择3号</option><option>选择4号</option><option selected="selected">选择5号</option></select>
<br/><br/>
<input type="checkbox" value="check1"/> 多选1<input type="checkbox" value="check2"/> 多选2<input type="checkbox" value="check3"/> 多选3<input type="checkbox" value="check4"/> 多选4
<br/>
<input type="radio" value="radio1"/> 单选1<input type="radio" value="radio2"/> 单选2<input type="radio" value="radio3"/> 单选3</body>
<script type="text/javascript">$(function(){//设置单选下拉框选中$("input:eq(0)").click(function(){$("#single").val("选择2号");});
//设置多选下拉框选中$("input:eq(1)").click(function(){$("#multiple").val(["选择2号", "选择3号"]);});
//设置单选框和多选框选中$("input:eq(2)").click(function(){$(":checkbox").val(["check2","check3"]);$(":radio").val(["radio2"]);$(":radio").val(["radio2"]);
});
});</script>
实例五：
<body><input type="button" value="设置单选下拉框选中"/><input type="button" value="设置多选下拉框选中"/><input type="button" value="设置单选框和多选框选中"/><br/><br/><select id="single"><option>选择1号</option><option>选择2号</option><option>选择3号</option></select><select id="multiple" multiple="multiple" style="height:120px;"><option selected="selected">选择1号</option><option>选择2号</option><option>选择3号</option><option>选择4号</option><option selected="selected">选择5号</option></select><br/><br/><input type="checkbox" value="check1"/> 多选1<input type="checkbox" value="check2"/> 多选2<input type="checkbox" value="check3"/> 多选3<input type="checkbox" value="check4"/> 多选4<br/><input type="radio" value="radio1" name="a"/> 单选1<input type="radio" value="radio2" name="a"/> 单选2<input type="radio" value="radio3" name="a"/> 单选3</body><script type="text/javascript">
$(function(){//设置单选下拉框选中$("input:eq(0)").click(function(){$("#single option").removeAttr("selected"); //移除属性selected$("#single option:eq(1)").attr("selected",true); //设置属性selected});//设置多选下拉框选中$("input:eq(1)").click(function(){$("#multiple option").removeAttr("selected"); //移除属性selected$("#multiple option:eq(2)").attr("selected",true);//设置属性selected$("#multiple option:eq(3)").attr("selected",true);//设置属性selected});//设置单选框和多选框选中$("input:eq(2)").click(function(){$(":checkbox").removeAttr("checked"); //移除属性checked$(":radio").removeAttr("checked"); //移除属性checked$("[value=check2]:checkbox").attr("checked",true);//设置属性checked$("[value=check3]:checkbox").attr("checked",true);//设置属性checked$("[value=radio2]:radio").attr("checked",true);//设置属性checked
});});
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
