从零开始学 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；鼠标离开事件是：mouseleave2、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="images/img1.jpg"></li>
<li><img src="images/img2.jpg"></li>
<li><img src="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 之 jQuery（五）操作元素其他属性，为元素绑定事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（八）each，多库共存，包装集，插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（三）元素操作，链式编程，动画方法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 CSS3（三）渐变，background属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- 关于弹性布局的 flex-grow的用法和flex-shrink的用法
1.首先 flex-grow设置在子项目上 2.flex-grow默认值为0,如果为值1的时候就会撑满 3.flex-grow还可以给其中的一个子元素单独设置,设置为2,其它的则为1或者2都可以,具体 ...
- centos7 smplayer 安装 安装视频播放器
# yum -y install http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noar ...
- 在桌面创建robotframework Ride的快捷方式启动RIDE
安装后robotframework-ride 后,每次启动时都要在Dos命令下启动 ,下面是创建快捷方式启动操作如下: 1.进入到python的安装目录的/Scripts目录下,找到ride.py文件 ...
- sql server导出大批量数据
使用sqlserver导出数据的时候,如果数据量大于65536那么就要使用xlsx,最大行数为104万 如果导出的时候报错,则需要在本机安装以下程序: https://www.cnblogs.com/ ...
- Netsharp下载及环境搭建
作者:秋时 日期:2014-02-22 转载请保留原文链接 更新日志 2014-02-22 版本4.0 第一次发布 2014-04-19 版本4.01 修复网友提的部分bug,添加Netshar ...
- Android app中存储文件的路径
// 获得缓存文件路径,磁盘空间不足或清除缓存时数据会被删掉,一般存放一些临时文件 // /data/data/<application package>/cache目录 File cac ...
- springMVC学习 十二 拦截器
一 拦截器概述 拦截器技术比较像java web技术中的过滤器技术,都是发送 请求时被拦截器拦截,在控制器的前后添加额外功能.但是和Spring中的Aop技术是由区别的.AOP 在特定方法前后扩充(一 ...
- IIS7部署网站遇到的问题
1.web.config文件中更改配置项时: 因为 IIS 7 采用了更安全的 web.config 管理机制,默认情况下会锁住配置项不允许更改. 运行命令行 %windir%\system32\ ...
- 配置微信jssdk自定义分享
前段时间做这个功能的时候遇到这个问题,之前的话是微信自动抓取界面第一张图,现在微信更新api,必须自行配置,接入jssdk,才能实现该功能. 详细可以查看微信的jssdk文档 微信官方开发者文档 ...
- Oracle通过序列+触发器实现主键自增
接触oracle没多久,在建表的时候发现还不会如何设置主键自动增长.和mysql的设置为AUTO_INCREMENT属性相比,要复杂很多,所以现在记录起来. 我使用的是序列+触发器的方式. 现在已经创 ...