jQuery类选择器用法实例

本文实例讲述了jQuery类选择器用法。分享给大家供大家参考。具体分析如下：

类选择的器匹配具有指定类名的所有元素。

例子:

代码如下:

$(".mydiv")

以上代码选取类名为mydiv的所有元素。
注意:在mydiv前面有一点(.)。
实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>我们</title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(".mydiv").hide();
  })
})
</script>
</head>
<body>
  <div class="mydiv"></div>
  <div class="anotherdiv"></div>
  <button>点击隐藏div元素</button>
</body>
</html>

以上代码可以将类名为mydiv的div元素隐藏。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • Jquery中CSS选择器用法分析

    Jquery中CSS选择器用法分析

    本文实例讲述了Jquery中CSS选择器用法.分享给大家供大家参考.具体如下: jQuery使用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器,现分述如下: 1. 标签选择器 用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$("element"),如$("div"),同getElementByTagName 2. ID选择器 用于获取某个具有id属性的元素,格式如下:$("id"),同get

  • jQuery 选择器详解

    jQuery 选择器详解

    $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElementById()函数. $("tagName")通过标签名来获取元素,用来代替document.getElementsByTagName()函数. jQuery的基本语法是:$(selector).action(), selector即选择器. jQuery选择器的分类 jQuery的选择器基本

  • jQuery中复合属性选择器用法实例

    本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 复制代码 代码如下: [selector1][selector2][selectorN] 参数列表: 参数 描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • jQuery过滤选择器详解

    jQuery过滤选择器详解

    过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以":"开头 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器 基本过滤选择器示例 改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div元素的背景色为 # bbffaa 改变class不为 one的所有 div元素的背景色为 # bbffaa 改变索引值为偶数的 div元素的背景色为 # bbffaa

  • jQuery层级选择器用法分析

    jQuery层级选择器用法分析

    在HTML文档中,每个元素总是处于DOM节点树上的某个位置,文档层次结构中元素之间总是存在于某种层级关系,如父级和子级的关系等. 1. 子元素选择器 用于查找在给定的父元素下查找 这个父元素下的所有子元素,语法格式: 复制代码 代码如下: $("parent->chilid"); 2. 后代元素选择器 用于在给定的祖先元素下匹配所有的后代元素,语法格式: 复制代码 代码如下: $("ancestor descendant"); 3. 紧邻同辈元素选择器 用于匹

  • jQuery元素选择器用法实例

    本文实例讲述了jQuery元素选择器用法.分享给大家供大家参考.具体分析如下: 元素选择器根据元素名称匹配所有的元素. 实例代码: 复制代码 代码如下: $("div") 以上代码匹配所有的div元素. 实例代码: 复制代码 代码如下: <!DOCTYPE html>   <html>   <head>   <meta charset=" utf-8">   <meta name="author&quo

  • jquery选择器之层级过滤选择器详解

    jquery选择器之层级过滤选择器详解

    复制代码 代码如下: $("ancestor descendant"):选取parent元素后所有的child元素$("parent > child"):选取parent元素后所有的直属child元素,何谓"直属",也就是第一级的意思了$("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素$("prev ~ siblings"):选择prev后面

  • jQuery中:selected选择器用法实例

    本文实例讲述了jQuery中:selected选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配被选择的<option>元素. 语法结构: 复制代码 代码如下: $(":selected") 此选择器可以和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $(".myselect :selected").css("color","red") 以上代码能够将类名为myse

  • jQuery大于号(>)选择器的作用解释

    jQuery选择器中的大于号>作用是什么: jQuery灵活多样的选择器是jQuery的优点之一. 下面就介绍一下其中的一个选择器,用大于号表示. 代码示例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>蚂蚁部落</title> <style type="text/css">

  • jQuery中:checked选择器用法实例

    本文实例讲述了jQuery中:checked选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够选取所有选中的复选框或单选按钮. 语法结构: 复制代码 代码如下: $(":checked") 此选择器可以和其他选择器配合使用,比如[类选择器.元素选择器等等. 复制代码 代码如下: $(".myradio:checked").hide(); 以上代码能够将类名为myradio,并且被选中的复选框或者单选框隐藏. 实例代码: 复制代码 代码如下: <!D

随机推荐