jQuery笔记
1.语法
一.两种基本写法
第一种：
$(function(){
})
第二种：
$(document).ready(function(){
})
二.基本用法
$(this).hide();隐藏当前元素
$("p").hide();隐藏所有的p标签元素
$("p.test").hide();隐藏所有class="test"的p标签元素
$("#test").hide();隐藏所有id="test"的元素
2.jQuery绑定事件 不用加on 直接添加事件click mouseover focus blur dblclick(双击)
$(function(){
var flag=true;
$("#dd").click(function(){
if(flag){
$("#p").hide();
}else{
$("#p").show();
}
flag=!flag;
})
})
$(“input”).focus(function(){
$(this).css(“background-color”,"#cccccc");
});
3.选择器 .class #id p this [href]
$("*") 选取所有的元素
$("this") 选取当前HTML元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("ul li:first") 选取第一个ul的第一个li
$("ul li:first-child") 选取每个ul的第一个li
$("li[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数行的 li 元素 奇数位置（从0开始）
$("tr:odd") 选取奇数行的 li 元素 偶数位置（从0开始）
$("*").hide(); 选取所有元素选取所有元素
$(this).hide(); 选取当前 HTML 元素
$("ul li:first").hide(); //选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child").hide(); 选取每个 <ul> 元素的第一个 <li> 元素
$("ul li[href]").hide(); 选取带有 href 属性的元素
$("ul li:odd").hide(); 选取偶数行的 li 元素 奇数位置（从0开始）
$("ul li:even").hide(); 选取奇数行的 li 元素 偶数位置（从0开始）
$(":button").hide(); 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("a[target='_blank']").hide(); 选取所有 target 属性值等于 "_blank" 的 <a> 元素
4.jQuery效果
一.淡入淡出
fadeIn（时间，回调函数）fadeOut（） fadeToggle（时间，透明度，回调函数） fadeTo（）
$(selector).fadeIn(speed,callback); 淡入
$(selector).fadeOut(speed,callback); 淡出
$(selector).fadeToggle(speed,callback); 淡入淡出
$(selector).fadeTo(speed,opacity,callback); 淡入到 某个透明度使用flag时可淡入淡出
$("ul li").fadeIn(3000,function(){alert(1)})
$("ul li").fadeOut(3000,function(){alert(1)})
$("ul li").fadeToggle(3000,function(){alert(1)})
$("ul li").fadeTo(3000,0.5,function(){alert(1)})
二.滑动
slideUp（时间，回调函数） slideDown（）slideToggle（）
$(selector).slideDown(speed,callback); 向下滑
$(selector).slideUp(speed,callback); 向上滑
$(selector).slideToggle(speed,callback); 向上向下滑
三.动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。 属性之间要用逗号隔开 width:"+=150px" 逐渐加到150
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("ul li").animate({width:'600px',height:'500px',opacity:'0.5'},3000,function(){alert(1)});
$("ul li").animate({width:'+=150px',height:'+=150px',opacity:'1'},3000,function(){alert(1)});
使用队列功能 顺序执行
$("ul li").animate({width:'+=150px',opacity:'0.5'},3000,function(){alert(1)});
$("ul li").animate({height:'+=150px',opacity:'0.5'},3000,function(){alert(2)});
四.停止动画
$(selector).stop(stopAll,goToEnd); 停止正在运动的动画
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
$("ul li").stop();
$("ul li").hide(3000,function(){
console.log("段落现在被隐藏了");
});
五.方法链
先背景变蓝，宽度变为600px；再向上滑动，再向下滑动，然后3s透明度变为0.5，最后宽度在原来600px的基础上加150px
$("ul li").css({"background":"blue","width":"600px"}).slideUp(3000,function(){console.log("上滑");}).slideDown(3000,function(){console.log("下滑");}).fadeTo(3000,0.5,function(){console.log("淡入")}).animate({width:"+=150px"},3000,function(){console.log("动画")});
5.jQuery HTML
一.jQuery捕获
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值 //得到文本框的value值
二.jQuery 设置与回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
$("#div1").text(function(i,olddiv){
return “旧文本：”+olddiv+“新文本：hello World！(index：”+i+")";
});
jQuery attr() 方法也用于设置/改变属性值，允许同时设置多个属
$("#dd3").click(function(){
$("#aa").attr({
"href":"http://www.baidu.com",
"title":"百度"
})
}）
提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
三.添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$("ul li:first-child").append("在被选元素结尾追加文本");//1在被选元素结尾追加内容
$("ul li:nth-child(2)").prepend("在被选元素开头追加文本");//在被选元素开始追加文本1
$("ul li:nth-child(4)").after("被选元素之后插入内容追加文本");//after在被选元素之后插入内容
$("ul li:nth-child(6)").before("被选元素之前插入内容追加文本");//before在被选元素之前插入内容
jQuery创建元素
var txt=$("<p><p>").text("<b>love</b>");
$("ul li").append(txt);
四.删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("ul li:first-child").remove();//删除被选元素（及其子元素）
$("ul li:first-child").empty();//删除被选元素的子元素
五.CSS操作
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("ul li:first-child").addClass("div");//删除被选元素添加 class 属性
$("ul li:nth-child(1)").removeClass("div"); //删除被选元素的指定的
$("ul li:nth-child(1)").toggleClass("div"); //对被选元素进行添加/删除类的切换操作
$("ul li:nth-child(2)").css({"background-color":"yellow","font-size":"200%"});
六.尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
$("ul li:first").width(); //100 内容区
$("ul li:first").height(); //100 内容区
$("ul li:first").innerWidth(); //160 内容区+补白（内边距）
$("ul li:first").innerHeight(); //160 内容区+补白（内边距）
$("ul li:first").outerWidth(); //260 内容区+补白（内边距）+边框（外边距）
$("ul li:first").outerHeight(); //260 内容区+补白（内边距）+边框（外边距）
6.JQuery 遍历
一.祖先
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
$("span").parents().css({"color":"red","fontSize":"200%","border":"1px solid red"});
$("span").parents().css({"color":"red","border":"1px solid red"});
$("span").parentsUntil("div").css({"color":"red","border":"1px solid red"})
二.后代
children（）返回被选元素的所有直接子元素
find（） 返回被选元素的所有后代元素，一路向下直到最后一个后代
$("div").children("p:nth-child(2)").css({"color":"red","border":"1px solid red"}); //返回被选择的元素的所有直接子元素
$("div").find("span").css({"color":"red","border":"1px solid red"}); //查找所有div下的span标签，返回被选元素的后代元素，一路向下直到最后一个后代
三.同胞
siblings（）返回被选元素的所有同胞元素，左右两边都查到头
siblings("p") 返回被选元素的所有同胞p标签元素，左右两边都查到头
next() 返回被选元素的下一个元素
nextAll() 返回被选元素后面所有的元素
nextUntil("#fff") 返回被选元素介于两个给定参数之间的所有跟随的同胞元素
prev() 返回被选元素的前一个元素
prevAll() 返回被选元素前面所有的元素
prevUntil() 返回被选元素介于两个给定参数之间的所有跟随的同胞元素
$("#ff").siblings().css({"color":"red","border":"1px solid red"});
$("#ff").siblings("p").css({"color":"red","border":"1px solid red"});
$("#ff").next().css({"color":"red","border":"1px solid red"});
$("#ff").nextAll().css({"color":"red","border":"1px solid red"});
$("#ff").nextUntil("#fff").css({"color":"red","border":"1px solid red"});
四.过滤
first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素，索引号从0开始
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not() 方法返回不匹配标准的所有元素
$("p").first().css({"color":"red","border":"1px solid red"});
$("p").last().css({"color":"red","border":"1px solid red"});
$("p").eq(0).css({"color":"red","border":"1px solid red"});
$("p").filter(".ff").css({"color":"red","border":"1px solid red"});
$("p").not(".ff").css({"color":"red","border":"1px solid red"});
7.jQuery Ajax
一.兼容
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else{
ajax=new ActiveXObject(“Microsoft.XMLHTTP”);
}
二.基本用法
第一种用法：load
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
$("#aa").load(“http://127.0.0.1:8020/复习jQuery/ajax.txt”);
第二种用法：open send ajax.onreadystatechange
先用ajax.open（“GET/POST”，“链接”）向服务器打开接口请求，再用ajax.send（）传送得到的信息，然后当readyState发生改变时，就会触发onreadyStatechange事件 ajax.onreadyStatechange=function(){}，最后判断当ajax.readyState的状态值为4且ajax.status判断码为200 时，说明响应已就绪
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else{
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.open("GET","http://127.0.0.1:8020/复习jQuery/ajax.txt");
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4 /*状态值*/ && ajax.status==200){//状态码判断 200 交易成功
alert(ajax.responseText);
}
}
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
第三种用法：get
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名
$.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
data为执行成功后返回的值 status为success/error
$("#dd3").click(function(){
$.get("http://127.0.0.1:8020/复习jQuery/ajax.txt",function(data,status){
alert("数据："+data+"状态："+status);
})
})
第四种用法：post
语法：
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名
$("#dd4").click(function(){
$.post("http://127.0.0.1:8020/复习jQuery/ajax.php",{
name:"菜鸟教程",
url:"http://www.baidu.com"
},function(data,status){
alert("数据："+data+"状态："+status);
})
})
8.jQuery noConflict
当在页面上同时使用 jQuery 和其他框架时，要先在前面加上$.noConflict(),然后其他操作就和常用的一样
一.第一种用法
$.noConflict();
jQuery(document).ready(function(){
jQuery("#dd").click(function(){
jQuery("#aa").text(“jQuery 仍然在工作”);
})
})
二.第二种用法
$.noConflict();
jQuery(function(){
jQuery("#dd").click(function(){
jQuery("#aa").text(“jQuery 仍然在工作”);
})
})
三.第三种用法
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”
.
n
o
C
o
n
f
l
i
c
t
(
)
;
j
Q
u
e
r
y
(
f
u
n
c
t
i
o
n
(
.noConflict(); jQuery(function(
.noConflict();jQuery(function(){
$("#dd3").click(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲aa").text("jQue….noConflict();
jq(function(){
jq("#dd4").click(function(){
jq("#aa").text(“jQuery 仍然在工作”);
})
})
9.jQuery JSONP
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
$.getJSON("http://127.0.0.1:8020/复习jQuery/jsonp.php?jsoncallback=?",function(data){
var html="<ul>";
for(var i=0;i<data.length;i++){
html+="<li>"+data[i]+"</li>";
}
html+="</ul>";
$("#aa").html(html);
})
9.jQuery 实用工具
一.$.each() 遍历指定的对象和数组
.
e
a
c
h
(
[
52
,
97
]
,
f
u
n
c
t
i
o
n
(
i
n
d
e
x
,
v
a
l
u
e
)
a
l
e
r
t
(
i
n
d
e
x
+
′
:
′
+
v
a
l
u
e
)
;
)
;
二
.
.each([52,97], function(index, value) {alert(index + ': ' + value);}); 二.
.each([52,97],function(index,value)alert(index+′:′+value););二..extend() 将一个或多个对象的内容合并到目标对象
三.
.
i
n
A
r
r
a
y
(
)
在
数
组
中
查
找
指
定
值
并
返
回
它
的
索
引
值
（
如
果
没
有
找
到
，
则
返
回
−
1
）
j
Q
u
e
r
y
.
i
n
A
r
r
a
y
(
"
J
o
h
n
"
,
a
r
r
)
四
.
.inArray() 在数组中查找指定值并返回它的索引值（如果没有找到，则返回-1） jQuery.inArray( "John", arr ) 四.
.inArray()在数组中查找指定值并返回它的索引值（如果没有找到，则返回−1）jQuery.inArray("John",arr)四..isArray([]) 判断指定参数是否是一个数组
五.$.grep() 过滤并返回满足指定函数的数组元素
jQuery.grep(arr, function( n, i ) {
return ( n !== 5 && i > 4 );
});
10.0jQuery Validate 表单验证插件
要用jQuery validate时要先在页面中加载jquery.validate.min.js
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。
一.提交事件
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$("#commentForm").validate();
});
二.将校验规则写到控件中
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
三.将校验规则写到 js 代码中
$.validator.setDefaults({
submitHandler: function() { 成功后执行
alert("提交事件!");
}
});
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
}，
password: {
required: true,
minlength: 5
}
}，
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
}
})
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="firstname">名字</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">姓氏</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username">用户名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">密码</label>
<input id="password" name="password" type="password">
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
扫一扫
457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
