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. A. Powered Addition(二进制性质-思维)

    \(拿样例来看1 7 6 5\) \(6成长到7是最合理的,因为1s就可以实现而且对于后面来说最优\) \(5成长到7是最合理的,因为2s就可以实现而且对于后面最优\) \(发现了什么?二进制是可以组 ...

  2. 按照这些优化技巧来写 SQL，连公司 DBA 也鼓掌称赞！

    原文链接:按照这些优化技巧来写 SQL,连公司 DBA 也鼓掌称赞! 刚毕业的我们,都以为使用 MySQL 是非常的简单的,无非都是照着 [select from where group by ord ...

  3. 新书《OpenShift云原生架构：原理与实践》第一章第三节：企业级PaaS平台OpenShift

    近十年来,信息技术领域在经历一场技术大变革,这场变革正将我们由传统IT架构及其所支撑的臃肿应用系统时代,迁移至云原生架构及其所支撑的敏捷应用系统时代.在这场变革中,新技术的出现.更新和淘汰之迅速,以及 ...

  4. 用PHP获取网页上的信息相对于xpath效率低点

    用php实现对网页的抓取,及信息的收集,其实就是爬数据,具体实现步骤如下,首先应引入两个文件curl_html_get.php和save_file.php文件,两个文件具体代码是这样的curl_htm ...

  5. Kali：系统安装之后进行所需配置

    apt设置源 由于官网的源需要墙或者想使用国内的源,可以修改source.list vi /etc/source.list 打开文件并修改为其他可用的源地址,以下可供参考 deb http://ftp ...

  6. Python3+Pycharm+PyQt5环境搭建步骤

    搭建环境: 操作系统:Win10 64bit Python版本:3.7 Pycharm:社区免费版 一.Python3.7安装 下载链接:官网 https://www.python.org/downl ...

  7. 【跟我一起读 linux 源码 01】boot

    计算机启动流程在我的上一个学习计划<自制操作系统>系列中,已经从完全不知道,过渡到了现在的了如指掌了,虽然有些夸张,但整个大体流程已经像过电影一样在我脑海里了,所以在看 linux 源码的 ...

  8. JS理论-：一只tom猫告诉你构造函数 实例 实例原型 实例原型的实例原型是什么

    参考地址:https://github.com/mqyqingfeng/Blog/issues/2 感谢这位大佬 下面说说我的理解: 第一,看下人物: tom--一只叫tom的猫 Cat()--猫的构 ...

  9. 适用于任何Html内容的jQuery Slider插件 - AnySlider

    任何Slider都是一个易于使用且支持触摸的jQuery插件,允许您为任何html内容创建可自定义的滑块,如图像,文本,视频等. 特征: 重量轻,易于使用 支持键盘导航 使用淡入淡出或幻灯片过渡以及自 ...

  10. 容器技术之LXC

    什么是容器?在生活中我们常见的容器有各种瓶瓶罐罐.各种能够容纳其它物料的东西叫容器:容器的特点就是有着很好的隔离作用,使得不同的物料互相隔离:除此之外容器还方便运输.方便储存:这是生活中所说的容器,以 ...