标签：style blog class code java ext javascript width color get strong
jQuery设计思想：
方法函数化:
原生的：
jQuery的：
(使用this的时候，也要使用 $(this).包起来，再使用，调用函数等)
原生与JQ可以共存、但是原生与JQ不能混用。
改变结果集：
强大的过滤器：
相邻元素的查找：
链式操作： $(‘div‘).find(‘h3‘).eq(2).html(‘hello‘); //把div下的h3中的下坐标为2的元素的内容换成...
插件、UL组件等。
第二课：
取值与赋值的合体：
元素的移形换位：
强大的创建：
$(‘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对象。
})
事件操作：
独立事件：
通用事件：
$(‘div‘).bind(‘click mouseover‘,function(){ alert(123); })
// 为元素添加事件
用法：
$(‘div‘).toggle(function(){ ... },function(){ ... }) //函数放到了队列中，每一次触发都会执行到。 但有时不希望如此，可以使用stop来停止。
$(‘div‘).hover(function(){ $(this).stop().animate({ width: 300px; .... }); },function(){ $(this).stop().animate({ width: 200px, height: 200px }); })
运动特效：
常见效果：
复杂效果：
应用： 选项卡的制作。(点击不同的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组件的使用都是类似的。 调用一个封装好的函数即可！（可能还需要引入其规定的样式）
标签：style blog class code java ext javascript width color get strong
原文地址：http://www.cnblogs.com/songacm/p/3702888.html
