jQuery DOM操作实例
本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
都来加深印象吧，大家都知道jQuery很好使用，因为它简化了javascript代码，更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法属性的详解，看看加深下印象。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body {
/*color: purple;*/
}
.a{
color:red;
}
.b {
color:purple;
}
</style>
<script src="script/jquery-1.4.1.js"></script>
</head>
<body>
<p id="div">class</p>
<div id="all" class="a" >all
<input type="text" value="text" name="text" id="text"/>
<p id="p">p</p>
<ul id="ul">
<li id="a">苹果</li>
<li id="b">脐橙</li>
<li id="c">柚子</li>
</ul>
<div id="d">
<p>内容</p>
</div>
<input type="button" value="鼠标悬浮效果" id="over" />
</div>
<script type="text/javascript">
$().ready(function () {
var p = $("#p");
//alert(p.attr("id"));//attr("属性名")获取属性，attr("属性名","属性值")设置属性
//p.attr("title","title");//设置属性
//p.removeAttr("id");//删除指定元素属性名的元素属性
//$("#all").attr("class", "class");//设置class属性，如此设置属性会替换前面的class属性(class='class')
//$("#all").addClass("class");//设置class属性，在原来的class属性里面追加一个class(class='all class')如果一个class里面有相同的属性(比如color),那么后者会覆盖前者
//$("#all").removeClass("all");//删除指定的class属性
//$("#all").removeClass();//移除class里面所有的class属性
//$("#all").toggle(//交替方法
// function () {
// $(this).css("color","red");
/
例子虽丑功能还俱全呢！
代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body {
/*color: purple;*/
}
.a{
color:red;
}
.b {
color:purple;
}
</style>
<script src="script/jquery-1.4.1.js"></script>
</head>
<body>
<p id="div">class</p>
<div id="all" class="a" >all
<input type="text" value="text" name="text" id="text"/>
<p id="p">p</p>
<ul id="ul">
<li id="a">苹果</li>
<li id="b">脐橙</li>
<li id="c">柚子</li>
</ul>
<div id="d">
<p>内容</p>
</div>
<input type="button" value="鼠标悬浮效果" id="over" />
</div>
<script type="text/javascript">
$().ready(function () {
var p = $("#p");
//alert(p.attr("id"));//attr("属性名")获取属性，attr("属性名","属性值")设置属性
//p.attr("title","title");//设置属性
//p.removeAttr("id");//删除指定元素属性名的元素属性
//$("#all").attr("class", "class");//设置class属性，如此设置属性会替换前面的class属性(class='class')
//$("#all").addClass("class");//设置class属性，在原来的class属性里面追加一个class(class='all class')如果一个class里面有相同的属性(比如color),那么后者会覆盖前者
//$("#all").removeClass("all");//删除指定的class属性
//$("#all").removeClass();//移除class里面所有的class属性
//$("#all").toggle(//交替方法
// function () {
// $(this).css("color","red");
/
- 上一篇：100个不能错过的实用JS自定义函数
- 下一篇：JS父页面与子页面相互传值方法
精彩图集
精彩文章