从零开始学 Web之jQuery（二）获取和操作元素的属性

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、jQuery获取和操作元素属性

DOM中有很多方式获取元素，比如通过id，通过标签名，通过类名，通过name的值，通过选择器等方式。

在 jQuery 中就只有一种方式：

1、id 选择器

语法：

注意：this 是DOM对象。

this.value = "改变按钮"; // 是DOM的写法，没问题。

PS：jQuery 中使用来设置表单标签的 value 属性。

2、标签选择器

语法：

1、jQuery 中的，如果括号中没有值的话，是获取文本内容；如果有值的话，就是设置文本内容。

2、 $("p") 是获取所有的 p 标签，然后全部设置文本内容，我们并没有循环设置，但是全部的 p 标签的文本内容都改变了，这是 jQuery 内部自动循环了，这就是隐式迭代。

3、类选择器

语法：，注意前面的点。

点击按钮设置应用了 cls 类选择器的标签的边框样式。

PS：jQuery中使用的方式设置标签的样式。

4、并集选择器

语法：，中间使用逗号隔开。

如果上面的 div 有 id 选择器 dv；span 有类选择器 cls；

上面的写法也可以这样写：

5、交集选择器

语法：

标签名 + 类样式的方式。

小总结：jQuery中的一些方法

6、后代（层次）选择器

语法：

选择 div 下面所有 ul 下的所有的 span 标签，不包括 div 下面的 span，必须在 ul 里面。

7、子代选择器

语法：

选择 div 的直接下一代的所有span，不能隔代。

8、兄弟选择器

语法：

选择的是 div后面的所有兄弟标签为 span 的标签。

9、直接兄弟选择器

语法：

选择的是div后面的直接兄弟标签，如果这个直接兄弟为 span 标签则选中，如果为其他标签则不选中。

9.1、案例：各行变色

选择第奇数个 li 标签。

选择第偶数个 li 标签。

9.2、案例：下拉菜单

1、jQuery中鼠标进入事件是：；鼠标离开事件是：

2、css 中的对应的隐藏和显示在 jQuery 中可以使用方法：show() 和 hide();

3、show 和 hide 方法中可以添加参数，数字表示毫秒。表示的显示和隐藏的动画效果。

4、stop 方法表示在显示和隐藏之前先清除之前的动画效果，防止鼠标操作过快，动画的显示跟不上操作。

10、过滤选择器

这类选择器都带有冒号。

用法：

10.1、案例：淘宝精品展示

效果：鼠标进入标签，标签的背景颜色改变，并且切换到对应的图片显示。

1、可以获取当前 li 的索引。

2、选择器：匹配一个给定索引值的元素。

3、隐藏一个元素；显示一个元素。

11、筛选选择器

当 next， prev 系列的方法，如果没写参数，则查找所有的兄弟节点；如果有参数，则查找所有兄弟节点中的指定元素.

欢迎关注

Web前端之巅

念念不忘，必有回响。