JQuery入门 0x1 jQuery选择器

最新推荐文章于 2023-03-31 10:56:11 发布

cellinlab

最新推荐文章于 2023-03-31 10:56:11 发布

阅读量213

点赞数

分类专栏： JavaScript 前端基础 jQuery 文章标签： jQuery选择器 jQuery过滤选择器 jQuery层次选择器 jQuery属性选择器 jQuery表单选择器

本文链接：https://blog.csdn.net/funkstill/article/details/88911291

版权

前端基础同时被 3 个专栏收录

167 篇文章 0 订阅

订阅专栏

JavaScript

152 篇文章 2 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery选择器</title>
        <style>
            div,span,p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            div.hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>jQuery选择器</h1>
        <div class="one" id="one">
            id为one，class为one
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one，title为test
            <div class="mini" title="other">class为mini，title为other</div>
            <div class="mini" title="test">class为mini，title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="test">class为mini，title为test</div>
        </div>
        <div style="display:none;" class="one">
            style的dispaly为"none"的div
        </div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div <input type="hidden" size="8">
        </div>
        <span id="mover">正在执行动画的span</span>
        
    </body>
    <script src="./script/jquery-1.7.1.js"></script>
    <script>
        //基本选择器
        //$("#one").css("background","#bbffaa");
        //$(".mini").css("background","#bbffaa");
        //$("div").css("background","#bbffaa");
        //$("*").css("background","#bbffaa");
        //$("span,#two").css("background","yellow");

        //层次选择器
        //$("body div").css("background","#bbffaa");
        //$("body>div").css("background","#bbffaa");
        //$(".one+div").css("background","#bbffaa");
        //$("#two~div").css("background","#bbffaa");

        //过滤选择器
        //基本过滤选择器
        //$("div:first").css("background","#bbffaa");
        //$("div:last").css("background","#bbffaa");
        //$("div:not(.one)").css("background","#bbffaa");
        //$("div:even").css("background","#bbffaa");
        //$("div:odd").css("background","#bbffaa");
        //$("div:eq(3)").css("background","#bbffaa");
        //$("div:gt(3)").css("background","#bbffaa");
        //$("div:lt(3)").css("background","#bbffaa");
        //$(":header").css("background","#bbffaa");
        //$(":animated").css("background","#bbffaa");
        //$(":focus").css("background","#bbffaa");
        //内容过滤选择器
        //$("div:contains(di)").css("background","#bbffaa");
        //$("div:empty").css("background","#bbffaa");
        //$("div:has('.mini')").css("background","#bbffaa");
        //$("div:parent").css("background","#bbffaa");
        //可见性过滤器
        //$("div:visible").css("background","#ff6500");
        //$("div:hidden").show(3000);
        //属性过滤选择器
        //$("div[title]").css("background","#bbffaa");
        //$("div[title=test]").css("background","#bbffaa");
        //$("div[title!=test]").css("background","#bbffaa");
        //$("div[title^=te]").css("background","#bbffaa");
        //$("div[title$=est]").css("background","#bbffaa");
        //$("div[title*=es]").css("background","#bbffaa");
        //$("div[title=test]").css("background","#bbffaa");
        //子元素过滤选择器
        //$("div.one :nth-child(2)").css("background","#bbffaa");
        //$("div.one :first-child").css("background","#bbffaa");
        //$("div.one :last-child").css("background","#bbffaa");
        //$("div.one :only-child").css("background","#bbffaa");
        //表单对象属性选择过滤器

    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery选择器-表单对象属性选择过滤器</title>
    </head>
    <body>
        <form id="form1" action="#">
            可用元素：<input name="add" value="可用文本框"><br>
            不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br>
            可用元素：<input name="che" value="可用文本框"><br>
            不可用元素：<input name="name" disabled="disabled" value="不可用文本框"><br>
            <br>
            多选框：<br>
            <input type="checkbox" name="newsletter" checked="checked" value="test1">test1
            <input type="checkbox" name="newsletter" value="test2">test2
            <input type="checkbox" name="newsletter" value="test3">test3
            <input type="checkbox" name="newsletter" checked="checked" value="test4">test4
            <input type="checkbox" name="newsletter" value="test5">
            <div></div>
            <br><br>
            下拉列表1：<br>
            <select name="test" multiple="multiple" style="height:10px">
                <option>浙江</option>
                <option selected="selected">天津</option>
                <option>广州</option>
                <option>湖北</option>
            </select>
            <br><br>
            下拉列表2：<br>
            <select name="test2">
                <option>浙江</option>
                <option>湖南</option>
                <option selected="selected">北京</option>
                <option>天津</option>
                <option>广州</option>
                <option>湖北</option>
            </select>
            <div></div>
        </form>
        <script src="./script/jquery-1.7.1.js"></script>
        <script>
            $("#form1 input:enabled").val("这里变化了！");
            $("#form1 input:disabled").val("这里不能变化了！");
            var l = $("input:checked").length;
            var str = $("select :selected").text();
            console.log(l+"- -"+str);
        </script>
    </body>
</html>

cellinlab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery入门 0x1 jQuery选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jQuery选择器</title> <style> div,span,p { ...
复制链接

扫一扫

专栏目录