玩转jquery属性与样式
来源:互联网 发布:淘宝网禁售品 编辑:程序博客网 时间:2024/05/22 13:06
引言:
jquery是一个js的框架,功能非常丰富,对于前端开发工程师来说不可能陌生,jquery封装了各种选择器,样式操作,Dom操作,各种事件和动画,功能非常强大,而且对于主流浏览器都兼容,我们来看看jquery中的属性与样式操作
参考:慕课网
attr():
attr(传入属性名):获取属性的值(常用用法,举个例子)
<input type="text" value="helloworld" /><script>$(".hello").attr('value')//获取类名为hello的元素(jquery的选择器)的value属性的值,结果为helloworld</script>
attr(属性名, 属性值):设置属性的值(常用用法,例子)
<input type="text" value="helloworld" /><script>$(".hello").attr('value','i am a boy')//结果 修改value属性的值为i am a boy</script>
attr(属性名,函数值):设置属性的函数值
attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
attr其实是设置属性,讲一个bug,如果你是动态设置value,有时候获取的是默认的value,而不是你输入的值,动态获取或设置最好还是用下面的一个操作函数val()
val():
val()获取元素的值
val(“va”)设置元素的值
val( function ) ,一个用来返回设置值的函数
html():
html()是用来获取元素的html内容,包括html标签
<div class="left first-div"> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> </div> $(".first-div").html() <!--结果 <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> -->
html( htmlString ) 设置元素的html内容
html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
text():
text()是比较常用的一个函数,用于得到匹配元素集合中每个元素的合并文本,包括他们的后代,返回值是字符串,比如下面一个例子
<div class="left first-div"> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> </div> $(".first-div").text() <-- 结果 :first-child 第二个元素 :last-child :first-child 第二个元素 :last-child -->
text( textString ) 用于设置匹配元素内容的文本
css():
这个方法很好用,可以获取元素的样式属性值,也可以设置
获取:
element.css(property)//获取property属性的值,如果property是数组,则返回一个对象结果
设置:
element.css(property,value)//设置property属性的值,也可将value换成函数,最厉害的是可以传一个对象,设置多个样式。
多个样式设置:
$('#abc').css({ fontSize : '12px', webkitBorderRadius : '5px', color : '#c00'})
补充:
css()设置方法是内联样式,样式是有优先性的,外部文件的css叫外部样式,内部定义好,等需要时才设置内部样式,直接通过style属性设置的是内联样式,css就是属于内联样式,优先级是内联>内部>外部
toggleClass和addClass,removeClass
为元素添加class的方式改变样式,属于外联样式和内部样式(如果是外部文件定义的就是外部样式)
addClass( className ) :
为每个匹配元素所要增加的一个或多个样式名
removeClass( className ):
每个匹配元素移除的一个或多个用空格隔开的样式名,如果没有样式名,所有样式将被移除
toggleClass( className ,false):
给元素切换的一个或多个(用空格隔开)样式类名,false是判断样式是否被添加或移除,可不加, toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的Class名,如果有就删除,如果没有就增加。toggleClass会保留原有的Class名后新增,通过空格隔开
就差不多到这了,有人看再更多个html5的dataset
0 0
- 玩转jquery属性与样式
- JQuery--属性与样式
- JQuery玩转Css样式
- JQuery样式与属性设置
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery-样式(jQuery的属性与样式)
- jQuery的属性与样式之.val()
- jQuery与属性和css样式
- jQuery的属性与样式之.val()
- jQuery的属性与样式之.val()
- 2、JQuery——属性与样式
- jQuery的属性与样式之增加样式.addClass()
- jQuery的属性与样式之删除样式.removeClass()
- jQuery的属性与样式之切换样式.toggleClass()
- nyoj 139 我排第几个(康拓展开)
- 解释执行的语言相比编译执行的语言有什么优缺点?
- iOS开发中@property的属性weak nonatomic strong readonly
- 在Linux安装Python之注意事项
- 《深入浅出MFC》– Document-View深入探讨
- 玩转jquery属性与样式
- idea创建javaweb项目
- 大二上学期(回顾与展望)
- 蓝桥杯——计算机研究生机试真题(2017.2.19)
- 解析STM32启动过程
- windows 使用git 将项目部署到linux上
- java mail
- 前端开发面试题总结之——JAVASCRIPT(一)
- SPOJ TBATTLE 尺取法