JavaWeb18-jquery学习笔记（Java全栈开发）
JavaWeb18-jquery学习笔记（Java全栈开发）
jquery一.筛选
筛选与之前的选择器雷同,筛选提供的都是函数.
1. 过滤
eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始.
first():第一个
last():最后一个
hasClass(...):判断元素是否含有特定的样式
filter(...):筛选出与指定表达式匹配的元素集合
is(...):判断元素是否符合指定的选择器
has(...):含有特定后代的元素
not(...):删除与指定表达式匹配的元素
slice(start,end):从给定的数组中，按照范围截取元素。 [start,end)
map(fn):将一组元素转换成其他数组
过滤:
eq(index):索引等于
获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始.
//<input type="button" value=" 选择索引值等于3的div元素" id="b1"/>
$("#b1").click(function(){
$("div").eq(3).css("background-color","#ff0");
});
first():第一个
// <input type="button" value=" 选择第一个div元素" id="b2"/>
$("#b2").click(function(){
$("div").first().css("backgroundColor","#f0f");
});
last():最后一个
// <input type="button" value=" 选择最后一个可见的div元素" id="b3"/>
$("#b3").click(function(){
//$("div:visible").last().css("backgroundColor","#3ff");
$("div").last().css("backgroundColor","#3ff").show(1000);
});
hasClass('class值'):是否含有指定的class属性
// <input type="button" value=" 判断id为one的div的样式是否为one" id="b4"/>
$("#b4").click(function(){
//alert($("#one").hasClass("one"));
alert($("#one").is(".one"));
});
filter('selecter'):过滤
// <input type="button" value=" 选择class为none的所有div并展示出来" id="b5"/>
$("#b5").click(function(){
$("div").filter(".none").css("backgroundColor","#3ff").show();
});
is('selecter'): 是否匹配选择器表达式
// <input type="button" value=" 判断样式为hide的div 下一个兄弟是否是span" id="b6"/>
$("#b6").click(function(){
alert($("div.hide").next().is("span"));
//alert($("div.hide+span").is("span"));
});
has('selecter'):后代中含有指定选择器的
// <input type="button" value=" 选择所有div中含有div的" id="b7"/>
$("#b7").click(function(){
$("div").has("div").css("background-color","#ff0");
});
not('selecter'):排除匹配的选择器
// <input type="button" value=" 选择样式为one的div没有title属性的div" id="b8"/>
$("#b8").click(function(){
$("div.one").not("[title]").css("background-color","#ff0");
});
slice(startindex,endindex):截取
// <input type="button" value=" 选择索引号为3,4的div" id="b9"/>
$("#b9").click(function(){
$("div").slice(3,5).css("background-color","#ff0");
});2. 查找
children([...]):获取他的所有孩子
closest(...):从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
find(...):查找后代
next():下一个兄弟
nextAll():后面所有的兄弟
nextUntil(...):从下一个兄弟开始,直到指定元素结束
parent():获取父元素
parents():匹配元素的祖先元素的元素(不包含根元素)
prev():上一个兄弟
prevAll():前面的所有兄弟
prevUntil():从上一个兄弟开始,直至指定元素结束
siblings():所有的兄弟
查找:
带有until了解下
☆children():孩子
例如:选择 id=two 所有子元素
$("#two").children()
☆find():查找后代
例如:选择 id=two 子元素含有title=other 元素
$("#two").find("[title='other']")
☆next():下一个兄弟
例如: $("#two").next();
nextAll():小弟们
例如: $("#two").nextAll();
nextUntil():直到那个结束
☆parent():父元素
例如:选择 id=two 父元素
$("#two").parent();
parents():先辈
☆prev():上一个兄弟
例如: $("#two").prev();
prevAll():前面的所有兄弟
prevUntil():从上一个兄弟开始,直至指定元素结束
☆siblings():所有的兄弟
例如: $("#two").siblings();
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value=" 选择 id=two 所有子元素" id="b1"/>
$("#b1").click(function(){
$("#two").children().css("background-color","#ff0");
});
// <input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2"/>
$("#b2").click(function(){
$("#two").find("[title='other']").css("background-color","#ff0");
});
// <input type="button" value=" 选择 id=two 下一个兄弟" id="b3"/>
$("#b3").click(function(){
$("#two").next().css("background-color","#ff0");
});
// <input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4"/>
$("#b4").click(function(){
$("#two").nextAll().css("background-color","#ff0");
});
// <input type="button" value=" 选择 id=two 上一个兄弟" id="b5"/>
$("#b5").click(function(){
$("#two").prev().css("background-color","#ff0");
});
// <input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6"/>
$("#b6").click(function(){
$("#two").prevAll().css("background-color","#ff0");
});
// <input type="button" value=" 选择 id=two 所有兄弟" id="b7"/>
$("#b7").click(function(){
$("#two").siblings().css("background-color","#ff0");
});
// <input type="button" value=" 选择 id=two 父元素" id="b8"/>
$("#b8").click(function(){
$("#two").parent().css("background-color","#ff0");
});
});
</script>closest和parents的主要区别是：
1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
3. 串联
A.add(B) 将A和B拼凑在一起，等效 $(A,B)
A.children().andSelf() 所有孩子，再添加自己
A.children().end()... 使用end后将返回A位置
contents() 获得所有节点（子元素、文本） <div>abc<a></a> xxx</div>
串联:
add(e|e|h|o[,c]) 相当与 $("#id,.class")
例如:选择 id=one和two 的div
$("#one").add("#two")
andSelf() 把自己添加进入
例如:选择id=one 所有的孩子，以及one自己
$("#one").children().andSelf()
(了解)contents()
☆end() 往回退一步
$("#two").next().css().end()
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value=" 选择 id=one和two 的div" id="b1"/>
$("#b1").click(function(){
$("#one").add("#two").css("background-color","#c3f");
});
// <input type="button" value=" 选择id=one 所有的孩子，以及one自己" id="b2"/>
$("#b2").click(function(){
$("#one").children().andSelf().css("background-color","#ff0");
});
// <input type="button" value=" 选择id=one 所有的孩子，设置颜色为红，设置one自己为黄" id="b3"/>
$("#b3").click(function(){
$("#one").children().css("background-color","#f00").end().css("background-color","#ff0");
});
// <input type="button" value=" 获得id=two 子节点个数" id="b4"/>
$("#b4").click(function(){
alert($("#two").contents().length);
});
});
</script>二.事件
1. 常见事件
重点掌握(5)
click:单击
focus:获取焦点
blur:失去焦点
submit:表单提交
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function(){
$("#textMsg").append("键盘按下：keydown");
}).keypress(function(){
$("#textMsg").append("键盘按住：keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
}).select(function(event){
//支持谷歌
var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);
$("#textMsg").html("文本内容被选中：select ， " + sub);
});
var i = 0;
$("#e02").mouseover(function(){
$("#divMsg").html("鼠标移上：mouseover");
}).mousemove(function(){
//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
}).mouseout(function(){
$("#divMsg").html("鼠标移出：mouseout");
}).mousedown(function(){
$("#divMsg").html("鼠标按下：mousedown");
}).mouseup(function(){
$("#divMsg").html("鼠标弹起：mouseup");
});
$("#e03").click(function(){
$("#buttonMsg").html("单击：click");
}).dblclick(function(){
$("#buttonMsg").html("双击：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>focus和focusin 得到焦点
focus 获得焦点
foucsin 获得焦点。可以在父元素上检测子元素获取焦点的情况
blur和focusout 失去焦点
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
//$("#outerDiv").focus(function(){
// $("#showSpan").html(i++);
//});
$("#outerDiv").focusin(function(){
$("#showSpan").html(i++);
});
});
</script>mouseover 和 mouseenter 移进
mouseover , 如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件
mouseenter ,如果鼠标指针穿过任何子元素，不会触发 mouseenter 事件
mouseout和mouseleave 移除 同上
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i= 0;
//$("#outerDiv").mouseover(function(){
// $("#showSpan").html(i++);
//});
$("#outerDiv").mouseenter(function(){
$("#showSpan").html(i++);
});
});
</script>2. 页面载入
ready(fn):页面载入,在一个页面中可以使用多次
常用格式1:
$(document).ready(function(){
....
})
常用格式2: 格式1的简化版
$(function(){
......
});
常用格式3:完整版
jQuery(document).ready(function(){
......
});
3. 事件处理和委派
Jquery对象.事件(fn)
on:绑定多个事件
one: 绑定一次事件 one()
bind和unbind
bind:绑定事件,一直使用,直到解绑
例如:$btn1.bind(“click”,function(){}); ===$btn1.click(function(){});
unbind:解绑事件
绑定的时候可以指定别名,格式: 事件.别名
例如:
bind(“click.c1”,fn);
unbind(“click.c1”);
trigger和triggerHandler
trigger() 触发所有的事件（包括浏览器默认的）
triggerHandler() 触发所有的事件（不包括浏览器默认的）
委派
live jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效,例如给A标签添加事件，之后再追加a标签都具有相同的事件。
die 解绑
4. 事件切换
hover 在mouseover和mouseout之间进行切换
toggle 点击事件切换，点击第一次执行 fn，点击第二次执行fn2.....
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#e02").hover(function(){
$("#textMsg").html(1);
},function(){
$("#textMsg").html(2);
});
$("#e02").mouseover(function(){
$(this).html(3);
}).mouseout(function(){
$(this).html(4);
})
$("#e01").toggle(function(){
$("#textMsg").html("函数1")
},function(){
$("#textMsg").html("函数2")
},function(){
$("#textMsg").html("函数3")
});
});
</script>三.效果
基本：改变高和宽
show(速度，[fn]) 显示 当显示成功后触发fn
hide() 隐藏
toggle(speed [,fn]) 切换,如果隐藏就显示，如果显示就隐藏。
滑动：改变高度
slideDown ，显示（从上往下）
slideUp，隐藏（从下往上）
slideToggle() 切换
淡入淡出：改变透明度
fadeIn 显示
fadeOut 隐藏
fadeToggle 切换
fadeTo 指定对象透明度
效果:
基本:宽和高都变
show([毫秒值],[fn]) 展示
hide([毫秒值],[fn]) 隐藏
toggle([毫秒值],[fn]) 切换显示效果 若显示则隐藏 若隐藏则显示
滑入滑出:高
slideDown([毫秒值],[fn]):从上到下 滑入
slideUp([毫秒值],[fn]):从下到上 滑出
slideToggle([毫秒值],[fn]):切换 若有则滑出,若无则滑入
淡入淡出
fadeIn([毫秒值],[fn]):淡入
fadeOut([毫秒值],[fn]):淡出
fadeTo([毫秒值],小数,[fn]):在指定的时间内,颜色淡化到指定的数字
fadeToggle([毫秒值],[fn]):切换 若有则淡出,若无则淡入
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
//$("#b1Div").hide(2000);
$("#b1Div").toggle(1000);
});
$("#b2").click(function(){
//$("#b2Div").slideUp(2000);
$("#b2Div").slideToggle(2000);
});
$("#b3").click(function(){
//淡出
//$("#b3Div").fadeOut(2000);
//颜色淡化指定值
//$("#b3Div").fadeTo(2000,0.4)
$("#b3Div").fadeToggle(2000);
});
});
</script>案例:抽奖信息显示
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//创建5个div
for(var i=1;i<6;i++){
createDiv();
}
//周期性的变化
var timer=setInterval(showDiv,100);
$("body").click(function(){
clearInterval(timer);
});
});
var i=1;
//创建一个div
function createDiv(){
$div=$("<div>"+(i++)+"</div>");
$div.css({
"width":400,
"height":100,
"border":"1px solid #000",
"margin":5,
}).appendTo($("body"));
}
//div变化
function showDiv(){
//把第一个div滑出完成之后将其淡入到最后一个
$("div").first().slideUp(100,function(){
$(this).appendTo($("body")).fadeIn(100);
});
}
</script>四.ajax
1. load
要求:
jquery对象调用
格式:
load(url,[data],[callback])参数:
url:请求路径
data:请求参数 格式为json
若有此参数,请求方式为post
若无此参数,请求方式为get
callback:成功之后回调,具有三个参数
2. $.get
发送get请求
格式:
$.get(url,[data],[callback],[type]);参数:
type:返回内容的格式有如下取值
xml,html,script,json,text,_default3. $.post
发送post请求
格式:
$.post(url,[data],[callback],[type]);4. $.ajax
底层是原始的ajax请求方式
格式1:
$.ajax(url,[settings])格式2:setting可以使用json格式
jQuery.ajax(settings)参数:
async 设置是否异步，true：表示异步（ajax） 默认 true
type 设置请求方式。例如：get、post
url 设置请求路径
data 请求参数
dataType 设置数据转换类型，例如：xml, html, script, json
success 成功回调 fn
error 错误回调 fn
例如:
$.ajax({
"async":true,
"type":"POST",
"url":url,
"data":params,
"success":function(data){
alert(data);
},
"error" : function(){
alert("错误");
}
});5. 表单序列化
erialize() 将表单中所有内容转成字符串。
所有内容：有name，有值（非空）--文本有数据，单选多选选中，下拉列表选中等
字符串：key=value&key=value&....
serializeArray()将表单中所有内容转成json数组
6.可以在前台将所有参数编码成utf-8
encodeURL.....