python学习之路前端-jQuery

jQuery简介

     JQuery是继 prototype以后又一个优秀的 Javascript库。它是轻量级的js库 ，它兼容 CSS3，还兼容各类浏览器（ IE 6.0+,  FF1.5+,  Safari 2.0+,  Opera 9.0+），jQuery2.0及后续版本将再也不支持IE6/7/8浏览器。jQuery使用户能更方便地处理 HTML（ 标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供 AJAX交互。jQuery还有一个比较大的优点是，它的文档说明很全，并且各类应用也说得很详细，同时还有许多成熟的 插件可供选择。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是免费、开源的，使用 MIT许可协议。jQuery的语法设计可使开发更加便捷，例如操做 文档对象、选择 DOM元素、制做动画效果、事件处理、使用 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 id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]

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

HTML 代码:

<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>　　

jQuery 代码:

#foo\\[bar\\]　

结果:

[ <span id="foo[bar]"></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