12月20日- JS选择器（2）

一、普通选择器

:first选取第一个元素

<ul>
    <h2>标题</h2>
    <p>段落</p>
    <li>网站首页</li>
    <li>产品中心</li>
    <li>新闻资讯</li>
    <li>文档下载</li>
</ul>
<script>
    $(function () {
        //第一个li元素被选中
        $('li:first').css('color','#090');
    });
</script>

:last选取最后一个元素

<ul>
    <h2>标题</h2>
    <p>段落</p>
    <li>网站首页</li>
    <li>产品中心</li>
    <li>新闻资讯</li>
    <li>文档下载</li>
</ul>
<script>
    $(function () {
        //最后一个li元素被选中
        $('li:last').css('color','#090');
    });
</script>

:eq选取指定下标的元素

<ul>
    <h2>标题</h2>
    <p>段落</p>
    <li>网站首页</li>
    <li>产品中心</li>
    <li>新闻资讯</li>
    <li>文档下载</li>
</ul>
<script>
    $(function () {
        //选取li元素下标为2的元素
        $('li:eq(2)').css('color','#090');
    });
</script>

:gt选取大于某个下标的元素

<div>
    <p>第一行</p>
    <p>第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <p>第五行</p>
</div>
<script>
    $(function () {
        //大于下标2的元素被选中
        $('p:gt(2)').css('color','#090');
    });
</script>

:lt选取小于某个下标的元素

<div>
    <p>第一行</p>
    <p>第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <p>第五行</p>
</div>
<script>
    $(function () {
        //小于下标2的元素被选中
        $('p:gt(2)').css('color','#090');
    });
</script>

[attribute]选取带有指定属性的元素

<div>
    <h2 id="head">标题</h2>
    <p>第一行</p>
    <p id="active">第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <p>第五行</p>
</div>
<script>
    $(function () {
        //选取属性中有id的元素
        $('p[id]').css('color','#090');
    });
</script>

[attribute=value]选取属性值=某个值的元素

<div>
    <h2 class="active">标题</h2>
    <p>第一行</p>
    <p class="active">第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <p>第五行</p>
</div>
<script>
    $(function () {
        //选取class属性值等于active的元素
        $('[class=active]').css('color','#090');
    });
</script>

[attribute!=value]选取属性值!=某个值的元素

<div>
    <h2 class="active">标题</h2>
    <p>第一行</p>
    <p class="active">第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <p>第五行</p>
</div>
<script>
    $(function () {
        //选取class属性值不等于active的元素
        $('p[class!=active]').css('color','#090');
    });
</script>

[attribute^=value]选取属性值以某个值的开头的元素

<div>
    <h2 class="my-header1">标题1</h2>
    <h2 class="my-header2">标题2</h2>
    <h2 class="my-header3">标题3</h2>
    <h2 class="my-header4">标题4</h2>
    <p>第一行</p>
    <p class="active">第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <p>第五行</p>
</div>
<script>
    $(function () {
        //选取class名以my开头的元素
        $('h2[class ^= my]').css('color','#090');
    });
</script>

[attribute$=value]选取属性值以某个值的结尾的元素

<div>
    <h2 class="my-header1">标题1</h2>
    <h2 class="my-header2">标题2</h2>
    <h2 class="my-header3">标题3</h2>
    <h2 class="my-header4">标题4</h2>
    <p>第一行</p>
    <p class="active">第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <p>第五行</p>
</div>
<script>
    $(function () {
        //选取class名以1结尾的元素
        $('h2[class $= 1]').css('color','#090');
    });
</script>

[attribute*=value]选取属性值包含某个值的元素

<div>
    <h2 class="my-header1">标题1</h2>
    <h2 class="my-header2">标题2</h2>
    <h2 class="my-header3">标题3</h2>
    <h2 class="my-header4">标题4</h2>
    <p>第一行</p>
    <p class="active">第二行</p>
    <p>第三行</p>
    <p>第四行</p>
    <p>第五行</p>
</div>
<script>
    $(function () {
        //选取class名包含header的元素
        $('h2[class *= header]').css('color','#090');
    });
</script>

二、表单选择器

input[attribute=value]选取选择器类型为某个值的元素

<form>
    <h3>用户注册</h3>
    <p>
        用户：<input type="text">
    </p>
    <p>
        密码：<input type="password">
    </p>
    <p>
        记住密码：<input type="checkbox" value="1">
    </p>
    <p>
        <button id="btn">提交</button>
    </p>
</form>
<script>
    $(function () {
        $('#btn').click(function () {
           var username = $('input[type=text]').val();
           var passwrod = $('input[type=password]').val();
           console.log(username+'--'+passwrod);
           return false;
        });
    });
</script>

input[name=value]:checked选取输入框name值等于某个值并且选中的元素

<form>
    <h3>用户注册</h3>
    <p>
        用户：<input type="text">
    </p>
    <p>
        密码：<input type="password">
    </p>
    <p>
        记住密码：<input type="checkbox" value="1">
    </p>
     <p>
        性别：<input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="2">女
    </p>
    <p>
        <button id="btn">提交</button>
    </p>
</form>
<script>
    $(function () {
        获取CheckBox和radio的值
        $('#btn').click(function () {
           var checkbox = $('input:checkbox:checked').val();
           var radio = $('input[type=radio]:checked').val();
           //获取radio的值第二种方法
           var radio2 = $('input[name="sex"]:checked').val();
           console.log(checkbox+'--'+radio);
           return false;
        });
    });
</script>

select option:selectedselect 选取选择器

<form>
    你喜欢的城市？
    <p>
        <select name="city" id="">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <button id="btn">提交</button>
    </p>
</form>
<script>
    $(function () {
        $('#btn').click(function () {
           var city = $('select option:selected').val();
           console.log(city);
           return false;
        });
    });
</script>

THE END !

相关文章