1.操作内容

  • 获取：

    • 双标签：html()
    • input:val()
  • 设置：
    • 双标签：html('新内容')
    • input:val('新内容')

2.操作属性

* 获取：attr('属性名')

* 设置：attr('属性名','新的值')

3.样式操作

* 获取：css('样式名')

* 设置：css('样式名','新的值')   css({"样式名1":"新的值","样式名2":"新的值"})

4.额外封装的

  • css操作类操作：

    • addClass()：添加类名
    • removeClass()：删除类名
    • toggleClass()：切换类名
  • 尺寸操作：
    • height()：高度
    • width()：宽度
    • scrollTop()：滚动高度
    • scrollLeft()：滚动距左边距离

5.代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>操作内容，属性，样式</title>

    <style>

        #box {}

        .content {}

    </style>

</head>

<body>

    <div>div的内容</div>

    <input type="text" value="input的标签" />

    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>

    <script>

        //获取内容

        console.log($("div:eq(0)").html())

        console.log($("input:eq(0)").html())

            //设置内容

        $('div:eq(0)').html('新的值')

        $('input:eq(0)').html('新的input值')

        //设置属性

        $("div:eq(0)").attr('id', 'box').attr('class', 'content')

        //获取属性

        console.log($("div:eq(0)").attr('id'))

        //获取样式

        console.log($("div:eq(0)").css('fontsize'))

            //设置样式

        $("div:eq(0)").css('color', 'red').css('fontsize', '30px')

        $("div:eq(0)").css({

            'border': '1px solid #000',

            'background': 'skyblue',

            'margin': '10px auto',

            'height': '400px',

            'width': 300,

            'padding': "20px"

        })

    </script>

</body>

</html>

jQuery-操作元素的内容，属性，样式的更多相关文章

  1. jQuery操作元素的class属性

    今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...

  2. 用JQuery操作元素的style属性

    可以直接利用css()方法获取元素的样式属性,JQuery代码如下: 1 $("p").css("color");  //获取p元素的样式颜色 无论color属 ...

  3. 使用jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  4. 《从零开始学习jQuery》：用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  5. jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  6. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  7. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  8. jQuar总结10:jQuery操作元素的属性

    jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...

  9. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  10. 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

    一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...

随机推荐

  1. 简单使用媒体查询@media

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 那媒体查询该如何使用呢? 一.铺垫 1.首先我们在使用 @media 的时候需要 ...

  2. java基础篇 之 集合概述（List）

    list,有序集合,元素可重复 LinkedList:底层用链表实现,查找慢,增删快.为什么?? ArrayList:底层用数组实现,查找看,增删慢.为什么?? Vector:跟ArrayList一样 ...

  3. LeetCode--Squares of a Sorted Array && Robot Return to Origin (Easy)

    977. Squares of a Sorted Array (Easy)# Given an array of integers A sorted in non-decreasing order, ...

  4. 【Kafka】实时看板案例

    目录 项目需求 项目模型 实现步骤 项目需求 快速计算双十一当天的订单量和销售金额 项目模型 实现步骤 一.创建topic bin/kafka-topics.sh --create --topic i ...

  5. 【Hadoop离线基础总结】通过Java代码执行Shell命令

    通过Java代码执行Shell命令 需求 在实际工作中,总会有些时候需要我们通过java代码通过远程连接去linux服务器上面执行一些shell命令,包括一些集群的状态管理,执行任务,集群的可视化界面 ...

  6. 关于 k210 的 micropython 添加 ussl 模块，实现 https 访问支持的那些事。

    起因 事情已经过去快一周了吧,继上次修复 maixpy k210 的 esp8285 at 通信后,突然遇到泽畔大大问,要不要做 ussl 的支持? 评估了一下各方的实现,想了一下自己也刚好在做网络层 ...

  7. Mysql 常用函数（1）- 常用函数汇总

    Mysql常用函数的汇总,可看下面系列文章 Mysql常用函数有哪几类 数值型函数 字符串型函数 日期时间函数 聚合函数 流程控制函数 数值型函数 函数名称 作用 ABS 求绝对值 SQRT 求二次方 ...

  8. vscode+eslint自动格式化vue代码的方法

    前言 使用vscode开发vue项目的时候,为了编码格式的统一化,使用eslint规范进行格式化.此时通过eslint插件可以实现对vue代码的自动格式化. 使用方式 在vscode的插件模块处,搜索 ...

  9. ABP框架踩过的坑系列6

    ABP框架踩过的坑系列6 应是无事.齐侯方才的确到了吴纠庭院https://www.mixcloud.com/ltTFvU888smi8jS/几日行军劳顿其实齐侯本应该睡下了https://www.m ...

  10. python实现三级菜单源代码

    8月4号早晨天气晴,继续学习‘Alex’的python视频,写了用字典实现三级菜单的代码,都是循环和判断比较lower,废话不多说直接贴码: #!/user/bin/env python #-*-co ...