一、认识jQuery

二、jQuery 的DOM操作

一、认识jQuery

jQuery 是一个大型的简单的第三方类库。或者说是JavaScript中最流行的一种框架。

引用 jQuery：

<script src="js/jquery.min.js"></script>

//或者
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google

//或者
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

当引用 jQuery文件后，会在全局暴露两个变量名，$ 和 jQuery。

二、jQuery 的DOM操作

1. jQuery 的选择器

语法： $('选择器')

<body>
    <ul>
        <li>1</li>
        <li class="a">2</li>
        <li>3</li>
        <li class="b">4</li>
        <li>5</li>
        <li class="a">6</li>
        <li>7</li>
        <li id="box">8</li>
        <li>9</li>
    </ul>

    <script>
        //id选择器
        console.log($('#box'))

        //类名选择器
        console.log($('.a'))

        //标签选择器
        console.log($('li'))

        //结构选择器
        console.log($('li:nth-child(odd)')) //奇数选择器
        console.log($('li:nth-child(even)')) //偶数选择器
    </script>

</body>

2. jQuery 的筛选器

语法：$('选择器').筛选器名称()

jQuery 的筛选器有

first()	next()	prev()	parent()	siblings()
last()	nextAll()	prevAll()	parents()	find()
eq()

<body>
    <ul>
        <li>1</li>
        <li>2
        <i>子级1</i></li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <i>子级2</i><br/>
        <span>我是 ul 内的一个 span 标签</span>
        <li>6</li>
        <li>7
        <i>子级3</i></li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <script>
        //1.first() 第一个
        console.log($('li').first())

        //2. last() 最后一个
        console.log($('li').last())

        //3. eq() 索引
        //注意： 索引从 0 开始，依次 +1
        console.log($('li').eq(3))  //表示第四个

        //4. next() 下一个
        console.log($('span').next())

        //5. nextAll() 下面所有的
        console.log($('span').nextAll())

        //6. prev() 前一个
        console.log($('span').prev())

        //7. prevAll() 前面所有的
        console.log($('span').prevAll())

        //8. parent() 父元素
        console.log($('span').parent())

        //9. parents() 该元素所有的父级结构，逐层获取，直到html标签为止
        console.log($('span').parents())

        //10. siglings()  拿到该元素的所有兄弟节点
        console.log($('span').siblings())

        //11. find()  找到该元素的所有后代元素中，满足选择器要求的元素。
        console.log($('li').find('i'))

    </script>

</body>

3. jQuery 操作文本内容

三个方法：html()、text()、val()

1）html() 等价于我们原生的 js 中的 innerHTML
html() 设置：
语法：元素集合.html(你要设置的内容)
注意：可以识别并解析 html 结构字符串

    //1-1. html()获取
    console.log($('div').html())

    //1-2. html() 设置
    $('div').html('<h2>我是后来设置的内容</h2>')

2）text()等价于我们原生 js 中的 innerText
text() 设置：
语法：元素集合.text(你要设置的内容)
注意：不可以识别并解析 html 结构字符串

    //2-1. text() 获取
    console.log($('div').text())

    //2-2 text() 设置    
    $('div').text('<h2>我是后来设置的内容2</h2>')

3）val()等价于我们原生 js 中的 value

val() 设置：
语法：元素集合.val(你要设置的内容)
作用：用来设置该表单元素的 value 值

    //3-1. val() 获取
    console.log($('input').val())

    // 3-2 val() 设置        
    $('input').val('我是后来设置的内容3')

4. jQuery 操作类名

方法： addClass()、removeClass()、toggleClass()

1. addClass()

语法：元素集合.addClass(需要添加的类名)

$('div').addClass('e')

2. removeClass()

语法：元素集合.removeClass(需要添加的类名)

$('div').removeClass('b')

3. toggleClass()

语法：元素集合.toggleClass(需要添加的类名)

切换：如果本身有这个类名，那么就是删除，如果本身没有这个类名，那么就是添加

var btn = document.querySelector('button')

btn.onclick = function () { 
    $('div').toggleClass('box') 
}

5. jquery 操作元素样式

1. css获取样式

注意：可以获取到元素的行内样式，也可以获取到元素的非行内样式

