上一章开始了jQuery的安装，这一张需要开始学习选择器了，不然不进行选择，就无法使用jQuery提供的库的功能不是。

常用的，就列举这么多吧

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery选择器</title>

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

<script>

$(document).ready(function(){

  //################

  //全元素选择器

  $("#hide").click(function(){

    $("*").hide();

  });

  //################

  //元素选择器

  $("#hide").click(function(){

    $("p").hide();

  });

    //################

  //元素下的指定class选择器

  $("#hide_class2").click(function(){

    $("p.init").hide();

  });

      //################

  //P标签下的第一个元素选择器

  $("#hide_first").click(function(){

    $("p:first").hide();

  });

  //################

  //P标签下的最后一个元素选择器

  $("#hide_last").click(function(){

    $("p:last").hide();

  });

  //################

  //id元素选择器

  $("#hide_id").click(function(){

    $("#test").hide();

  });

    //################

	//class元素选择器

  $("#hide_class").click(function(){

    $(".test2").hide();

  });

   $("button").click(function(){

  alert($(this).parent('div').attr("id"));

   });

   $("button").click(function(){

     alert($(this).parent('div').children('#val2').attr("href"));

    });

});

</script>

</head>

<body>

<button id="hide">全元素选择器进行隐藏</button>

<h2>这是一个标题</h2>

<p>P元素-这是一个段落。</p>

<p>P这是另一个段落。</p>

<button id="hide">元素选择器，选择P元素，进行隐藏</button>

<p class="init">P这是另一个段落。</p>

<button id="hide_class2">元素下的指定class选择器,进行隐藏</button>

<p></P>

<button id="hide_first">P标签下的第一个元素,进行隐藏</button>

<p></P>

<button id="hide_last">P标签下的最后一个元素,进行隐藏</button>

<p id="test">id元素-这是一个段落。</p>

<button id="hide_id">id选择器，选择id为test的所有标签，进行隐藏(id不能为复数)</button>

<p class="test2">class元素-这是一个段落。</p>

<p class="test2">class元素元素-这是一个段落。</p>

<p class="test2">class元素元素-这是一个段落。</p>

<button id="hide_class">class选择器，选择class为test2的所有标签，进行隐藏（class可以为复数）</button>

	<h2>这是标题</h2>

	<p>这是一个段落。</p>

	<p>这是另外一个段落。</p>

	<div id = "nihao" >

		<a href = ""  id = "val" >111</a>

		<button>同级获取父节点</button>

	</div>

  <div id = "nihao2" >

	<a href = "www.baidu.com" id = "val2" >111</a>

	<button>获取兄弟节点</button>

  </div>

</body>

</html>

　这里来讲一个同级td的获取，和父级td的获取；

	<table>

        <tr>

            <td>111</td>

			<td>222</td>

			<td>333</td>

			<td>444</td>

			<td>

				<a href="" id="val2">1取值</a>

				<a href="" id="val">取值2</a>

			</td>

        </tr>

    </table>

　　获取方法：

$(document).ready(function(){

   $("#val").click(function(){

   //同节点的第一个

   alert($(this).siblings(':first').text());

    //父节点的同节点的第一个

   alert($(this).parent().siblings(':first').text());

  });

});

　　获取同级节点的第几个节点：

var question = $(my).parent().siblings().eq(2).text();

jQuery （一）选择器的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. HTML 学习笔记 JQuery（选择器）

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  4. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. jquery相对选择器,又叫context选择器，上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  7. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

  8. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  9. jQuery的选择器中的通配符[id^='code'] 【转】

    JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...

  10. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

  1. LoadRunner 检查点函数总结

    今天我来总结一下Loadrunner中的检查点函数,主要介绍两个函数:web_find()和web_reg_find() 这两个函数均用于内容的查找,但两者也有本质的区别,具体介绍如下: 一.web_ ...

  2. 使用Nginx限制同一IP的访问频率

    http://nginx.org/en/docs/http/ngx_http_limit_conn_module.html http://nginx.org/en/docs/http/ngx_http ...

  3. zookeeper单节点和多节点配置

    单机单节点模式 zookeeper解压, 放到 /opt/zookeeper/下, 新建一个latest的软链 $ latest 将 conf/zoo-sample.cfg 重命名为 zoo.cfg, ...

  4. 訪问可能没有定义的data (通过static类型flash.net:FileReference引用)

    今天使用Flex实现了图片预览及其上传的功能,在整个开发过程中遇到了"訪问可能没有定义的data (通过static类型flash.net:FileReference引用)"错误, ...

  5. reindex-maven 私服（nexus）架设以及项目管理中遇到的问题及解决方案(updating)

    ---    用maven 的过程中 大问题小问题实在是不少 ,就不一篇文章一篇文章的写了,干脆写在一起 ---- -------  nexus 加索引 点击Administration菜单下面的Re ...

  6. HDUOJ-----（1251）统计难题

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others) Total Subm ...

  7. 如何用python轻松破解wifi密码( 源码 )

    摘要: 我得说明下这个东西一点都不高端,甚至看起来有点糟糕.而且用的是单线程~,因为过几天要搬家了,于是.. 环境准备 python2.7 凑合的linux 差不多的无线网卡 pywifi模块 弱口令 ...

  8. Windows下面安装和配置MySQL(5.6.20)

    1.首先到http://dev.mysql.com/ 上下载windows版mysql5.6免安装zip包.然后将zip包解压到D:\mysql-5.6.20-winx64下. 2.复制mysql下的 ...

  9. Linux进程学习 - 孤儿进程和守护进程

    孤儿进程和守护进程 通过前面的学习我们了解了如何通过fork()函数和vfork()函数来创建一个进程.现在 我们继续深入来学习两个特殊的进程:孤儿进程和守护进程 一.孤儿进程 1.什么是 孤儿进程如 ...

  10. stm32 usart的几种通信模式

    一 USART 通用同步异步收发器(USART)提供了一种灵活的方法与使用工业标准NRZ异步串行数据格式的外部设备之间进行全双工数据交换. USART支持同步单向通信和半双工单线通信,也支持LIN(局 ...