jquery部分操作

来源:互联网 发布:手机字体大小软件 编辑:程序博客网 时间:2024/06/09 19:34
1.css函数形式

$("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      },
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });
2.offset()
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。
3.position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
<style>
*{ margin:0px; padding:0px;}
</style>
<div>
<div style="margin:10px; background-color:#000; width:50px; height:50px;"></div>
</div>
<script>
alert($("div").position().top)
</script>

4.bind
为每个匹配元素的特定事件绑定事件处理函数
$("p").bind("click", function(){
  alert( $(this).text() );
});

同时绑定多个事件类型
jQuery 代码:
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

同时绑定多个事件类型/处理程序
jQuery 代码:
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});

你可以在事件处理之前传递一些附加的数据。
jQuery 代码:
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

5.trigger(type,[data])
在每一个匹配的元素上触发某类事件
提交第一个表单,但不用submit()
jQuery 代码:
$("form:first").trigger("submit")
描述:
给一个事件传递参数
jQuery 代码:
$("p").click( function (event, a, b) {
  // 一个普通的点击事件时,a和b是undefined类型
  // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

5.unbind(type,[data|fn]])
把所有段落的所有事件取消绑定
jQuery 代码:
$("p").unbind()

描述:
将段落的click事件取消绑定
jQuery 代码:
$("p").unbind( "click" )

6.live(type, [data], fn)
jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说
$('.clickme').live('click', function() {
  alert("Live handler called.");
});
7.hover([over,]out)
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
8.toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
对表格切换显示/隐藏
jQuery 代码:

$('td).toggle();

fn,fn2描述:

对表格的切换一个类
jQuery 代码:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

9.scroll([[data],fn])
在每一个匹配元素的scroll事件中绑定一个处理函数。
当滚动条发生变化时触发

<div  id="div1" style="width:100px; height:100px; overflow:scroll;">
<div style="height:10000px;">dddd</div>
</div>
<span></span>

<script>
var x=0;
$("#div1").scroll(function(){
x+=1;
$("span").html(x);
});
</script>

11.jQuery.map(arr|obj,callback)
将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。

<script>
var a = [1,2,3];
var b = $.map( a, function(n){
  return [ n, n + 1 ];
});
for(var i=0 ; i < b.length ; i++){
    alert(b[i])    
}
</script>

11.jQuery.makeArray(obj)
将类数组对象转换为数组对象。
类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
jQuery 代码:
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用数组翻转函数
结果:
Fourth
Third
Second
First
12.jQuery.inArray(value,array,[fromIndex])
确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 )。
var arr = [ 4, "Pete", 8, "John" ];
13jQuery.merge(first,second)
合并两个数组
返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项,请使用$.unique()
14.jQuery.unique(array)
删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组。
15.jQuery.parseJSON(json)
概述
接受一个JSON字符串,返回解析后的对象。
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
16 jQuery.isArray(obj) jQuery.isFunction(obj) jQuery.isEmptyObject(obj)
jQuery.isWindow(obj)
概述
测试对象是否是窗口(有可能是Frame)
jQuery.isNumeric(value)
jQuery.type(obj)
jQuery.trim(str)

jQuery.param(obj,[traditional])
将表单元素数组或者对象序列化。是.serialize()的核心方法。

按照key/value对序列化普通对象。
jQuery 代码:

var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);
结果:
width=1680&height=1050


