zoukankan      html  css  js  c++  java
  • jQuery (一)选择器

    上一章开始了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();
    
  • 相关阅读:
    外部排序分析
    C++读写CSV文件
    springMVC之annotation优化
    用Scertify Professional实现代码审查
    flash与字符串:字符串与属性
    题目描述:字符串查找
    matlab遗传算法
    开发传感器应用
    Java 高效 MVC & REST 开发框架 JessMA v3.2.1 即将发布
    基于drools创建自己的关系操作符
  • 原文地址:https://www.cnblogs.com/sunxun/p/8830125.html
Copyright © 2011-2022 走看看