JQuery 常见用法

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 ）