jQuery的初识和选择器

一级目录## jQuery初识

一、什么是jQuery

jQuery是一个JavaScript函数库

二、怎么使用

直接引用

三、用法

jQuery() === $()
获取的元素是jQuery对象

四、jQuery 入口函数与 JavaScript 入口函数的区别

1、js入口函数只能有一个，jQuery入口函数可以有多个
2、js入口函数DOM加载（图片，链接 js css）完成后执行,jQuery入口函数DOM结构加载完成后执行
3、jQuery入口函数可以简写

五、DOM对象与jQuery对象相互转换

DOM对象
document.getElementById(‘box’)
DOM对象转换为jQuery对象
($(document.getElementById(‘box’)))
jQuery对象
$(‘#box’)
jQuery对象转换为DOM对象
$(‘#box’)[0]

jQuery选择器

基本选择器 层级选择器 过滤选择器 筛选选择器（方法）

    <div id="box">我是id盒子</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <p class="box_1">5</p>
    <div class="box_1">6</div>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li id="list_3">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
        <p>我是p</p>
    </ul>

基本选择器

1、ID选择器
2、类选择器
3、标签选择器
4、并集选择器
5、交集选择器

    // 1、ID选择器
    console.log($('#box'));
    //2、类选择器
    console.log($('.box'));
    $('.box').css('color', 'red')
    // 3、标签选择器
    console.log($('div'));
    // 4、并集选择器
    console.log($('.box,p'));
    // 5、交集选择器
    console.log($('div.box_1'));

层级选择器

1、子代选择器
2、后代选择器

     // 1、子代选择器
    console.log($('#list>li'));
    // 2、后代选择器
    console.log($('#list li'));

过滤选择器

1、 :eq（index） 索引从0开始
2、:odd 选择索引为奇数的
3、:even 选择索引为偶数的

    // 1、 :eq（index） 索引从0开始
    console.log($('li:eq(3)').css('color', 'blue'));
    // 2、:odd  选择索引为奇数的
    console.log($('li:odd').css('font-size', '30px'));
    // 3、:even  选择索引为偶数的
    console.log($('li:even').css('background-color', 'grey'));

筛选选择器

1、children(selector) 没有参数获取所有的子代
2、find(selector) find 必须加参数
3、siblings(selector) 查找兄弟节点，不包括自己本身。
4、parent() 查找父亲
parents() 查找祖先
5、eq(index) 相当于$(“li:eq(2)”), index从0开始
6、next() 找下一个兄弟
找下边所有兄弟nextAll()
7、prev() 找上一个兄弟
找上边所有兄弟prevAll()
8、Index() 获取当前的位置（索引）
9、not() 返回不带有类名 “intro” 的所有

元素

// 1、children(selector) 没有参数获取所有的子代 
    console.log($('#list').children());
    console.log($('#list').children('li'));
    console.log($('#list').children('p'));
    // 2、find(selector) find 必须加参数
    console.log($('#list').find('li'));
    // 3、siblings(selector) 查找兄弟节点，不包括自己本身。
    console.log($('#list_3').siblings());
    console.log($('#list_3').siblings('li'));
    console.log($('#list_3').siblings('ol'));
    // 4、parent() 查找父亲
    console.log($('#list_3').parent());
    // 查找祖先
    console.log($('#list_3').parents());
    // 5、eq(index) 相当于$(“li:eq(2)”), index从0开始
    console.log($('li').eq(4));
    // 6、next() 找下一个兄弟
    console.log($('#list_3').next());
    // 找下边所有兄弟
    console.log($('#list_3').nextAll());
    // 7、prev()  找上一个兄弟
    console.log($('#list_3').prev());
    console.log($('#list_3').prevAll());
    // 8、Index() 获取当前的位置（索引）
    console.log($('#list_3').index());

    console.log($('li').eq($('#list_3').index()));
    // 9、not() 返回不带有类名 "intro" 的所有 <p> 元素
    console.log($('#list_3').siblings().not('li'));