上一章开始了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. Linux对包管理阐述

    Centos/Redhat/Fedora的软件包,都是rpm后缀的文件.包管理器rpm(Redhat packages manager)  linux的哲学思想是简单命令解决复杂任务,因此每个软件的功 ...

  2. C++开发安卓、windows下搭建Android NDK开发环境

    1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个 ...

  3. HDUOJ-----1098 Ignatius's puzzle

    Ignatius's puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  4. tkinter Canvas画图片大坑总结

    一.ImportError: cannot import name '_imagingtk' 问题描述 使用tkinter画pillow生成的图片时,在tkinter中抛出此异常. 解决方案 pip ...

  5. 【LeetCode】43. Multiply Strings

    Multiply Strings Given two numbers represented as strings, return multiplication of the numbers as a ...

  6. POJ 2965 The Pilots Brothers' refrigerator （DFS）

    The Pilots Brothers' refrigerator Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15136 ...

  7. C# 中一些类关系的判定方法 C#中关于增强类功能的几种方式 Asp.Net Core 轻松学-多线程之取消令牌

    1.  IsAssignableFrom实例方法 判断一个类或者接口是否继承自另一个指定的类或者接口. public interface IAnimal { } public interface ID ...

  8. JMeter学习笔记--JMeter属性和变量

    JMeter属性统一定义在jmeter.properties文件中.JMeter属性在测试脚本的任何地方都是可见的(全局),通常被用来定义一些JMeter使用的默认值.如属性remote_hosts定 ...

  9. Android SharedPreferences的应用

    //定义 SharedPreferences share = getSharedPreferences("perference",MODE_PRIVATE); //取值 Strin ...

  10. OAF_OAF Framework页面分析（概念）

    20150506 Created By BaoXinjian