04-jQuery的属性操作

 

jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作

  • html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
  • DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
  • 类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
  • 值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()

设置属性值或者 返回被选元素的属性值

       //获取值: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()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

语法:

返回属性的值:

$(selector).prop(property)

设置属性和值:

$(selector).prop(property,value)

设置多个属性和值:

$(selector).prop({property:value, property:value,...})

关于attr()和prop()的区别

<!DOCTYPE html>
<html lang="en">
<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>

什么时候使用attr(),什么时候使用prop()?

1.是有true,false两个属性使用prop();

2.其他则使用attr();

addClass(添加多个类名)

为每个匹配的元素添加指定的类名。

$('div').addClass("box");//追加一个类名到原有的类名

还可以为匹配的元素添加多个类名

$('div').addClass("box box2");//追加多个类名

removeClass

从所有匹配的元素中删除全部或者指定的类。

移除指定的类(一个或多个)

$('div').removeClass('box');

移除全部的类

$('div').removeClass();

可以通过添加删除类名,来实现元素的显示隐藏

代码如下:

var tag  = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})

案例:

代码如下:

<!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

如果存在(不存在)就删除(添加)一个类。

语法:toggleClass('box')

$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})

html

获取值:

语法;

html() 是获取选中标签元素中所有的内容

$('#box').html();

设置值:设置该元素的所有内容 会替换掉 标签中原来的内容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

text

获取值:

text() 获取匹配元素包含的文本内容

语法:

$('#box').text();

设置值:
设置该所有的文本内容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

注意:值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中

val

获取值:

val()用于表单控件中获取值,比如input textarea select等等

设置值:

$('input').val('设置了表单控件中的值');

前端 ----jQuery的属性操作的更多相关文章

  1. 前端jQuery之属性操作

    属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置 ...

  2. python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  3. jquery之属性操作

    jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...

  4. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

  5. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  6. jQuery系列(四):jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  7. JQuery常用属性操作,动画,事件绑定

    jQuery 的属性操作        html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.        text() 它可以设置和获取起始标签和 ...

  8. jquery学习--属性操作

    学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...

  9. jQuery的属性操作

    下面介绍jQuery属性操作: .val() 这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的va ...

随机推荐

  1. Java中的AES加解密

    直接上代码,Base64使用的是Java8的方法,如没有,替换即可 KEY:即密码 IV:即偏移量,可自订,十六位 加密方式:AES/CBC/PKCS5Padding,128位加密 如果想用256位和 ...

  2. 使用JAVA数组实现顺序表

    1,引入了JAVA泛型类,因此定义了一个Object[] 类型的数组,从而可以保存各种不同类型的对象. 2,默认构造方法创建了一个默认大小为16的Object数组:带参数的构造方法创建一个指定长度的O ...

  3. excel数据 入库mysql 和 mysql数据 导入excel文件

    1.excel数据入库mysql 首先准备excel文件, 标红的地方需要留意,一个是字段名所在行,一个表名对应页: 然后私用mysql工具 navicat, 选择数据库,然后导入文件, 选中相应ex ...

  4. json对象转数组

    <script type="text/javascript"> var object = {"a":1,"b":2," ...

  5. git 新建分支

    创建分支   git checkout -b 分支名 推送到远程   git push origin 分支名

  6. Spring Data

    官网地址 http://projects.spring.io/spring-data 包含子项目 简介 Spring Data 是 Spring 的一个子项目.用于简化数据库访问,支持NoSQL,关系 ...

  7. 技巧性极强的strings命令

    打印文件中的可打印字符串(print the strings of printable characters in files).常用来在二进制文件中查找字符串,与grep配合使用.strings命令 ...

  8. React多行文本溢出处理(仅针对纯文本)

    最多显示4行,第四行末尾显示“...”

  9. 一个spring3.2的项目 从jdk1.7放到1.8的环境中编译,打开网页异常:spring jar包版本升级经历

    背景:一个历史项目用的是 spring3.2 的版本,在jdk1.7中运行没有问题,但是如果在jdk1.8中运行就会报错 ---浏览器中显示: HTTP Status 500 - Servlet.in ...

  10. IBM 3650 M3 yum upgrade后系统无法登陆问题

    一.背景 IBM 3650 M3安装了centos7.2操作系统 今天yum upgrade升级centos7.6,重启系统后发现开不了机,报错如下: Failed to set MokListRT: ...