知识点总结

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. vue--axios发送请求

    首先安装:axios $ npm install axios $ cnpm install axios //taobao源 $ bower install axios 或者使用cdn: <scr ...

  2. Java String, StringBuffer和StringBuilder实例

    1- 分层继承2- 可变和不可变的概念3- String3.1- 字符串是一个非常特殊的类3.2- String 字面值 vs. String对象3.3- String的方法3.3.1- length ...

  3. 11.21 CSS学习-上午

    font-family:设置文本的字体序列,应当多设置几个,作为后备机制,如果浏览器不支持第一种字体,它将尝试下一种字体.字体序列的名字超过一个字需要使用引号,多个字体序列用逗号分隔指明:{font- ...

  4. Linux 工具，一本好书 大牛的博客

    http://linuxtools-rst.readthedocs.io/zh_CN/latest/base/index.html http://design-patterns.readthedocs ...

  5. Jena 操作 RDF 文件

    1. RDF 入门 RDF(Resource Description Framework)是由W3C规定的,描述资源(resource)的数据模型(data model),: RDF 使用Web标识符 ...

  6. 网站编辑须知9个SEO技巧

    1. 文章当中最好需要出现一个网站核心关键词所谓的网站核心的关键词就是指与网站内容相关性比较高并且是比较受欢迎的关键词,当然还有相当高的转化率 2. 文章标题当中需要出现关键词.关键字在标题标签< ...

  7. Github常用命令【转】

    本地仓库(local repository) 创建一个本地仓库的流程: 为本地仓库创建一个目录 在目录中执行 git init 对本地仓库所做的改变(例如添加.删除文件等)首先加入到本地仓库的 Ind ...

  8. 【PHP】PHP初学者的学习线路

    先来看下PHP初学者的学习线路: (1) 熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉. (2) 理解动态语言的概念和运做机制,熟悉基本的PHP语法. ( ...

  9. 【JMeter】集合点的设置

    [JMeter]集合点的设置 简单来理解一下,虽然我们的“性能测试”理解为“多用户并发测试”,但真正的并发是不存在的,为了更真实的实现并发这感念,我们可以在需要压力的地方设置集合点,每到输入用户名和密 ...

  10. mysql 使用存储引擎

    三 使用存储引擎 方法1:建表时指定引擎 指定innodb,不写默认也是innodb use 数据库先 create table innodb_t1(id int,name char)engine=i ...