JQuery 学习纪录(２)

JQ基本选择器

jq如何设置样式

css(name,value)
name:样式名 value:样式值

id选择器 ('#id')

$('#three').css('backgroundColor', 'blue')

class选择器 ('.class')

$('.three').css('backgroundColor', 'blue')

// 交集选择器:两个选择器联再一起$('li.gg').css('color', 'purple')// 并集选择器:利用,一次改多个$('#eight,.nine').css('backgroundColor', 'red')<li id="eight">8</li><li class="nine">9</li>        <li class="gg">11</li><li class="gg">12</li>

后代选择器

E F ,利用空白键区隔两个元素，表示在 E 元素内的 F 元素才会套用。

$('#father p').css('color', 'green') // 11,22,2.5,3.5

子选择器

E > F,利用>区隔两个元素，表示在有父子关係的元素才会套用。与后代不同的是 E 及 F 元素之间不能再插入其它的元素，否则就不是父子关係了。

$('#father > p').css('color', 'red') //2.5,3.5

    <div id="father">        <div>            <p>11</p>            <p>22</p>        </div>        <div>2</div>        <p>2.5</p>        <div>3</div>        <p>3.5</p>    </div>

过滤选择器

    // 下标为偶数,过滤    $('li:even').css('backgroundColor', 'red')    // 下标为奇数,过滤    $('li:odd').css('backgroundColor', 'pink')    // 首个,过滤    $('li:first').css('fontSize', '32px')    // 最后一个,过滤    $('li:last').css('fontSize', '10px')    // 下标等于几,过滤    $('li:eq(3)').css('color', 'gray')    // 大于下标为几(不包括自己),过滤    $('li:gt(8)').css('color', 'yellow')    // 小于下标为几(不包括自己),过滤    $('li:lt(1)').css('color', 'yellow')

筛选选择器

    //找指定子元素    $(this).children("ul")    //相当于后代选择器    $(this).find()    //找指定父元素    $(this).parent()    //找指定同辈元素，不包括自己    $(this).siblings()    //下一个同辈元素    $(this).next()    //上一个同辈元素    $(this).prev()    //获取指定下标    $(this).eq()    

链式编程：

在jQuery里面，方法可以一直呼叫下去。

// 指向对应tag=>同辈元素=>下滑=>当前标籤父元素=>除了自己外的同辈元素=>同辈元素下的子元素div=>上滑                $(this).siblings().slideDown(200).parent().siblings().children('div').slideUp(200);//也可以这样写 $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);

index详解:

index()：返回的当前元素在所有同辈元素里面的下标。

    $(function () {        // 如果将目标设为a，将会错误        $('a').click(function () {            console.log($(this).index()); //只会获取0        });        // 因为index会返回当前元素在所有同辈元素中的下标 但a没有同辈元素只有自己        // 所以自然获取不到对应下标        $('li').click(function () {            console.log($(this).index()); //点取 获取对应下标        });    });<ul>    <li><a href="#">连接1</a></li>    <li><a href="#">连接2</a></li>    <li><a href="#">连接3</a></li>    <li><a href="#">连接4</a></li>    <li><a href="#">连接5</a></li>    <li><a href="#">连接6</a></li>    <li><a href="#">连接7</a></li>    <li><a href="#">连接8</a></li>    <li><a href="#">连接9</a></li>    <li><a href="#">连接10</a></li></ul>