【Jquery课堂笔记03】Jquery获取元素属性、修改css样式

lewis 1年前 (2024-03-16) 阅读数 2 #技术

Jquery获取元素属性、修改css样式

效果展示

如图所示，本节讲的是获取标签的属性值以及通过jquery修改css样式，主要方法有：

attr() 方法设置或返回被选中元素的属性值prop() 方法设置或返回单选按钮元素的属性值css() 方法设置或返回样式信息

注意:

如图所示，
let txt = $(“input[type=‘text’]”).attr(“value”);
let txt1 = $(“input[type=‘text’]”).val();
两种形式获取text文本框中的内容时，attr()获取的始终是input的value属性值，因为在该input标签中属性值value始终为默认值没有变，而val()获取的是表单元素的值。总的来说， attr(‘value’) 可以取到html元素中所设置的属性 value的值，不能获取动态的如input type=“text” 的文本框手动输入的值。.prop(“checked”)；
.attr(“checked”)；
两者获取的值分别是true、checked,还是那个问题，attr()只是获取标签中属性固有的值；像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop()方法去操作才能获得正确的结果。css() 可以设置为json串修改多种css样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div>
      <span></span>
      <span>
        <input type="text" value="默认值" />
        <br />
        <input type="radio" checked="checked" name="gender" value="1" />男
        <input type="radio" name="gender" value="0" />女
        <br />
        <!-- 两种button有区别 -->
        <button id="show">显示</button>
        <input type="button" value="显示" />
      </span>
    </div>


    <script src="./js/jquery-2.1.1.min.js"></script>
    <script>/*
        attr()  方法设置或返回被选中元素的属性值
        prop()  方法设置或返回单选按钮元素的属性值 
        css()   方法设置或返回样式信息
      */
      $(document).ready(function() {
               $("#show").click(function() {

           let txt = $("input[type='text']").attr("value");
           // val() 直接获取value值，前提是该标签要有value属性
           let txt1 = $("input[type='text']").val();
           console.info(txt);
           console.info(txt1);

           let gender = $("input[type='radio']:eq(0)").prop("checked");
           let gender1 = $("input[type='radio']:eq(0)").attr("checked");
           alert(gender);
           alert(gender1);

           // css() 可以设置为json串修改多种css样式
           $("button").css("color","red");
           $("input:eq(0)").css({"height":"200px","width":"200px"});
         })
      });</script>
  </body>
</html>

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：文本css样式有哪些下一篇：常用的数据库系统

【Jquery课堂笔记03】Jquery获取元素属性、修改css样式

版权声明

作者文章