python学习之路前端-jQuery

jQuery简介

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

特点：

1. 动态特效

2. AJAX

3. 通过插件来扩展

4. 方便的工具 - 例如浏览器版本判断

5. 渐进增强

6. 链式调用

7. 多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）

jQuery学习教程

http://jquery.cuishifeng.cn/

http://www.php100.com/manual/jquery/

jQuery选择器

1.基本

ID选择器

id选择器，通过id去匹配元素：#id来表示

实例一：查找 ID 为"myDiv"的元素

HTML 代码:

<div </p></div>
<div </div>

jQuery 代码:

$("#myDiv");

结果:

[ <div </div> ]

实例二：查找含有特殊字符的元素

HTML 代码:

<span ></span>
<span ></span>
<span ></span>　　

jQuery 代码:

#foo\\[bar\\]　

结果:

[ <span ></span>]

2.标签选择器

根据指定的元素名（标签），去匹配元素。例如<div>标签、<a>标签、<p>标签等

实例一：查找一个 DIV 元素

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

3.class选择器(.class)

根据给定的css类名匹配元素

实例一：查找所有类是 "myClass" 的元素

HTML 代码:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>　

jQuery 代码:

$(".myClass");　　

结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

4.组合选择器（匹配多个元素）

实例一：找到匹配任意一个类的元素

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>　

jQuery 代码:

$("div,span,p.myClass")

结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

5.层级选择器

实例一：找到表单中所有的 input 元素

HTML 代码:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />　　

jQuery 代码:

$("form input")　　

结果:

[ <input name="name" />, <input name="newsletter" /> ] 

2.层级

3.基本筛选器

4.可见性

5.属性

6.表单

jQuery筛选器

1.过滤

2.查找

jQuery属性

1.属性

2.CSS类

3.HTML代码/文本/值

jQuery CSS

1.CSS

2.位置

3.尺寸

jQuery文本处理

1.内部插入

2.外部插入

3.替换

4.删除

5.复制

jQuery事件

1.bind

2.delegate