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 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
几行js代码实现自适应
Feb 24 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
我所理解的JavaScript中的this指向
Sep 04 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 文件上传模型,支持多文件上传
2009/08/13 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python与php实现分割文件代码
2017/03/06 Python
python编程实现归并排序
2017/04/14 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
药店主任岗位责任制
2014/02/10 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
防灾减灾活动总结
2014/08/30 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
检讨书怎么写?
2019/06/21 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
MySQL存储过程及语法详解
2022/08/05 MySQL