知识点总结

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. 扩展Spring切面

    概述 Spring的切面(Spring动态代理)在Spring中应用十分广泛,例如还有事务管理,重试等等.网上介绍SpringAop源码很多,这里假设你对SpringAop有基本的了解.如果你认为Sp ...

  2. OOA/D 01

    建筑师一般不会为一栋100层的楼添加一个新的地下室,因为成本太高无疑会失败,但软件系统里提出类似改动需求时,他们通常都不会多想一下,相反他们会说:这只是一个简单的编程问题 可总会有一些看似极难完成.但 ...

  3. Deplearning.AI-吴恩达【中文课后作业】

    [吴恩达课后作业目录] 课程 周数 名称 类型 语言 地址 课程1 - 神经网络和深度学习 第1周 深度学习简介 测验 中英 传送门 无编程作业 编程作业 —— —— 第2周 神经网络基础 测验 中英 ...

  4. Oracle数据库中的优化方案

    来自: http://woainichenxueming.iteye.com/blog/726541 一. 优化oracle中的sql语句,提高运行效率 1. 选择最有效率的表名顺序(只在基于规则的优 ...

  5. CF750F New Year and Finding Roots 构造+树论

    正解:构造 解题报告: 传送门! 交互题交互题!哇好新鲜啊QwQ 首先考虑最傻逼的做法,应该是每个人都能想到的 首先看一下它给的条件,考虑到完全二叉树的性质,就可以发现,如果给的邻居只有一个,说明是叶 ...

  6. 不再以讹传讹，GET和POST的真正区别（转）

    add by zhj:按照restful的定义,GET是用于获取记录(幂等),POST用于创建记录(不幂等).GET也能带消息体?这个我没试过,文中说用浏览器发GET请求 是没法带的.另外,在< ...

  7. Freemarker简单用法

    Freemarker 最简单的例子程序   freemarker-2.3.18.tar.gz http://cdnetworks-kr-1.dl.sourceforge.net/project/fre ...

  8. web 开发常见问题--GET POST 区别

    首先,get和post是什么? --两种 HTTP 请求方法:GET 和 POST HTTP Request Methods GET.POST 专业名称是 HTTP Request Methods.但 ...

  9. redis 介绍

    缓存数据库介绍 NoSQL(NoSQL = Not Only SQL ),意即“不仅仅是SQL”,泛指非关系型的数据库,随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站,特别是 ...

  10. PHPExcel使用-使用PHPExcel导出文件

    导出步骤: 1. 新建一个excel表格 ------------> 实例化PHPExcel类 2. 创建sheet(内置表)-------------> ( 1>. createS ...