美文网首页
jQuery选择器笔记

jQuery选择器笔记

作者: 五更月下琉璃 | 来源:发表于2019-01-08 11:58 被阅读0次

    和css的class选择器、id选择器一样对HTML 的元素组或单个元素进行操作。

    实例:

    $(document).ready(function(){

    $(''button").click(function(){

    $("p").hide();

    });

    });

    意思是点击这个按钮后所有的<p>会被隐藏


    #id选择器,id是唯一的,需要选取唯一的元素的时候通过#id选择器来选取

    $(document).ready(function(){

    $(''button").click(function(){

    $("#test").hide();

    });

    });

    点击后id="test"的元素会被隐藏。


    .class选择器:通过指定的class查找元素

    $(".test")这是语法。

    实例

    $(document).ready(function(){

    $(''button").click(function(){

    $(" .test").hide();

    });

    });

    点击之后所有class="test"的元素被隐藏。


    常用的选取:

    $("xx")    //选取所有元素

    $(this)    //选取当前HTML元素

    $("p.emm")    //选取class为emm的<p>元素

    $("p.first")      //选取第一个<p>元素

    $(div p span)    //层级选择器,div下的p元素中的span元素

    $(div>p)    //父子选择器,div下的所有p元素

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

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

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

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

    $(":button")选取所有type=”button“的<input>元素和<button>元素


    为了方便维护jQuery函数,将其单独放到一个.js文件里会比较好,

    <head>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

    </script>

    <script src="my_jquery_functions.js">

    </script>

    </head>

    相关文章

      网友评论

          本文标题:jQuery选择器笔记

          本文链接:https://www.haomeiwen.com/subject/jmdvrqtx.html