知识点总结

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. FTP的两种主动模式和被动模式

    参考:https://blog.csdn.net/xqhrs232/article/details/54633006 https://blog.csdn.net/yuanhangq220/articl ...

  2. FFT【快速傅里叶变换】FWT【快速沃尔什变换】

    实在是 美丽的数学啊 关于傅里叶变换的博客 讲的很细致 图片非常易于理解http://blog.jobbole.com/70549/ 大概能明白傅里叶变换是干吗的了 但是还是不能明白为什么用傅里叶变换 ...

  3. 《机器学习实战》2.2.2分析数据：使用matplotlib创建散点图

    #输出散点图 def f(): datingDataMat,datingLabels = file2matrix("datingTestSet3.txt") fig = plt.f ...

  4. MySQL复制原理

    mysql从3.23开始提供复制功能,复制指将主库的ddl和dml操作通过binlog文件传送到从库上执行,从而保持主库和从库数据同步.mysql支持一台主库同时向多台从库复制,从库同时也可以作为其他 ...

  5. 如何在Ubuntu 14.10 上安装WordPress？

    http://codex.wordpress.org/zh-cn:安装WordPress 介绍 如果你想快捷.简单.免费的创建个人网站的话,WordPress 是你最佳的选择. WordPress 是 ...

  6. 在浏览器地址栏输入一个URL后回车，将会发生的事情？

    https://yq.aliyun.com/articles/20667

  7. 用Monitor简单3步监控中间件ActiveMQ

    Apache ActiveMQ是一个基于JMX规范的纯Java消息中间件,它为应用系统提供高效.灵活的消息同步与异步传输处理.存储转发.可靠传输的特性. 消息队列对于应用的健康运行非常重要,作为运维人 ...

  8. ssm框架整合shiro

    1.导入shiro相应jar包,也可下载shiro-all.jar; 2.web.xml添加shiroFilter配置,类似于mvc <!-- shiro 安全过滤器--> <fil ...

  9. HandlerThread分析

    Handy class for starting a new thread that has a looper. The looper can then be used to create handl ...

  10. python排序函数sort()与sorted()区别

    sort是容器的函数:sort(cmp=None, key=None, reverse=False) sorted是python的内建函数:sorted(iterable, cmp=None, key ...