jQuery 的入口函数
$(document).ready(function() {
});
$(function() {
});
javascript 的入口函数
window.onload = function () {
}
jQuery 与 javascript 入口函数的区别
jQuery是在html所有标签dom都加载之后就会去执行,可以执行多次 第N次都不会被上一次覆盖
javascript是等到所有内容包含图片、外链等信息加载完才回去执行,只能执行第一次 如果执行第二次 那么第一次的执行会被覆盖
jQuery 选择器
$('*') 选取所有元素
$(this) 选取当前HTML元素
$('p.test') 选取P标签class为test的元素
$('p:first') 选取第一个P元素
$('ul li:first') 选取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元素
扩展
$("#id", ".class") 复合选择器
$(div p span) 层级选择器 //div下的p元素中的span元素
$(div>p) 父子选择器 //div下的所有p元素
$(div+p) 相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p) 兄弟选择器 //div后面的所有p元素(同级别)
$(.p:last) 类选择器 加 过滤选择器 第一个和最后一个(first 或者 last)
$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶(odd 或者 even)
$("div p:eq(2)") 索引选择器 div下的第三个p元素(索引是从0开始)
$("a[href='www.baidu.com']") 属性选择器
$("p:contains(test)") // 内容过滤选择器,包含text内容的p元素
$(":emtyp") //内容过滤选择器,所有空标签(不包含子标签和内容的标签)parent 相反
$(":hidden") //所有隐藏元素 visible
$("input:enabled") //选取所有启用的表单元素
$(":disabled") //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素
jQuery 事件
鼠标事件
click 当单击元素时,发生 click 事件
dblclick 当双击元素时,触发 dblclick 事件
mouseenter 当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件
mouseleave 当鼠标指针离开被选元素时,会发生 mouseleave 事件
hover 当鼠标指针悬停在被选元素上时要运行的两个函数
键盘事件
keypress 计算在 <input> 字段内的按键次数
keydown 当键盘键被按下时,设置 <input> 字段的背景颜色
keyup 当键盘键被松开时,设置 <input> 字段的背景颜色
表单事件
submit 当提交表单时,会发生 submit 事件
change 当元素的值改变时发生 change 事件(仅适用于表单字段)
focus 当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件
blur 当元素失去焦点时发生 blur 事件
文档/窗口事件
load 指定元素加载完成时运行的函数
resize 对浏览器窗口调整大小进行计数
scroll 对元素滚动的次数进行计数
unload 当离开页面时,显示提示消息
jQuery 效果
隐藏
hide 隐藏 $(selector).hide(speed,callback)
show 显示 $(selector).show(speed,callback);
toggle 切换 $(selector).toggle(speed,callback)
speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒
callback 参数是隐藏或显示完成后所执行的函数名称
淡入淡出
fadeIn 用于淡入已隐藏的元素 $(selector).fadeIn(speed,callback);
fadeOut 用于淡出可见元素 $(selector).fadeOut(speed,callback);
fadeToggle 可以在 fadeIn与fadeOut方法之间进行切换 $(selector).fadeToggle(speed,callback)
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称
fadeTo 渐变为给定的不透明度(值介于0与1之间) $(selector).fadeTo(speed,opacity,callback)
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒
fadeTo 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)
滑动
slideDown 向下滑动元素 $(selector).slideDown(speed,callback);
slideUp 用于向上滑动元素 $(selector).slideUp(speed,callback);
slideToggle 可以在 slideDown 与 slideUp 方法之间进行切换 $(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
动画
animate 创建自定义动画 $(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
animate 操作多个属性
animate 使用相对值 可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
animate 使用预定义的值 可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
animate 使用队列功能 如果在彼此之后编写多个 animate 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用
停止动画
stop 用于在动画或效果完成前对它们进行停止 $(selector).stop(stopAll,goToEnd);
stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
goToEnd 参数规定是否立即完成当前动画。默认是 false。
Callback方法
Callback 函数在当前动画 100% 完成之后执行
链 Chaining
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)
直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。
不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
提示: 这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动:
实例
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery HTML
捕获
获得内容
text 设置或返回所选元素的文本内容
html 设置或返回所选元素的内容(包括 HTML 标记)
val 设置或返回表单字段的值
获取属性
attr 获取属性值
prop 获取属性值
prop 与 attr 区别
prop函数的结果:
1.如果有相应的属性,返回指定属性值
2.如果没有相应的属性,返回值是空字符串
attr函数的结果:
1.如果有相应的属性,返回指定属性值
2.如果没有相应的属性,返回值是 undefined
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用 attr 方法。
具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()
设置内容和属性
设置内容
text 设置或返回所选元素的文本内容
html 设置或返回所选元素的内容(包括 HTML 标记)
val 设置或返回表单字段的值
text、html 以及 val,同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
设置属性
attr 用于设置/改变属性值
$(select).attr("href", "url");
同时设置多个属性
$(select).attr({"href": "url", "title": "info"});
回调函数
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串
添加元素
添加新的 HTML 内容
append 在被选元素的结尾插入内容
prepend 在被选元素的开头插入内容
after 在被选元素之后插入内容
before 在被选元素之前插入内容
删除元素
删除元素/内容
remove 删除被选元素(及其子元素)
empty 从被选元素中删除子元素
过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
实例
$("p").remove(".italic");
CSS 类
获取并设置 CSS 类
addClass 向被选元素添加一个或多个类
removeClass 从被选元素删除一个或多个类
toggleClass 对被选元素进行添加/删除类的切换操作
css 设置或返回样式属性
CSS 方法
jQuery CSS 方法
css 设置或返回被选元素的一个或多个样式属性
返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值:
实例
$("p").css("background-color");
设置 CSS 属性
css("propertyname","value");
实例
$("p").css("background-color","yellow");
设置多个 CSS 属性
css({"propertyname":"value","propertyname":"value",...});
尺寸
width 设置或返回元素的宽度
height 设置或返回元素的高度
innerWidth 方法返回元素的宽度(包括内边距)
innerHeight 方法返回元素的高度(包括内边距)
outerWidth 方法返回元素的宽度(包括内边距和边框)
outerHeight 方法返回元素的高度(包括内边距和边框)
唯一需要注意的地方,设置了 box-sizing 后,width() 获取的是 css 设置的 width 减去 padding 和 border 的值。
.test{width:'100px' height:'100px' padding:'10px' border:'10px' box-sizing:'border-box'}
width 获取为: 60
innerWidth 获取值为: 80
outWidth 获取值为: 100
jQuery 遍历 jQuery 提供了多种遍历 DOM 的方法。遍历方法中最大的种类是树遍历(tree-traversal)。
祖先
parent 返回被选元素的直接父元素
parents 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 <html>
parentsUntil 方法返回介于两个给定元素之间的所有祖先元素
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
$("span").parentsUntil("div");
后代
children 返回被选元素的所有直接子元素
find 返回被选元素的后代元素,一路向下直到最后一个后代
下面的例子返回属于 <div> 后代的所有 <span> 元素
$("div").find("span");
同胞 siblings
siblings 返回被选元素的所有同胞元素
next 返回被选元素的下一个同胞元素
nextAll 返回被选元素的所有跟随的同胞元素
nextUntil 返回介于两个给定参数之间的所有跟随的同胞元素
prev 相反
prevAll 相反
prevUntil 相反
过滤
first 返回被选元素的首个元素
last 返回被选元素的最后一个元素
eq 返回被选元素中带有指定索引号的元素
filter 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not 返回不匹配标准的所有元素
AJAX AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
什么是 AJAX
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。
AJAX load 方法
load 从服务器加载数据,并把返回的数据放入被选元素中 $(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:
实例
$("#div1").load("demo_test.txt");
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
实例
$("#div1").load("demo_test.txt #p1");
AJAX get 和 post 方法
GET 从指定的资源请求数据
POST 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
$.get() 方法通过 HTTP GET 请求从服务器上请求数据 $.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
$.post() 方法通过 HTTP POST 请求向服务器提交数据 $.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
GET 和 POST 方法的区别:
1、发送的数据数量
在 GET 中,只能发送有限数量的数据,因为数据是在 URL 中发送的。
在 POST 中,可以发送大量的数据,因为数据是在正文主体中发送的。
2、安全性
GET 方法发送的数据不受保护,因为数据在 URL 栏中公开,这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的,因为数据未在 URL 栏中公开,还可以在其中使用多种编码技术,这使其具有弹性。
3、加入书签中
GET 查询的结果可以加入书签中,因为它以 URL 的形式存在;而 POST 查询的结果无法加入书签中。
4、编码
在表单中使用 GET 方法时,数据类型中只接受 ASCII 字符。
在表单提交时,POST 方法不绑定表单数据类型,并允许二进制和 ASCII 字符。
5、可变大小
GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。
6、缓存
GET 方法的数据是可缓存的,而 POST 方法的数据是无法缓存的。
7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。
其他
noConflict 方法
jQuery 和其他 JavaScript 框架
正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写。
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?
其他一些 JavaScript 框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写(就像 jQuery),如果您在用的两种不同的框架正在使用相同的简写符号,有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题,并实现了 noConflict() 方法。
jQuery noConflict() 方法
noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了。
当然,您仍然可以通过全名替代简写的方式来使用 jQuery:
实例
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:
实例
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
实例
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍然在工作!");
});
});
JSONP
JSONP 教程
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。
同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。
JSONP 应用
1. 服务端 JSONP 格式数据
如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。
假设客户期望返回数据:["customername1","customername2"]。
真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。
服务端文件 jsonp.php 代码为:
jsonp.php 文件代码
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
2. 客户端实现 callbackFunction 函数
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
页面展示
<div id="divCustomers"></div>
客户端页面完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
jQuery 使用 JSONP
以上代码可以使用 jQuery 代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://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);
});
</script>
</body>
</html>
参考手册
选择器
1.基本选择器
$("#id") ID选择器
$("div") 元素选择器
$(".classname") 类选择器
$(".classname,.classname1,#id1") 组合选择器
2.层次选择器
$("#id>.classname ") 子元素选择器
$("#id .classname ") 后代元素选择器
$("#id + .classname ") 紧邻下一个元素选择器
$("#id ~ .classname ") 兄弟元素选择器
3.过滤选择器(重点)
$("li:first") 第一个li
$("li:last") 最后一个li
$("li:even") 挑选下标为偶数的li
$("li:odd") 挑选下标为奇数的li
$("li:eq(4)") 下标等于 4 的li(第五个 li 元素)
$("li:gt(2)") 下标大于 2 的li
$("li:lt(2)") 下标小于 2 的li
$("li:not(#runoob)") 挑选除 id="runoob" 以外的所有li
3.2内容过滤选择器
$("div:contains('Runob')") 包含 Runob文本的元素
$("td:empty") 不包含子元素或者文本的空元素
$("div:has(selector)") 含有选择器所匹配的元素
$("td:parent") 含有子元素或者文本的元素
3.3可见性过滤选择器
$("li:hidden") 匹配所有不可见元素,或type为hidden的元素
$("li:visible") 匹配所有可见元素
3.4属性过滤选择器
$("div[id]") 所有含有 id 属性的 div 元素
$("div[id='123']") id属性值为123的div 元素
$("div[id!='123']") id属性值不等于123的div 元素
$("div[id^='qq']") id属性值以qq开头的div 元素
$("div[id$='zz']") id属性值以zz结尾的div 元素
$("div[id*='bb']") id属性值包含bb的div 元素
$("input[id][name$='man']") 多属性选过滤,同时满足两个属性的条件的元素
3.5状态过滤选择器
$("input:enabled") 匹配可用的 input
$("input:disabled") 匹配不可用的 input
$("input:checked") 匹配选中的 input
$("option:selected") 匹配选中的 option
4.表单选择器
$(":input") 匹配所有 input, textarea, select 和 button 元素
$(":text") 所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同
$(":password") 所有密码框
$(":radio") 所有单选按钮
$(":checkbox") 所有复选框
$(":submit") 所有提交按钮
$(":reset") 所有重置按钮
$(":button") 所有button按钮
$(":file") 所有文件域
插件
Validate
默认校验规则
规则 描述
required:true 必须输入的字段。
remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
email:true 必须输入正确格式的电子邮件。
url:true 必须输入正确格式的网址。
date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
number:true 必须输入合法的数字(负数,小数)。
digits:true 必须输入整数。
creditcard: 必须输入合法的信用卡号。
equalTo:"#field" 输入值必须和 #field 相同。
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
range:[5,10] 输入值必须介于 5 和 10 之间。
max:5 输入值不能大于 5。
min:10 输入值不能小于 10。
Cookie
创建
cookie $.cookie('name', 'value');
cookie,并设置 7 天后过期 $.cookie('name', 'value', { expires: 7 });
cookie,并设置 cookie 的有效路径,路径为网站的根目录: $.cookie('name', 'value', { expires: 7, path: '/' });
读取
cookie: $.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
读取所有的 cookie 信息: $.cookie(); // => { "name": "value" }
删除
cookie 删除成功返回 true,否则返回 false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
// 写入使用了 path时,读取也需要使用相同的属性 (path, domain)
$.cookie('name', 'value', { path: '/' });
// 以下代码【删除失败】
$.removeCookie('name'); // => false
// 以下代码【删除成功】
$.removeCookie('name', { path: '/' }); // => true
Autocomplete
插件根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符,插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符,用户可以过滤列表以获得更好的匹配。
Treeview
提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航,支持基于 cookie 的持久性菜单