jQuery的核心思想

jQuery?----www.jQuery.com

jQuery的理念：write less, do more

jQuery的成就：世界排名前100的公司，46%都在使用jQuery,远远超过其他库，微软公司甚至把jQuery库作为了他们的官方库。

what is jQuery?(这是我复制官网上的介绍，觉得说的很专业)

jQuery is a fast, small, and feature-rich(功能丰富) JavaScript library. It makes things like HTML document traversal and manipulation（循环和遍历）, event handling（事件处理）, animation（运动）, and Ajax（异步的js与xml） much simpler with an easy-to-use API that works across a multitude of browsers(跨浏览器). With a combination（组合） of versatility and extensibility（通用性和可扩展性的）, jQuery has changed the way that millions of people write JavaScript.

jQuery的特点？

轻量级脚本语言（Lightweight footprint）

css兼容性（css compliant）

跨浏览器（cross browser）

jQuery的核心思想

  1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta name="description" content="">
  6         <meta name="viewport" content="width=device-width, initial-scale=1">
  7         <title>jQuery--jQuery的设计思想1</title>
  8         <link rel="author" href="humans.txt">
  9         <script src="jquery-1.4.1.min.js"></script>
 10         <script type="text/javascript">
 11  
 12             /*
 13             1.选择网页元素
 14                 1.1 css选择器
 15                     -$(document)//选择整个文档
 16                     -$("#myId")//选择ID为myId的网页元素
 17                     -$('div.myClass')//选择class为myClass的div元素
 18                 1.2 jQuery特有的表达式
 19                     -$('a:first')//选择网页中第一个a元素
 20                     -$('tr:odd')//选择表格的奇数行
 21                     -$('div:visible')//选择可见的div元
 22             2.方法函数化
 23                 1.1 原生的
 24                     -window.onload
 25                     -innerHTML
 26                     -onclick
 27                 1.2 jquery的
 28                     -$()
 29                     -html()
 30                     -click()
 31             3.原生与jquery的关系
 32                 3.1 原生、jq可以共存
 33                     -$("#div1").html()
 34                     -oDiv.innerHTML
 35                 3.2 原生、jq不能混用
 36                     -$("#div1").innerHTML
 37                     -ODIV.html()
 38             4.改变结果集
 39                 4.1 强大的过滤器
 40                     -$('div').has('p');//选择包含p标签的div标签
 41                     -$('div').not('.myClass');//选择class不等于myClass的div元素
 42                     -$('div').filter('.myClass');//选择class等于myClass的div元素
 43                 4.2 相邻元素查找
 44                     -$('div').next('p');//选择div元素后面的第一个p元素
 45                     -$('div').parent();//选择div元素的父元素
 46                     -$('div').children();//选择div的所有子元素
 47             5.链式操作
 48                 $('div').find('h3').eq(2).html('hello');
 49                 --找到div元素，选择其中的h3元素，选择第3个h3元素，将它的内容改为Hello
 50  
 51                 jQuery还提供了.end()方法，使得结果集可以后退一步
 52                 ------>这个就使得我们可以用一个链式操作，写完一整个效果都没有问题。
 53             6.取值与赋值合体
 54                 $('h1').html();//html()没有参数，表示取出h1的值
 55                 $('h1').html('hello');//html()没有参数Hello,表示对h1进行赋值
 56  
 57                 .val()
 58                 .attr()
 59                 .width()
 60  
 61                 取值是一组中的 第一个元素，赋值是所有的元素
 62             7.元素移形换位
 63                 7.1 直接移动该元素
 64                     -$('div').insertAfter($('p'));//把div元素移动到 p元素后面
 65                     -$('div').appendTo($('p'));//把div元素剪切到p元素的后面
 66                 7.2 移动其他元素
 67                     -$('p').after($('div'));//把p元素加到div元素前边
 68                     -$('div').append($('p'));//把p元素插入到div的里边
 69                 区别：操作的元素不同
 70             8.强大的创建
 71                 $('#ul').append('<li>aaaa</li>');
 72                 ===
 73                 var oLi  = $('<li>');
 74                 oLi.html('aaaa');
 75                 $("#ul").append(oLi);
 76  
 77                 clone()
 78             9.工具方法（重点）
 79                 9.1 构造函数上的方法
 80                     -$.each([],function(){})
 81                     -$.trim($('div').attr('class'))--去掉class属性的前后空格
 82  
 83                     解释：$.方法：添加到构造函数，静态方法
 84                 9.2 原型上的方法
 85                     -$('div').each(function(index,elements){})
 86                     index--索引
 87                     elements--当前所有元素中正在操作的
 88  
 89                 demo:
 90                 function $(){
 91                     $.each = function(){
 92                         //构造函数下面的方法:$.each()
 93                     }
 94                     $.prototype.each = function(){
 95                         //原型下面的方法：$('div').each()
 96                     }
 97                 }
 98             10.事件操作
 99                 10.1 独立事件
100                     - click()
101                     - mouseover()
102                 10.2 通用事件
103                     - bind();//同一个对象上，可绑定多个事件
104                     - one();//绑定的事件只可以执行一次
105                     -unbind();//取消
106                     - e:event对象
107                     - pageX等;//鼠标相对于屏幕的坐标，原生中是clientX
108                     - 阻止默认与冒泡;//return false--既可以阻止冒泡又可以阻止默认事件
109  
110                     demo:toggle--循环执行，后面可以接多个函数
111                     $('input').toggle(function(){},function(){},function(){})
112                     hover--$('div').hover(function(){},function(){})
113             11.运动效果
114                 11.1 常见效果
115                     -.fadeIn();//淡入
116                     -.fadeOut();//淡出
117                     -.slideDown();//向下展开
118                     -.slideUp();//向上卷起
119                 11.2 复杂效果
120                     -.animate();//运动
121                     -.stop();//阻止前面的运动效果，执行当前的运动事件
122             12.插件机制(plugins)--demo
123                 在JQ的源码上进行拓展，一个个做好的应用
124             13.UI组件（jQuery UI）
125                 JQ官方提供的功能效果和UI样式
126             14.手机、社区、论坛
127  
128             */
129         </script>
130     </head>
131     <body>
132     </body>
133 </html>