`
残血舞
  • 浏览: 31749 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery中CSS的控制命令

阅读更多
1/. CSS(name)读取样式属性值

eg:<p style="color:red;">Test Paragraph.</p>

$("p").css("color") ==>> [ "red" ]
css.取得p元素中的css的color属性

2/css(properties)设置style

eg:<p>Test Paragraph.</p>

$("p").css({ color: "red", background: "blue" }) ==>> [ <p style="color:red; background:blue;">Test Paragraph.</p> ]
css设置元素的css样式.参数就为,属性.值这种格式

3/css(key, value)设置单个样式属性,如果设置的值是数字的话,会被自动转化为像素单位

eg:<p>Test Paragraph.</p>

$("p").css("color","red") ==>> [ <p style="color:red;">Test Paragraph.</p> ]

$("p").css("left",30) ==>> [ <p style="left:30px;">Test Paragraph.</p> ]
功能差不多,注意如果值是数据,单位会直接转为px

1/height()取得当前匹配节点数组中的第一个节点的高的值

eg: <p>This is just a test.</p>

$("p").height() ==>> [ 300 ]

2/ height(val) 设置所有匹配的节点的高,如果val的单位不是ex,%,那么单位自动设为px

eg:<p>This is just a test.</p>

$("p").height(20) ==>> [ <p style="height:20px;">This is just a test.</p> ]
height设置CSS节点的高度

.width() 设置宽度,width(val)设置高度.用法与height一样以上是基本的CSS的js用法,下面主要记录jQuery的一些功能函数

43.$.browser 用于判断浏览器的分别为safari,opera, msie, mozilla.这些方法要等DOM ready后才能使用

eg: if($.browser.safari) {$( function() { alert("this is safari!"); } ); }
判断浏览器

$.each(obj,fn) 这个方法与$().each()不一样,前者可以迭代任务数组与对像,后者只能迭代jQuery对象

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });

$.extend(target, prop1, propN)继承多个对象.target被扩展的对象.prop1,第一个父对象,propN其它被继承的对象

eg:1. var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); ==>> [ settings == { validate: true, limit: 5, name: "bar" } ]
整合对象

eg:2.var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" };var settings = jQuery.extend({}, defaults, options); ==>> [ settings == { validate: true, limit: 5, name: "bar" } ]

$.grep(array, fn, inv)用fn过滤array,当fn返回true时array元素保留在数组中

eg:$.grep( [0,1,2], function(i){ return i > 0; }); ==>> [1, 2]

$.map(array, fn)通过fn修改array中的值当函数返回值为null里,array元素将被删除,当返回是数组时,返回的数组将与原数组合并

eg:1.$.map( [0,1,2], function(i){ return i + 4; }); ==>> [4, 5, 6]

eg:2.$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); ==>> [2, 3]

eg:3.$.map( [0,1,2], function(i){ return [ i, i + 1 ]; }); ==>> [0, 1, 1, 2, 2, 3]

$.merge(first, second)两个数组进行合并,删除重复的值

eg:$.merge( [0,1,2], [2,3,4] ) ==>> [0,1,2,3,4]

eg:$.merge( [3,2,1], [4,3,2] ) ==>> [3,2,1,4]

$.trim(str)去除字符串两端的空格,一个十分熟悉常用的方法

eg:$.trim(" hello, how are you? ") ==>> [ "hello, how are you?" ]
这个比较有用,去除字符串的两端空格
分享到:
评论

相关推荐

    CSS JS JQUERY文档

    JavaScript还支持函数式、面向对象和命令式等多种编程范式,使其在Web开发中具有极高的灵活性。 jQuery是JavaScript的一个库,由John Resig在2006年创建。它的出现极大地简化了JavaScript的DOM操作,提供了一种更...

    jQuery.JavaScript与CSS开发入门经典

    《jQuery.JavaScript与CSS开发入门经典》是一本旨在引导初学者进入前端开发领域的书籍,它涵盖了Web开发中三个至关重要的技术:jQuery、JavaScript和CSS。这三者是构建交互式和动态网页的基础,也是现代Web开发的...

    js CSS SQL SSH Jquery手册.

    JavaScript、CSS、SQL、SSH和jQuery是Web开发中的核心技术,掌握它们对于任何前端或后端开发者来说都至关重要。下面是对这些技术的详细介绍。 **JavaScript**:JavaScript是一种轻量级的解释型编程语言,主要用于...

    web开发javascript,css,jquery,php,sql等开发文档

    通过CSS,我们可以控制网页的布局,包括字体、颜色、间距、大小、背景等视觉元素。CSS3引入了更多高级功能,如媒体查询、动画和转换,使网页设计更加灵活和响应式。 **jQuery** 是一个JavaScript库,简化了...

    jquery局部打印

    总结起来,`jquery局部打印`是通过`jquery.PrintArea.js`插件实现的,它使开发者能够控制用户打印网页时的具体内容,提高用户体验。结合HTML、CSS和jQuery,你可以创建出符合设计需求的定制化打印方案。

    gifplayer-可控制GIF动画图片播放和暂停jQuery插件

    1. **播放与暂停**:通过`gifplayer`,用户可以点击一个按钮或者使用特定的JavaScript命令来启动或停止GIF动画的播放,增加了对GIF动态效果的控制。 2. **轻量级**:该插件文件体积小巧,不会增加网页加载时间,...

    jquery+tomcat+oracle+mysql+css帮助文档

    `CSS2.0.chm`是层叠样式表(CSS)的2.0版本规范,CSS用于控制网页的布局和样式。了解CSS2.0的基本概念和选择器,可以帮助你创建美观、响应式的网页界面。 `W3CSchool.chm`和`Javascript手册.chm`是Web开发的基础教程...

    apache,CSS,JQuery,PHP,sql,W3school中文打包下载

    JQuery的核心特性包括:选择器(类似于CSS的选择器语法来选取DOM元素)、链式调用(一个方法调用后可以直接调用另一个方法)、高效的DOM操作、丰富的插件生态系统等。通过JQuery,开发者可以更轻松地实现复杂的交互...

    jdk-html-css-jquery操作手册

    在实际开发中,这四者通常结合使用:JDK用于后端处理和数据提供,HTML构建页面结构,CSS设计视觉样式,而jQuery则作为前端交互的桥梁,提高用户体验。理解并熟练掌握这些技术,将有助于你构建功能完备、界面友好的...

    常见的几个中文开发文档 css

    对于初学者来说,这是一个很好的起点,可以学习到网页构建的基础知识,如HTML标签的用法、CSS样式控制以及JavaScript基本语法。 综上所述,这些文档提供了从后端开发(Java)、前端开发(jQuery)、数据库管理...

    jQuery手机扭蛋机抽奖代码.rar

    在这个扭蛋机抽奖代码中,jQuery被用来处理用户交互,如监听按钮点击事件,以及控制抽奖动画的开始和结束。 2. **CSS3动画**:CSS3提供了丰富的动画功能,如过渡(transition)和关键帧动画(keyframe animation)...

    Grails 和 jQuery开发实例

    例如,`generate-controller`命令可以自动生成控制器及其相关的视图和测试,`run-app`命令则能快速启动本地服务器,让我们实时预览应用效果。 总的来说,通过Grails和jQuery的结合,我们可以高效地构建一个功能完善...

    jquery datepicker 时分秒

    在使用 `jQuery UI Datepicker` 时,你需要在页面中引入相关的 CSS 和 JavaScript 文件。通常,这包括 `jquery.js`、`jquery-ui.css` 和 `jquery-ui.js`。这些文件会提供必要的样式和交互逻辑。对于时分秒的支持,你...

    基于 CSS3 实现抽奖大转盘.pdf

    6. 控制转盘的速度:我们需要控制转盘的速度,以模拟现实中的转盘旋转。 7. 等分切割转盘的扇形区域:我们需要等分切割转盘的扇形区域,以便随机抽取奖品。 8. 随机抽取奖品:我们需要随机抽取奖品,以模拟现实中的...

    最全Linux+mysql+jquery+redis+css+w3cSchool的API帮助手册大集合

    这个"最全Linux+mysql+jquery+redis+css+w3cSchool的API帮助手册大集合"压缩包很可能是包含上述技术的详细文档和参考资料,对于开发者来说,是一个宝贵的工具集,可以帮助他们快速查找和理解各种技术的API用法,提升...

    jquery-bbedit-1.1.zip_bbedit jquery_jquery-bbedit

    2. **代码片段**:内建了一套丰富的jQuery代码片段,允许用户通过快捷键或自定义命令快速插入常见的jQuery函数和结构,如$(document).ready()、$.ajax()等,极大地提高了编码速度。 3. **自动完成**:在输入jQuery...

    jQuery点击弹出确认或取消删除特效.zip

    标题中的“jQuery点击弹出确认或取消删除特效”是一个常见的前端交互设计,它涉及到了JavaScript库jQuery、CSS样式以及HTML5的基本元素应用。这个特效在网页中常常用于用户执行删除操作前提供一个确认提示,避免因误...

    Learning+jquery中文版

    jQuery 中选择器表达式让你找到页面上所有的元素,你将会使用选择器表达 式来样式化页面上不同的元素,有时候可以不是纯 css。 在第三章里,你会学习如何触发事件,浏览器发事件时,你将会使用 jQuery 的事件处理机 ...

    css3 svg逼真水滴特效.zip

    在水滴特效中,CSS3的主要作用在于控制水滴的形状、颜色、透明度以及动态效果,如水滴的落下动画和反弹效果。 SVG则是一种基于XML的矢量图格式,它允许开发者创建清晰的、可缩放的图形,无论放大多少倍都不会失真。...

    jQuery拖拽插件

    在压缩包中的"draggable"文件可能包含了该插件的源码、示例、文档或CSS样式文件。你可以根据需要查看这些文件以深入了解其工作原理和使用方法。如果文件中包含示例代码,通过学习和运行这些示例,你将能更好地理解...

Global site tag (gtag.js) - Google Analytics