上一章开始了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. mariadb多实例搭建

    测试环境基于centos7.2,腾讯云实验室,学习搭建! https://www.qcloud.com/developer 多实例mysql,能更加理解mysql安装的基本过程!及简单使用... ma ...

  2. kubectl命令使用

    语法:   kubectl  [command]  [TYPE] [NAME]  [flags]   1 command:子命令,用于操作Kubernetes集群资源对象的命令,如create, de ...

  3. C#编写的 8种初级+高级排序方法(转)

    摘自:http://blog.csdn.net/mevin/article/details/6714520 程序代码: view plaincopy to clipboard using System ...

  4. Swift内存管理、weak和unowned以及两者区别（如何使用Swift 中的weak与unowned？）

    Swift 是自动管理内存的,这也就是说,我们不再需要操心内存的申请和分配. 当我们通过初始化创建一个对象时,Swift 会替我们管理和分配内存.而释放的原则遵循了自动引用计数 (ARC) 的规则:当 ...

  5. PLSQL_性能优化效能跟踪工具DBMS_PROFILER分析（案例）

    2014-06-01 Created By BaoXinjian

  6. Android 数据加密算法 Des,Base64详解

    一,DES加密: 首先网上搜索了一个DES加密算法工具类: import java.security.*;import javax.crypto.*; public class DesHelper { ...

  7. Java实现文件自动打包成zip并下载的代码

      import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java. ...

  8. 线程模型、pthread 系列函数 和 简单多线程服务器端程序

    一.线程有3种模型,分别是N:1用户线程模型,1:1核心线程模型和N:M混合线程模型,posix thread属于1:1模型. (一).N:1用户线程模型 “线程实现”建立在“进程控制”机制之上,由用 ...

  9. 平衡二叉树AVL - 插入节点后旋转方法分析

    平衡二叉树 AVL( 发明者为Adel'son-Vel'skii 和 Landis)是一种二叉排序树,其中每一个节点的左子树和右子树的高度差至多等于1. 首先我们知道,当插入一个节点,从此插入点到树根 ...

  10. 关于JavaScript中name的意义冲突

    在昨天的<Javascript权威指南>学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源码贴在以下: <script typ ...