jquery中CSS的控制命令

本文介绍了如何使用jQuery进行元素样式的读取与设置,包括颜色、高度和宽度等属性的调整,并展示了jQuery内置的一些实用函数,如$.browser、$.each、$.extend等的使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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?" ]
这个比较有用,去除字符串的两端空格
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值