大纲
- 选择网页元素
- 改变结果集
- 链式操作
- 元素的操作:取值和赋值
- 元素的操作:移动
- 元素的操作:复制、删除和创建
- 工具方法
- 事件操作
- 特殊效果
- jQuery思想之一:选择某个页面元素,对其进行某种操作
$(document)
$('#idName')
$('p.para1')
$('inpug[required=required]')
$('p:first')
$('tr:odd')
$('#stu :input')
$('span:visible')
$('div:lt(3)')
$('div:animated')
- jQuery思想之二:强大的过滤器
$('span').has('a')
$('div').not('.NotmyDiv')
$('div').filter('.myDiv')
$('div').first();
$('div').eq(3);
- DOM树上的移动方法
$('div').next('p');
$('div').parent();
$('div').closest('span');
$('div').children();
$('span').siblings();
- jQuery思想之三:操作
$('div').find('h2').eq(4).html('Hello jQuery!');
$('div').find('h4').eq(1).html('Hello xiao,').end().eq(2).html('Nice to meet you!');
操作元素:取值和赋值
jQuery思想之四:使用同一个函数,完成取值(getter)和赋值(setter)
$('span').html();
$('span').html('gunFu');
- 常见的取值和赋值函数
.html(); //html内容
.text(); //text内容
.attr(); //某个属性的值
.width();
.height();
.val(); //某个表单元素的值
- jQuery思想之五:移动
// p div
$('div').insertAfter($('p'));
// p div
$('p').after('div');
.insertAfter();
.after();
.insertBefore();
.before();
.appendTo();
.append();
.prependTo();
.prepend();
- 操作元素:复制、删除和创建
.clone(); //复制元素
.remove(); //删除元素,不保留元素事件
.detach(); //删除元素,保留元素事件
.empty(); //清空元素内容
$.trim(); //去除字符串两端的空格
$.each(); //遍历一个数组或对象
$.inArray(); //返回一个值在数组中的索引位置
$.grep(); //返回数组中符合要求的元素
$.extend(); //合并多个对象为一个对象
$.makeArray(); //将对象转化为数组
$.type(); //判断对象的类别(函数、日期、数组、正则等对象)
$.isArray(); //判断是否为数组
$.isEmptyObject(); //判断某个对象是否为空
$.isFunction(); //判断是否为函数
$.isPlainObject(); //判断是否为用{}或new Object建立的对象
$.support(); //判断浏览器是否支持某个特性
- jQuery思想:事件操作
- 把事件直接绑定在DOM元素上
$('div').click(function(){alert('请输入学号')});
.focus(); //获得焦点
.blur(); //失去焦点
.focusin(); //子元素获得焦点
.focusout(); //子元素失去焦点
.hover(); //mouseenter+mouseleave
.change(); //值变化时
.click(); //鼠标单击
.dbclick(); //鼠标双击
.keydown(); //按下键盘(长按只返回一个事件)
.keypress(); //按下键盘(长按返回多个事件)
.keyup(); //松开键盘
.load(); //元素加载完毕
.mousedown(); //鼠标按下
.mouseenter(); //鼠标进入(子元素不触发)
.mouseleave(); //鼠标离开(子元素不触发)
.mousemove(); //鼠标移动
.mouseover(); //鼠标进入(子元素触发)
.mouseout(); //鼠标离开(子元素触发)
.mouseup(); //鼠标松开
.ready(); //DOM加载完毕
.resize(); //浏览器窗口大小发生变化
.scroll(); //滚动条位置发生变化
.select(); //文本框中内容被选中
.submit(); //提交表单
.toggle(); //交替执行不同函数
.unload(); //用户离开页面
- 以上事件都可以用
.bind()
方式控制
$('a').bind('click mouseover', function(){alert('Wow')});
$('选择表达式').bind(事件名,函数);
$('选择表达式').one(事件名,函数);
$('选择表达式').unbind(事件名);
- 注意啦!!!
- 以上所有的事件处理函数都可以接受一个事件对象
e
作为参数
$('div').click(function(e){alert('Tong');});
- 这个事件对象
e
有如下属性和方法:
event.pageX; //事件发生时,鼠标距离页面左上角的水平距离
event.pageY; //事件发生时,鼠标距离页面左上角的垂直距离
event.type; //事件的类型
event.which; //按下了哪一个键
event.data; //在事件对象上绑定数据,然后传入事件处理函数
event.target; //事件针对的DOM元素
event.preventDefault(); //阻止事件的默认行为
event.stopPropagation(); //阻止事件向上层冒泡
- 在事件处理函数中,可以用
this
,返回事件针对的DOM元素
$('img').dbclick(function(e){
if($(this).attr('src').match('evil')){
e.preventDefault();
$(this).addClass('evil');
}
})
- 两种自动触发事件的方式
$('a').click();
$('a').trigger('click');
- 特殊效果
.fadeIn(); //淡入
.fadeOut(); //淡出
.fadeTo(); //改变透明度
.hide(); //隐藏元素
.show(); //显示元素
.slideDown(); //向下展开
.slideUp(); //向上卷起
.slideToggle(); //依次展开与卷起
.toggle(); //依次显示与隐藏
.stop()
停止特效.delay()
延缓特效$.fx.off
为 true 时,关闭所有特效- 更复杂的特效,可以自定义
.animate();
.animate(properties [,duration][,easing][,complete])
$('p').animate(
{
left: '+=50',
opacity: 0.3
},
300,
function(){alert('Wow!');}
);