锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)


Posted in Javascript onMarch 23, 2010

12 设置和获取HTML、文本和值

$("selector").html()
获取html代码
$("selector").html(html)
设置html代码(替换标签中内容),html()方法不可用于XML文档
$("selector").text()
获取纯文本内容
$("selector").text(text)
设置文本内容(替换标签中内容),text()方法可以用于XML文档
$("selector").val()
获取元素的值
$("selector").val(value)
设置元素的值,(外:defaultValue属性可获得html默认属性,P80例:if (txt_value==this.defaultValue){...})
$("select").val("option")
设置select控件的选中状态,类似有:$(":checkbox").val("check1","check2"); $(":radio").val("radio1");
(外:可以使用attr()方法实现同样功能,如:$("select option:eq(1)").attr("selected",true); $("[value=radio2]:radio").attr("checked",true);)

13 遍历节点

$("selector").children()
获取匹配元素的子元素集合,以数组返回(只考虑子元素,不考虑子元素以下的后代元素)
引申:循环取得每个子元素html内容的方法:

<script>var $ul = $("ul").children();for (var i=0 len=$ul.length; i<len; i++){alert($ul[i].innerHTML);}</script>$("selector").next()
获取匹配元素后面紧邻的同辈元素,以数组返回
$("selector").prev()
获取匹配元素前面紧邻的同辈元素,以数组返回
$("selector").siblings()
获取匹配元素前后所有的同辈元素,以数组返回
P88使用此方法的例子:

<script>$(".has_children").click(function(){$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();})</script>$("selector").closest()
获取最近的匹配元素,首先检查当前元素是否匹配,如匹配则返回元素本身,否则逐级向上查找父元素知道匹配为止,如果找不到则返回空的jQuery对象
P89例
<script>$(document).bind("click",function(e){$(e.target).closest("li").css("color","red");})</script>

其他遍历节点的方法(find(), filter(), nextAll(), prevAll(), parent(), parents()等)本书从略

14 CSS-DOM操作

$("selector").css("property")
获取元素样式的property属性的值
$("selector").css("property","value")
设置元素样式的property属性的值
$("selector").css({"property1":"value1","property2":"value2"})
同时设置元素多个样式属性的值。注:例:"font-size" = fontSize (无引号的驼峰写法)
$("selector").css("opacity","value")
设置透明度(支持所有浏览器),value值(0 ~ 1)
$("selector").css("height")
获取元素高度的height值
$("selector").height()
获得元素当前计算的实际高度值,肯定不会返回auto之类,还可以用来获取window和document的高度
$("selector").height(100)
设置高度,默认单位px,如要使用其他单位需要传递字符串如.height(10em)
$("selector").width()
获取元素当前计算的实际宽度值
$(selector).offset()
获取元素在当前视窗的相对偏移,返回对象包含两个属性,top和left,此方法只对可见元素有效。
P91获取<p>元素的偏移量的例子

<script>var offset = $("p").offset();var left = offset.left();var top = offset.top();</script>$("selector").position()
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,返回对象包含两个属性,top和left。例:
<script>var position = $("p").position();var left = position.left;var top = position.top;</script>$("selector").scrollTop()
获取元素的滚动条距顶端的距离,如:var scrollTop = $("selector").scrollTop();
$("selector").scrollLeft()
获取元素的滚动条距左侧的距离,如:var scrollLeft = $("selector").scrollLeft();
控制元素滚动条滚动到的位置,可在上述两种方法中传递参数,如:
$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);

Javascript 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 Javascript
javascript 多浏览器 事件大全
Mar 23 #Javascript
jQuery $.each的用法说明
Mar 22 #Javascript
javascript 用原型继承来实现对象系统
Mar 22 #Javascript
用js实现的自定义的对话框的实现代码
Mar 21 #Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 #Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 #Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 #Javascript
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
javascript第一课
2007/02/27 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
轻松学习Javascript闭包函数
2015/12/15 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python3.6编写的单元测试示例
2019/08/17 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
中国梦我的梦演讲稿
2014/04/23 职场文书
初中学校对照检查材料
2014/08/19 职场文书
党员检讨书
2014/10/13 职场文书
学习保证书怎么写
2015/02/26 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python