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 )