jquery操作手册

Jquery操作手册Jquery简介?

1. 什么是jquery?

   1. 

是一个javaScript函数库。其实就是javascript库，由javascript写的函数封装成一个库。

2. jQuery是一个JavaScript函数库。

3. jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

4. jquery包括以下功能

       1. 

   html元素选取

   2. html元素操作

   3. css操作

   4. html事件函数

   5. javascript特效和动画

   6. html DOM遍历和修改

   7. AJAX(异步请求交互)

Utilities

并且在此基础之上，还有提供了大量的插件。

1. 

为什么要学习jquery呢？

    1. 

Jquery是目前最流行的js框架，许多大公司都在使用

比如IBM,Google,Microsoft

Jquery比javaScript的优点

    1. 

Jquery极大地简化了javascript编程。

Jquery要比javascript更容易学习。

Jquery学习基础

    1. 

在学jquery之前需要学习人员具体以下知识：

        1. 

HTML

CSS

JS(javascript)

Jquery 的安装

因为jquery是一个javascript库，所以可以像引入js一样引入到一个html文件内

用一个标签将jquery文件引入

    1. 

<script src=”jquery.xxxxxx.js” type=”text/javascript”></script>

提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。
您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？
在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

Jquery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法：$(selector).action()

    1. 

美元符是定义使用jquery的。

selector是要查询或者要操作的html元素

action()是对选择的元素要进行的操作

        1. 

比如：$(“div”).hide() à表示隐藏所有的div元素

1. 

Jquery语法的书写区域

    1. 

在head标签内的script标签内

$(document).ready(function(){
// 开始写 jQuery 代码...
});
$(document).ready();表示整个文档加载完成后才执行该代码，为了防止文档在加载前就执行jquery代码。

Jquery选择器

Jquery选择器允许你对html元素组或者单个元素进行操作

Jquery选择器基于元素的ID、类、类型、属性、属性值等查找html元素。

但是请记住jquery中所有选择器都以美元符开头：$()

一些基本的元素选择器：元素选择器

其实就是选择一些html元素标签组件

比如

    1. 

$("p")

该句话的意思是在页面中选取所有的<p>元素

实例：

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")
实例：

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：
$(".test")
实例：
其他的一些选择器

事件

Jquery中的其他事件

Event函数
绑定的函数功能
$(document).ready(function);
将函数绑定到文件的就绪事件（文档加载完成）
$(selector).click(function);
将函数绑定到点击或者单击事件
$(selector).dbclick(function);
将函数绑定到双击事件
$(selector).focus(function);
将事件绑定到获得的焦点的事件中
$(selector).blur(function);
将事件绑定到失去的焦点的事件中。
$(selector).toggle(function);
将组件的属性转换为隐藏或者显示状态
$(selector).mouseover(function);
将函数绑定到备选元素的的鼠标悬停事件。(其实就是hide方法和show方法的互相切换)

Switch描述：

Jquery效果淡入淡出fade
fadeIn()\fadeOut()\fadeToggle()\fadeTo()

FadeIn()是将某个元素淡入为显示状态

    1. 

格式：fadeIn(speed,callback)

        1. 

通常可以取值为：fast,slow,毫秒值或者默认不写

其中speed是速度，callback是执行淡入后的所执行的其他函数或者函数名

相同道理fadeOut也是相同的道理

    1. 

将组件的显示状态更改为隐藏状态

fadeToggle

    1. 

该fadeToggle可以在每次点击后在fadeIn与fadeOut的效果之间进行切换。

fadeTo

    1. 

格式fadeTo(speed,opacity,callback)

该函数允许渐变为给定的不透明度（0~1之间）

滑动

slideUp()

    1. 

这个方法用于向上滑动元素

语法：$(selector).slideUp(speed,callback);

        1. 

可选的speed参数规定效果的时长。它可以取一下值：“slow”,”fast”,或者一些毫秒值

可选的callback是在向上滑动后所执行的函数的名称。

slideDown();

    1. 

这个方法用于向下滑动元素

语法：$(selector).slideDown(speed,callback);

slideToggle();

    1. 

语法：$(selector).slideToggle(speed,callback);

动画

animate();

    1. 

语法：$(selector).animate({params},speed,callback());

        1. 

{params}：表示要设置的一些参数

speed表示执行该动画所需的时间

callback（）表示执行该动画后所执行其他的函数或者方法。

Ajax简单请求Servlet

Ajax:Asynchronous javascript and xml

    1. 

全称叫做异步js和xml技术：其实就是异步交互技术

Ajax 是一种用于创建快速动态网页的技术。

作用：通过在后台与服务器进行少量的数据交换，Ajax可以实现异步更新。这意味着可以在不全部更新页面的情况下只更新部分页面。比如传统的页面点击一个按钮要更新整个页面这导致了有的不需要更新部分也更新了，就有点浪费流量数据了，所有用了Ajax技术后只需要更新要更新的部分即可。

使用注意：在使用Ajax技术前先需要导入jquery.xxx.js

格式：

        1. 

    6. 

Ajax异步请求servlet实例：

        1. 

Html代码

            1. 

        2. 

服务器代码

            1. 

        3. 

结果：

            1. 

点击box text会弹出框

并在box text下方显示hello

4.     4.