jQuery 基础选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

1.元素选择器

jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素：

$("p")

实例

用户点击按钮后，所有 <p> 元素都隐藏：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>元素选择器</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").hide();});});</script>
</head>
<body><h2>这是一个标题</h2><p>这是一个段落。</p><p>这是另一个段落。</p><button>点我</button>
</body>
</html>

图1：

图2-单击“点我”按钮后的样式：

2.id选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：

$("#test")

实例
当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>id选择器</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#test").hide();});});</script>
</head>
<body><h2>这是一个标题</h2><p>这是一个段落</p><p id="test">这是另外一个段落</p><button>点我</button>
</body>
</html>

图1：

图2-单击“点我”按钮后的样式：

class 类选择器

jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：。

$(".test")

实例
用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>.class类选择器</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>$(document).ready(function(){$("button").click(function(){$(".test").hide();});});
</script>
</head>
<body><h2 class="test">这是一个标题</h2><p class="test">这是一个段落。</p><p>这是另外一个段落。</p><button>点我</button>
</body>
</html>

图1：

图2-单击“点我”按钮后的样式：

4、*全选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>*全选择器</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>$(document).ready(function(){$("button").click(function(){$("*").hide();});});
</script>
</head>
<body><h2>这是标题</h2><p>这是一个段落。</p><p>这是另外一个段落。</p><button>点我</button>
</body>
</html>

图1：

图2-单击“点我”按钮后的样式：

jQuery教程03-jQuery 元素、id、.class和*全选择器相关推荐

html图片点击局部放大,jQuery教程 css+jQuery实现图片局部放大预览
本篇教程介绍了jQuery教程 css+jQuery实现图片局部放大预览,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 今天有时间开始动手,使用css+jquer ...
php jquery教程下载,jquery怎么下载和引用
下载和引用jquery的方法:首先进入jQuery的官网:然后找到jQuery官网首页右侧的下载按钮:接着点击进入jQuery的下载页面并进行下载:最后用script标签引入jquery即可. 本教程 ...
jQuery 教程01——jQuery安装
1.简介 jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. jQuery ...
jQuery教程10-表单元素选择器
无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery中专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素. 表单选择器的具体方法描述: 注意: 除了input筛 ...
JavaWeb开发前端语言：jQuery（一） jQuery核心函数、jQuery对象、jQuery选择器、以及jQuery元素筛选
JavaWeb开发前端语言:jQuery 1.jQuery介绍 1.1 jQuery的初使用 1.2 使用jQuery的常用问题解析 2. jQuery核心函数介绍 3.区分jQuery对象与dom ...
jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
jQuery菜鸟教程03
jQuery 遍历什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...
jQuery获取带点的id元素
一般jQuery获取某个id为elem元素,只需用$('#elem')就行了,但是如果id中不小心包括了'.' ,那么我吗就会发现这时候jQuery就不能获取到这个元素了.但是使用dom原生的getE ...
html页面forEach用法,jQuery教程之使用模板动态添加html元素，相当于jstl里的foreach...
本篇文章探讨了jQuery教程之使用模板动态添加html元素,相当于jstl里的foreach,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 1.开发的时候有时候要循 ...

jQuery教程03-jQuery 元素、id、.class和*全选择器

jQuery 基础选择器

1.元素选择器

2.id选择器

4、*全选择器

jQuery教程03-jQuery 元素、id、.class和*全选择器相关推荐

最新文章

热门文章