jQuery --- 秒味
jQuery设计思想：
方法函数化:
原生的：
- -window.onload
- -innerHTML
- -onclick
jQuery的：
- -$()
- -html()
- -click()
(使用this的时候，也要使用 $(this).包起来，再使用，调用函数等)
原生与JQ可以共存、但是原生与JQ不能混用。
改变结果集：
强大的过滤器：
- -$(‘div‘.has(‘p‘))
- -$(‘div‘).not(‘.myclass‘)
- -$(‘div‘).filter(‘.myclass‘) //class==myclass的div元素
相邻元素的查找：
链式操作： $(‘div‘).find(‘h3‘).eq(2).html(‘hello‘); //把div下的h3中的下坐标为2的元素的内容换成...
插件、UL组件等。
第二课：
取值与赋值的合体：
- $(‘h1‘).html() // 有无参数不同。 取值：一组中的第一个；赋值：全部赋值
- .val() value值
- .attr() // 是指属性方法： $(this).attr(‘class‘,‘active‘); //将class改为 active 。
- .width() // 设置宽度值和获得宽度值
元素的移形换位：
- 直接移动该元素
- - $(‘div‘).insertAfter($(‘p‘)); // 将div元素移动到p元素之后。
- - $(‘div‘).appendTo($(‘p‘));
- 移动其他元素
- - $(‘p‘).after($(‘div‘)) ; //与前面效果相同
- 区别：操作的元素不同。 （当使用链式结构，在移动元素的同时，为元素增加样式，增加的元素不同！）
- 例如： $(‘div‘).insertAfter($(‘p‘)).css(...) 会为div加，第二种会为p加！
强大的创建：
$(‘ul‘).append(‘<li>hello</li>‘); //即可添加元素进去！
var Li=$(‘<li>‘);
Li.html(‘hello‘);
$(‘ul‘).append(Li);
clone : 复制节点 $(‘div‘).clone().appendTo(‘p‘);
工具方法：
构造函数上的方法：
- $.方法： 工具方法，原生的js也可以使用
window.onload = function(){
var aLi = document.getElementsByTagName(‘li‘);
$.each(aLi,function(index,elements){
elements.innerHTML=index;
})
}
原型上的方法：(感觉这个更清晰点。)
- $(‘li‘).each(function(index,elements){ // elements:代表获取的元素。
$(elements).html(index); //each----循环。 // 因为elements也是原生的，需要使用$()包成JQ对象。
})
事件操作：
独立事件：
- -click()
- -onmouseover()
通用事件：
- -bind()
$(‘div‘).bind(‘click mouseover‘,function(){ alert(123); })
// 为元素添加事件
- -one()
- -unbind() //取消事件
- -e:event 对象
- -pageX等
- -阻止默认与冒泡
- toggle内的函数循环执行 --- 应用： 第一次点击出现，第二次点击隐藏 (省略一个if判断！)
- hover 同样：悬浮一个函数，移开一个函数！
用法：
$(‘div‘).toggle(function(){ ... },function(){ ... }) //函数放到了队列中，每一次触发都会执行到。 但有时不希望如此，可以使用stop来停止。
$(‘div‘).hover(function(){ $(this).stop().animate({ width: 300px; .... }); },function(){ $(this).stop().animate({ width: 200px, height: 200px }); })
运动特效：
常见效果：
- -.fadeIn() //淡入
- -.fadeOut //淡出
- -.slideDown() //向下展开
- -.slideUp() //向上卷起
复杂效果：
- -.animate() // 改样式 。 ? -- 好像是通过更改更多属性来达到 更加复杂的效果。
- -.stop() // 停止效果。
应用： 选项卡的制作。(点击不同的1、2、3，出现不同的div。)
$(function(){ $(‘#div1‘).find(‘input‘.click(function(){ $(‘div1‘).find(‘input‘).attr(‘class‘,‘‘); $(‘div1‘).find(‘input‘).css(‘display‘,‘none‘); $(this).attr(‘class‘,‘active‘); $(‘#div1‘).find(‘div‘).eq($(this).index()).css(‘display‘,‘block‘); // 这里的index默认获得索引。 // 还可以增加淡入淡出的效果。 --- 这里就不是显示隐藏了，而是执行前面的淡入淡出的JQ效果：fadeIn()与fadeOut() ..还有一些效果。(position 需要relative) })) })
插件机制：
在JQ的源码上进行拓展，一个个做好的应用。
UI组件：
JQ官方提供的功能效果和UI样式。
UI的应用--拖拽：（简单地调用函数即可完成该效果。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> //通过引入js与ui库来实现拖拽 $(function () { $(‘div‘).draggable(); }) </script> </head> <body> <div style="width: 100px; height: 100px; background: red;"></div> </body> </html>
// 插件机制和UI组件的使用都是类似的。 调用一个封装好的函数即可！（可能还需要引入其规定的样式）