前端之JQuery：JQuery属性操作
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属性操作的更多相关文章
- 前端 ----jQuery的属性操作
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...
- python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- jquery之属性操作
jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
- jQuery系列（四）：jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- JQuery常用属性操作，动画，事件绑定
jQuery 的属性操作 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样. text() 它可以设置和获取起始标签和 ...
- 前端jQuery之属性操作
属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置 ...
- jquery学习--属性操作
学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...
- jQuery的属性操作
下面介绍jQuery属性操作: .val() 这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的va ...
- 19 01 16 jquery 的 属性操作 循环 jquery 事件 和事件的绑定 解绑
jquery属性操作 1.html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').htm ...
随机推荐
- idea中git回退本地仓库版本
场景:代码commit到本地仓库,还没有push到远程仓库,这时要回退代码. 介绍下Reset Head中三种Reset Type类型: 1.Mixed(默认):它回退到某个版本,本地会保留源码,回退 ...
- Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView、TTreeViewItem
Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView.TTreeViewItem TScrollBox -> TCustomTreeView -> ...
- RabbitMQ安装及其中遇到的问题解决方案
参考官方文档:https://www.rabbitmq.com/install-debian.html#apt 第一步: # import PackageCloud signing key wget ...
- 5.1.k8s.ConfigMap
ConfigMap #ConfigMap用于保存配置数据的键值对,可用来保存单个属性,或配置文件 #ConfigMap创建 #使用yaml文件创建ConfigMap #cm-demo.yaml kin ...
- Linux中MySQL5.7设置utf8编码格式步骤
关于编码问题,真的是弄得我很郁闷,网上找的帖子这方面也很多但都无济于事,晚上终于找到一篇有效的,特此贴上. 转自Ubuntu中MySQL5.7设置utf8编码格式步骤 1.首先打开终端 2.输入mys ...
- 【组策略】1.组策略介绍group policy
组策略介绍group policy 高效学习法,念念不忘,必有回响. 分享一个高效学习思维,潜意识思考.就是在您没有大量时间的情况下,学习十分钟. 然后离开去完成别的事情的时候,大脑潜意识中还会继续思 ...
- 【Linux开发】【Qt开发】QT 同时支持鼠标和触摸屏
QT 同时支持鼠标和触摸屏 现在 如果我要使用鼠标 导入环境变量 export QWS_MOUSE_PROTO=MouseMan:/dev/input/mice 使用触摸屏,导入环境变量 export ...
- ThinkPHP目录下面php文件 Access denied. 的问题
对于这种拒绝访问的报错,从我遇到过的问题总结来讲,可以从几个方向入手: 1. 文件权限. 最容易想到的也是这个 使用命令chmod -R 777 目录名 2. 环境配置. 这个我也是有遇到过的 ...
- 蚁群算法解决TSP问题
代码实现 运行结果及参数展示 alpha=1beta=5 rho=0.1 alpha=1beta=1rho=0.1 alpha=0.5beta=1rho=0.1 概念蚁群算法(AG)是一种模拟蚂蚁觅 ...
- JavaScript ES6 class指南
前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建立在旧的原型系统上的语法糖,所以它们并没有带来任何的 ...