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 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
vue2中filter()的实现代码
Jul 09 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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的静态方法与普通方法用法实例分析
2019/09/26 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
js实现返回顶部效果
2017/03/10 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
小程序实现多选框功能
2018/10/30 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
一张图带我们入门Python基础教程
2017/02/05 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
在django模板中实现超链接配置
2019/08/21 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
JAVA程序员面试题
2012/10/03 面试题
境外导游求职信
2014/02/27 职场文书
美术课外活动总结
2014/07/08 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript