学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>jQuery>>基础教程>>

jQuery 选择器

发布时间:2021-01-08点击:

    jQuery 选择器可以说是jQuery的灵魂了,想要使用jQuery来操作html必须先要使用选择器选择操作对象才可以。

    jQuery 中所有选择器都以美元符号开头:$()。

    一、元素选择器

    jQuery可以根据元素的名称来选择操作对象,比如以div或者p元素名称来笼统选择。

    $("p")
    $("div")
    实例1:点击任意一个p元素,会弹出消息框
    $(document).ready(function(){
      $("p").click(function(){
        alert("hello world");
      });
    });

    二、id选择器

    jQuery的id选择器可以根据元素的id名称来选择,语法如下:

    $("#idname")
    请注意,id的名称前面有一个井号。

    实例使用如下:

    $(document).ready(function(){
      $("idname").click(function(){
        //这里是要实现的语句
      });
    });

    三、class选择器

    jQuery的class选择器是根据元素的class的名称来选择操作对象的。语法如下:

    $(".classname")
    实例如下:
    $(document).ready(function(){
      $("classname").click(function(){
        $(".classname").hide();
      });
    });
    PS:请注意class选择器名称前面有一个点“.”号。

    四、更多技巧

    $("*")  选择所有元素

    $(this)  选择当前元素

    $("p.ceshi") 组合使用,选择p元素下class名称为ceshi的

    $("p:first")  选择第一个p元素

    $("[href]")  选取带有 href 属性的元素

    $("a[target='_blank']")  选取所有 target 属性值等于 "_blank" 的 <a> 元素

    $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素

    $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素$("tr:even") 选取偶数位置的 <tr> 元素

    $("tr:odd")  选取奇数位置的 <tr> 元素

    $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素

    $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素  

赞一个(0)     踩一个(0)    

相关链接