jQuery元素选择器用法实例

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

元素选择器根据元素名称匹配所有的元素。
实例代码:

代码如下:

$("div")

以上代码匹配所有的div元素。
实例代码:

代码如下:

<!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;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").hide();
  })
})
</script>
</head>
<body>
<div></div>
<button>点击隐藏div元素</button>
</body>
</html>

在以上代码中，当点击按钮的时候能够将div元素隐藏。

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

赞 (0)

相关推荐

  • jQuery层次选择器选择元素使用介绍

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代.父子.相邻.兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.

  • jquery子元素过滤选择器使用示例

    复制代码 代码如下: :nth-child('索引值')//获取指定元素下的某个子元素的位置,索引从1开始: //偶数行 //$('li:nth-child(even)').addClass('class1'); //奇数行 //$('li:nth-child(odd)').addClass('class1'); //第一行 //$('li:nth-child(1)').addClass('class1'); //$('li:first-child').addClass('class1'); /

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • 原生的html元素选择器类似jquery选择器

    做前端,需要选择元素,虽说有jquery和各大js库已经帮我造好了轮子,但我想试试自己实现一个,正好项目也不忙,正好加入自己的js文件中,下面是实现代码.用$g("#content .op")这种格式就可以调用,和jquery $()的参数一样: function $findChilds(parentNode, text) { //如果不传入父节点的话,默认为body if(parentNode == undefined) parentNode = document.body; var

  • jQuery选择id属性带有点符号元素的方法

    本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: $("#address\\.street").text("Enter this field"); 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-typ

  • jQuery基本选择器选择元素使用介绍

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.基本选择器:是jQuery中使用最频繁的选择器,它由元素Id.Class.元素名.多个选择符组成,通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择

  • jquery通过closest选择器修改上级元素的方法

    本文实例讲述了jquery通过closest选择器修改上级元素的方法.分享给大家供大家参考.具体如下: 这段代码演示了jQuery通过closest选择器获取上一级的元素,然后修改其text()内容. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>

  • jQuery实现复选框成对选择及对应取消的方法

    本文实例讲述了jQuery实现复选框成对选择及对应取消的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • jQuery元素选择器用法实例

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

  • jQuery类选择器用法实例

    本文实例讲述了jQuery类选择器用法.分享给大家供大家参考.具体分析如下: 类选择的器匹配具有指定类名的所有元素. 例子: 复制代码 代码如下: $(".mydiv") 以上代码选取类名为mydiv的所有元素. 注意:在mydiv前面有一点(.). 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

  • jQuery后代选择器用法实例

    本文实例讲述了jQuery后代选择器用法.分享给大家供大家参考.具体分析如下: 后代选择器匹配给定的祖先元素下用以匹配的所有后代元素. 点击选择器可以查阅参考手册中所有jQuery选择器. 代码实例如下: 复制代码 代码如下: $(".mydiv span") 以上代码匹配类名mydiv元素包含的span元素.两个选择器之间要用空格分隔. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta

  • jQuery分组选择器用法实例

    本文实例讲述了jQuery分组选择器用法.分享给大家供大家参考.具体分析如下: 分组选择器将每一个选择器匹配到的元素合并后一起返回,能够对它们进行相同的操作. 实例代码: 复制代码 代码如下: $(".mydiv ,span") 以上代码能够匹配类名为mydiv的元素和所有的span元素.两个选择器之间要用逗号分割. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu

  • jQuery属性选择器用法实例分析

    本文实例讲述了jQuery属性选择器用法.分享给大家供大家参考,具体如下: 属性选择器 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute) <input id="txtUsername" type="text" value="qiyisoft" name="email" style="display:block" /> 在jQuery中,除了直接使用id和class属性作

  • jQuery位置选择器用法实例分析

    本文实例讲述了jQuery位置选择器用法.分享给大家供大家参考,具体如下: 位置选择器 jQuery同样也允许我们利用元素所在位置来获取所需组件 位置选择器语法如下: "$基本选择器:位置选择器" 位置选择器种类 常用位置选择器的用法 选择第一个 格式:$("selector:first"); 选择最后一个 格式:$("selector:last") 选择奇数 格式:$("selector:odd") 偶数行 格式:$(&qu

  • jQuery层叠选择器用法实例分析

    本文实例讲述了jQuery层叠选择器用法.分享给大家供大家参考,具体如下: 层叠选择器 如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等,那么层叠选择器是一个非常好的选择. 位置选择器语法如下: "基准元素 层叠符号 目标元素" 层叠选择器的用法 后代选择器 格式:$("ancestor descendant") 子选择器 格式:$("parent>child") 相邻选择器 格式:$(&quo

  • jQuery元素选择器实例代码

    本文实例为大家分享了jQuery元素选择器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 9

  • jQuery层次选择器用法示例

    jQuery层次选择器用法示例

    本文实例讲述了jQuery层次选择器用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • jQuery属性选择器用法示例

    jQuery属性选择器用法示例

    本文实例讲述了jQuery属性选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

随机推荐