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");
//}, function () {
// $(this).css("color","purple");
//});
//$("#div").click(function () { $("#all").toggle();});//用于显示隐藏交替指定的元素
//$("#all").click(function () { $("#div").text("class属性为："+$("#all").attr("class"));});
//$("#all").click(function () {
// $("#all").toggleClass("b")
//});
//alert($("#all").hasClass("all"));//判断是否有此class属性
//alert($("#all").is(".all"));//效果同上
//alert($("#all").html());//同等于InnerHTML效果
//$("#all").html("设置成功");
//alert($("#all").text());//获取所有的文本内容
//$("#all").text("设置成功");
//alert($("[name='text']:eq(0)").val());//同等于value属性(val("设置属性值"))
var newP = $("<p id='newP'>newP</p>");//创建元素，创建单个元素时因(<p/>)加上/
//p.append(newP);//追加元素到p内部后面(<p id='p'>p<p id='newP'>newP</p></p>)
//newP.appendTo(p);//将newP追加到p内部后面
//p.prepend(newP);//追加元素到p内部前面(<p id='p'><p id='newP'>newP</p>p</p>)
//newP.prependTo(p);//将newp追加到p内部前面
//p.after(newP);//追加元素到p元素的后面(<p id='p'>p</p><p id='newP'>newP</p>)
//newP.insertAfter(p);//将newP追加到p元素的后面
//p.before(newP);//追加到p元素的前面
//newP.insertBefore(p);//将newP追加到p元素前面
//苹果 脐橙 柚子 移动属性节点
var a = $("#a");
var c = $("#c");
//c.insertBefore(a);//把c(柚子)元素移动到a(苹果)元素的前面
//a.remove();//删除节点(所有的后代节点也将被删除)
//a.remove();
//c.after(a);//删除元素在添加回去
//$("ul>li").remove("li[id='a']");//根据条件删除指定元素
//a.empty();//清空元素里面的所有
//a.clone().insertAfter(c);//把复制的节点a(苹果)添加到c(柚子)的后面
//$("#d").replaceWith("<span>span</span>");//把id为#d元素里面的所有文本元素替换成指定的内容文本
//$("<span>span</span>").replaceAll("#d");//同上,只是顺序反了
//$("#ul").wrap("<b></b>");//把id为#ul的元素用<b>标签包裹起来(如果假设有多个ul元素的话此方法会将每个ul都用一个<b>包裹起来)
//$("#ul").wrapAll("<b></b>");//把id为#ul的元素用<b>标签包裹起来(如果假设有多个ul元素的话此方法会将所有的ul用一个<b>包裹起来)
//$("#ul").wrapInner("<b></b>")//将指定元素里面的内容用一个<b>标签包裹起来
//alert($("#ul").children().length);//获取所有的子元素(next()是获取下一个同辈节点，prev()获取上一个同辈节点，siblings()获取所有的同辈节点)
//$("#ul").closest("ul").css("color","red");//检索是否与当前元素匹配，如果部匹配则返回到父元素检索,否则返回空
//alert($("#ul").css("height"));//css方法获取的高度可能有auto，且带有px，与css设置相关联，而用height()获取的高度是元素在页面上的实际高度，且不带px，width也是一样
//offset()方法
var ul = $("#ul").offset();
//alert(ul.left);//获取元素离视窗的偏移值(top)
//position()方法
var ul = $("#ul").position();
//alert(ul.left);//获取绝对定位的偏移值
//$("#ul").scrollTop() $("#ul").scrollLeft()获取滚动条距离顶端和左侧的位置距离
//$("#ul").scrollTop(300) $("#ul").scrollLeft(300)设置滚动条距离顶端和左侧的位置距离
//alert(("aabaa").slice(-2));//slice()返回前两个字符串，2为返回索引开始后面的字符串
$("#over").mouseover(function (e) {
var tool = $("<div id='tool'>悬浮的内容</div>");
$("body").append(tool);
tool.css("position", "absolute").css("top", e.pageY+"px").css("left", e.pageX + "px");
//tool.css({ "top": e.pageY + "px", "left": e.pageX + "px" }).show();
//alert(e.pageX+" "+e.pageY);
}).mouseout(function () {
$("#tool").remove();
});
});
</script>
</body>
</html>
相关文章
jQuery二级联动插件：jQuery.selected 一个页面可以引用多个联动效果2012-03-03
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
目前只能算个不完整的脚本，不过一般的仅仅需要表头冻结就可以使用了2010-05-05
下面就为大家带来一篇Jquery针对tr td的一些实用操作方法(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要为大家详细介绍了基于jQuery实现弹幕APP的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
在项目开发中经常会遇到这样的功能，为了防止在Bootstrap中点击按钮多次提交，所以希望点击按钮后禁用按钮。怎么实现此功能呢？今天脚本之家小编给大家分享BootStrap中按钮点击后被禁用按钮的最佳实现方法，非常不错，感兴趣的朋友参考下吧2016-09-09
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
翻页插件有很多种，做出来的效果都非常棒，这篇文章主要介绍了jQuery 翻页组件yunm.pager.js实现div局部刷新的思路，非常不错,需要的朋友可以参考下2016-08-08
jQuery powerFloat万能浮动层下拉层插件使用介绍
支持hover, click, focus以及无事件触发；支持多达12种位置的定位，出界自动调整；支持页面元素加载，Ajax加载，下拉列表，提示层效果，tip类效果等；可自定义装载容器；内置UI不错的装载容器；支持鼠标跟随等。2010-12-12
这篇文章主要介绍了BootStrap按钮标签及基本样式的相关资料，基本样式包括颜色大小方面的知识，对bootstrap按钮相关知识感兴趣的朋友一起看看吧2016-11-11
本文主要介绍了jQuery uploadify文件上传插件的使用方法，uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash，实现了这个多线程上传的功能。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量2012-12-12
最新评论