知识点总结

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.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1">

<input type="radio" value="2">

<script>

  $(":checkbox[value='1']").prop("checked", true);

  $(":radio[value='2']").prop("checked", true);

</script>

示例：全选、反选、取消

一、属性操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性示例</title>

</head>

<body>

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

<table border="">

    <tbody>

        <tr>

            <td>1</td>

            <td>武侠</td>

            <td>销售部</td>

        </tr>

        <tr>

            <td>2</td>

            <td>哎哎呀</td>

            <td>财经部</td>

        </tr>

    </tbody>

</table>

<form action="">

    <input type="checkbox">

    <input type="checkbox">

    <input type="checkbox">

    <input type="radio">

    <select name="" id="">

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

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

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

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

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

    </select>

</form>

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

<script>

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

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

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

</script>

</body>

</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>

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

三、注意的一个下问题：

解决方法

web前端----jQuery属性操作的更多相关文章

  1. Web前端JQuery面试题（二）

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  2. Web前端JQuery面试题（一）

    Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...

  3. Web前端JQuery面试题（三）

    Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...

  4. jquery——属性操作、特殊效果

    1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. 前端之JQuery：JQuery属性操作

    Jquery2--属性相关的操作 知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性 ...

  6. web前端-----jQuery

    web前端之jQuery篇 一 jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   j ...

  7. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  8. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  9. python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

随机推荐

  1. react封装简单的浏览器顶部加载进度条全局组件

    在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...

  2. Docker实现跨主机互联

    首先修改一台docker的默认网络段 修改配置文件/usr/lib/systemd/system/docker.service 设置生效(重载配置文件并且重启) systemctl daemon-re ...

  3. poj1001 Exponentiation【java大数】

    Exponentiation Time Limit: 500MS   Memory Limit: 10000K Total Submissions: 183034   Accepted: 44062 ...

  4. 2018-2019-2 20165330《网络对抗技术》Exp1 PC平台逆向破解

    目录 实验目标 实验内容 知识点描述 实验步骤 实验过程中遇到的问题 实验感想 实验目标 本次实验的对象是一个名为pwn1的linux可执行文件. -该程序正常执行流程是:main调用foo函数,fo ...

  5. Python中各种括号的区别、用途及使用方法

    python语言最常见的括号有三种,分别是:小括号( ).中括号[ ]和大括号也叫做花括号{ }.其作用也各不相同,分别用来代表不同的python基本内置数据类型. python中的小括号( ):代表 ...

  6. 51nod 1183 - 编辑距离 - [简单DP][编辑距离问题][Levenshtein距离问题]

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1183 编辑距离,又称Levenshtein距离(也叫做Edi ...

  7. pro 图层 叹号

    同事遇到问题,后来他自己探索解决了~~大致记录如下 pro1.4中打开mxd,部分图层前显示叹号.根据arcmap的经验,点击叹号去修复,结果显示 不支持类型数据. 后解决办法:新建pro 的proj ...

  8. 牛客练习赛16D K进制 数论(待理解QAQ)

    正解:数论 解题报告: 行吧那就让我一点点推出来趴QAQ

  9. 深入了解oracle存储过程的优缺点

    定义: 存储过程(Stored Procedure )是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库中.用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它.存储过程是 ...

  10. Celery配置Redis数据库保存Return结果状态

    使用windows版本 1.于GitHUB下载https://github.com/ServiceStack/redis-windows Window版本,到路径: 2. 运行路径下:D:\redis ...