jQuery设计思想（7月6日-7月31日）

大纲

• 选择网页元素
• 改变结果集
• 链式操作
• 元素的操作：取值和赋值
• 元素的操作：移动
• 元素的操作：复制、删除和创建
• 工具方法
• 事件操作
• 特殊效果

---

• 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!');}
);