博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery的属性操作
阅读量:6761 次
发布时间:2019-06-26

本文共 2462 字,大约阅读时间需要 8 分钟。

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'})

 

attr删除属性前面必须加上你要删除的属性的值: 如果里面的括号写一个选项就是获取一个值 如果是两个选项就是增加 即覆盖,它增加的值就是覆盖了以前的值

$('要删除的选项').attr('要删除的选项', '具体的值');

removeAttr()

移除属性

//删除单个属性$('#box').removeAttr('name');$('#box').removeAttr('class');//删除多个属性$('#box').removeAttr('name class');

removeAttr是删除 你的属性(‘要删除的class/id’,'具体的值')

prop()

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

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

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

语法:

返回属性的值:

$(selector).prop(property)

设置属性和值:

$(selector).prop(property,value)

设置多个属性和值:

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

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

prop是可以检测它的本身的固有属性就是style 它喝attr相比  比attr多了可以判断正确的方法,所以一般只有判判true和false的时候才会用到prop

 

 

什么时候使用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;            }    })

案例:

代码如下:

    
  • 张三
  • 李四
  • 王五

 

toggleClass

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

语法:toggleClass('box')

 

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

html

获取值:

语法;

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

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

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

$('#box').html('百度一下');

 

 

text

获取值:

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

语法:

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

设置值:

设置该所有的文本内容

$('#box').text('百度一下');

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

 

 

val

获取值:

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

设置值:

 

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

 

转载于:https://www.cnblogs.com/zhaoyunlong/p/9122767.html

你可能感兴趣的文章
tomcat启动报错The JRE could not be found.Edit the server and change the JRE location
查看>>
dispatchers 设置
查看>>
JQuery
查看>>
转移python
查看>>
OpenCV---resize
查看>>
聊聊CSS postproccessors
查看>>
T-SQL:GO语句和批处理
查看>>
算法参考资料(更新)
查看>>
Poj 水题
查看>>
php中关于mysqli和mysql区别的一些知识点分析
查看>>
Fiddler的基本介绍
查看>>
Mysql On Mac OS: Remove & Install
查看>>
莫烦大大keras学习Mnist识别(4)-----RNN
查看>>
STL之string插入
查看>>
分巧克力 蓝桥杯
查看>>
程序员总结:帮助你早些明白一些道理
查看>>
DI是实现面向切面和面向抽象的前提
查看>>
桌面上的计算机(此电脑)图标不见了(或者只是快捷方式),找回的方法
查看>>
ABAP中TAB分隔符的使用
查看>>
smartforms初始化
查看>>