日期:2014-05-17  浏览次数:20636 次

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