Web前端基础(16)jQuery操作HTML属性和元素

属性操作

在jQuery中,用attr()方法来获取和设置元素的属性,用removeAttr()方法来删除元素属性。

attr()方法使用示例

1
2
3
4
5
6
7
var $para = $("p");
//获取
var p_text = $para.attr("title");
//设置
$para.attr("title", "dp2px");
//可以一次修改多个属性
$para.attr({"title":"dp2px", "name":"地痞兔劈叉"});

removeAttr()方法使用示例

1
$("p").removeAttr("title");

样式操作

1
<p class="myclass" title="dp2px">地痞兔劈叉</p>

上面代码中,class其实也是p元素的一个属性,因此可以用attr()方法获得和设置class的内容。jQuery提供了一个addClass()方法来追加class值。提供了removeClass()来移除class值。

1
2
$("p").addClass("another");
$("p").removeClass("another");

jQuery中还提供了一个toggleClass()方法来实现单机切换(添加和删除)操作

另外判断是否有某个class值用方法hasClass()来判断。

设置html文本和值

html()方法

和JavaScript的innerHTML属性类似,我们可以使用html()方法来获取或者设置某个元素的内容。

1
2
alert($("p").html());
$("p").html("<strong>dp2px</strong>")

text()方法

和JavaScript中的innerText属性类似,可以用text()方法设置获取或者某个元素的文本内容。

val()方法

和JavaScript中的value属性类似,可以用val()方法来获取或者设置value属性的值。

遍历节点

children()方法

children只遍历直接子元素

1
2
3
4
var $ulc = $("ul").children();
for(var i = 0; i < $ulc.length; i++){
alert($ulc[i].innerHTML);
}

next()和prev()方法

该方法用于取得匹配元素紧邻的同辈元素

siblings()方法

该方法用于取得匹配元素的前后所有同辈元素(不包含自己)

1
2
3
4
5
6
7
$(".level1 > a").click(function(){
$(this).addClass("current")
.next().show()
//父元素的兄弟元素<a>移除"current"样式
.parent().siblings().children("a").removeClass("current");
return false;
});

closest()方法

该方法用于取得最近的匹配元素,首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

比如,给点击的目标元素的最近的li元素添加颜色,可以这样:

1
2
3
$(document).bind("click", function(e){
$(e.target).closest("li").css("color", "red");
})

closest() parent() parents()区别

方法描述
parent()获得集合中每个匹配元素的父级元素
parents()获得集合中每个匹配元素的祖先元素(多个层级)
closest()从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素

CSS-DOM操作

在jQuery中直接使用css()方法获得和设置元素样式。

1
2
$("p").css("color");
$("p").css("color", "red");

此外在CSS-DOM中关于元素定位常用的方法

offset()方法

获得元素在当前视窗的相对偏移量,只对可见元素有效。

1
2
3
var offset = $("p").offset();
var left = offset.left; //获取左偏移量
var top = offset.top; //获取上偏移量

position()方法

获得定位属性设置为absolue或者relative的父节点的相对偏移。

1
2
3
var position = $("p").position();
var left = position.left;
var top = position.top;

scrollTop()和scrollLeft()

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。也可以出传入一个参数控制滚动条滚动到指定位置。

1
2
3
var $p = $("p");
var scrollTop = $p.scrollTop();
$("textarea").scrollTop(300);

图片提示效果

1
2
3
4
5
6
7
8
<div class="wrap">
<ul>
<li><a href="image/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="image/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="image/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="image/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="image/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="image/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="image/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="image/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
*{margin: 0; padding: 0; border: 0}
ul{
list-style: none;
}

.wrap{
margin:150px;
}

.wrap ul li{
display: inline;
float: left;
margin-right: 10px;
border:1px solid #aaa;
}

#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
$(".wrap").append(tooltip);
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
})
})
})

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Error Exception Extensions File FileProvider Flow Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue.js Web Web前端 Workbench api apk bookmark by关键字 cli compileOnly computed css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge methods mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指令 指针 插件 插值 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 渲染 源码 源码分析 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 绑定 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 脚手架 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×