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%;}

热门文章

  • C++构造函数初始化列表
    C++构造函数初始化列表

    C++构造函数初始化列表

    构造函数的一项重要功能是对成员变量进行初始化,为了达到这个目的,可以在构造函数的函数体中对成员变量一一赋值,还可以采用 初始化列表 。 C +...

  • 抢占超声医学影像产业学习it的网站C位
    抢占超声医学影像产业学习it的网站C位

    抢占超声医学影像产业学习it的网站C位

    随着全球AI人工智能技术的快速发展与应用 全球医疗领域的智能化 科技化成为大势所趋 据相关资料数据统计 2016年全...

  • “编程从娃娃抓起”:逃得过“奥数” 又
    “编程从娃娃抓起”:逃得过“奥数” 又

    “编程从娃娃抓起”:逃得过“奥数” 又

    您所在的位置: 杭州网 > 新闻中心 > 国内新闻 “编程从娃娃抓起”:逃得过“奥数” 又要被编程套住 2019-03-22 09:18:07;杭州网 新华网 少儿编程火了,打开手机...

  • coreldraw教程网Photoshop iPad完整版本正式上
    coreldraw教程网Photoshop iPad完整版本正式上

    coreldraw教程网Photoshop iPad完整版本正式上

    Photoshop iPad完整版本正式上架苹果App Store...

  • 51自学网ps视频教程走在时尚前端的猎豹
    51自学网ps视频教程走在时尚前端的猎豹

    51自学网ps视频教程走在时尚前端的猎豹

    当消费者发现汽车一味的“大”并不能完全解决出行需求,反而影响了在城市中穿梭的便捷性之后,更加贴合年轻人...

后端

更多 >
后端趣味编程unzip命令 传zip到linux并解压
后端计算机程序设计设置FTP传输软件xftp默认打
后端计算机编程语言有哪些Java实现Linux grep命
后端趣味编程linux安装mysql5.7
后端儿童编程学习linux入门系列8--shell编程入门

工具资源

更多 >