jquery 操作DOM的基本用法分享


Posted in Javascript onApril 05, 2012

例子展示:
jquery代码:

<script language="javascript"> 
$(document).ready(function(){ 
alert($("ul li:eq(1)").text()); //选取第二个li的值 
alert($("p").attr("title")); //选取p的title属性的值 
//追加元素 
$('ul').append("<li title='香蕉'>香蕉</li>").append("<li title='雪梨'>雪梨</li>"); 
//前面追加 
$('ul').prepend("<li title='欠佳'>前加</li>"); 
//后面追加 
$('ul').after("<li title='后加'>后加</li>"); 
//在p后面添加 
$("<b> 你好</b>").insertAfter("p"); 
//在p前面添加 
$("<b> 你好</b>").insertBefore("p"); 
//删除节点 
$("ul :eq(1)").remove(); 
// 清空值 
$("ul :eq(2)").empty(); 
//复制节点 
$("ul li").click(function(){ 
$(this).clone(true).appendTo("ul");//true可有可无,有表示在复制的时候同时把绑定的事件也复制上 
}); 
//替换节点 
$("p[title=test]").replaceWith("<strong>你最喜欢的水果是?</strong>"); 
//$("<strong>你最喜欢的水果是?</strong>").replaceAll("P"); 
//包裹事件 
$("strong").wrap("<b></b>") 
//属性操作 
$("P").attr({"title":"test","name":"pName"}); //添加属性 
$("p").removeAttr("title"); //移除属性 
//样式的操作 
/* 
添加样式: $("p").addClass("hight"); 
已出样式: $("p").removeClass("highr"); 
切换样式: $("p").toggleClass("another"); 
是否有样式: $("p").hasCLass("higth"); 
*/ 
alert($("p").html()); //获取值 html()类似于javascript中的innerHTML属性 
$("p").html("change"); //改变值 
alert($("p").text()); //获取值 text()类似于javascript中的innerTEXT属性 
$("p").text("again change"); //改变值 
$("#name").focus(function(){ 
if($("#name").val()=="请输入用户名"){ 
$(this).val(""); 
} 
}).blur(function(){ 
if($("#name").val()==""){ 
$(this).val("请输入用户名"); 
} 
}); 
$("#password").focus(function(){ 
$("#tip").hide(); 
}).blur(function(){ 
if($("#password").val()==""){ 
$("#tip").show(200); 
} 
}); 
$("#submit").click(function(){ 
if($("#name").val()=="请输入用户名"||$("#password").val()==""){ 
$("#name").css("background","yellow"); 
$("#password").css("background","yellow"); 
} 
}); 
$("#single").val("选择2"); 
$("#multiple").val(["选择2号","选择3号"]); 
$(":checkbox").val(["check2","check3"]); 
$(":radio").val(["radio1"]); 
alert("careful!"); 
$("#single :eq(2)").attr("selected",true); 
$("[value=radio2]:radio").attr("checked",true); 
//遍历节点 children()方法 
$("#btnShow").click(function(){ 
for(var i=0;i<$("body").children().length;i++){ 
$("#body").append($("body").children()[i].innerHTML); 
} 
}); 
//next()方法,取得紧挨p后面的同辈的所有元素 
alert($("ul li").next().text()); 
//prev()方法,取得紧挨匹配前面的同辈的一个元素 
alert($("li[title=菠萝]").prev().text()); 
//siblings()方法,获取匹配元素所有的同辈元素 
for(var i=0;i<$("p").siblings().length;i++){ 
$("#subling").append($("p").siblings()[i].innerHTML); 
} 
//closest()方法,取得最近的匹配元素 
$(document).bind("click",function(e){ 
$(e.target).closest("li").css("color","red"); 
}); 
//css的操作 
$("p").css({"fontSize":"40px","background":"yellow"}); 
//offset()方法,获取元素在当前视窗的相对偏移量,返回对象为top和left两个属性 
alert("top="+$("P").offset().top +";"+"left="+$("P").offset().left); 
//position()方法,获取元素相对于最近的position样式设置为relative或者absolute 
//的祖父节点的相对偏移,返回top和left两个属性 
alert("top="+$("P").position().top +";"+"left="+$("P").position().left); 
//scrollTop() and scrollLest()方法返回滚动条距顶端和左端的距离 
alert("scrolltop="+$("P").scrollTop() +";"+"scrollleft="+$("P").scrollLeft()); 
}); 
</script>

html代码:
<body> 
<p >test</p> 
<p id="p" title="test">你喜欢的苹果是?</p> 
<ul> 
<li title="苹果">苹果</li> 
<li title="橘子">橘子</li> 
<li title="菠萝">菠萝</li> 
</ul> 
<input type="button" id="show" value="show" /> 
<br/><br/><br/> 
<form id="form1" action="#"> 
<div > 
<input type="text" id="name" value="请输入用户名"><br/> 
<input type="password" id="password" value=""> <br/> 
<div id="tip" style="display:none"><font color="red">请输入密码</font></div><br/> 
<input type="button" id="submit" value="提交"/> 
</div> 
</form> 
<br/> 
<form id="from2" action="#"> 
<select id="single"> 
<option value="选择1号">选择1号</option> 
<option value="选择2号">选择2号</option> 
<option value="选择2号">选择3号</option> 
</select> 
<select id="multiple" multiple="multiple" style="height:120px"> 
<option selected="selected">选择1号</option> 
<option value="选择2号">选择2号</option> 
<option value="选择3号">选择3号</option> 
<option value="选择4号">选择4号</option> 
<option selected="selected">选择5号</option> 
</select> 
<input type="checkbox" value="check1"/>多选1 
<input type="checkbox" value="check2"/>多选2 
<input type="checkbox" value="check3"/>多选3 
<input type="checkbox" value="check4"/>多选4 
<input type="radio" name="radio" value="radio1"/> 单选1 
<input type="radio" name="radio" value="radio2"/> 单选2 
<input type="radio" name="radio" value="radio3"/> 单选3 
<br/> 
<input type="button" id="btnShow" value="显示body"/> 
<br/><div id="body"></div> <div id="subling"></div> 
</form> 
</script> 
</body>
Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
jquery 插件学习(三)
Aug 06 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 #Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 #Javascript
jQuery之$(document).ready()使用介绍
Apr 05 #Javascript
javascript淡入淡出效果的实现思路
Mar 31 #Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 #Javascript
一个关于javascript匿名函数的问题分析
Mar 30 #Javascript
JavaScript 基础篇(一)
Mar 30 #Javascript
You might like
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python语言中with as的用法使用详解
2018/02/23 Python
深入浅析python with语句简介
2018/04/11 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
竞选班长的演讲稿
2014/04/24 职场文书
环境卫生倡议书
2014/08/29 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
Python字符串常规操作小结
2022/04/03 Python
Python序列化模块JSON与Pickle
2022/06/05 Python