从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......
- github:https://github.com/Daotin/Web
- 微信公众号:Web前端之巅
- 博客园:http://www.cnblogs.com/lvonve/
- CSDN:https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、jQuery获取和操作元素属性
DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。
在 jQuery 中就只有一种方式:$("选择器")
1、id 选择器
语法: $("#id选择器的值")
$(function () {// 页面加载$("#btn").click(function () {console.log($(this).val());$(this).val("改变按钮");// this.value = "改变按钮";});
});
注意:this 是DOM对象。
this.value = "改变按钮"; // 是DOM的写法,没问题。
PS:jQuery 中使用
jQuery对象.val("内容")
来设置表单标签的 value 属性。
2、标签选择器
语法: $("标签名")
$(function () {// 页面加载$("#btn").click(function () {$("p").text("桃花依旧笑春风");});
});
1、jQuery 中的
.text()
,如果括号中没有值的话,是获取文本内容;如果有值的话,就是设置文本内容。2、 $("p") 是获取所有的 p 标签,然后全部设置文本内容,我们并没有循环设置,但是全部的 p 标签的文本内容都改变了,这是 jQuery 内部自动循环了,这就是隐式迭代。
3、类选择器
语法:$(".类型选择器")
,注意前面的点。
$(function () { // 页面加载$("#btn").click(function () {$(".cls").css("border", "1px solid red");});
});
点击按钮设置应用了 cls 类选择器的标签的边框样式。
PS:jQuery中使用
jQuery对象.css("属性":"值");
的方式设置标签的样式。
4、并集选择器
语法:$("div,p,span")
,中间使用逗号隔开。
如果上面的 div 有 id 选择器 dv;span 有类选择器 cls;
上面的写法也可以这样写:
$("#dv, p, .cls")
5、交集选择器
语法:$("div.cls")
标签名 + 类样式的方式。
小总结:jQuery中的一些方法
val(); // 获取或设置表单标签中的 value 值。
css(); // 设置元素的 css 样式属性值。
text(); // 获取或设置标签的文本内容----相当于DOM中的innerText
html(); // 获取或设置标签的html内容----相当于DOM中的innerHTML
6、后代(层次)选择器
语法:$("div ul span")
选择 div 下面所有 ul 下的所有的 span 标签,不包括 div 下面的 span,必须在 ul 里面。
7、子代选择器
语法:$("div>span")
选择 div 的直接下一代的所有span,不能隔代。
8、兄弟选择器
语法:$("div~span")
选择的是 div 后面的所有兄弟标签为 span 的标签。
9、直接兄弟选择器
语法:$("div+span")
选择的是div 后面的直接兄弟标签,如果这个直接兄弟为 span 标签则选中,如果为其他标签则不选中。
9.1、案例:各行变色
// body 主要内容
<input type="button" value="按钮" id="btn">
<div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>
</div>// jQuery 代码
$(function () {$("#btn").click(function () {$("div li:odd").css("backgroundColor", "red");$("div li:even").css("backgroundColor", "yellow");});
});
:odd
选择第奇数个 li 标签。
:even
选择第偶数个 li 标签。
9.2、案例:下拉菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0 ;padding: 0;}li{list-style-type: none;}a {text-decoration: none;}#dv>ul>li {float: left;margin: 0 10px;width: 50px;height: 20px;background-color: pink;}#dv>ul>li ul {display: none;}#dv>ul>li li {background-color: #ff486b;}</style><script src="jquery-1.12.4.js"></script><script>$(function () {// 鼠标进入$("#dv>ul>li").mouseenter(function () {$(this).children("ul").stop().show(200);});// 鼠标离开$("#dv>ul>li").mouseleave(function () {$(this).children("ul").stop().hide(200);});});</script></head>
<body><!--<input type="button" value="按钮" id="btn">-->
<div id="dv"><ul><li><a href="javascript:void(0);">周杰伦</a><ul><li>1</li><li>2</li><li>3</li></ul></li><li><a href="javascript:void(0);">林俊杰</a><ul><li>1</li><li>2</li><li>3</li></ul></li><li><a href="javascript:void(0);">陈奕迅</a><ul><li>1</li><li>2</li><li>3</li></ul></li></ul>
</div></body>
</html>
1、jQuery中鼠标进入事件是:
mouseenter
;鼠标离开事件是:mouseleave
2、css 中的
display:none|block
对应的隐藏和显示在 jQuery 中可以使用方法:show() 和 hide();3、show 和 hide 方法中可以添加参数,数字表示毫秒。表示的显示和隐藏的动画效果。
4、stop 方法表示在显示和隐藏之前先清除之前的动画效果,防止鼠标操作过快,动画的显示跟不上操作。
10、过滤选择器
这类选择器都带有冒号。
:eq(index) // 选择一个给定索引值的元素
:odd // 选择索引为奇数的元素
:even // 选择索引为偶数的元素
用法:
$("li:eq(2)") // 匹配li元素中,索引为2的元素
$("li:odd") // 匹配li元素中,索引为奇数的元素
$("li:even") // 匹配li元素中,索引为偶数的元素
10.1、案例:淘宝精品展示
效果:鼠标进入标签,标签的背景颜色改变,并且切换到对应的图片显示。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}#dv {margin-left: 500px;margin-top: 200px;}.ul1 li, .ul3 li {width: 50px;height: 30px;/*background-color: #24bcff;*/border: 1px solid red;text-align: center;margin-top: -1px;}a {text-decoration: none;}ul {float: left;}img {width: 200px;height: 93px;}.ul2 {width: 200px;height: 93px;overflow: hidden;}.ul2 li {float: left;}</style>
</head>
<body><div id="dv"><ul class="ul1"><li><a href="javascript:void(0);">img1</a></li><li><a href="javascript:void(0);">img2</a></li><li><a href="javascript:void(0);">img3</a></li></ul><ul class="ul2"><li><img src="data:images/img1.jpg"></li><li><img src="data:images/img2.jpg"></li><li><img src="data:images/img3.jpg"></li></ul>
</div><script src="common.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<script>$(function () {// 左li 鼠标进入$(".ul1>li").mouseenter(function () {$(this).css("backgroundColor", "purple");// console.log($(this).index());// 隐藏所有的图片$(".ul2>li").hide();// 显示丢应的图片$(".ul2>li:eq("+ $(this).index() +")").show();});// 左li 鼠标离开$(".ul1>li").mouseleave(function () {$(this).css("backgroundColor", "");});});</script>
</body>
</html>
1、
$(this).index()
可以获取当前 li 的索引。2、
:eq()
选择器:匹配一个给定索引值的元素。3、
.hide()
隐藏一个元素;.show()
显示一个元素。
11、筛选选择器
名称 | 用法 | 描述 |
---|---|---|
children(选择器) | $("ul").children("li"); | (子类选择器)相当于$("ul>li") |
find(选择器) | $("ul").find("li"); | (后代选择器)相当于$("ul li") |
eq(index) | $("li").eq(2) | 相当于 $("li:eq(2)"); |
parent() | $("#first").parent(); | 查找父亲 |
next() | $("li").next("li"); | 查找下一个兄弟节点 |
prev() | $("li").prev("li"); | 查找上一个兄弟节点 |
nextAll() | $("li").nextAll("li"); | 查找后面所有的兄弟节点 |
prevAll() | $("li").prevAll("li"); | 查找上面所有的兄弟节点 |
siblings(选择器) | $("#first").siblings("li"); | 查找除自身之外的所有兄弟节点 |
当 next, prev 系列的方法,如果没写参数,则查找所有的兄弟节点;如果有参数,则查找所有兄弟节点中的指定元素。
从零开始学 Web 之 jQuery(二)获取和操作元素的属性相关推荐
- 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新-- github:https://github.com/Daotin/Web 微信公众号:前端队长 博客园:http://ww ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- [乐意黎转载]从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
- jQuery框架学习第四天:使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- [转帖]jQuery框架学习第四天:使用jQuery操作元素的属性与样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
- 从零开始学 Web 之 JS 高级(二)原型链,原型的继承
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 BOM(四)client系列
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 ES6(三)ES6基础语法一
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax(七)跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
最新文章
- 学习笔记:cache 和spring cache 技术(1)
- Android NDK开发篇(四):Java与原生代码通信(原生方法声明与定义与数据类型)
- tensorflow分布式运行
- 点云质量评估_点云配准中常用的评价指标
- python控制代码使用的gpu
- C语言必背代码大全(2021整理)
- 超图iServer rest服务之最佳路径分析
- 欧拉角到方向余弦矩阵
- ps曲线操作(转载)
- Linux项目实训一
- Photoshop序列号
- php利用phpqrcode生成二维码,并将二维码盖在一张图上实现美化
- 计算机保密dss是啥,什么是DSS?
- NVIDIA BERT推理解决方案Faster Transformer开源了!
- 【技巧】windows剪切板
- EOS合约账户名称及作用
- [C语言] 平淡的日子里泛起光 初阶最后的战役
- 保研文书——个人陈述模板
- Windows以服务方式运行Java程序
- 华为董事长梁华:数字化步入新阶段,商业创新大多由ICT技术驱动
热门文章
- Atitit 常见集合的操作 dsl表达式 选择器 多属性条件检索 ,排序等 目录 1. Ognl 集合操作	1 2. /bookmarksHtmlEverythingIndexPrj/src/Li
- atitti 提升稳定性的艺术之程序代码级别稳定性的艺术 attialx著 艾提拉著 s420.docx 1. 前言	1 2. 为什么会发生稳定性问题	1 2.1. 单点故障(单点故障率较高)	1
- Atitit 身份证 证件编码规范
- lassAtitit事件代理机制原理 基于css class的事件代理的事件代理titi
- Atitit 常用比较复杂的图像滤镜 attilax大总结
- Atitit.cateService分类管理新特性与设计文档说明v1
- 基金公司产品管理系统搭建与推广
- Julia: 关于Array排序函数sortslices
- (转)300家平台倒闭,BAT纷纷离场,到底什么模式已经全军覆没?
- (转)智能投顾只能这么搞!美国证监会发15页指南