初始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参数是请求成功后所执行的函数名。
扫一扫
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
