jQuery不完全

ohhiya

已于 2024-01-30 15:13:28 修改

阅读量326

点赞数 9

分类专栏： 4A 文章标签： jquery 前端 javascript

于 2024-01-30 15:12:45 首次发布

本文链接：https://blog.csdn.net/2202_75526478/article/details/135933700

版权

4A 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery对象的创建与转换，以及如何进行元素样式（如宽度、高度、背景色）操作，内容操作（如HTML和文本），元素遍历，以及使用jQuery获取和调整元素尺寸与位置的方法。

摘要由CSDN通过智能技术生成

jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hello jQuery</div>
    <script>
        // jQuery对象
        var div1=$('div');
        console.log(div1);
        // dom对象
        var div2=document.getElementsByTagName('div');
        console.log(div2);
        // 将jQuery对象转换为dom对象
        var div1=$('div')[0];       //法1
        var div2=$('div').get(0);   //法2
        // 将dom对象转换为jQuery对象
        var div=document.getElementsByTagName('div')[0]; //获取dom对象
        div =$(div);   //将dom对象转换成jQuery对象
    </script>
</body>
</html>

元素样式操作

<style>
        div{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 获取div元素的宽度
        console.log($('div').css('width'));
        // 设置div元素的宽度为200px
        $('div').css('width','200px');
        // 设置div元素的高度为200px，背景颜色为pink
        $('div').css({height:'200px',backgroundColor:'pink'});
    </script>
</body>

元素内容操作

<body>
    <div>
        <span>我是div标签下的span标签</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 获取元素内容
        console.log($('div').html());
        console.log($('div').text());
        console.log($('input').val());

        $('div').html('<span>我是内容</span>我是div标签的内容');
        $('div').text('我是span标签的内容');
        $('input').val('123456');
    </script>
</body>

元素遍历操作

<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
    </ul>
    <script>
        $('li').each(function(index,domEle){
            console.log('第'+(index+1)+'个li对象：');
            console.log(domEle);
        });
    </script>
</body>

获取元素

body>
    <div>
        <p id="start">独在异乡为异客</p>
        <p class="end">每逢佳节倍思亲</p>
    </div>
    <script>
        // 输出id为start的元素
        console.log($('#start'));
        // 输出class为end的元素
        console.log($('.end'));
        // 输出所有div元素
        console.log($('div'));
    </script>
</body>

操作元素的尺寸和位置

<style>
        div{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            position: absolute;
            left: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 获取元素的尺寸和位置
        console.log($('div').width());
        console.log($('div').height());
        console.log($('div').offset());
        // 设置元素的尺寸和位置
        $('div').width(100);
        $('div').height(100);
        $('div').offset({top:50,left:50});
    </script>
</body>
</html>