JQuery 常见用法


1. 基本结构 

$(document).ready(function() 
 { 
 $('.someClass' ).addClass('anotherClass' ); 
 } 
 );



和addClass对应的是removeClass() 

也可以在其他地方定义函数,然后再$(document).ready中写上函数名称即可。这个ready方法在DOM形成之后立刻运行 

2. 选择器 
选择的结果是一个集合,选择器和CSS差不多 
$()是基本结构,括号里是字符串,用引号标记起来。 
点号 。 代表类 
井号 # 代表ID 
大于号 > 表示子元素 
什么都不写,就是选择Html Tag 
:not(另一个选择器) 就是除了什么什么之外的选择。 
@ 是选择属性,就是含有某种属性的元素 
[] 中括号就是选择某个范围中的全部控件。 
如果想选取某个属性的某个值,可以用等号来实现 
比如 $('a[@href="www.google.com" ]' )

有某种属性的控件

$("input[readonly]" ).css("color", "Blue" );
$("textarea[readonly]" ).css("color", "Blue" );


字符串比较的等号有几个变种 
^= 表示仅比较字符串的头部 
$= 表示仅比较字符串的尾部 
*= 表示包含字符串 
例子:

$('a[@href^="mailto:"]').addClass('email')
$('a[@href$=".pdf"]').addClass('pdf');
$('a[@href*="my.com"]').addClass('my');


冒号后面接的是用户自定义的选择器 
比如tr:not[th] , 表示在选定的tr中不包括th控件 
tr:odd 表示选择单数行 
tr:even 选择双数行 
td:contains("str1" ) 选择内容包含这个字符串的控件 

.parent()是上一级控件 
.eq(0) 取得集合中的第一个元素 
.siblings() 全部同级的元素 
.find(选择字符串) 搜索 
.gt(1) 全部编号大于1的元素 
.end() 取消最后一次Find,一般是为下一次Find做准备。 
.get(index) 取得某个Index处的元素 
[index] 取得某个Index处的元素

例子

$('div.className:eq(1)')
$('td:odd').addClass('odd');
$('tr').filter(':odd').addClass('odd');
$('th').parent().addClass('thParent');

$('td:

3. 事件响应 

先用选择器找到控件,然后用Bind的方法,如下 

$('body' ).bind('click', function(){ 

 }); 
 也可以直接用事件名称来引用 
 $('body' ).click( 
 function(){ 

 } 
 );



.hover 和.toggle比较特殊,在这个响应中,需要两个函数,因为这两个是反复事件。.toggleClass就相对简单些,只需要给两个Class名称即 
可。 

function其实还可以带参数的 

$('body' ).click( 
 function(event){ 
 if(event.target == this){ 
 } 
 } 
 );



检查event.target可以确保事件是被正确的控件触发。 
event.stopPropagation(); 可以避免其他事件被触发。 

解除触发可以用unbind, 或者unclick等,不过新版本不太支持了。 

只触发一次可以用.one(),参数等用于bind方法。

bind方法可以使用的事件包括:blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error, ready

在事件的处理次序上,jquery支持事件冒泡。就是说最底层的先响应事件,然后在一点点向上。

4. 效果 

.hide(), .show() 就是调整display的属性,一点好处是是.hide()的时候,能够记住原来的值,.show()就可以恢复了。 
.show可以带参数,比如.show('slow' ), .show('normal' ), .show('fast' )这样就能够看出一点动画效果 
动画的函数还有 animate(), fadeIn(), fadeOut(), fadeTo(), slideDown(), slideUp()等。 
.css(属性)可以得到css属性的值,可以用于动画处理

.css用两种用法,一个是Set,一个是Get。set的两个参数。

var obj;
obj.css('fontsize')  //返回fontsize
obj.css('fontsize','14pt') //设定fontsize

有两个全局函数比较有用,引用的时候直接写就可以了,不需要加$什么的。

A. parseFloat(string, [base]) : 后面那个base,一般是10,表示十进位。string后面的字符串会被忽略掉,比如 10px,会被分析成10,但是最前面的字符不行,$10,会被认为是无效字符,返回NaN, not  a number.

B. slice(start, end): 等同于substring.

5. DOM属性

$('<a href=">link</a>') 这就是个Object。可以用上面这个InsertAfter其他组件

如: $('<a href=">link</a>' ) .insertAfter('#id')

.each() 就是针对选中集合中的每个元素, 参数是个函数,这个函数引用index, List的每个变量用$(this)来调用。 

比如:

$('.className' ).each(function(index)
{
$(this).val(index);
});


.attr("属性名","值" ),用来设定元素的属性。 
.removeAttr("属性名" ) 用来删除属性。 

针对元素的增删函数如下 
A。在每个匹配的元素中插入新元素 
.append(), .appendTo(), .prepend(), .prependTo() 
B。在每个匹配的元素相邻位置上插入 
.after(), .insertAfter(), .before(), .insertBefore() 
C。在每个匹配的元素外部插入新元素 
.wrap()

比如 $(this).wrap('<li></li>' ); 就是把当前的元素包裹在Li之中。

D。用新元素或文本替换每个匹配的元素 
.html(), .text() 
E。移除每个匹配的元素 
.empty() 
F。移除每个匹配的元素,但并不删除它们 
.remove()

G. 拷贝clone

.clone() 是拷贝全部

.clone(false)就是只拷贝一个框架,内容不拷贝。比如一个object是<a href=''>xxx</a>, clone(false)就没有中间的xxx了。

6. Ajax 
JQuery 和Ajax相关的函数有 
$.post(url, callback function) 
$.get(url, callback function) 
上面两个函数直接用$.来引用。 

和Ajax相关的事件 
$("#button1" ).ajaxStart(function) 
$("#button1" ).ajaxStop(function) 


7. Form操作(page 231 )