一、JQuery简介：
JQuery是一个javascript的框架，是对javascript的一种封装。
通过JQuery可以非常方便的操作html的元素
二、设计使用
1、JQuery实现隐藏和显示：
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>理解 $(function(){})
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
换句话说，写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。
一样功能，还有另一个写法
$(document).ready(function(){ });
通过id获取元素：与javascript通过id获取元素节点的方式(document.getElementById )不同
JQuery通过 $("#id") 就可以获取了
通过 document.getElementById 获取到的是 DOM里的 元素节点
而通过$("#id") 获取到的是一个 JQuery 对象
增加监听器：JQuery增加click事件的监听 $("#b1").click();
$("#b1").click(function(){
alert("点击了按钮");
});
与原生javascript需要在html元素上增加监听事件不同的是
JQuery 不需要在html元素上进行操作
这样的好处是，html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易。
通过$("#d")拿到div对象后，直接调用hide()和show()方法，即可实现隐藏和显示。
2、JQuery的常见方法
取值：val() 通过JQuery对象的val()方法获取值
相当于 document.getElementById("input1").value;
$(function(){
$("#b1").click(function(){
alert($("#input1").val());
});
});
通过html() 获取元素内容,如果有子元素，保留标签
$(function(){
$("#b1").click(function(){
alert($("#d1").html());
});
});
通过text() 获取元素内容,如果有子元素，不包含标签
3、JQuery的CSS操作
通过addClass() 增加一个样式中的class
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").addClass("pink");
});
});
</script>
<button id="b1">增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d">
Hello JQuery
</div>通过removeClass() 删除一个样式中的class
通过toggleClass() 切换一个样式中的class
这里的切换，指得是：
如果存在就删除
如果不存在，就添加
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").toggleClass("pink");
});
});
</script>
<button id="b1">切换背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d" >
Hello JQuery
</div>通过css函数 直接设置样式
css(property,value)
第一个参数是样式属性，第二个参数是样式值
css({p1:v1,p2:v2})
参数是 {} 包含的属性值对。
属性值对之间用 逗号，分割
属性值之间用 冒号 ：分割
属性和值都需要用引号 “
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d1").css("background-color","pink");
});
$("#b2").click(function(){
$("#d2").css({"background-color":"pink","color":"green"});
});
});
</script>
<button id="b1">设置单一样式</button>
<button id="b2">设置多种样式</button>
<br>
<br>
<div id="d1" >
单一样式，只设置背景色
</div>
<div id="d2" >
多种样式，不仅设置背景色，还设置字体颜色
</div>4、JQuery的选择器：
$("tagName")
根据 标签名 选择所有该标签的元素
$("#id")
根据 id 选择元素
id应该是唯一的，如果id重复，则只会选择第一个。
$(".className")
根据 class 选择元素
$("selector1 selector2")
选择 selector1下的selector2元素 。
选择id=d3的div下的span元素 $("div#d3 span").addClass("pink");
$(selector:first) 满足选择器条件的第一个元素 $("div:first").addClass("pink");
$(selector:last) 满足选择器条件的最后一个元素 $("div:last").addClass("pink");
$(selector:odd) 满足选择器条件的奇数元素
$(selector:even) 满足选择器条件的偶数元素
因为是基零的，所以第一排的下标其实是0(是偶数)
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div:odd").toggleClass("pink");
});
$("#b2").click(function(){
$("div:even").toggleClass("green");
});
});
</script>
<button id="b1">切换奇数背景色</button>
<button id="b2">切换偶数背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
.green{
background-color:green;
}
</style>
<div>
<span>Hello JQuery 0</span>
</div>
<div>
<span>Hello JQuery 1</span>
</div>
<div >
<span>Hello JQuery 2</span>
</div>
<div >
<span>Hello JQuery 3</span>
</div>
<div >
<span>Hello JQuery 4</span>
</div>
</div>
<div >
<span>Hello JQuery 5</span>
</div>
<div >
<span>Hello JQuery 6</span>
</div>$(selector:hidden) 满足选择器条件的不可见的元素
$(selector:visible) 满足选择器条件的可见的元素
注； div:visible 和div :visible(有空格)是不同的意思
div:visible 表示选中可见的div
div :visible(有空格) 表示选中div下可见的元素
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div:visible").hide();
});
$("#b2").click(function(){
$("div:hidden").show();
});
});
</script>
<button id="b1">隐藏可见的</button>
<button id="b2">显示不可见的</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div>
<span>Hello JQuery 1</span>
</div>
<div >
<span>Hello JQuery 2</span>
</div>
<div >
<span>Hello JQuery 3</span>
</div>
<div >
<span >Hello JQuery 4</span>
</div>
</div>
<div >
<span>Hello JQuery 5</span>
</div>
<div >
<span>Hello JQuery 6</span>
</div>$(selector[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
$(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素
注： 一般不要使用[class=className] 而应该使用.className
因为使用$("[class='className']") .toggleClass("anotherClassName")
会导致class变成className anotherClassName,再次 使用 [class=className] 就无法选中了
而.className没有这个问题。
表单对象选择器 指的是选中form下会出现的输入元素
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮
注意: 第7行
$("td[rowspan!=13] "+value).toggle(500);
$("td[rowspan!=13] 后面有一个空格，表示层级选择器，如果没有就会出错
toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒
注： :submit会把<button>元素选中，因为在一些浏览器中，<button>元素的type默认值是submit，所以会选中它。
<script src="jquery.min.js"></script>
<script>
$(function(){
$(".b").click(function(){
var value = $(this).val();
$("td[rowspan!=13] "+value).toggle(500);
});
});
</script>
<style>
table{
border-collapse:collapse;
table-layout:fixed;
width:80%;
}
table td{
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
padding-top: 5px;
}
div button{
display:block;
}
</style>
<table>
<tr>
<td rowspan="13" valign="top" width="150px">
<div >
<button value=":input" class="b">切换所有的:input</button>
<button value=":button" class="b">切换:button</button>
<button value=":radio" class="b">切换:radio</button>
<button value=":checkbox" class="b">切换:checkbox</button>
<button value=":text" class="b">切换:text</button>
<button value=":password" class="b">切换:password</button>
<button value=":file" class="b">切换:file</button>
<button value=":submit" class="b">切换:submit</button>
<button value=":image" class="b">切换:image</button>
<button value=":reset" class="b">切换:reset</button>
</div>
</td>
<td width="120px">说明</td>
<td width="120px">表单对象</td>
<td width="">示例</td>
</tr>
<tr>
<td >input按钮</td>
<td >:button</td>
<td><input type="button" value="input按钮"/></td>
</tr>
<tr>
<td>button按钮</td>
<td >:button</td>
<td><button>Button按钮</button></td>
</tr>
<tr>
<td>单选框</td>
<td >:radio</td>
<td><input type="radio" ></td>
</tr>
<tr>
<td>复选框</td>
<td >:checkbox</td>
<td><input type="checkbox" ></td>
</tr>
<tr>
<td>文本框</td>
<td >:text</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>文本域</td>
<td ></td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>密码框</td>
<td >:password</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>下拉框</td>
<td ></td>
<td><select><option>Option</option></select></td>
</tr>
<tr>
<td>文件上传</td>
<td >:file</td>
<td> <input type="file" /></td>
</tr>
<tr>
<td>提交按钮</td>
<td >:submit</td>
<td><input type="submit" /></td>
</tr>
<tr>
<td>图片型提交按钮</td>
<td >:image</td>
<td><input type="image" src="http://how2j.cn/example.gif" /></td>
</tr>
<tr>
<td>重置按钮</td>
<td >:reset</td>
<td><input type="reset" /></td>
</tr>
</table>表单对象属性：
:enabled会选择可用的输入元素 注：输入元素的默认状态都是可用
:disabled会选择不可用的输入元素
:checked会选择被选中的单选框和复选框 注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素
在监听函数中使用 $(this)，即表示触发该事件的组件。
5、筛选器 筛选器指的是在已经通过选择器选中了元素后，在此基础上进一步选择。
首先通过 $("div") 选择了多个div元素，接下来做进一步的筛选
first() 第1个元素
last() 最后一个元素
eq(num) 第num个元素
注: num基0
$("#b3").click(function(){
$("div").eq(4).toggleClass("pink");
});
parent() 选取最近的一个父元素
parents() 选取所有的祖先元素
children(): 筛选出儿子元素 (紧挨着的子元素) （下一层的后代）
find(selector): 筛选出后代元素 （下层的所有后代）
注: find() 必须使用参数 selector
siblings(): 同级(同胞)元素 $("#currentDiv").siblings().toggleClass("b");
6、JQuery属性
通过attr()获取一个元素的属性
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
alert("align属性是:" + $("#h").attr("align") );
});
$("#b2").click(function(){
alert("game属性是:" + $("#h").attr("game") );
});
});
</script>
<button id="b1">获取align属性</button>
<button id="b2">获取自定义属性 game</button>
<br>
<br>
<h1 id="h" align="center" game="LOL">居中标题</h1>通过attr(attr,value)修改属性
通过removeAttr(attr)删除属性
与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取，prop不能获取
2. 对于选中属性
attr 只能获取初始值， 无论是否变化
prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr
7、JQuery特效：
显示，隐藏，切换：显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000)
向上滑动，向下滑动，滑动切换：分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数，表示延时操作，比如slideUp(2000)
淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入 $("#d1").fadeTo("slow",0.2);
自定义动画效果：通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒
注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000);
});
});
回掉函数：效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。
div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
alert("动画演示结束");
//history.back();
});
8、JQuery事件：
页面加载：有两种方式表示 ：
1. $(document).ready(); $(document).ready(function(){
2. $(); 这种比较常用 $(function(){
图片加载用load()函数 $("#img").load(function(){
点击：click() 表示单击 $("#b").click(function(){
dblclick() 表示双击 $("#b").dblclick(function(){
注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件
键盘：keydown 表示按下键盘
keypress 表示按下键盘
keyup 表示键盘弹起
这三者的区别分别表现在发生的 先后顺序，获取到的键盘按钮值，已经对输入框的文本取值这三方面
先后顺序： 按照 keydown keypress keyup 顺序发生
键盘按钮值：
通过event对象的which属性获取键盘的值
keydown和keyup 能获取所有按键，不能识别大小写
keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写
文本取值：
keydown和keypress：不能获取最后一个字符
keyup： 获取所有字符
<script src="jquery.min.js"></script>
<script>
var order = 0;
var clearTimer=null;
$(function(){
$("#i").keydown(function(e){
var selector = "keydown";
show(selector,e,$(this).val());
});
$("#i").keypress(function(e){
var selector = "keypress";
show(selector,e,$(this).val());
});
$("#i").keyup(function(e){
var selector = "keyup";
show(selector,e,$(this).val());
});
});
function show(selector,e,inputvalue){
clearTimeout(clearTimer);
action(selector);
key(selector,e);
value(selector,inputvalue);
clearTimer= setTimeout(clear,4000);
}
function action(selector){
$("#"+selector+"Action").css("background-color","green");
$("#"+selector+"Action").html("顺序: " + (++order ) );
}
function value(selector,value){
$("#"+selector+"Value").html(value);
}
function key(selector,e){
$("#"+selector+"Key").html(e.which);
}
function clear(){
order = 0;
$("tr#action div").css("background-color","red");
$("tr div").html("");
}
</script>
<style>
tr#action div{
border: 1px solid black;
height:50px;
background-color:red;
}
tr#value div,tr#key div{
height:50px;
background-color:#d1d1d1;
}
td{
width:25%;
}
</style>
输入框：<input id="i">
<table width="100%">
<tr>
<td></td>
<td>keydown</td>
<td>keypress</td>
<td>keyup</td>
</tr>
<tr id="action">
<td>行为</td>
<td><div id="keydownAction"></div></td>
<td><div id="keypressAction"></div></td>
<td><div id="keyupAction"></div></td>
</tr>
<tr id="key">
<td>按键</td>
<td><div id="keydownKey"></div></td>
<td><div id="keypressKey"></div></td>
<td><div id="keyupKey"></div></td>
</tr>
<tr id="value">
<td>取值</td>
<td><div id="keydownValue"></div></td>
<td><div id="keypressValue"></div></td>
<td><div id="keyupValue"></div></td>
</tr>
</table>鼠标：mousedown 表示鼠标按下
mouseup表示鼠标弹起
mousemove表示鼠标进入
mouseenter表示鼠标进入
mouseover表示鼠标进入
mouseleave表示鼠标离开
mouseout表示鼠标离开
进入事件有3个 mousemove mouseenter mouseover
mousemove ：当鼠标进入元素，每移动一下都会被调用
mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用
mouseover：当鼠标进入元素，调用一下，在其中移动，不调用
mouseenter 和 mouseover的区别
mouseenter: 当鼠标经过其子元素不会被调用
mouseover：当鼠标经过其子元素会被调用
mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout：当鼠标经过其子元素会被调用
焦点：focus() 获取焦点
blur() 失去焦点
<script src="jquery.min.js"></script>
<script>
$(function(){
$("input").focus(function(){
$(this).val("获取了焦点");
});
$("input").blur(function(){
$(this).val("失去了焦点");
});
});
</script>
<style>
</style>
<input type="text" >
<input type="text" >改变：change() 内容改变
注： 对于文本框，只有当该文本失去焦点的时候，才会触发change事件。
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#input1").change(function(){
var text = $(this).val();
$("#message").html("input1的内容变为了"+text);
});
});
</script>
<style>
</style>
<div id="message"></div>
<input id="input1" type="text" >
<br>
<input size="50" id="input2"type="text" value="只有当input1失去焦点的时候，才会触发change事件" >提交：submit() 提交form表单
<script src="jquery.min.js"></script>
<form id="form" action="http://how2j.cn/study/login.jsp">
账号 : <input name="name" type=""> <br>
密码: <input name="password" type=""><br>
<input type="submit" value="登陆">
</form>
<script>
$(function(){
$("#form").submit(function(){
alert("提交账号密码");
});
});
</script>绑定事件：以上所有的事件处理，都可以通过on() 绑定事件来处理
$("selector").on("event",function);
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b").on("click",function(){
$("#message").html("单击按钮");
});
$("#b").on("dblclick",function(){
$("#message").html("双击按钮");
});
});
</script>
<div id="message"></div>
<button id="b">测试单击和双击</button>触发事件：文档加载好之后，就触发dblclick双击事件，而不是通过去手动双击。
$("selector").trigger("event"); $("#b").trigger("dblclick");
9、JQuery中的AJAX
提交AJAX请求：$.ajax();
$.ajax({ //$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
url: page, //第一个参数 url:page 表示访问的是page页面
data:{"name":value}, //第二个参数 data:{name:value} 表示提交的参数
success: function(result){ //第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数
$("#checkResult").html(result);
}
});
使用AJAX通过无刷新验证账号是否已经存在：
<script src="http://how2j.cn/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.ajax({
url: page,
data:{"name":value},
success: function(result){
$("#checkResult").html(result);
}
});
});
});
</script>使用get方式提交Ajax： $.get 是 $.ajax的简化版，专门用于发送GET请求
$.get(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选
使用post方式提交Ajax： $.post 是 $.ajax的简化版，专门用于发送POST请求 与get方式类似
最简单的调用AJAX的方式： $("#id").load(page,[data]);
<script src="jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var value = $(this).val();
var page = "/study/checkName.jsp?name="+value;
$("#checkResult").load(page);
});
});
</script>格式化form下的输入数据：serialize()： 格式化form下的输入数据
有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串
<script src="jquery.min.js"></script>
<div id="checkResult"></div>
<div id="data"></div>
<a href="checkName.jsp">checkName.jsp</a>
<form id="form">
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>
</form>
<script>
$(function(){
$("input").keyup(function(){
var data = $("#form").serialize();
var url = "checkName.jsp";
var link = url+"?"+ data;
$("a").html(link);
$("a").attr("href",link);
});
});
</script>10、数组操作：
遍历：$.each 遍历一个数组
第一个参数是数组
第二个参数是回调函数 i是下标，n是内容
<script src="jquery.min.js"></script>
<script>
var a = new Array(1,2,3);
$.each( a, function(i, n){
document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();
</script> 去除重复值：$.unique() 去掉重复的元素 注意 ： 执行unique之前，要先调用sort对数组的内容进行排序。
<script src="jquery.min.js"></script>
<script>
var a = new Array(5,2,4,2,3,3,1,4,2,5);
a.sort();
$.unique(a);
$.each( a, function(i, n){
document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();
</script> 判断元素在数组中的位置：$.inArray 返回元素在数组中的位置 ，如果不存在返回-1
<script src="jquery.min.js"></script>
<script>
var a = new Array(1,2,3,4,5,6,7,8);
document.write($.inArray(9,a));
document.close();
</script> 11、字符串操作：
$.trim() 去除首尾空白 document.write($.trim(" Hello JQuery "));
12、JSON字符串转换（为JSON对象）
$.parseJSON 将JSON格式的字符串，转换为JSON对象 var gareen = $.parseJSON(s3);
13、JQuery对象与DOM对象转换：
JQuery对象的方法，比如show() 、toggle()等等，这些方法都是属于JQuery对象的，而原生的DOM对象不具备这些方法。
DOM对象也具备JQuery对象所没有的属性和方法，比如checked属性。
JQuery转DOM： 通过get(0)或者[0] 把JQuery对象转为DOM对象
var div= $("#d"); var d = div[0]; //var d = div.get(0);
DOM转JQuery： 通过$() 把DOM对象转为JQuery对象
var div= document.getElementById("d"); var d = $(div);
1195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
