JQuery使用方法简介（二）

最新推荐文章于 2024-08-27 13:38:21 发布

傻乎乎的小不点

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量274

点赞数 3

本文链接：https://blog.csdn.net/m0_62697897/article/details/127358176

版权

目录

一、属性

1、获取属性值    attr('title')

2、设置属性值    attr('title','hahaha')

3、同时设置多个属性值

4、移除属性值 removeAttr('title')

5、添加class值    addClass('page')

6、移除class的值   removeClass('page')

7、添加或者移除class值 toggleClass('hah')

二、CSS

1、获取样式值   css('color')

2、设置样式值   css('color','red')

3、设置样式值

4、offset()

5、position()

6、获取滚动的值   scrollTop()

7、设置滚动的值   scrollTop(300)

8、获取滚动的值 scrollLeft()

9、设置滚动的值 scrollLeft(200)

10、获取高度 height()

11、获取宽度 width()

12、innerHeight()   获取高度+padding上下

13、获取宽度+padding左右

14、获取高度+padding上下+border上下

15、获取宽度+padding左右+border左右

三、筛选

1、first()：第一个

2、last()：最后一个

3、find()

4、eq(n)：第n个

5、not(x)：没有x描述的

6、filter()：过滤

7、slice()：剪裁

8、has()

9、children()：子级（不包含子级的后代）

10、parent()：直接父级

11、parents()：所有父级

12、parentUntil(x)：直到找到x描述的父级停止

13、offsetParent()：第一个定位的父级

14、next()：下一个

15、nextAll()：后边所有

16、nextUntil(x)：下一个到x描述前

17、prev()：上一个

18、prevAll()：前边所有

19、prevUntil(x)：上一个到x描述

20、siblings()：匹配元素的所有兄弟元素

21、addBack()：当前的再添加上一个

22、end()：返回上一个jq对象

一、属性

1、获取属性值    attr('title')

2、设置属性值    attr('title','hahaha')

3、同时设置多个属性值

        attr({
title: 'enenen',
style: 'background-color: red';
});

4、移除属性值 removeAttr('title')

5、添加class值    addClass('page')

6、移除class的值   removeClass('page')

7、添加或者移除class值 toggleClass('haha')

二、CSS

1、获取样式值   css('color')

2、设置样式值   css('color','red')

3、设置样式值

  css({
'color': 'red',
'font-size': '30px'
})

4、offset()

<1>相对于窗口

<2>获取top和left的值

5、position()

<1>相对于父级

<2>获取top和left的值

6、获取滚动的值   scrollTop()

7、设置滚动的值   scrollTop(300)

8、获取滚动的值 scrollLeft()

9、设置滚动的值 scrollLeft(200)

10、获取高度 height()

11、获取宽度 width()

12、innerHeight()   获取高度+padding上下

13、获取宽度+padding左右

14、获取高度+padding上下+border上下

15、获取宽度+padding左右+border左右

三、筛选

1、first()：第一个

2、last()：最后一个

3、find()

<1>寻找子级

<2>类似于后代选择器

4、eq(n)：第n个

5、not(x)：没有x描述的

6、filter()：过滤

7、slice()：剪裁

8、has()

<1>过滤

<2>检索的是集合中DOM算的后代

9、children()：子级（不包含子级的后代）

10、parent()：直接父级

11、parents()：所有父级

12、parentUntil(x)：直到找到x描述的父级停止

13、offsetParent()：第一个定位的父级

14、next()：下一个

15、nextAll()：后边所有

16、nextUntil(x)：下一个到x描述前

17、prev()：上一个

18、prevAll()：前边所有

19、prevUntil(x)：上一个到x描述

20、siblings()：匹配元素的所有兄弟元素

21、addBack()：当前的再添加上一个

22、end()：返回上一个jq对象

具体案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq</title>
    <style>
        section{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <ul>
        <li>ul  item1</li>
        <li>ul  item2</li>
        <li class="yes">ul  item3</li>
        <li>ul  item4</li>
        <li>ul  item5</li>
    </ul>
    <ol>
        <li>ol item1</li>
        <li class="yes">ol item2</li>
        <li>ol item3</li>
        <li>ol item4</li>
        <li>ol item5</li>
    </ol>
    <div id="ok">ok</div> -->
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>

    // dom与jq可以互换
    // var  dOK = document.getElementById("ok");
    // console.log($(dOK));
    // console.log($("#ok")[0]);


    // onload方法与ready方法的区别是什么？

    $("ol  li:nth-of-type(2)").css({
        color: "red",
        fontSize: 26
        // 'font-size': 26
    }).attr("id","ok").toggleClass("yes")

    $("ul      li:eq(3)").css({
        color: "green"
    })


    // 非破坏性操作：方法返回自身（this指向原来的jq对象）
    // 破坏性操作：this指向新的jq对象
    $("ul  li").filter(".yes").css({
       color: "pink"
     })
   
   
</script>
</html>

运行结果：