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 相关文章推荐
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
jquery手风琴特效插件
Feb 04 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
jQuery插件制作的实例教程
May 16 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 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 随机生成10位字符代码
2009/03/26 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
浅谈Python中带_的变量或函数命名
2017/12/04 Python
python常用函数与用法示例
2019/07/02 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python创建n行m列数组示例
2019/12/02 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
对python中各个response的使用说明
2020/03/28 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
技校毕业生自荐信范文
2014/03/07 职场文书
毕业自我鉴定书
2014/03/24 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
优秀党员申报材料
2014/12/18 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
导游词欢迎词
2015/02/02 职场文书
2015年教学工作总结
2015/04/02 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书