目录:
什么是jQuery?
jQuery的使用方法
jQuery选择器
jQuery动画效果
jQuery HTML
jQuery遍历
jQuery Ajax
jQuery 插件
其他
一、什么是jQuery?
jQuery是一个简写的js函数库,包含HTML元素选取、遍历,修改、操作、事件函数。CSS操作,js特效和动画,Ajax、Utilities。
二、jQuery的使用方法
1. 如果要在自己的页面中使用jQuery(一般使用1.X版本)。可以在head标签中写:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
来引用百度的CDN。或者从 jquery.com 下载 jQuery 库。
2. 选择元素,执行操作。
基本语法为:$(selector).action()
如:$(this).hide() - 隐藏当前元素
jQuery函数必须写在
$(document).ready(function(){
});
中。该函数可以简写为:
$(function(){
});
表示必须在文档加载完之后运行。
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
- JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
三、jQuery选择器
元素选择器:$("p") 表示选择所有<p>元素。
#id选择器:$(“#test”)表示选择所有id为test的元素,但是因为id是唯一的,这样就是选取唯一元素。(有些浏览器中,即使id不唯一页面也可以正常运行,但是不建议使用相同的id)。
.class选择器:$(".test")表示选择所有class为test的元素。
$("*") | 选取所有元素 | |
$(this) | 选取当前 HTML 元素 | |
$("p.intro") | 选取 class 为 intro 的 <p> 元素 | |
$("p:first") | 选取第一个 <p> 元素 | |
$("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 | |
$("ul li:first-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> 元素 |
:可以理解为种类(type),[]理解为属性。
四、jQuery动画效果
1. 隐藏与显示
隐藏:hide() 、hide(speed)、hide(speed,callback):
显示:show()、show(speed)、show(speed,callback)
切换隐藏与显示:.toggle()、toggle(speed)、toggle(speed,callback)
speed:"slow"、"fast" 或毫秒。
callback:动画完成后,调用的函数。
2. 淡入淡出
淡入(fadeIn)、淡入(fadeOut)、切换(fadeToggle)
$(selector).fadeTo(speed,opacity,callback):将物体渐变为给定的不透明度,使用例子:
$("#div1").fadeTo("slow",0.15);
3. 滑动
向下展开(slideDown)、向上展开(slideUp)、切换(slideToggle)
4. 动画
$(selector).animate({params},speed,callback);
params为你要设置的目标属性值,如 left:'250px', height:'+=150px',
当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画,您需要从 jquery.com 下载 颜色动画 插件。
5. 停止动画
$(selector).stop(stopAll,goToEnd);
stopAll:可选,默认为false,只停止当前动画,如果是个队列,那么后面的会继续播放。
goToEnd :可选,默认false,是否立即将当前动画调至目标值。
6. 回调函数
如果写了函数名之类的,会在动画结束后运行:$("p").hide("slow",function(){ alert("段落现在被隐藏了"); });
只有函数体的,动画结束前就会运行:$("p").hide(1000); alert("段落现在被隐藏了");
7. 链
当有多个animate加在一个元素上时,会顺序执行。同理,多个非自定义的动画函数也可以同时加在一个元素上,称之为链。
动画一般由事件触发,事件与DOM事件一致。
五、jQuery HTML
1. 获取、设置内容:
- text() - 设置或返回所选元素的文本内容,如果参数为字符串,则为设置值。
- html() - 设置或返回所选元素的内容(包括 HTML 标记),设置同上
- val() - 设置或返回表单字段的值,设置同上
- attr()-返回属性值,设置同上。如:
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
2. 添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
append与after的区别是,append在所选元素内部添加,after在所选元素外部加,prepend与before同理。
除了可以用jQuery创建元素,也可以通过html/text、js/DOM来创建元素,然后再通过jQuery添加该元素:
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
3. 删除元素
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
- remove(".italic")-如果被选元素的id为italic则删除,过滤器只能作用于同级,不能作用于子元素,即,如果子元素中有id为italic的,但是父没有,则都不会被删除。
4. 操作CSS
- addClass() - 向被选元素添加一个或多个类:
$("body div:first").addClass("important blue");//为第一个body添加important类和blue类。
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性:
$("p").css({
"background-color":"yellow",
"font-size":"200%"
});
这个和设置属性函数很像。
5. 设置/返回尺寸
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
六、jQuery遍历
1. 遍历祖先
- parent():返回被选元素的直接父元素
- parents():返回所有祖先元素,知道<html>元素
- parentsUntil():返回介于两者之间的元素,比如儿子与祖父返回父亲:$("span").parentsUntil("div");
2. 遍历后代
- children():返回被选元素的所有直接子元素,也可以加参数选择器来过滤元素:$("div").children("p.class");
- find():返回所有后代,也可以加选择器。
3. 遍历同代
- siblings():返回所有同胞(有同样的父元素)
- next():返回下一个同胞
- nextAll():返回接下来的所有同胞
- nextUntil():两个同胞之间的所有同胞
- prev()、prevAll()、prevUntil():同上
4. 过滤
除了在函数参数中写"p.class"设置过滤器,还有其他的方法设置过滤器:
- first():返回被选元素的首个
- last()
- eq(int a):返回指定索引的元素,首个元素的索引为0
- filter(".class"):$("p").filter(".url"); 与$("p.url");一样
- not(.class)
七、jQuery Ajax
1.AJAX 简介
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。
2. load()方法
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("#div1").load("demo_test.txt #p1");:将demo_test.txt中id为p1的元素加载到div1中。
关于回调函数,它有三个固定的参数:
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
3. get()/post()方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
callback 函数有两个参数,一个是取回的数据,一个是是否成功取回。
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。callback 函数的参数同上(取回的数据,是否成功)。
八、jQuery 插件
1.jQuery Validate 、jQuery Prettydate插件:为表单输入提供了强大的验证功能,让客户端表单验证变得更简单,还可以自定义验证方法。
2. jQuery Cookie 插件 :jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie。
3.jQuery Accordion 插件:用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。
4. jQuery Autocomplete:jQuery Autocomplete 插件根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。比如你输入a,下面会提示列表中所有含有a的单词。
5. jQuery Growl 插件(消息提醒) :像阴阳师很多人邀请你组队一样,边上的邀请列表会自动排列,并自动消失。
6.jQuery Password Validation(密码验证):
插件扩展了 jQuery Validate 插件,提供了两种组件:
一种评价密码的相关因素的功能:比如大小写字母的混合情况、字符(数字、特殊字符)的混合情况、长度、与用户名的相似度(可选的)。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。您可以简单地自定义强度显示的外观、本地化消息显示,并集成到已有的表单中。
7.jQuery Tooltip:jQuery Tooltip 插件取代了原生的工具提示框(如当鼠标悬浮与某元素上时出现提示语),让它们可自定义,您只需要调整它们的内容、位置和外观即可。
8.jQuery Treeview :制作eclipse的树形文件菜单。
九、其他
1.一般推荐将jQuery函数单独写在一个js文件中。
2. noConflict()方法
如果其他框架,如js的一些框架(感觉这里的框架并不是我们常想的那种结果,而是一些简写的函数,如jQuery也是js的一种框架)也用$作为简写,那么就会冲突。那么可以使用noConflict方法,noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了,但是jQuery得写全称了。
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
或者可以创建自己的简写:var jq = $.noConflict();,之后的jQuery可以用jq代替。
或者你想在函数内继续写$:
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍然在工作!");
});
});
3. JSONP
JSON :JavaScript Object Notation(JavaScript 对象表示法)是一种类似XML的存储和交换文本信息的语法,它比xml更小、更快、更易解析。目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。虽然它使用js来描述对象。并且可以使用js的内建eval()函数生成原生的js对象。
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
使用实例:
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
var html = '<ul>';
for(var i = 0; i < data.length; i++)
{
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
$('#divCustomers').html(html);
});