欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

jquery选择器 jqueryhtml 

程序员文章站 2022-03-21 14:20:54
...
jQuery选择器允许对 HTML 元素组或单个元素进行操作

已经存在的之外，它还有一些自定义的选择器

jQuery 中所有选择器都以美元符号开头 $()$('#tt')获取的永远是对象

选择器分为基本选择器 层次选择器 过滤选择器和表单选择器



基本选择器是jQuery中最常用的选择器 也是最简单的选择器 可以通过元素ID class和标签名等来查找

DOM元素 每个id名称只能用一次在一个网页中class允许重复使用 
    #id 根据给的id匹配一个元素  
    .class 根据类名匹配元素  
    element 很具元素名匹配元素  
    *  匹配所有元素  
      
    id选择器（指定id元素）  
      
    将id="one"的元素背景色设置为黑色。（id选择器返单个元素）  
      
    $(document).ready(function () {  
            $('#one').css('background', '#000');  
        });  
      
     class选择器（遍历css类元素）  
      
    将class="cube"的元素背景色设为黑色  
      
    $(document).ready(function () {  
            $('.cube').css('background', '#000');  
        });  
      
     element选择器（遍历html元素）  
      
    将p元素的文字大小设置为12px  
      
    $(document).ready(function () {  
            $('p').css('font-size', '12px');  
        });  
      
     * 选择器（遍历所有元素）  
      
    $(document).ready(function () {  
            // 遍历form下的所有元素，将字体颜色设置为红色  
            $('form *').css('color', '#FF0000');  
        });

层次选择器 可以通过DOM元素之间的层次关系来获取特定的元素
过滤选择器 通过特定的过滤规则筛选吃所需的DOM元素 选择器以：开头

:first  选取第一个元素
:last   x选取最后一个元素

表单选择器可以获取到表单的某个或某类型的元素





利用元素选择器举例子

点击按钮button元素p消失 
    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">   
    <title>高帆</title>   
    <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js">  
    </script>  
    <script>  
    $(document).ready(function(){  
      $("button").click(function(){  
        $("p").hide();  
      });  
    });  
    </script>  
    </head>  
      
    <body>  
    <h2>一个标题</h2>  
    <p>一个段落。</p>  
    <p>一个段落。</p>  
    <button>点我</button>  
    </body>  
    </html>  
      
    /*click 事件 
    当点击元素时，会发生 click 事件*/
相关标签： jquery html

上一篇： jquery语法  

下一篇： java的内部类和外部类用法讲解

推荐阅读