前端jQuery之属性操作
属性操作主要分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
HTML属性操作：属性的读取，设置，以及移除，如attr()、removeAttr()
DOM属性操作：属性的读取，设置，以及移除，如prop()、removeProp()
类样式操作：指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：对DOM属性value进行读取和设置操作。比如html()、text()、val()
attr()
//获取属性值
var id = $('div').attr('id')
console.log(id)
var cla = $('div').attr('class')
console.log(cla)
//设置值
//1.设置一个值 设置div的class为box
$('div').attr('class','box')
//2.设置多个值，参数为对象，键值对存储
$('div').attr({name:'hahaha',class:'happy'})
removeAttr()
//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class'); //删除多个属性
$('#box').removeAttr('name class');
prop()
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
返回属性值：
$(selector).prop(property)
设置属性和值（可以以键值对的形式设置多个）：
$(selector).prop(property,value)
注意：
attr(),prop()两个区别很小，一般常用attr()，只有在含有true，false的情况下使用prop()
使用案例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
男<input type="radio" id='test' name="sex" checked/>
女<input type="radio" id='test2' name="sex"/>
<button>提交</button> <script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//获取第一个input
var el = $('input').first();
//undefined 因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined
console.log(el.attr('style'));
// 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象
console.log(el.prop('style'));
console.log(document.getElementById('test').style); $('button').click(function(){
alert(el.prop("checked") ? "男":"女");
}) })
</script> </body>
</html>
效果：
addClass()
添加多个类，追加一个类名
removeClass()
移除指定类名，括号里面不填默认移除全部
例
鼠标点击名称，改变颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="item">张三</li>
<li class="item">李四</li>
<li class="item">王五</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$('ul li').click(function(){
// this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
$(this).addClass('active').siblings('li').removeClass('active');
})
})
</script> </body>
</html>
toggleClass
如果存在就删除一个类
不存在就添加一个类
html获取值
获取选中标签元素中所有的内容
$('#box').html();
设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
text获取值
和thml用法一样
val（和数据发生交互，这个在后期学习中很重要）
$(selector).val()//设置值和获取值
val()用于表单控件中获取值，如input，select中
例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="1"/>男
<!-- 设置cheked属性表示选中当前选项 -->
<input type="radio" name="sex" value="2" checked=""/>女
<input type="radio" name="sex" value="3"/>gay <input type="checkbox" value="a" checked=""/>吃饭
<input type="checkbox" value="b" checked=""/>睡觉
<input type="checkbox" value="c" />打豆豆 <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
<select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2" selected="">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 1.获取值
// 获取选框中被选中的value值,得到结果2
console.log($('input[type=radio]:checked').val());
// checked值有多个，只获取第一个被选中的值，val()中可以赋值，从伪数组中查看checked值有几个
console.log($('input[type=checkbox]:checked').val());
// 查看下拉列表被选中的值
var obj = $("#timespan option:selected");
// 获取选中的值，即2
var time = obj.val();
console.log(time);
// 获取文本,得到val:2 text:8:30-9:00
var time_text = obj.text();
console.log('val:'+time,'text:'+time_text);
// 获取文本框中的value值,得到下面输入的‘试试就试试’
console.log($('input[type=text]').val()); // 2.设置值
// 可以设置单选框和多选框被选中项
$('input[type=radio]').val(['666']);
$('input[type=checkbox]').val(['a','b']);
})
// 通过使用select设置下拉列表框中的选中值，select可以设置单个，也能设置多个
$('select').val(['3','2'])
// 设置文本框中的value值
$('input[type=text]').val('试试就试试') </script>
</html>
界面显示
前端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 ...
- 前端基础-CSS属性操作
前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...
- jQuery系列（四）：jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- JQuery常用属性操作，动画，事件绑定
jQuery 的属性操作 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样. text() 它可以设置和获取起始标签和 ...
- jquery学习--属性操作
学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...
- jQuery的属性操作
下面介绍jQuery属性操作: .val() 这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的va ...
随机推荐
- SQL智能提示插件——SQLPrompt
1.安装SQLPrompt,直接点击下一步即可,然后打开SQL Server 在菜单栏找到SQLPrompt选项注册该软件 2.先断开网络,然后运行注册机,将注册吗复制到序列号的地方,将两个勾选的复选 ...
- leetcode 196. Delete Duplicate Emails 配合查询的delete
https://leetcode.com/problems/delete-duplicate-emails/description/ 题意要对原来的数据表进行删除,不删除不行,它每次只输出原来那个表. ...
- Kudu安装（官网推荐的步骤）（installing Kudu using parcels or packages）
不多说,直接上干货! Kudu安装前的建议说明(博主推荐) Kudu官网推荐的步骤: 本篇博文是installing Kudu using parcels or packages的方式. http:/ ...
- c语言中的隐式函数声明(转)
本文转自:http://www.jb51.net/article/78212.htm 在c语言里面开来还是要学习c++的编程习惯,使用函数之前一定要声明.不然,即使编译能通过,运行时也可能会出一些莫名 ...
- http学习笔记（二）：URL和资源
2.1浏览因特网资源 ------------总结:方案.主机.路径 方案:http,FTP,SMTP等 http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连 ...
- 一个WPF小项目小结
一:缘起 老板有做PC桌面客户端的需求,做的是能耗的计算和评估,要算能耗,就有很多环节,最后对这些环节数据进行一些简单计算.我想要是做的话就用比较熟的wpf,就去聊了下,对方给了1张比较复杂的Exce ...
- 4.JavaScript
1.简介 JavaScript 是一种轻量级的编程语言,是一种动态类型.弱类型.基于原型的脚本语言. JavaScript,通常缩写为JS,是一种高级的,解释执行的编程语言.JavaScript是一门 ...
- html table 的属性
表格table th,td 文字顶部对齐 <th valign="top"></th> <td valign="top">& ...
- 获取iframe子页面节点，响应浏览器宽高
获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...
- 跨平台图表控件TeeChart使用教程:将图表数据导出为XML格式
在开发者使用TeeChart进行开发的过程中,不管是在设计时或者运行时都可以使用的图表导出对话框将图表数据轻易地导出为XML格式: TeeChart最新版那下载地址 上图为TeeChart导出对话框的 ...