jQuery选择器

最新推荐文章于 2024-05-23 17:56:03 发布

weixin_51297617

最新推荐文章于 2024-05-23 17:56:03 发布

阅读量39

点赞数

文章标签： jquery css html

本文链接：https://blog.csdn.net/weixin_51297617/article/details/120660615

版权

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器（ CSS 选择器），除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有

元素:
jQuery 语法
jQuery 事件
jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。
元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有

元素:

$("p")

实例

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

实例

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

实例

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

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

在这里插入图片描述参考：https://www.runoob.com/jquery/jquery-selectors.html

独立文件中使用 jQuery 函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时，会将函数直接添加到部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

实例

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

实践总结：

1.通过 $(" : b u t t o n ") 可以选取所有 t y p e = " b u t t o n " 的 < i n p u t > 元素和 < b u t t o n > 元素，如果去掉冒号，$ (“button”)只能获取元素。$(":button") 为 jQuery 中表单选择器（貌似与过滤选择器同级），旨在选择所有的按钮，所以会找到、元素；而 $(“button”) 则为基本选择器，旨在选择为的标签。

<p id="test1">点进这里测试  <b>button</b></p>
<p id="test2">点进这里测试 <b>:button</b></p>
<button>Button 按钮</button>
<input type="button" value="Input 按钮">

2.关于 : 和 [] 这两个符号的理解
：可以理解为种类的意思，如：p:first，p 的种类为第一个。
[] 很自然的可以理解为属性的意思，如：[href] 选取带有 href 属性的元素。
: 即为 jQuery 的过滤选择器，语法类似于 css 中的伪类选择器；其过滤选择器大概可以分为基本过滤（p:first 之类）、内容过滤（:empty）、子元素过滤(:first-child)和属性过滤 [href] 选择器。
3.扩展

$("#id", ".class")  复合选择器
$(div p span)       层级选择器 //div下的p元素中的span元素
$(div>p)            父子选择器 //div下的所有p元素
$(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p)            兄弟选择器  //div后面的所有p元素(同级别)
$(.p:last)          类选择器 加 过滤选择器  第一个和最后一个（first 或者 last）
$("#mytable td:odd")      层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)")    索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.baidu.com']")  属性选择器
$("p:contains(test)")        // 内容过滤选择器，包含text内容的p元素
$(":emtyp")        //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden")       //所有隐藏元素 visible 
$("input:enabled") //选取所有启用的表单元素
$(":disabled")     //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素

weixin_51297617

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery选择器

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

扫一扫