JavaEE-JS的优美封装-JQuery详细学习笔记
JavaEE-JS的优美封装-JQuery详细学习笔记
文章目录
- JavaEE-JS的优美封装-JQuery详细学习笔记
- 概述
- JQuery使用
- 导包
- 引用
- 主函数
- Jquery对象
- DOM转jQuery
- JQuery转DOM
- JQuery选择器
- 基本选择器
- 层次选择器
- 过滤选择器
- 全代码示例
- 属性过滤选择器
- 子元素过滤选择器
- DOM处理
- Append
- 外部插入结点
- 创建结点
- 删除结点
- clone
- 属性操作
- HTML，文本和值
- 结点遍历
- 事件
- AJax
概述
jQuery（J查找）由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team。
其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，还兼容各种浏览器
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择
JQuery使用
导包
下载地址
引用
<script src="WEB-INF/lib/jquery-1.8.3.js" >script>
ALT+左键点击能进入代表引用成功
主函数
加载jquery的主函数：jQuery的主函数的含义在于把整个文档加载完毕后再去执行主函数,方便处理来自客户端的值
<script>
$(function(){
alert("hello JQuery")
})
</script>
Jquery对象
DOM,对象：
在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :
- 文档本身就是一个文档对象
- 所有 HTML 元素都是元素节点
- 所有 HTML 属性都是属性节点
- 插入到 HTML 元素文本是文本节点
- 注释是注释节点
DOM转jQuery
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
<html lang="en">
<head>
<script src="WEB-INF/lib/jquery-1.8.3.js" >script>
<script>
$(function myclick(){
//获取值
var val = document.getElementById("myclick");
//把dom转换成jQuery对象
var jval = $(val);
alert(jval.val());})
script>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input id="myclick" type="text" value="悟空" >
body>
html>
JQuery转DOM
$(function myclick(){
//获取值
var val = document.getElementById("myclick");
//把dom转换成jQuery对象
var jval = $(val);
alert(jval.val());
//JQuery对象转换成DOM对象
var Dval = jval[0]
alert(Dval.value)
})
JQuery选择器
基本选择器
id选择器
-
#id 用法:
$(”#myDiv”)： 根据给定的ID匹配元素的值 -
Element（元素选择器） 用法:
$(”div”)返回值 集合元素
示例代码：
<html lang="en">
<head>
<script src="WEB-INF/lib/jquery-1.8.3.js" >script>
<script>
$(function fun(){
//根据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());
})
})
script>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input id="myclick" type="text" value="悟空" >
<input id="myclick1" type="text" value="悟空1" >
<input id="myclick2" type="text" value="悟空2" >
body>
html>
- class选择器 用法:
$(”.myClass”)返回值 集合元素
<html lang="en">
<head>
<script src="WEB-INF/lib/jquery-1.8.3.js" >script>
<script>
$(function fun(){
var divs = $(".divcss");
divs.each(function(){
var divObj = $(this);
alert(divObj.html());
})
})
script>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>div1div>
<div class="divcss">div2div>
<div class="divcss">div3div>
body>
html>
selector1, selector2, selectorN 选择器
返回值： 集合元素
多种选择器一同使用我们需要使用逗号来分隔
如：
<script>
$(function fun(){
var divs = $(".divcss,input,textarea,#div1");
divs.each(function(){
var divObj = $(this);
alert(divObj.html());
})
})
script>
层次选择器
第一种：用法: $(”form input”) ; 返回值 集合元素，空格代表下级
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.
第二种：用法: $(”form > input”) ; 返回值 集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
第三种： prev + next
用法: $(”label + input”) ; 返回值 集合元素
说明: 匹配所有紧接在 prev 元素后的 next 一个元素，必须是pre后面紧挨着的元素才能拿到
第四种 ：prev ~ siblings
用法： $(”form ~ input”) ; 返回值 集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配
过滤选择器
第一种：
用法: $(”tr:first”) ; 返回值 单个元素的组成的集合
说明: 匹配找到的第一个元素
第二种：
用法: $(”tr:last”) 返回值 集合元素
说明: 匹配找到的**最后一个元素.**与 :first 相对应
第三种：
用法: $(”tr:even”) 返回值 集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.，js的数组都是从0开始计数的，例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
第四种：
用法: $(”tr:odd”) 返回值 集合元素
说明: 匹配所有**索引值为奇数的元素,**和:even对应,从 0 开始计数.
第五种：
用法: $(”input:not(:checked)”) 返回值 集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”)
全代码示例
<html lang="en">
<head>
<script src="WEB-INF/lib/jquery-1.8.3.js" >script>
<script>
$(function fun(){
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");//使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>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table border="1">
<tr>
<td><input type="checkbox" value="1">td>
<td>李逵td>
<td>30td>
tr>
<tr>
<td><input type="checkbox" value="2">td>
<td>李鬼td>
<td>30td>
tr>
<tr>
<td><input type="checkbox" value="3">td>
<td>戴总td>
<td>32td>
tr>
<tr>
<td><input type="checkbox" value="4">td>
<td>宋江td>
<td>35td>
tr>
table>
<input type="button" value="点击" onclick="myclick()">
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverseCheck()">
body>
html>
属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
第一种：
用法: $(”div[id]“) ; 返回值 集合元素
说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
第二种：
用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值 集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素
属性过滤选择器可以配合正则表达式使用：
第一种：
<html lang="en">
<head>
<script src="WEB-INF/lib/jquery-1.8.3.js" >script>
<script>
$(function fun() {
})
function myclick(){
$("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);}
})
}
script>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<form>
用户名：<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>
<input type="button" value="点击" onclick=myclick() >
form>
body>
html>
第二种：
[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name$=‘man’]“) 返回值 集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾（正则表达式）的元素.
子元素过滤选择器
用法: $(”ul li:nth-child(2)”) 返回值 集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.从1开始
DOM处理
Append
- append(content) :向每个匹配的元素的内部的结尾处追加内容
//创建li的jQuery元素
var liObj = $("列表项" +追加内容+"");
//在ul内追加jQuery的li元素
$("ul").append(liObj);
- appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
var liObj = $("列表项" +追加内容+"");
//在ul内追加jQuery的li元素
//$("ul").append(liObj);
var urlObj = $("ul");
liObj.appendTo(urlObj);
- prepend(content):向每个匹配的元素的内部的开始处插入内容
var liObj = $("列表项" +追加内容+"");
$("ul").prepend(liObj);
- prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
var liObj = $("列表项" +追加内容+"");
//$("ul").prepend(liObj);
liObj.prependTo(urlObj);
外部插入结点
after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
创建结点
使用 jQuery 的工厂函数 ( ) : ‘ (): ` ():‘(html)`，会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中
注意：
当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个
元素, 可以使用 $(“< p/>”) 或 $(“< p>< /p>”), 但不能使用 $(“< p>”) 或 $(“< /p>”)
删除结点
remove():
从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
empty():
清空节点 – 清空元素中的所有后代节点(不包含属性节点).
clone
$(function fun() {
$("#div1").click(function(){
alert("div1的点击事件");
})
})
function copy(){
var divObj = $("#div1");
//如果带着true的参数复制就会把事件也复制过去，如果不去指定参数就不会复制事件
var divObjcopy = divObj.clone(true);
$("#div2").after(divObjcopy);
}
属性操作
attr(): 获取属性和设置属性
当为该方法传递一个参数时, 即为某元素的获取指定属性的值
当为该方法传递两个参数时, 即为某元素设置指定属性的值
removeAttr(): 删除指定元素的指定属性
jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等
如
$(“div”).html(“<p>上下上下左右左右BABA </p>");
$(“div”).html();
HTML，文本和值
读取和设置某个元素中的 HTML内容: html() . 该方法可以用于XHTML, 但不能用于XML 文档
读取和设置某个元素中的文本内容: text() 该方法既可以用于 XHTML 也可以用于 XML 文档 [text表示除html外的文本，是html的子集]
读取和设置某个元素中的值: val() [该方法类似 JavaScript 中的 value 属性. 对于文本框，下拉列表框，单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组]
结点遍历
Children():获得父节点下的所有孩子节点
Next():获得指定元素后面紧挨着的下一个元素
以上知识综合代码：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="WEB-INF/lib/jquery-1.8.3.js" ></script>
<script>
function myclick(){
var lis = $("ul").children();
lis.each(function(){
alert($(this).html())
alert($(this).val())
alert($(this).text())
})
}
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("span");
spanObj.html(tip);
}else{
//提交表单
$("#myform").submit();
}
}
</script>
<meta charset="UTF-8">
<title>Title</title>
</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="index.jsp" method="post">
<p>
用户名：<input id="username" name="username" type="text" reg="^\w{6,8}$" tip="请输入6到8位的单词字符">
<span>1</span>
</p>
<p>
<input type="button" value="登录" onclick="login()">
</p>
</form>
</body>
</html>
Siblings():获得兄弟节点，不区分类型
function myclick1(){
//siblings获得兄弟节点
$("div p:first-child").siblings().each(function(){
alert($(this).html())
})
}
事件
1.事件结合选择器会把选择器选出来的一组元素都加上事件
2.在元素上可以不去指定事件
3.事件的方法建议使用匿名方法
4.事件的赋值必须要放在jQuery的主函数内部
<!DOCTYPE html>
<html lang="en">
<head>
<script src="WEB-INF/lib/jquery-1.8.3.js" ></script>
<script>
$(function () {
$("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(""+tip+"");
}else{
var spanObj = obj.next();
spanObj.html("");
}
});
})
</script>
<meta charset="UTF-8">
<title>Title</title>
</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>
</body>
</html>
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(""+tip+"");
isSubmit =false;
}else{
var spanObj = obj.next();
spanObj.html("");
}
})
//阻止表单提交，如果是true就允许表单提交
return isSubmit;
});
keydown回车键事件
Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 等浏览器使用 event.which
<!DOCTYPE html>
<html lang="en">
<head>
<script src="WEB-INF/lib/jquery-1.8.3.js" ></script>
<script>
$(function () {
$("body").keydown(function(event){
//判断是否键盘事件，是则取keycode，13为回车键
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(""+tip+"");
isSubmit =false;
//跳出each循环
return false;
}else{
var spanObj = obj.next();
spanObj.html("");
}
})
if(isSubmit){
//表单提交
$("#myform").submit();
}
}
});
})
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="mysubmit" 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>
</body>
</html>
AJax
JQuery标准ajax
$.ajax({
type: 'POST',
url:'/jquery_demo1/demoServlet',
data:{name:'aa'},
dataType:‘text',
success:function(responseText){
alert(responseText);
},
error:function(){
alert('发生错误');
}
});
type：请求方式get或者是post
url：请求地址
data：发送的数据
dataType：返回的数据类型json，text，xml，html
success是success是回调的数据方法
error：发生错误时
如果ajax接收json后台则需要返回json对象，这个后台的json对象会直接转换成js中的json，如
$.ajax({
type: 'POST',
url:'/jquery_demo1/demoServlet',
data:{name:'aa'},
dataType:'json',
success:function(responseJSON){
alert(responseJSON.name);
},
error:function(){
alert('发生错误');
}
});
sasync:false,
async控制ajax是否是异步，默认是异步，false是同步