Jquery2--属性相关的操作

知识点总结

1、属性
    属性（如果你的选择器选出了多个对象，那么默认只会返回出第一个属性）、

        attr(属性名|属性值)
            - 一个参数是获取属性的值，两个参数是设置属性值
            - 点击加载图片示例
        removeAttr(属性名)
            -删除属性的值
        prop(属性名|属性值)
            - 属性的返回值的是布尔类型
            - 单选，反选，取消的例子
        removeProp(属性名)
            -删除属性的值

    循环：each（两种循环示例）
        - $.each(数组/对象, function(i, v){})
      - $("div").each(function(){})
    CSS类
        - addClass 添加类属性
        - removeClass 移除类属性
        - toggleClass 开关|切换（有就移除，没有就添加）
          灯泡的例子
    HTML代码/文本/值
        没有参数就是获取对应的值，
        有参数就设置对应的值
        - .html()  添加html标签    .html("<span>啦啦啦。</span>")
        - .text()  添加文本        .text("啦啦啦。")
        - .val()
            input :一个参数,获取的是input框里面的值
            checkbox :一个参数，获取的是value的值
            select :
                单选：获取值
                多选：得到的是一个数组，设置的时候也要是数组

一、属性操作

1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>属性示例</title>

 6 </head>

 7 <body>

 8 <img src="Bootstrap_i1.png" alt="">

 9 <table border="">

10     <tbody>

11         <tr>

12             <td>1</td>

13             <td>武侠</td>

14             <td>销售部</td>

15         </tr>

16         <tr>

17             <td>2</td>

18             <td>哎哎呀</td>

19             <td>财经部</td>

20         </tr>

21     </tbody>

22 </table>

23 <form action="">

24     <input type="checkbox">

25     <input type="checkbox">

26     <input type="checkbox">

27     <input type="radio">

28     <select name="" id="">

29         <option value="">甘肃</option>

30         <option value="">兰州</option>

31         <option value="">永登</option>

32         <option value="">天水</option>

33         <option value="">庆阳</option>

34     </select>

35 </form>

36 <script src="jquery-3.2.1.min.js"></script>

37 <script>

38 //    $("img").attr("src","Bootstrap_i3.png");

39 //    $("table").attr("aaa");

40 //    $("table").attr("aaa","按时");

41 </script>

42 </body>

43 </html>

示例

二、示例图片

　1、attr

　　(1)得到属性和设置属性值

　 (2)设置自定义属性值

　　

　　2、removeAttr

　　

　　3、prop

　　

　　

　　4、removeProp

三、jquery中的循环的两种方式

//    方式一

    li = [11,22,33];

    $.each(li,function (i,v) {

        console.log(i,v)// 0 11

                         // 1 22

                         // 2 33

    })

//    方式二

    $(".c1").each(function (i,v) {

        console.log(i,v)  //这里的v拿到的是标签

//         0 <div class="c1">hah</div>

//         1 <div class="c1">年</div>

//         2 <div class="c1">娃的</div>

        console.log(v.innerText)  //拿到文本

    })

</script>

退出循环============================

三、注意的一个下问题：

解决方法

前端之JQuery：JQuery属性操作的更多相关文章

  1. 前端 ----jQuery的属性操作

    04-jQuery的属性操作   jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...

  2. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  3. jquery之属性操作

    jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...

  4. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

  5. jQuery系列（四）：jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  6. JQuery常用属性操作，动画，事件绑定

    jQuery 的属性操作        html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.        text() 它可以设置和获取起始标签和 ...

  7. 前端jQuery之属性操作

    属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置 ...

  8. jquery学习--属性操作

    学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...

  9. jQuery的属性操作

    下面介绍jQuery属性操作: .val() 这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的va ...

  10. 19 01 16 jquery 的 属性操作 循环 jquery 事件 和事件的绑定 解绑

    jquery属性操作 1.html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').htm ...

随机推荐

  1. ps 和 pstree的用法

    ps 查看某个具体的命令进程: ps -C cmd-name: 如: ps -C httpd // 如果有多个名字相同的进程, 如httpd... 应该是它下面的子进程, 这时会显示第一个进程id. ...

  2. ffmpeg mp4 to wmv and wmv to mp4

    //大小=>变小ffmpeg -i 1.mp4 -b:v 2M -vcodec msmpeg4 -acodec wmav2 1_mp4.wmv//大小=>变大ffmpeg -i 1.mp4 ...

  3. 转]@SuppressWarnings 详解

    转自:http://gladto.iteye.com/blog/728634 背景知识:        从JDK5开始提供名为Annotation(注释)的功能,它被定义为JSR-175规范.注释是以 ...

  4. Delphi XE2 之 FireMonkey 入门(35) - 控件基础: TFmxObject: 其它

    Delphi XE2 之 FireMonkey 入门(35) - 控件基础: TFmxObject: 其它 TFmxObject 增加了 TagObject.TagFloat.TagString, 算 ...

  5. 码云 git 命令提交

    E:\project\eddy-boot-focus>git init E:\project\eddy-boot-focus>git remote add origin https://g ...

  6. 【漏洞复现】永恒之蓝 ms17-010 漏洞利用 攻击手法

    日期:2018-07-21 21:09:16 介绍:永恒之蓝利用的 ms17-010 漏洞,拿 Shell.查看文件.获取密码. 0x01.实验环境 攻击机 系统:macOS Sierra 10.12 ...

  7. 【工具安装】BurpSuite 安装教程

    日期:2019-07-14 17:23:53 介绍:安装 JDK,配置 JDK 的环境变量.安装 BurpSuite,抓包 0x01. 安装 JDK 安装 JDK BurpSuite 需要 JAVA ...

  8. LoadRunner11安装及破解

    一.LoadRunner11安装 以管理员身份运行setup.exe 选择第一个LoadRunner完整安装程序 按照界面会弹出以上提示框,直接选择否 检查系统缺少哪些组件,点击“确定”自动安装 点击 ...

  9. Python学习之==>面向对象编程（一）

    一.面向对象与面向过程 面向对象与面向过程是两种不同的编程范式,范式指的是按照什么方式去编程.去实现一个功能.不同的编程范式本质上代表对各种不同类型的任务采取不同的解决问题的思路. 1.面向过程编程 ...

  10. php7.2 下安装yaf扩展

    wget http://pecl.php.net/get/yaf-3.0.7.tgz  解压并进入目录: 1 tar -zxvf yaf-3.0.7* && cd yaf-3.0.7  ...