前端基础 -JQuery之 对属性的操作

简介: 前端基础 -JQuery之 对属性的操作

JQuery属性操作

jquery对属性的操作:

  • jquery对象.attr()
    获取:jquery对象.attr(“属性名”)
    赋值:jquery对象.attr(“属性名”,“属性值”)
  • 对多个attr属性的操作:
    jquery对象.attr({
    “属性1”:“属性值1”,
    “属性2”:“属性值2”
    })
  • 删除属性:
    jquery对象.removeAttr(“属性名”);
  • 对class属性的操作:
    增加:jquery对象.addClass(“属性值”);
    删除:jquery对象.removeClass(“属性值”);

效果图:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //1.1给username添加title属性
        $("[name=username]").attr("title", "邪恶小法师");
        //1.2获取username的title属性
        //alert($("[name=username]").attr("title"));
        //1.3给username添加value和class属性
        $("[name=username]").attr({
          "value": "寒冰",
          "class": "textClass"
        });
        //1.4删除username的class属性
        $("[name=username]").removeAttr("class");
        //2.1给username添加一个名为textClass的样式
        $("[name=username]").addClass("textClass");
        //2.2删除username的名为textClass的样式
        $("[name=username]").removeClass("textClass");
        //4.1 给div添加边框样式
        $("div").css("border", "1px solid red");
        //4.2 获取div的边框样式
        //alert($("div").css("border"));
        //4.3 给div添加多种样式
        $("div").css({
          "width": "200px",
          "height": "200px"
        });
        //5 获取div的位置
        var $obj = $("div").offset();
        //alert($obj.top+"   :   "+$obj.left);
        //6 获取div的高和宽
        //alert($("div").width()+"  :  "+$("div").height());
      });
    </script>
    <style type="text/css">
      .textClass {
        background-color: #ff0;
      }
    </style>
  </head>
  <body>
    <h3>表单</h3>
    <form action="">
      <table border="1">
        <tr id="tr1">
          <td><label>姓名</label></td>
          <td><input type="text" name="username" /></td>
        </tr>
        <tr>
          <td><span>密码</span></td>
          <td><input type="password" name="password" /></td>
        </tr>
        <tr>
          <td>性别</td>
          <td>
            <input type="radio" name="gender" value="男" />男
            <input type="radio" name="gender" value="女" />女
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button type="button">普通按钮</button>
            <input type="submit" value="提交按钮" />
            <input type="reset" value="重置按钮" />
          </td>
        </tr>
      </table>
    </form>
    <h3>公告信息</h3>
    <div>
      未满18慎进
    </div>
    <span id="sp">外span<a href='#'>内超链</a></span>
  </body>
</html>
目录
打赏
0
0
0
0
237
分享
相关文章
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
55 6
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
55 3
|
5月前
|
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
125 3
前端基础(五)_CSS文本文字属性、背景颜色属性
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
42 2
|
5月前
|
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
135 1
jQuery - 获取内容和属性
jQuery - 获取内容和属性
38 5
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
71 0
前端基础(十)_Dom自定义属性(带案例)
jQuery - 获取内容和属性2
jQuery - 获取内容和属性2
28 3

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    72
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    12
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    42
  • 5
    详解智能编码在前端研发的创新应用
    13
  • 6
    巧用通义灵码,提升前端研发效率
    23
  • 7
    智能编码在前端研发的创新应用
    37
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    23
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    7
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    6