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. BZOJ1195: [HNOI2006]最短母串（Trie图，搜索）

    Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2,„,Sn)都是T的子串. Input 第一行是一个正整数n(n<=12) ...

  2. pytest_多用例执行(1)

    一.首先创建测试套件 # -*- coding:utf-8 -*-from __future__ import print_functionimport pytestimport allure cla ...

  3. HDU 5389 Zero Escape （MUT#8 dp优化）

    [题目链接]:pid=5389">click here~~ [题目大意]: 题意: 给出n个人的id,有两个门,每一个门有一个标号,我们记作a和b,如今我们要将n个人分成两组,进入两个 ...

  4. MES制造系统

    给大家介绍一个非常不错的MES专业产品网站,http://www.OrBitMES.com 上面分为初.中.高各级的难得的MES产品学习资料下载, http://www.orbitmes.com/Pr ...

  5. Java Web学习总结（17）——JSP属性范围

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  6. 注意knn与kmeans的区别

    开始的时候,我居然弄混了. knn是分类方法,是通过新加入的节点最接近的N个节点的属性,来判定新的节点. kmeans是聚类方法,是先选择k个点作为k个簇的中点,然后分簇之后重新划定中心点,然后再分簇 ...

  7. [转]C#连接操作mysql实例

    本文转自:http://hi.baidu.com/zhqngweng/item/c4d2520cb7216877bfe97edf 第三方组件:Mysql.Data.dll说明:去官方网站下载Mysql ...

  8. CSS笔记 - fgm练习 2-7 - 简易选项卡

    练习地址 http://www.fgm.cc/learn/lesson2/07.html <style> body,ul,li{margin:0;padding:0;} body{font ...

  9. 驱动学习3-make

    在向内核中添加驱动的时候要完成3项工作 (1)在Kconfig中添加新代码对应项目的编译条件(下面Makefile文件中需要用到它定义的的宏变量) (2)将驱动源码添加到对应的目录中 (3)在目录Ma ...

  10. js进阶 12-14 jquery的事件触发函数是哪两个

    js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...