概述
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，还兼容各种浏览器 ，jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jquery的引入
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script>
加载jquery的主函数：jQuery的主函数的含义在于把整个文档加载完毕后再去执行主函数。
第一种方式：
$(document).ready(function(){
var div1 = document.getElementById("div1");
alert(div1);
});
第二种方式：
$(function(){
var div1 = document.getElementById("div1");
alert(div1);
})
Jquery对象
DOM对象转成jQuery对象
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
function myclick(){
var div1 = document.getElementById("myinput");
//把dom转换成jQuery对象
var jdiv1 = $(div1);
alert(jdiv1.val());
}
JQuery对象转换成dom对象
function myclick(){
var div1 = document.getElementById("myinput");
//把dom转换成jQuery对象
var jdiv1 = $(div1);
//把jQuery对象转换成dom对象
alert(jdiv1[0].value);
alert(jdiv1.get(0).value);
}
jQuery 选择器
基本选择器
id
用法: $(”#myDiv”);
返回值 ：单个元素的组成的集合
function myclick(){
//根据id选择器获得jQuery对象
var jinput = $("#myinput");
alert(jinput.val());
}
Element
用法: $(”div”)
返回值 ：集合元素
function myclick(){
//根据id选择器获得jQuery对象
/* var jinput = $("#myinput");
alert(jinput.val()); */
//获得所有页面上input的jQuery元素
var inputs = $("input");
//如果获得的元素是多个不能使用普通的for
/* for(var i = 0; i < inputs.length; i++){
alert(inputs[i].value)
} */
//需要使用jQuery提供的遍历方式：
inputs.each(function(){
//获得每一个jQuery对象
var obj = $(this);
alert(obj.val());
if(obj.val() == 'a'){
//each返回false 的时候回跳出循环
return false;
}
})
}
</script>
</head>
<body>
用户名1：<input id="myinput" type="text"><br>
用户名2：<input id="myinput1" type="text"><br>
用户名3：<input id="myinput2" type="text"><br>
简介：<textarea ></textarea>
<input type="button" value="点击" onclick="myclick()">
class
用法: $(”.myClass”)
返回值 ：集合元素
function myclick(){
var divs = $(".divcss");
divs.each(function(){
var divObj = $(this);
alert(divObj.html());
})
}
</script>
<style type="text/css">
div {
border: 1px solid black;
width: 100px;
height: 100px;
}
.divcss{
color: blue;
}
</style>
</head>
<body>
<div>div1</div>
<div class="divcss">div2</div>
<div class="divcss">div3</div>
<input type="button" value="点击" onclick="myclick()">
selector1, selector2, selectorN
用法: $(”div,span,p.myClass”)
返回值 ：集合元素，多种选择器一同使用我们需要使用逗号来分隔
function myclick(){
var divs = $(".divcss,input,textarea,#div1");
divs.each(function(){
var divObj = $(this);
alert(divObj.html());
})
}
层次选择器
空格
用法: $(”form input”)
返回值：集合元素，空格代表下级
说明: 在给定的祖先元素下匹配所有后代元素，这里的后代元素包括子元素和孙子元素等等
function myclick(){
var divs = $("form input");
divs.each(function(){
var divObj = $(this);
alert(divObj.val());
})
}
</script>
</head>
<body>
<form action="">
用户名：<input name="usename" type="text"><br>
密码：<input name="password" type="password"><br>
<div>
密码1：<input name="p1" type="text"><br>
</div>
<input type="button" value="点击" onclick="myclick()">
</form>
<input name="usename" type="text">
大于号
用法: $(”form > input”)
返回值：集合元素
说明: 在给定的父元素下匹配所有子元素，子元素只是下一代，不包括孙子元素及其后代
加号
用法: $(”label + input”)
返回值：集合元素
说明：匹配所有紧接在 prev 元素后的 next 一个元素，必须是pre后面紧挨着的元素才能拿到。
~
用法: $(”form ~ input”)
返回值：集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素，就是和form同级别的input元素
注意：是匹配之后的元素,不包含该元素在内，并且siblings匹配的是和prev同辈的元素了，其后辈元素不被匹配
过滤选择器
:first
用法：$(”tr:first”)
返回值：单个元素的组成的集合
说明：匹配找到的第一个元素
:last
用法：$(”tr:last”)
返回值：集合元素
说明：匹配找到的最后一个元素，与 :first 相对应
:even
用法：$(”tr:even”)
返回值：集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数，js的数组都是从0开始计数的。例如要选择table中的行，因为是从0开始计数，所以table中的第一个tr就为偶数。
:odd
用法：$(”tr:odd”)
返回值：集合元素
说明：匹配所有索引值为奇数的元素，和:even对应，从 0 开始计数
:not(selector)
用法：$(”input:not(:checked)”)
返回值：集合元素
说明：去除所有与给定选择器匹配的元素，有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”)
示例
<script type="text/javascript">
$(function(){
var css1 = {background:'yellow',color:'red'};
$("tr:odd").css(css1);
})
function myclick(){
//var divs = $("tr:first");
/* var divs = $("tr:even");
divs.each(function(){
var divObj = $(this);
alert(divObj.html());
}) */
/* $("input:checked").each(function(){
alert($(this).val())
}) */
$("input:not(:checked)").each(function(){
alert($(this).val())
})
}
function checkAll(){
/* $("td input").each(function(){
$(this).attr("checked","checked");
}) */
//jquery元素选择器获得到的都是数组，如果不去便利就调用方法，那么就是给这一组元素区操作，如果想当个操作需要遍历。
$("td input").attr("checked","checked");
}
function reverseCheck(){
$("td input").each(function(){
var checkedState = $(this).attr("checked");
if(checkedState == 'checked'){
$(this).removeAttr("checked");
}else{
$(this).attr("checked","checked");
}
})
}
</script>
<style type="text/css">
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td><input type="checkbox" value="1"></td>
<td>李逵</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox" value="2"></td>
<td>李鬼</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox" value="3"></td>
<td>戴总</td>
<td>32</td>
</tr>
<tr>
<td><input type="checkbox" value="4"></td>
<td>宋江</td>
<td>35</td>
</tr>
</table>
<input type="button" value="点击" onclick="myclick()">
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverseCheck()">
</body>
属性过滤选择器
[attributeFilter1][attributeFilter2][attributeFilterN]
用法：\ $(”input[id][name$=‘man’]“)
返回值：集合元素
说明：复合属性选择器，需要同时满足多个条件时使用。又是一个组合，这种情况我们实际使用的时候很常用。这个例子中选择的是所有含有id属性，并且它的name属性是以man结尾的input元素。
自定义属性主要用于校验：
$("input[reg]").each(function(){
var val = $(this).val();
var reg = $(this).attr("reg");
var tip = $(this).attr("tip");
//alert(reg + " "+tip)
var regExp = new RegExp(reg);
if(!regExp.test(val)){
alert(tip);
}
})
Html自定义属性：
用户名：<input id="username" name="usename" type="text" reg="^\d{6,8}$" tip="请输入6到8位用户名"><br>
密码：<input name="password" type="password" reg="^\w{6,8}$" tip="请输入6到8单词字符的密码"><br>
子元素过滤选择器
用法“：$(”ul li:nth-child(2)”)
返回值：集合元素
说明：匹配其父元素下的第N个子或奇偶元素。这个选择器和之前说的基础过滤(Basic Filters)中的eq()有些类似，不同的地方就是前者是从0开始，后者是从1开始。
<script type="text/javascript">
function myclick(){
//序号从1开始
//var liObj = $("ul li:nth-child(3)");
//var liObj = $("ul li:first-child");
//var liObj = $("ul li:last-child");
var liObj = $("ul li:only-child");
alert(liObj.html());
}
</script>
表单对象属性过滤选择器
:enabled
用法：$(”input:enabled”)
返回值：集合元素
说明：匹配所有可用元素。意思是查找所有input中不带有disabled=”disabled”的inpu，不为disabled，当然就为enabled啦
:disabled
用法：$(”input:disabled”)
返回值：集合元素
说明：匹配所有不可用元素，与上面的那个是相对应
:checked
用法：$(”input:checked”)
返回值：集合元素
说明：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected
用法：$(”select option:selected”)
返回值：集合元素
说明：匹配所有选中的option元素
:hidden
用法：$(”input:hidden”)
返回值：集合元素
说明: 匹配所有不可见元素，或者type为hidden的元素。这个选择器就不仅限于表单了，除了匹配input中的hidden外，那些style为hidden的也会被匹配。
注意: 要选取input中为hidden值的方法就是上面例子的用法，但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素，包括宽度或高度为0的
文档处理
Append
-
append(content) :向每个匹配的元素的内部的结尾处追加内容
要添加内部内容的元素.appendTo(要添加到结尾的内容)
function myclick(){
var len = $("li").length;
//创建li的jQuery元素
var liObj = $("<li>列表项"+(len+1)+"</li>");
//在ul内追加jQuery的li元素
$("ul").append(liObj);
}
</script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
-
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
要添加到结尾的内容.appendTo(要添加内部内容的元素)
function myclick(){
var len = $("li").length;
//创建li的jQuery元素
var liObj = $("<li>列表项"+(len+1)+"</li>");
//在ul内追加jQuery的li元素
//$("ul").append(liObj);
var urlObj = $("ul");
liObj.appendTo(urlObj);
}
-
prepend(content):向每个匹配的元素的内部的开始处插入内容
要添加内部内容的元素.appendTo(要添加到开头的内容)
function myclick(){
var len = $("li").length;
//创建li的jQuery元素
var liObj = $("<li>列表项"+(len+1)+"</li>");
//在ul内追加jQuery的li元素
//$("ul").append(liObj);
/* var urlObj = $("ul");
liObj.appendTo(urlObj); */
$("ul").prepend(liObj);
}
-
prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
要添加到开头的内容.appendTo(要添加内部内容的元素)
function myclick(){
var len = $("li").length;
//创建li的jQuery元素
var liObj = $("<li>列表项"+(len+1)+"</li>");
//在ul内追加jQuery的li元素
//$("ul").append(liObj);
/* var urlObj = $("ul");
liObj.appendTo(urlObj); */
/* $("ul").prepend(liObj);
var urlObj = $("ul"); */
var urlObj = $("ul");
liObj.prependTo(urlObj);
}
示例
<script type="text/javascript">
/* var myclick = function(){
alert("0");
} */
$(function(){
})
function rightMove(){
//获得左面被选中的option
$("#perm option").each(function(){
//获得每一个option的是否被选中的属性值
var opt = $(this).attr("selected");
if(opt == "selected"){
$("#selPerm").append($(this));
}
})
}
function rightMoveAll(){
//获得左面被选中的option
$("#perm option").each(function(){
//var copy = $(this).clone();
$("#selPerm").append($(this));
})
}
function leftMove(){
//获得左面被选中的option
$("#selPerm option").each(function(){
//获得每一个option的是否被选中的属性值
var opt = $(this).attr("selected");
if(opt == "selected"){
$("#perm").append($(this));
}
})
}
function leftMoveAll(){
//获得左面被选中的option
$("#selPerm option").each(function(){
$("#perm").append($(this));
})
}
</script>
<style type="text/css">
select{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="perm" multiple="multiple">
<option>登录</option>
<option>员工管理</option>
<option>部门管理</option>
<option>订单管理</option>
</select>
</td>
<td>
<input type="button" value=">" onclick="rightMove()"><br>
<input type="button" value=">>" onclick="rightMoveAll()"><br>
<input type="button" value="<" onclick="leftMove()"><br>
<input type="button" value="<<" onclick="leftMoveAll()">
</td>
<td>
<select id="selPerm" multiple="multiple">
</select>
</td>
</tr>
</table>
clone
如果带着true的参数复制就会把事件也复制过去，如果不去指定参数就不会复制事件
var divObjcopy = divObj.clone(true)
<script type="text/javascript">
$(function(){
$("#div1").click(function(){
alert("div1的点击事件");
})
})
function copy(){
var divObj = $("#div1");
//如果带着true的参数复制就会把事件也复制过去，如果不去指定参数就不会复制事件
var divObjcopy = divObj.clone(true);
$("#div2").after(divObjcopy);
}
</script>
删除
remove
remove():
DOM 中删除所有匹配的元素，传入的参数用于根据 jQuery 表达式来筛选元素。
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将被同时删除。
这个方法的返回值是一个指向已被删除的节点的引用。
empty
empty():
清空节点，清空元素中的所有后代节点(不包含自身属性)。
属性操作
attr
attr(): 获取属性和设置属性
- 当为该方法传递一个参数时, 即为某元素的获取指定属性
- 当为该方法传递两个参数时, 即为某元素设置指定属性的值
其他设置属性的方法
jQuery 中有很多方法都是一个函数实现获取和设置，如: html()， text()，val()，height()，width()，css()等。
$(“div”).html(“<p>奥运接受了</p>");
$(“div”).html();
removeAttr
removeAttr(): 删除指定元素的指定属性
样式操作
获取class和设置class：class是元素的一个属性，所以获取class和设置class都可以使用attr()方法来完成。
追加样式
追加样式: addClass()
移除样式
移除样式: removeClass()
从匹配的元素中删除全部或指定的 class
切换样式
toggleClass()
控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它
判断是否含有某个样式
hasClass()
判断元素中是否含有某个 class，如果有，则返回 true，否则返回 false
节点遍历
- Children()：获得父节点下的所有孩子节点，返回的是一个节点集合
- Next()：获得指定元素后面紧挨着的下一个元素
示例：
<script type="text/javascript">
function myclick(){
/* $("ul li").each(function(){
alert($(this).html())
}) */
//获得ul下的孩子节点
var lis = $("ul").children();
lis.each(function(){
alert($(this).html())
})
}
function login(){
//根据id选择器获得用户名的jQuery对象
var unameObj = $("#username");
var val = unameObj.val();
var reg = unameObj.attr("reg");
var tip = unameObj.attr("tip");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//获得username紧挨着的下一个dom的jQuery对象
var spanObj = unameObj.next("input");
spanObj.html(tip);
}else{
//提交表单
$("#myform").submit();
}
}
</script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<input type="button" value="点击" onclick="myclick()">
<hr>
<form id="myform" action="${path }/jsp2/tab.jsp" method="post">
<p>
用户名：<input id="username" name="username" type="text" reg="^\w{6,8}$" tip="请输入6到8位的单词字符"><span></span>
</p>
<p>
<input type="button" value="登录" onclick="login()">
</p>
</form>
- Siblings()：获得兄弟节点，不区分类型，返回的节点集合
示例：
function myclick1(){
//siblings获得兄弟节点
$("div p:first-child").siblings().each(function(){
alert($(this).html())
})
}
事件
- 事件结合选择器会把选择器选出来的一组元素都加上事件
- 在元素上可以不去指定事件
- 事件的方法建议使用匿名方法
- 事件的赋值必须要放在jQuery的主函数内部
blur
blur事件：离开焦点触发
<script type="text/javascript">
$(function(){
/* 1.事件结合选择器会把选择器选出来的一组元素都加上事件
2.在元素上可以不去指定事件
3.事件的方法建议使用匿名方法
4.事件的赋值必须要放在jQuery的主函数内部
*/
$("form input").blur(function(){
//离开焦点的input是哪个这个this就是哪个对象
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//获得username紧挨着的下一个dom的jQuery对象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
}else{
var spanObj = obj.next();
spanObj.html("");
}
});
})
</script>
</head>
<body>
<form action="">
<p>
用户名：<input name="username" type="text" reg="^\d{3,5}$" tip="请输入3到5位的数字"><span></span>
</p>
<p>
密码：<input name="password" type="password" reg="^\w{6,8}$" tip="请输入6到8位的英文或者数字或_"><span></span>
</p>
<p>
地址：<input name="address" type="text" reg="^.{0,50}$" tip="请输入50个字符"><span></span>
</p>
</form>
click
click事件：被点击时触发
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Submit
Submit事件：阻止表单提交，如果是true就允许表单提交
$("#myform").submit(function(){
var isSubmit =true;
$("form input").each(function(){
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//获得username紧挨着的下一个dom的jQuery对象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
isSubmit =false;
}else{
var spanObj = obj.next();
spanObj.html("");
}
})
//阻止表单提交，如果是true就允许表单提交
return isSubmit;
});
Keydown
Keydown事件：当键盘被按下时，发生 keydown 事件
$("body").keydown(function(event){
var num = window.event?event.keyCode : event.which;
if(num == 13){
var isSubmit = true;
$("form input").each(function(){
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//获得username紧挨着的下一个dom的jQuery对象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
isSubmit =false;
//跳出each循环
//return false;
}else{
var spanObj = obj.next();
spanObj.html("");
}
})
if(isSubmit){
//表单提交
$("#myform").submit();
}
}
});
ajax
下面是发送ajax的两种方式
function ajaxInvoke(){
var uname = $("#username").val();
var opt = {
type:'post',//请求方式
url:'${path}/login',//请求的地址
data:{
username:uname//username=uname
},
dataType:'json',//返回值的类型，一般使用两种，text，json
success:function(responseJSON){//ajax调用成功后的回调方法
//如果dataType是json那么要求后台一定要返回JSONObject或者JSONArray对象,这个后台的json对象会直接转换成js中的json
//alert(responseJSON.id+ " "+responseJSON.name +" "+responseJSON.age);
for(var i = 0; i < responseJSON.length; i++){
alert(responseJSON[i].id + " "+ responseJSON[i].name + " "+responseJSON[i].age);
}
},
error:function(){//调用失败进入的方法
alert("系统错误");//如果404或者后台报异常就会走入error
}
};
$.ajax(opt);
}
一般多用下面这种
function ajaxInvoke(){
var uname = $("#username").val();
$.ajax({
type:'post',//请求方式
url:'${path}/login',//请求的地址
async:false,//同步的ajax
data:{
username:uname//username=uname
},
dataType:'json',//返回值的类型，一般使用两种，text，json
success:function(responseJSON){//ajax调用成功后的回调方法
alert(1);
//如果dataType是json那么要求后台一定要返回JSONObject或者JSONArray对象,这个后台的json对象会直接转换成js中的json
//alert(responseJSON.id+ " "+responseJSON.name +" "+responseJSON.age);
for(var i = 0; i < responseJSON.length; i++){
alert(responseJSON[i].id + " "+ responseJSON[i].name + " "+responseJSON[i].age);
}
},
error:function(){//调用失败进入的方法
alert("系统错误");//如果404或者后台报异常就会走入error
}
});
//默认情况下ajax是异步的，所以程序不会等着回调函数执行完毕采取执行
alert(2);
}
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
