白学的小知识[属性操作.节点遍历操作.CSS-DOM操作]

属性操作:
attr() 用来获取与设置元素属性 。

javascript 复制代码
$newNode4.attr("alt");//获取alt属性值
//或
$("img").attr({width:"50px",height:"100px"});//设置width、height属性的值
$("img[id=myimg]").attr("src","img/4.png");

**removeAttr()**用来删除元素的属性。

javascript 复制代码
$newNode2.removeAttr("title");//删除元素的title属性

例:

javascript 复制代码
$(document).ready(function(){
var $newNode4=$("<img src='images/kona.GIF' width='150' height='200'
alt='名侦探柯南画报' /> ");
$newNode4.prependTo($("ul"));
//获取与设置属性
alert($($newNode4).attr("alt"));
$("img").attr({width:"50",heihgt:"100"});
var $newNode2=$("<li title='标题为千与千寻'>千与千寻</li>");
$("ul").append($newNode2);
$($newNode2).removeAttr("title");//删除属性
});

节点遍历操作:
1、遍历子元素: children() 方法可以用来获取元素的所有子元素,注意不是 jquery 对象。

javascript 复制代码
$("body").children();//获取<body>元素的子元素,但不包含子元素的子元素
javascript 复制代码
children([expr])
expr 用以过滤子元素的表达式
$("div").children(".selected")//在每个div中查找 .selected 的类。

2、遍历同辈元素:jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素。

|--------------------|-------------------------|
| next(expr) | 用于获取紧邻匹配元素之后的元素。 |
| prev(rxpr) | 用于获取紧邻匹配元素之前的元素。 |
| slibings(expr) | 用于获取位于匹配元素前面和后面的所以同辈元素。 |

3、遍历前辈元素:parent():获取元素的父级元素.parents(选择器):获取元素的祖先元素,可以加选择器进行筛选。

CSS-DOM****操作:

offset()返回的对象包含两个整型属性:top 和 left。

|-----------------------|------------------------------------------------------|
| 语法 | 功能 |
| css() | 设置或返回匹配元素的样式属性。 |
| height(value) | 设置或返回匹配元素的高度。 |
| width(value) | 设置或返回匹配元素的宽度。 |
| offset(value) | 返回以像素为单位的topleft坐标。此方法仅对可见元素有效。 |

javascript 复制代码
$("#d1").css("background-color","#00F");
$("#d1").height("300");
$("#d1").width("400");
$("#d1").offset({top:"50",left:"100"});
alert($("img").offset().left);
相关推荐
禅思院10 分钟前
大列表性能优化 · 工程实战·四
开发语言·前端·性能优化·前端框架·php·异步加载
rising start10 分钟前
五、Vue3 ref 用法 + Props 完整指南
前端·javascript·vue.js
web打印社区11 分钟前
前端html转换pdf并静默打印pdf最佳实现路径
前端·javascript·vue.js·electron·html
Curvatureflight21 分钟前
浏览器音频采集实践:麦克风权限、降噪、回声消除与 PCM 转换
前端·javascript·音视频·信息与通信·web·pcm
Dontla23 分钟前
HTML实体转义(HTML Entity Escaping)介绍
前端·html
咸鱼翻身小阿橙24 分钟前
高斯模糊降噪/磨皮算法降噪图像
前端·opencv·算法·webpack·c#
ct97826 分钟前
ES6 新特性
前端·vue.js·性能优化
KaMeidebaby32 分钟前
卡梅德生物技术快报|抗原如何自己检测?FAdV-4 重组抗原制备与 ELISA 体系技术调试指南
前端·人工智能·物联网·算法·百度
一拳不是超人35 分钟前
AI 辅助研发时代,如何用“规范 Skill”缩短测试周期
前端·人工智能·代码规范
夜郎king3 小时前
湖南高考天气查询:基于 HTML5 与百度天气 API 实现页面展示
前端·html5·百度天气实践·天气信息可视化