jQuery的相关DOM操作

最新推荐文章于 2024-04-10 10:06:32 发布

原创最新推荐文章于 2024-04-10 10:06:32 发布 · 452 阅读

CC 4.0 BY-SA版权

本文介绍了JavaScript如何操作DOM元素，包括添加、删除、修改元素属性等，并详细讲解了事件处理的基本概念和常见事件类型，如点击、双击、鼠标移入等。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.pr{filter(alpha(opacity: 50));opacity: 0.5; color: red;}
.pr_two{font-style: italic;color: green;}
</style>
<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
var $lis=$('ul li:gt(1):not(:last)');
$lis.hide();
$lis.css("color","red");
//添加节点
var $li_1=$("<li title='apple'>苹果</li>");
var $li_2=$("<li>芒果</li>");
var $li_3=$("<li>提子</li>");
var $li_4=$("<li>太阳</li>");
$("ul").append($li_1);
$("ul").append($li_2);
$($li_3).appendTo("ul");
$("ul").prepend($li_4);
$("ul li:eq(6)").remove();
//$("ul li").remove("li[title!=apple]");

$("ul li").click(function(){
//$(this).clone().insertAfter("ul");
$(this).clone(true).insertAfter("ul");//clone()传递一个参数“true”表示复制元素的同时也复制了元素中所绑定的事件
});

$("<p>天才猪</p>").replaceAll("li");
$("p").replaceWith("<strong>水果</strong>");
//若在替换前1，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失掉，需重新再新元素上绑定事件
$("strong").wrapAll("<p></p>")
$("p").attr("title","fruit");//设置属性
var $p_title=$("p").attr("title");//获取<p>元素的class属性
//alert($p_title);
$("p").attr("class","pr");
$("p").addClass("pr_two");

//切换:toggleClass的使用
$("#change").click(function(){
$("p").toggleClass("pr_two");
});

//类似javascript的innerHTML
var p_html=$("p").html();
//alert(p_html);

/*类似javascript的innerText
注：javascript中的innerText不能在Firefox下运行，但jQuery的text()支持所有浏览器且对html文档和xml均有效
*/
var p_text=$("p").text();
$("p").text("蛋糕");
//alert(p_text);

return false;//超链接不跳转
})
</script>
</head>
<body>
<ul>
<p>分类</p>
<li><a href="">佳能</a></li>
<li>索尼</li>
<li>华为</li>
<li>佳能</li>
<li>索尼</li>
<li>华为</li>
</ul>
<input type="button" id="change" value="切换">
</body>
</html>