js进阶 11-3  jquery中css属性如何操作

一、总结

一句话总结:通过css()方法

1、attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么?

其实通俗一点就是css范围更广

css是样式中的width,attr是属性中的width。

<img src="HTML5.png" alt="" width="100" border="2">

如果image没有设置width属性,attr中取不到,但是css中可以取到其原始宽度

2、css()方法多属性设置,用什么标点符号表示?

逗号,因为逗号表示多 ,multi

3、编程语言中的逗号表示什么?

多,multy,比如多参数,多属性

4、编程语言中键值对的表示有哪几种方式?

css中冒号,php中的=>和逗号,java中的赋值号=,jquery中的冒号

二、jquery中css属性如何操作

1、相关知识

CSS属性操作

  1. 获取CSS属性值:$().css("属性")
  2. 设置单个CSS属性:$().css("属性","属性值")
  3. 设置多个CSS属性:$().css({"属性1":"属性值1","属性2":"属性值2",……})

2、代码

 <!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
</style>
</style>
</head>
<body>
<img src="HTML5.png" alt="" width="100" border="2">
<img src="HTML5.png" alt="" width="100" border="2">
<img src="HTML5.png" alt="" width="100" border="2">
<input type="button" id="btn1" value="获取">
<input type="button" id="btn2" value="设置1">
<input type="button" id="btn3" value="设置2">
<input type="button" id="btn4" value="删除"> <script>
$(function(){
//获取元素的属性值
$('#btn1').click(function(){
//alert($('img').attr('width'))
alert($('img').css('width'))
})
$('#btn2').click(function(){
//设置单个CSS属性
//$('img').css('width','200')
//设置多个CSS属性
$('img').css({
'border':'solid 5px green',
'opacity':'0.5'
})
}) $('#btn3').click(function(){
$('img').css('width',function(index,value){
alert(parseInt(value))
return parseInt(value) *(index+1)/3+'px'
})
})
$('#btn4').click(function(){
$('img').removeAttr('border width')
}) })
</script>
</body>
</html>
 

js进阶 11-3 jquery中css属性如何操作的更多相关文章

  1. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  2. js进阶 10-6 jquery中的属性选择器有哪些

    js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...

  3. jquery中的属性和css

    jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...

  4. js进阶 11-1 jquery中的页面内容操作的三个方法

    jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...

  5. js进阶课程 12-9 jquery的事件对象event的方法有哪些?

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  6. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  7. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  8. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  9. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

随机推荐

  1. http://www.blogjava.net/xzclog/archive/2011/09/29/359789.html

    http://www.blogjava.net/xzclog/archive/2011/09/29/359789.html http://bbs.csdn.net/topics/380187593

  2. 小结 javascript中的类型检测

    先吐槽一下博客园的编辑器,太不好用了,一旦粘贴个表格进来就会卡死,每次都要用html编辑器写,不爽! 关于javascript的类型检测,早在实习的时候就应该总结,一直拖到现在,当时因为这个问题还出了 ...

  3. eBay 开发流程

    1[记录]注册成为eBay开发者(eBay Developers Program)+创建Sanbox Key和Production Key http://www.crifan.com/register ...

  4. java入门了解02

    1:JDK,JRE,JVM的作用关系    (一)作用            JVM:提供java跨平台            JRE:java运行环境            JDK:java开发环境 ...

  5. Go 语言数据类型

    在 Go 编程语言中,数据类型用于声明函数和变量. 数据类型的出现是为了把数据分成所需内存大小不同的数据,编程的时候需要用大数据的时候才需要申请大内存,就可以充分利用内存. Go 语言按类别有以下几种 ...

  6. 基于RTMP的实时流媒体的QoE分析

    Holly French等人在论文<Real Time Video QoE Analysis of RTMP Streams>中,研究了基于RTMP的实时视频的QoE.在此记录一下. 他们 ...

  7. [LeetCode&amp;Python] Problem 70. Climbing Stairs

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  8. 2019.03.11 COGS2652 秘术(天文密葬法)(分数规划+长链剖分)

    传送门 题意:nnn个点的树,每个点两个值a,ba,ba,b,问长度为mmm的路径∑ai∑bi\frac{\sum a_i}{\sum b_i}∑bi​∑ai​​的最大值. 思路:一眼要01分数规划, ...

  9. C#面向对象之封装。

    封装是面向对象的基础和重要思想之一,今天具体的了解封装这一特性后发现其实自己已经接触过很多关于封装的内容了. 一.什么是封装. 封装的概念:将具体的实现细节装到一个容器中,封闭或隐藏起来(使用访问修饰 ...

  10. 企业级仓库harbor搭建

    1.Harbor是什么? Harbor是Vmvare中国团队开发的开源registry仓库,相比docker官方拥有更丰富的权限权利和完善的架构设计,适用大规模docker集群部署提供仓库服务.在企业 ...