IT学习网是免费的终身在线学习平台,现在主要提供IT(互联网)方面的教程,博客等方面的内容
主页 > 前端 > > 正文

编程视频教程jQuery属性操作

来源:IT学习网整理 发布时间:2020-02-14 18:54 标签:操作jquery属性
浏览:

书籍/周边

站内搜索

fly63前端网

提交

我要投稿

jQuery属性操作

时间: 2019-08-08阅读: 209标签: 操作

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" checked/> 女<input type="radio" /> <button>提交</button> <script type="text/javascript" src="http://www.fly63.com/article/detial/5205/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>张三</li> <li>李四</li> <li>王五</li> </ul> <script type="text/javascript" src="http://www.fly63.com/article/detial/5205/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="http://www.baidu.com">百度一下</a>');


text

获取值:

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

语法:

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

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

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

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

val

获取值:

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

设置值:

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


.two_ads{overflow: hidden;} .two_ads a{float: left;width: 49.443%;} .two_ads a:nth-child(2){float: right;} .two_ads img{display: block;margin: 5px 0;max-width: 100%;}

热门文章

  • 用VPN得小心了,一程序员非法出售 VPN 被判
    用VPN得小心了,一程序员非法出售 VPN 被判

    用VPN得小心了,一程序员非法出售 VPN 被判

    上海市宝山区人民法院审理了一起案件,被告人戴某原在某证券管理公司从事软件开发工作。自 2016 年 4 月起,其为牟取非法利益,创建某网站,并在网站...

  • h5通过css实现禁止ios端长按复制选中文字
    h5通过css实现禁止ios端长按复制选中文字

    h5通过css实现禁止ios端长按复制选中文字

    在ios端默认的长按选择,可以对文字进行复制粘贴。但是在实际开发中,针对一些按钮一般要避免长按时弹出选中文字,或者一些罩层要避免弹出。 这篇文...

  • 自学教程腾讯开源新生移动跨端开发框架
    自学教程腾讯开源新生移动跨端开发框架

    自学教程腾讯开源新生移动跨端开发框架

    自学教程原标题:腾讯开源新生移动跨端开发框架Hippy:支持iOS、安卓 来源:IT之家 新酷产品第一时间免费试玩,还有众多优质达人分享独到生活经验,快...

  • it技术是什么玉米2005(C2005)11月12日行情及
    
it技术是什么玉米2005(C2005)11月12日行情及

    it技术是什么玉米2005(C2005)11月12日行情及

    (玉米2005)主力合约(C2005)今日开盘价为1937.0000元,收盘价为1919.0000元,较上一个交易日下跌-20.0000元 ,涨/跌幅度...

  • 编程视频教程vue里的$refs属性
    编程视频教程vue里的$refs属性

    编程视频教程vue里的$refs属性

    编程视频教程vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点...

后端

更多 >
后端 新手学网站编程入门将促进境内市场与国
后端 学编程学习SpatialOS作为英礴旗下的下一代
后端 编程基础怎么学看一看其他和这家公司合
后端 编程自学多长时间若申请将手中持有的基
后端 编程需要学习那些如何教三岁宝宝学数学

工具资源

更多 >