语法：元素集合.css(你要获取的样式名称)

    console.log($('div').css('width'))
    console.log($('div').css('height'))
    console.log($('div').css('background-color'))

2. css设置样式
语法：元素集合.css(样式名，样式值)
注意：当你需要给一个元素设置样式值为px单位的时候，可以省略单位不写

        $('div').css('width', '300px')
        $('div').css('height', 500)
        $('div').css('background-color','red')

3. css批量设置样式

语法：元素集合.css({你所有需要设置的样式})

        $('div').css({
            width: 250,
            height: 250,
            opacity: 0.66,
            'background-color': 'red'
        })

6. jQuery 操作元素属性

1）attr()：可以进行设置和获取元素的属性。

注意：一般用于操作元素的自定义属性；attr 操作的所有属性都会直接出现在元素的标签上。

获取：语法：元素. attr(你要获取的属性名)；返回值：该属性名对应的属性值

设置：语法：元素.attr(属性名，属性值)

        //1.1 attr()获取
        console.log($('div').attr('hello'))
        console.log($('div').attr('id'))

        //1.2 attr()设置
        $('div').attr('a', 100)
        $('div').attr('id', 'container')

2）removeAttr()：对元素的属性进行删除操作

语法：元素集合.removeAttr(你要删除的属性名)

        //2. removeAttr()
        $('div').removeAttr('hello')
        $('div').removeAttr('id')

3）prop()：可以获取和设置元素的属性

注意：当prop 设置元素的原生属性，会直接响应在元素标签上；当prop设置元素自定义属性，不会直接响应在元素标签上，会响应在元素对象身上。

prop 方法不能获取元素标签身上的自定义属性，只能获取到 prop 方法自己设置的自定义属性。

prop() 设置：语法：元素集合.prop(属性名，属性值)

prop() 获取：语法：元素集合.prop(你想要获取的属性名)；返回值：该属性对应的值

        //3.1 prop()设置
        $('div').prop('id', 'container')
        $('div').prop('a', 100)
        console.log($('div'))

        //3.2 prop()获取
        console.log($('div').prop('id'))  //container
        console.log($('div').prop('hello'))  //undefined,只能获取到自定义的属性值
        console.log($('div').prop('a'))  //100

4）removeprop()：用来删除原生属性

注意：不能删除原生属性，只能删除由prop 方法设置的自定义属性

语法：元素集合.removeProp(你要删除的属性名)

        //4. removeprop()
        $('div').removeProp('id')
        $('div').removeProp('a')
        console.log($('div'))

7. jQuery获取元素尺寸

方法：width()、height()、 innerWidth()、 innerHeight()、 outerWidth()、 outerHeight()

注意：1. 不管该元素是否隐藏，都可以获取到该元素的值

2. 不管盒子模型是什么状态，拿到的尺寸区域不变

        //1. width() && height()
        console.log($('div').width())
        console.log($('div').height())
        console.log('------------------')

        //2. innerWidth() && innerHeight()
        console.log($('div').innerWidth())
        console.log($('div').innerHeight())
        console.log('-------------------')

        //3. outerWidth() && outerHeight()
        console.log($('div').outerWidth())
        console.log($('div').outerHeight())
        console.log('-------------------')

        //4. outerWidth(true) && outerHeight(true)
        //拿到的包含你设置的 margin 尺寸值
        console.log($('div').outerWidth(true))
        console.log($('div').outerHeight(true))
        console.log('-------------------')

8. jQuery 的元素偏移量

方法：offset() 和 position()

1. offset()
获取元素相对于页面左上角的坐标位置
注意：返回值是一个对象数据类型，{top: yyy, left: xxx}

    console.log('div : ', $('div').offset())
    console.log('p : ', $('p').offset())
    console.log('span : ', $('span').offset())

2. position()
获取的就是元素的定位位置
注意：如果设置的是 right 和 bottom，会自动帮你换算成 left 和 top 的值给到你。

    console.log($('span').position())

JavaScript 学习笔记（九）认识jQuery 和 jQuery的基本操作

一、认识jQuery

二、jQuery 的DOM操作

1. jQuery 的选择器

2. jQuery 的筛选器

3. jQuery 操作文本内容

4. jQuery 操作类名

5. jquery 操作元素样式

6. jQuery 操作元素属性

7. jQuery获取元素尺寸