表达式全集
字符     描述
\     将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如,“n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。
^     匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性,^也匹配“\n”或“\r”之后的位置。
$     匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性,$也匹配“\n”或“\r”之前的位置。
*     匹配前面的子表达式零次或多次。例如,zo*能匹配“z”以及“zoo”。*等价于{0,}。
+     匹配前面的子表达式一次或多次。例如,“zo+”能匹配“zo”以及“zoo”,但不能匹配“z”。+等价于{1,}。
?     匹配前面的子表达式零次或一次。例如,“do(es)?”可以匹配“does”或“does”中的“do”。?等价于{0,1}。
{n}     n是一个非负整数。匹配确定的n次。例如,“o{2}”不能匹配“Bob”中的“o”,但是能匹配“food”中的两个o。
{n,}     n是一个非负整数。至少匹配n次。例如,“o{2,}”不能匹配“Bob”中的“o”,但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。
{n,m}     m和n均为非负整数,其中n<=m。最少匹配n次且最多匹配m次。例如,“o{1,3}”将匹配“fooooood”中的前三个o。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
?     当该字符紧跟在任何一个其他限制符(*,+,?,{n},{n,},{n,m})后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串“oooo”,“o+?”将匹配单个“o”,而“o+”将匹配所有“o”。
.     匹配除“\n”之外的任何单个字符。要匹配包括“\n”在内的任何字符,请使用像“(.|\n)”的模式。
(pattern)     匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到,在VBScript中使用SubMatches集合,在JScript中则使用$0…$9属性。要匹配圆括号字符,请使用“\(”或“\)”。
(?:pattern)     匹配pattern但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分是很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式。
(?=pattern)     正向肯定预查,在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如,“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”,但不能匹配“Windows3.1”中的“Windows”。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。
(?!pattern)     正向否定预查,在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如“Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”,但不能匹配“Windows2000”中的“Windows”。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始
(?<=pattern)     反向肯定预查,与正向肯定预查类拟,只是方向相反。例如,“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”,但不能匹配“3.1Windows”中的“Windows”。
(?<!pattern)     反向否定预查,与正向否定预查类拟,只是方向相反。例如“(?<!95|98|NT|2000)Windows”能匹配“3.1Windows”中的“Windows”,但不能匹配“2000Windows”中的“Windows”。
x|y     匹配x或y。例如,“z|food”能匹配“z”或“food”。“(z|f)ood”则匹配“zood”或“food”。
[xyz]     字符集合。匹配所包含的任意一个字符。例如,“[abc]”可以匹配“plain”中的“a”。
[^xyz]     负值字符集合。匹配未包含的任意字符。例如,“[^abc]”可以匹配“plain”中的“p”。
[a-z]     字符范围。匹配指定范围内的任意字符。例如,“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。
[^a-z]     负值字符范围。匹配任何不在指定范围内的任意字符。例如,“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。
\b     匹配一个单词边界,也就是指单词和空格间的位置。例如,“er\b”可以匹配“never”中的“er”,但不能匹配“verb”中的“er”。
\B     匹配非单词边界。“er\B”能匹配“verb”中的“er”,但不能匹配“never”中的“er”。
\cx     匹配由x指明的控制字符。例如,\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则,将c视为一个原义的“c”字符。
\d     匹配一个数字字符。等价于[0-9]。
\D     匹配一个非数字字符。等价于[^0-9]。
\f     匹配一个换页符。等价于\x0c和\cL。
\n     匹配一个换行符。等价于\x0a和\cJ。
\r     匹配一个回车符。等价于\x0d和\cM。
\s     匹配任何空白字符,包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
\S     匹配任何非空白字符。等价于[^ \f\n\r\t\v]。
\t     匹配一个制表符。等价于\x09和\cI。
\v     匹配一个垂直制表符。等价于\x0b和\cK。
\w     匹配包括下划线的任何单词字符。等价于“[A-Za-z0-9_]”。
\W     匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
\xn     匹配n,其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如,“\x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。.
\num     匹配num,其中num是一个正整数。对所获取的匹配的引用。例如,“(.)\1”匹配两个连续的相同字符。
\n     标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式,则n为向后引用。否则,如果n为八进制数字(0-7),则n为一个八进制转义值。
\nm     标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式,则nm为向后引用。如果\nm之前至少有n个获取,则n为一个后跟文字m的向后引用。如果前面的条件都不满足,若n和m均为八进制数字(0-7),则\nm将匹配八进制转义值nm。
\nml     如果n为八进制数字(0-3),且m和l均为八进制数字(0-7),则匹配八进制转义值nml。
\un     匹配n,其中n是一个用四个十六进制数字表示的Unicode字符。例如,\u00A9匹配版权符号(©)。



常用正则表达式
用户名     /^[a-z0-9_-]{3,16}$/
密码     /^[a-z0-9_-]{6,18}$/
十六进制值     /^#?([a-f0-9]{6}|[a-f0-9]{3})$/
电子邮箱     /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
URL     /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
IP 地址     /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
HTML 标签     /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
删除代码\\注释     (?<!http:|\S)//.*$
Unicode编码中的汉字范围     /^[\u2E80-\u9FFF]+$/
0 0