jquery部分介绍与操作

初始jQuery

1、jQuery是什么

   jQuery是Javascript的一个库，那什么是Javascript呢？JavaScript是互联网上最流行的脚本语言，这门语言可用于HTML和web，更可广泛用于服务器、pc、笔记本电脑、平板电脑和智能手机等设备。

2、jQuery能做什么

   jQuery是一个轻量级的“写的少，做的多”的JavaScript库，它可以获取网页http元素，以及动画效果，Ajax等

3、引用jQuery

   下载好jQuery库放在本地，然后在网页中引用。下载地址http://jquery.com/download/

直接引用谷歌CDN的jQuery库路径：

<scriptsrc=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>

4、jQuery语法

   通过选取HTML元素，并对选取的元素执行某些操作：

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

   语法说明：

   美元符号代表jQuery

   选择符(selector)“查询”和“查找”HTML元素jQuery的action()执行对元素的操作

   举例：

   $(this).hide()-隐藏当前元素

   $(“p”).hide()-隐藏所有<p>元素

   $(“p.test”).hide()-隐藏所有class=”test”的<p>元素

   $(“#test”).hide()-隐藏所有id=”test”的元素

5、文档就绪事件

   $(document).ready(function(){

   //开始写jQuery代码…

});

这样做的原因是防止文档没有完全加载就调用函数造成的错误（比如说要隐藏一个不存在的元素），或者也可以像下面这样写（简便版）

$(function(){

      //开始写jQuery代码

});

6、jQuery选择器

jQuery中所有选择器都以美元符号开头：$()

元素选择器：jQuery元素选择器基于元素名选取元素。比如在页面中选取所有<p>元素要这样写：$(”p”）

#id选择器：jQuery #id选择器通过HTML元素的id属性选取指定的元素。语法如下：$(“#id名”)

.class选择器：jQuery类选择器可以通过指定的class查找元素，语法如下：$(“.test”)

 

 

7、引用独立的js文件

   如果项目太多，使用的js太多，则建议将所有的js都单独写到一个文件中，并在项目中引用该文件，引用的语法如下：

   <script src=”独立js文件路径”></script>

语法

描述

$(“*”)

选取所有元素

$(this)

选取当前HTML元素

$(“p.intro”)

选取class为intro的<p>元素

$(“p.first”)

选取第一个<p>元素

$(“ull li:first”)

选取第一个<ul>元素的第一个<li>元素

$(“ul li:frist-child”)

选取每个<ul>元素的第一个<li>元素

$(“[href]”)

选取带有href属性的元素

$(“a[target=’_blank’]”)

选取所有target属性值等于”_blank”的<a>元素

$(“a[target!=’_blank’]”)

选取所有target属性值不等于”_blank”的<a>元素

$(“:button”)

选取所有 type=”button”的<input>元素和<button>元素

$(“tr.even”)

选取偶数位置的<tr>元素

$(“tr.odd”)

选取奇数位置的<tr>元素

Jquery事件

1、事件的概念

页面对不同访问者的响应叫做事件；

事件处理程序指的是当HTML中发生某些事件时所调用的方法；

比如：

在元素上移动鼠标。

选取单选按钮

点击元素

2、常见的点击事件

鼠标事件

键盘事件

表单事件

文档/窗口事件

Click()

Keypress()

Submit()

Load()

Dblclick()

Keydown()

Change()

Resize()

Mouseenter()

Keyup()

Focus()

Scroll()

Mouseleave()

 

Blur()

Unload()

3、jquery事件方法语法

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。比如：

页面中指定一个点击事件：

$(“p”).click();下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$(“p”).click(function(){  //动作触发后执行的代码！！});

 

4、常用事件方法

Click():当按钮点击事件被触发时会调用一个函数

Dblclick():双击元素时，会发生dblclick事件

Mouseenter()：当鼠标指针穿过元素时，会发生mouseenter事件

Mouseleave()：当鼠标指针离开元素时，会发生mouseleave事件

鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

Mouseup()：当在元素上松开元素鼠标时，会发生mouseup事件

Hover()：该方法用于模拟光标悬停事件

 

jQuery效果

1、显示和隐藏效果

隐藏效果函数：hide()

显示效果函数：show()

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

$(selector).show(speed,callback);

可选的speed参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast”或毫秒。

可选的callback参数是隐藏或显示完成后所执行的函数名称。

切换show()和hide()状态的toggle()函数

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

可选的speed参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast”或毫秒。

可选的callback参数是隐藏或显示完成后所执行的函数名称。

2、淡入淡出效果

Fadeln():用于淡入已隐藏的元素。

语法：

$(selector).fadeln(speed.callback);

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

可选的callback参数是fading完成后所执行的函数名称。

   fadeout():用于淡出可见元素

   toggle()：方法可以在fadeln()与fadeOut()方法之间进行切换

   fadeto()方法：允许渐变为给定的不透明度（值介于0与1之间）

语法：

$(selector).fadeTo(speed,opacity,callback);

必需的speed参数规定效果的时长。它可以取以下值：“slow”、“fast”或毫秒。

Fadeto()方法中必需的opacity参数将淡入淡出效果设置为给定的不透明值（值介于0与1之间）。

可选的callback参数是该函数完成后所执行的函数名称。

3、滑动效果

Slidedown():用于向下滑动元素。

语法：

$(selector).slidedown(speed,callback);

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

可选的callback参数是滑动完成后所执行的函数名称。

SlideUp()方法：用于向上滑动元素

SlideToggle()方法：可以在slidedown()与slideUp()方法之间进行切换

4、动画效果

Animate()：用于创建自定义动画。

语法：

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

必需的params参数定义形成动画的css属性。

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

可选的callback参数是动画完成后所执行的函数名称。

特别说明：params如果有多个的话，用逗号隔开。Animate()方法几乎可以操作css的所有属性，但是得使用camel标记法书写所有的属性名，比如，使用marginRight而不是margin-right。色彩动画并包含在核心jQuery库中，如果需要生成颜色动画，需要下载颜色动画插件。

在值得前面使用+=或-=代表相对值，甚至可以把属性的动画值设置为“slow”、“fast”或“toggle”等预定义值

5、停止效果函数

Stop()方法：适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。

语法：

$(selector).stop(stopAll,goToEnd);

可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的goToEnd参数规定是否立即完成当前动画。默认是false。

因此，默认地，stop()会清除在被选元素上指定的当前动画。

6、链

通过链允许我们在相同的元素上允许多条jQuery命令，一条接着一条。比如：

$(“#p1”).css(“color”,”red”).slideUp(2000).slidedown(2000);

 

jQuery操作HTML元素和属性

1、获取内容

Text()-设置或返回所选元素的文本内容

Html()-设置或返回所选元素的文本内容

Val()-设置或返回表单字段的值

2、获取属性

Attr(属性名)方法用于获取属性值

3、设置内容

Text(想设置内容的值) -设置或返回所选元素的文本内容

Html(想设置的内容值) -设置或返回所选元素的文本内容

Val(想设置的内容值) -设置或返回表单字段的值

4、设置属性-attr()

Attr(属性名，值)：比如说$(“#runoob”).attr(“属性名”,”属性值”);

允许同时设置多个属性：

如$(“#runoob”).attr({“属性名1”、”属性值2”、”属性名2”、”属性值2”});

5、添加新的html内容

Append():在被选元素的结尾插入内容，如：$(“p”).append(“追加文本”);

Prepend():在被选元素的开头插入内容。如：$(“p”).prepend(“在开头追加文本”);

特别注意：如果需要添加多个内容的话，直接用逗号隔开。如：$(“body”).append(txt1,txt2,txt3);

After():在被选元素之后插入内容。如：$(“img”).after(“在后面添加文本”);

Before():在被选元素之前插入内容。如：$(“img”).brfore(“在前面添加文本”);

6、删除已有的元素

Remove():删除被选元素及其子元素。如：$(“#div1”).remove();

Empty():删除被选元素的子元素。如：$(“#div1”).empty();

过滤被删除的元素：在remove方法中添加一个合法的参数即可。如:$(“p”).remove(“italic”);

7、获取并设置css类

Addclass()：添加class属性。如：$(“div”).addclass(“important”);

Removeclass()：删除指定的class属性。如：$(“h1,h2,p”).removeclass(“blue”);]

Toggleclass()：对被选元素进行添加/删除类的切换操作。如：$(“h1,h2,p”).toggleclass(“blue”);

Css()：设置或返回被选元素的一个或多个样式属性

7、处理元素和浏览器的尺寸

Width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）

Height()方法设置或返回元素的高度（不包括内边距、边框或外边距）

Innerwidth()方法返回元素的宽度（包括内边距）

Innerheight()方法返回元素的高度（包括内边距）

Outerwidth()方法返回元素的高度（包括内边距和边框）

Outerheight()方法返回元素的高度（包括内边距和边框）

 

 

jQuery关系查找

1、jQuery的关系查找实际就是对元素的查找，如果有多层结构，那我们就需要遍历元素进行查找，直到查到满意的元素为止。jQuery中最常用遍历的方法是树遍历，我们要学会在树结构上下以及同级移动。

2、向上遍历树

Parent()：返回被选元素的直接父元素。特别说明：该方法只会将上一级对DOM树进行遍历

Parents()：方法返回被选元素的所有祖先元素。一直向上直到文档的跟元素。

Parentsuntil()方法返回介于两个给定元素之间的所有祖先元素。

3、向下遍历树

Children()方法返回被选元素的所有直接子元素。特别说明，该方法只会想下一级对DOM数进行遍历

Find()方法返回被选元素的后代元素，一路向下直到最后一个后代

4、水平遍历

Siblings()方法返回被选元素的所有同胞元素

Next()方法返回被选元素的下一个同胞元素

Nextall()方法返回被选元素的所有跟随的同胞元素

NextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素

5、过滤

三个最基本的过滤方法是：first(),last()和eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如filter()和not()允许你选取匹配和不匹配某项指定标准的元素。

First()方法返回被选元素的某个元素。

Last()方法返回被选元素的最后一个元素。

Eq()方法返回被选元素中带有指定索引号的元素。

Filter()方法允许你规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

Not()方法返回不匹配标准的所有元素。

 

6、Ajax

1、简介

Ajax是与服务器交换数据的技术，它可以在不加载全部页面的情况下，实现对部分网页更新。也叫异步刷新技术

2、强大的方法

Load()方法从服务器加载数据，并把返回的数据放入被选元素中。

其语法如下：$(selector).load(URL,data,callback);

必需的URL参数规定你希望的加载的URL

可选的data参数规定与请求一同发送的查询字符串键/值对集合

可选的callback参数是load()方法完成后所执行的函数名称。

 

$get()方法通过HTTP GET请求从服务器上请求数据。

其语法如下：$get(URL,callback);

必需的URL参数规定你希望请求的URL

可选的callback参数是请求成功后所执行的函数名

 

$post()方法通过HTTP POST请求从服务器上请求数据。

其语法如下：$post(URL,data,callback);

必需的URL参数规定你希望请求的URL。

可选的data参数规定连同请求发送的数据。

可选的callback参数是请求成功后所执行的函数名。