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. 判断移动端跳转，从移动端来的不跳转。利用localStorage保存状态，window.location.pathname跳转不同的url

    手机访问 www.yourdomain.com 跳转,从m.yourdomain.com来的不跳转. 访问www.yourdomain.com/category8, 跳转到m.yourdomain.c ...

  2. slice深拷贝数组

    var a = [1, 2, 3, 4] var b = a.slice(0) b[0] = 2 // a = [1, 2, 3, 4] // b = [2, 2, 3, 4]

  3. codeforces 666E. Forensic Examination（广义后缀自动机，Parent树，线段树合并）

    传送门: 解题思路: 很坑的一道题,需要离线处理,假如只有一组询问,那么就可以直接将endpos集合直接累加输出就好了. 这里就要将询问挂在树节点上,在进行线段树合并时查询就好了. 代码超级容易写挂的 ...

  4. 洛谷 P2504 [HAOI2006]聪明的猴子

    洛谷 P2504 [HAOI2006]聪明的猴子 题目描述 在一个热带雨林中生存着一群猴子,它们以树上的果子为生.昨天下了一场大雨,现在雨过天晴,但整个雨林的地表还是被大水淹没着,部分植物的树冠露在水 ...

  5. [Javascript AST] 0. Introduction: Write a simple BabelJS plugin

    To write a simple Babel plugin, we can use http://astexplorer.net/ to help us. The plugin we want to ...

  6. android-5.1编译配置（van）

    必备文件: archives1211.tgz ubuntu_install_1204.tgz 安装指引: ubuntu_install_1204/readme.txt 工作目录结构: git ├── ...

  7. 40.lombok在IntelliJ IDEA下的使用

    转自:https://www.cnblogs.com/yjmyzz/p/lombok-with-intellij-idea.html lombok是一款可以精减java代码.提升开发人员生产效率的辅助 ...

  8. java sort

    MyString mySs[]=new MyString[result.length];//创建自定义排序的数组 for (int i = 0; i < result.length; i++) ...

  9. GO语言学习（十八）Go 语言接口

    Go 语言接口 Go 语言提供了另外一种数据类型即接口,它把所有的具有共性的方法定义在一起,任何其他类型只要实现了这些方法就是实现了这个接口. 实例 /* 定义接口 */ type interface ...

  10. amazeui学习笔记--css（基本样式）--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...