JQuery基础之选择器

最新推荐文章于 2024-07-31 10:39:29 发布

yinjianjing

最新推荐文章于 2024-07-31 10:39:29 发布

阅读量1.2k

点赞数

分类专栏： JQuery 文章标签： jquery div class input javascript border

本文链接：https://blog.csdn.net/yinjianjing/article/details/6283106

版权

JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<html>

<head runat="server">
    <title></title>
    <style type="text/css">
        div, span, p
        {
            width: 140px;
            height: 140px;
            margin: ==5px;
            background: #aaaa;
            border: #0001pxsolid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini
        {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }
        div.hide
        {
            display: none;
        }
        div.test
        {
            display: none;
        }
    </style>

</head>
<body>
    <div class="test">
        <h1>
            在枥蝈蝈枷</h1>
        <h2>
            你个大痒痒</h2>
        <div class="one" id="one">
            id为one，class为one的div
            <div class="mini">
                class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <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="tesst">
                class为mini,title为tesst</div>
        </div>
        <div style="display: none;" class="none">
            style的display为"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>
    </div>
    <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 />
    <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" />test5
    <div>
    </div>
    <br />
    <br />
    下拉列表1:<br />
    <select name="test" multiple="multiple" style="height: 100px">
        <option>浙江</option>
        <option selected="selected">湖南</option>
        <option>北凉</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
    <br />
    <br />
    下拉列表2：<br />
    <select>
        <option>浙江</option>
        <option>湖南</option>
        <option selected="selected">北凉</option>
        <option>天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
    <div>
    </div>
    </form>
</body>
</html>

    //一、基本选择器
    //$('#one').css("background", "#bbffaa");
    //$('.mini').css("background", "#bbffaa");
    //$('div').css("background", "#bbffaa");
    //$('*').css("background", "#bbffaa");
    //二、层次选择器
    //$('span,#two').css("background", "#bbffaa");
    //$('body div').css("background", "#bbffaa"); //〈body>内所有<div>的背景色
    //$('body > div').css("background", "#bbffaa"); //改变body内<div>的子元素背景色
    //$('.one+div').css("background", "#bbffaa"); //改变class为one的下一个<div>元素背景色(等价)==$('.one').next('div');
    //$('#two~div').css("background", "#bbffaa");//改变id为two之后的所有兄弟为div的背景色(等价)==$('#two').nextAll('div');
    //$('#two').siblings('div').css("background", "#bbffaa");//改变id为two的所有兄弟为div的背景色(所有同辈元素)
    //三、过滤选择器
    //1.基本过滤选择器
    //$('div:first').css("background", "#bbffaa"); //改变第一个<div>元素的背景色
    //$('div:last').css("background", "#bbffaa"); //改变最后一个<div>元素的背景色
    //$('div:not(.one)').css("background", "#bbffaa");//改变class不为one的<div>元素背景色
    //$('div:even').css("background", "#bbffaa"); //改变索引值为偶数的<div>元素背景色
    //$('div:odd').css("background", "#bbffaa"); //改变索引值为奇数的<div>元素背景色
    //$('div:eq(3)').css("background", "#bbffaa"); //改变索引值为3的<div>元素背景色
    //$('div:gt(3)').css("background", "#bbffaa"); //改变索引值为大于3的<div>元素背景色
    //$('div:lt(3)').css("background", "#bbffaa"); //改变索引值为小于3的<div>元素背景色
    //$(':header').css("background", "#bbffaa"); //改变所有标题如<h1><h2><h3>等元素背景色
    //????????????$(':animated').css("background", "#bbffaa"); //改变正在执行动画元素的背景色
    //2.内容过滤选择器
    //$('div:contains(di)').css("background", "#bbffaa"); //改变含有文本"di"的<div>元素的背景色
    //$('div:empty').css("background", "#bbffaa"); //改变不包括子元素（文本）的<div>为空元素的背景色
    //????????????$('div:has(mini)').css("background", "#bbffaa");//改变含有class为mini的<div>元素的背景色
    //$('div:parent').css("background", "#bbffaa")//改变含有子元素(文本元素)的背景色
    //3.可见性过滤选择器
    //$('div:visible').css("background", "#ff6500");//改变所有可见的<div>元素背景色
    //$('div:hidden').show(30000);//显示隐藏的<div>元素show()JQuery方法
    //4.属性过滤选择器
    // $('div[title]').css("background", "#bbffaa"); //含有属性title的<div>元素背景色
    // $('div[title=test]').css("background", "#bbffaa"); //含有属性title为test值的<div>元素背景色
    //$('div[title^=te]').css("background", "#bbffaa"); //含有属性title为te开头的<div>元素背景色
    //$('div[title$=est]').css("background", "#bbffaa"); //含有属性title为est结尾的<div>元素背景色
    //$('div[title*=es]').css("background", "#bbffaa"); //含有属性title为含有es值的<div>元素背景色
    //$('div[id][title*=es]').css("background", "#bbffaa);//结合使用
    //5.子元素过滤选择器
    // $('div.one :nth-child(2)').css("background", "#bbffaa"); //class为one的所有div元素(必须空格)
    // $('div.one :frist-child').css("background", "#bbffaa"); //注意空格的区别.第一个
    // $('div.one :last-child').css("background", "#bbffaa"); //注意空格的区别，最后一个
    // $('div.one :only-child').css("background", "#bbffaa"); //注意空格的区别,惟一一个
    //6.表单对象属性过滤器
    // $("#form1 input:enabled").val("这里变化");//改变可用的input元素值
    // $("#form1 input:disabled").val("这里变化"); ; //改变不可用的input元素值
    // alert($("input:checked").length); //;//获取多选框选中的个数
    //alert( $("select :selected").text());//获取下拉框选中的内容
    //四、表单选择器

</script>