上一章开始了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. 笨鸟先飞之Java（一）--使用struts2框架实现文件上传

    无论是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个经常使用功能会有非常多种解决方案,可是struts2的框架却能给我们一个比較简单的方式,以下就一起来看吧: ...

  2. coding云（git）远程创建版本库和上传文件

    1.创建项目不讲,注意勾选 README选项 2.本地需要首先安装 windows 的git库,https://gitforwindows.org/ 3.进入www目录下,直接将coding云上的项目 ...

  3. jQuery写缓存之：sessionStorage的运用，配合PHP将不同tab页的数据写入后台

    JS(jQuery)写缓存之:sessionStorage的运用: 结果就是讲存储的DOM对象value传到后台PHP,进行foreach(){} 解析JSON成二维数组 示例页面:http://ww ...

  4. 将Memcached作为服务自动启动

    1.最简单的做法 通常:启动Memcache的服务器端的命令为: /usr/local/bin/memcached -d -m 256 -u root -l 127.0.0.1 -p 12000 -c ...

  5. 理解ROC和AUC

    分类器各种各样,如何评价这些分类器的性能呢?(这里只考虑二元分类器,分类器的输出为概率值) 方法一:概率定义法 从正样本中随机选取元素记为x,从负样本中随机选取元素记为y,x的置信度大于y的概率 计算 ...

  6. JAvaScript：JS数组元素去重的方法

    在做javascript开发的时候,经常会遇到数组元素重复的问题,而javascript Array又没有直接提供方法解决此问题,还需要自己去实现. 方案一: 思路: 1.构建一个新的数组存放结果: ...

  7. 使用EditPlus技巧，提高工作效率(附英文版、自动完成文件、语法文件下载)

    http://www.cnblogs.com/JustinYoung/archive/2008/01/14/editplus-skills.html

  8. C#搞工控的一些代码

    首先工控项目都会用到: using System.Runtime.InteropServices; 1.字节转化为单精度浮点数 2.单精度转成字节 3.使用结构体 4.使用动态链接库 5.ASCCII ...

  9. spring 4.0下集成webservice

    该教程使用的项目可参见: Intellij Idea下搭建基于Spring+SpringMvc+MyBatis的WebApi接口架构 具体源码请参见GitHub: https://github.com ...

  10. （三）RocketMq入门之独立线程处理业务

    一.示例代码 这段代码实现了一个独立线程监听在一个特殊的消息队列上,一旦收到消息就处理并发送给MQ,然后推送给所有的消费者. import com.alibaba.rocketmq.client.ex ...