69. python高级------jQuery(2)

69. python高级------jQuery(2)

python修炼第二十一天

2019年 4月 20日 晴

1. jQuery选择器的介绍

jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

2. jQuery选择器的种类

• 标签选择器
• 类选择器
• id选择器
• 层级选择器
• 属性选择器

$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签

3.使用length属性来判断标签是否选择成功

length大于0表示选择成功，否则选择失败。

$(function(){
    result = $("div").length;
    alert(result);
});

4.选择集过滤

1. 选择集过滤的介绍

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

2. 选择集过滤的操作

• has(选择器名称)方法，表示选取包含指定选择器的标签
• eq(索引)方法，表示选取指定索引的标签

3.has方法的示例代码:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});
    });
</script>

<div>
    这是第一个div
    <input type="text" id="mytext">
</div>

<div>
    这是第二个div
    <input type="text">
    <input type="button">
</div>

4.eq方法的示例代码:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});

        //  eq方法的使用
        var $div = $("div").eq(1);
        //  设置样式
        $div.css({"background":"yellow"});
    });
</script>

<div>
    这是第一个div
    <input type="text" id="mytext">
</div>

<div>
    这是第二个div
    <input type="text">
    <input type="button">
</div>