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.