上一章开始了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. 两个有序数组求中位数log(m+n)复杂度

    leetcode 第4题 中位数技巧: 对于长度为L的有序数组,它的中位数是(a[ceil((L+1)/2)]+a[floor((L+1)/2)])/2 算法原理: 类似三分法求极值 两个人都前进,谁 ...

  2. windows平台下压缩tar.gz

    windows平台下很多压缩软件(如360压缩)都支持tar.gz的解压,但不支持压缩 推荐一款支持tar.gz压缩的软件7zip 下面介绍可视化和命令行两种操作方式将文件压缩为tar.gz 可视化操 ...

  3. Hibernate 、 Axis2发布

    1. you just compile your web-service into aar file (not include bean files), copy the aar into axis2 ...

  4. ZOJ 3203 Light Bulb （三分查找）

    Light Bulb Time Limit: 1 Second      Memory Limit: 32768 KB Compared to wildleopard's wealthiness, h ...

  5. 关于android闹钟，设置定时提醒的一点心得

    首先在设置提醒之前你需要一个入口,比如说onclick事件中,在此不做赘述. android中使用闹钟进行提醒其实非常简单,你只需要告知系统你想在什么时候被提醒,然后需要一个闹钟的广播接收器,当到你设 ...

  6. JFinal 源码知识点

    1.JFinal中自带json工具类,没必要导入其他的转化包. 使用:setAttr("status","success"), renderJson() 会将所 ...

  7. oc 类的使用

    //定议一个Hello类,用@interface @end包着,并且继承NSObject @interface Hello : NSObject{ int num; }//包在大括号里面是私有的属性, ...

  8. js 重写 bootstrap 样式 alert/confirm 消息窗口

    相信很多人都受够了 alert.confirm 的样子,最近正在用 bootstrap 做项目,顺便封装了一个 bootstrap 样式的消息框. 实现起来很简单,bootstrap 本身就自带了 m ...

  9. JAVA命令行编译及运行

    第一部分:单文件 一.背景目标文件HelloWorld.java package ccdate; public class HelloWorld { public static void main(S ...

  10. c#实现用SQL池（多线程），定时批量执行SQL语句

    在实际项目开发中,业务逻辑层的处理速度往往很快,特别是在开发Socket通信服务的时候,网络传输很快,但是一旦加上数据库操作,性能一落千丈,数据库操作的效率往往成为一个系统整体性能的瓶颈.面对这问题, ...