JAVA AJAXJQUERY DAY03
1 jQuery简单案例
1.1 问题
使用jQuery实现对div内容的样式修改。
1.2 方案
使用<script>标签引入jQuery的js文件，获取div的jQuery对象，调用jQuery方法修改样式。
1.3 步骤
步骤一：新建 selector/s01.html文件
在页面内添加一个超链接，用于调用JavaScript的方法。添加一个div元素，填写一些文本内容。
图 - 1
步骤二：引入jQuery.js文件
图 - 2
步骤三：添加f1（）方法：修改div内容的传统方式
图 - 3
步骤四：添加f2（）方法：使用jQuery的方法修改div内容
图 - 4
步骤五：运行查看效果
图 - 5
步骤六：添加f4（）方法：jQuery方法的连缀调用
图 - 6
步骤七：运行查看结果
图 - 7
1.4 完整代码
s01.html文件代码如下：
<html>
<head>
<title>jquery01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
#d1{
width:200px;
height:200px;
background-color:#fff8dc;
font-size:20px;
}
</style>
<script type="text/javascript"
src="../js/jquery-1.11.1.js"></script>
<script>
/*之前的做法:原始方式 */
function f1(){
var obj = document.getElementById('a1');
alert(obj.innerHTML);
}
/*以后的做法:jQuery方式 */
function f2(){
//将原始的DOM对象封装成一个jQuery对象
var obj = $('#a1');
//DOM对象的obj.innerHTML不能使用了。
//要使用jQuery对象提供的方法或者属性。
alert(obj.html());
}
function f4(){
$('#d1').css('font-size','60px')
.css('font-style','italic');
}
</script>
</head>
<body>
<!-- jQuery简单案例 -->
<a id="a1" href="javascript:;"
onclick="f4();">hello jQuery</a>
<div id="d1">write less,do more</div>
</body>
</html>
2 jQuery对象与DOM对象的转换
2.1 问题
如何将DOM包装为jQuery对象，以及如何将jQuery对象转换为DOM对象。
2.2 方案
为DOM对象添加$符号，为jQuery对象调用get方法。
2.3 步骤
步骤一：新建s02.html页面
在页面中添加两个链接用于调用方法。在页面中引入jQuery文件。
图 - 8
步骤二：添加f1()方法：DOM对象(jQuery对象
图 - 9
步骤三：运行查看结果
图 - 10
步骤四：添加f2()方法：jQuery对象(DOM对象
图 - 11
步骤五：运行查看结果
图 - 12
2.4 完整代码
s02.html文件代码如下：
<html>
<head>
<title>jquery02.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="../js/jquery-1.11.1.js"></script>
<script>
//DOM对象转换成jQuery对象
function f1(){
var obj = document.getElementById('a1');
var $obj = $(obj);
alert($obj.html());
}
//jQuery对象转换成DOM对象
function f2(){
var $obj = $('#a2');
//var obj = $obj.get(0);
var obj = $obj.get()[0];
alert(obj.innerHTML);
}
</script>
</head>
<body>
<!-- jQuery对象与DOM对象的转换 -->
<a id="a1" href="javascript:;" onclick="f1();">
DOM对象-->jQuery对象</a><br/><br/>
<a id="a2" href="javascript:;" onclick="f2();">
jQuery对象-->DOM对象</a><br/><br/>
</body>
</html>
3 jQuery选择器
3.1 问题
掌握jQuery中的基本选择器、层次选择器、过滤选择器、表单选择器。
3.2 方案
引入jQuery文件，调用选择器方法，查看选择器的操作结果。
3.3 步骤
步骤一：基本选择器
新建s03.html页面：
图– 13
引入jQuery文件(后面案例中，该步骤会省略，但所有案例都必须引入jQuery文件方可运行）
图– 14
添加f1(),f2(),f3(),f4(),f5()方法，进行各基本选择器的调用，查看结果。
图– 15
图 - 16
步骤二：层次选择器
新建s04.html页面：
图- 17
添加方法：
图 - 18
查看运行结果：
图 -19
步骤三：过滤选择器
基本过滤选择器：
新建s05.html页面：
图 - 20
添加方法：
图 - 21
运行查看结果：
图– 22
内容过滤选择器：
新建s06.html文件：
图– 23
添加方法：
图– 24
运行结果：
图 - 25
图 - 26
可见性过滤选择器：
新建s07.html文件：
图– 27
添加方法：
图– 28
运行结果：
图 - 29
属性过滤选择器：
新建s08.html文件：
图– 30
添加方法：
图– 31
运行结果：
图 - 32
子元素过滤选择器：
新建s09.html文件：
图– 33
添加方法：
图– 34
运行结果：
图 -35
表单对象属性过滤选择器
新建s10.html文件：
图– 36
添加方法：
图– 37
运行结果：
图 -38
步骤四：选择器的综合案例
新建e01.html页面：
图 - 39
添加方法：
图 - 40
查看运行结果：
图 - 41
图 - 42
3.4 完整代码
s03.html文件代码：
<html>
<head>
<title>jquery03.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
$('#d1').css('font-size','30px');
}
function f2(){
$('.s1').css('font-size','30px');
}
function f3(){
$('div').css('font-size','30px');
}
function f4(){
$('#d1,p').css('font-size','30px');
}
function f5(){
$('*').css('font-size','30px');
}
</script>
</head>
<body>
<!-- jQuery基本选择器 -->
<!-- #id -->
<!-- .class -->
<!-- element -->
<!-- selector1,selector2,... -->
<!-- * -->
<div id="d1">Hello jQuery</div>
<div class="s1">Hello Ajax</div>
<p class="s1">Hello Servlet</p>
<a href="javascript:;" onclick="f5()">基本选择器</a>
</body>
</html>
s04.html文件代码：
<html>
<head>
<title>jquery04.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
$('#d1 div').css('font-size','30px');
}
function f2(){
//只查找子节点，不找非直接节点
//只找到d2，d3，d5.但是d4继承了d3，也会改变
$('#d1>div').css('font-size','30px');
}
function f3(){
//+表示下一个兄弟,
$('#d3+div').css('font-size','30px');
//不会有改变，p标记不是d3的兄弟节点
$('#d3+p').css('font-size','30px');
}
function f4(){
//~ 下面所有兄弟
$('#d2~div').css('font-size','30px');
}
</script>
</head>
<body>
<!-- jQuery层次选择器 -->
<!-- select1 空格 select2 -->
<!-- select1 > select2 -->
<!-- select1 + select2 -->
<!-- select1 ~ select2 -->
<div id="d1">
<div id="d2">Hello Java</div>
<div id="d3">
<div id="d4" style="font-size:40px">Hello Servlet</div>
</div>
<div id="d5">Hello Ajax</div>
<p>Hello jQuery</p>
</div>
<a href="javascript:;" onclick="f4();">基本选择器</a>
</body>
</html>
s05.html文件代码：
<html>
<head>
<title>jquery05.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
$('table tr').css('background-color','#cccccc');
$('table tr:first').css('background-color','red');
$('tbody tr:eq(3)').css('background-color','yellow');
}
function f2(){
$('tbody tr:even').css('background-color','#fff8dc');
$('tbody tr:odd').css('background-color','#yellow');
}
function f3(){
$('tbody tr:eq(1) td:eq(1)')
.css('background-color','yellow')
.css('font-size','30px');
}
function f4(){
$('tbody tr:not(#tr2)')
.css('background-color','yellow');
}
</script>
</head>
<body style="font-size:24px">
<!-- 基本过滤选择器 -->
<!-- ：first 第一行被挑选出来
：last 最后一个
：not(selector) 把selector排除在外
：even 偶数行
：odd 奇数行
：eq（index） 如果要挑选第二行？
使用该方法，index是从0开始
：gt（index） 大于index下标的
：lt（index) 小于index下标的
-->
<a href="javascript:;" onclick="f4();">过滤选择器</a>
<table width="60%" border="1" cellpadding="0"
cellspacing="0">
<thead>
<tr><td>name</td><td>age</td></tr>
</thead>
<tbody>
<tr><td>Tom</td><td>21</td></tr>
<tr id="tr2"><td>Jerry</td><td>22</td></tr>
<tr><td>Kitty</td><td>23</td></tr>
<tr><td>Doro</td><td>24</td></tr>
</tbody>
</table>
</body>
</html>
s06.html文件代码：
<html>
<head>
<title>jquery06.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
$('div:contains(这里)').css('font-size','30px');
}
function f2(){
$('div:empty').html('空的div');
}
function f3(){
$('div:has(p)').css('font-size','30px');
}
function f4(){
$('div:parent').css('font-size','30px');
}
</script>
</head>
<body>
<!-- 内容过滤选择器 -->
<!-- ：contains（text）匹配包含给定文本的元素
：empty 匹配所有不包含子元素或者文本的空
：has（selector）匹配含有选择器所匹配的元素
：parent 匹配含有子元素或者文本的元素
-->
<a href="javascript:;" onclick="f4();">
内容过滤选择器</a><br><br>
<div>这里是div</div>
<div></div>
<div>
<p>含有p标记的div</p>
</div>
</body>
</html>
s07.html文件代码：
<html>
<head>
<title>jquery07.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
//$('div:hidden').css('display','block');
$('div:hidden').show('normal');
}
function f2(){
$('div:visible').hide(800);
}
</script>
</head>
<body>
<!-- 可见性过滤选择器 -->
<!-- ：hidden 匹配所有不可见元素，或者type为hidden的元素
：visible 匹配所有的可见元素
-->
<a href="javascript:;" onclick="f2();">可见性过滤选择器</a><br><br>
<div>这里是div</div>
<div style="display:none;">display:none</div>
</body>
</html>
s08.html文件代码：
<html>
<head>
<title>jquery08.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
$('div[id]').css('font-size','30px');
}
function f2(){
$('div[id=d2]').css('font-size','30px');
}
function f3(){
$('div[id!=d2]').css('font-size','30px');
}
</script>
</head>
<body>
<!-- 属性过滤选择器 -->
<!-- [attribute ]
[attribute=value]
[attribute !=value]
-->
<a href="javascript:;" onclick="f3();">属性过滤选择器</a><br><br>
<div id="d1">有Id的div：d1</div>
<div id="d2">有Id的div：d2</div>
<div>没有Id的div</div>
</body>
</html>
s09.html文件代码：
<html>
<head>
<title>jquery09.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
$('ul li:eq(1)')
.css('font-size','30px');
}
function f2(){
$('ul li:nth-child(2)')
.css('font-size','30px');
}
</script>
</head>
<body>
<!-- 子元素过滤选择器 -->
<!-- ：nth-child(index / even / odd)
index是从1开始的整数，表示对应位置的子元素
-->
<a href="javascript:;" onclick="f2();">子元素过滤选择器</a><br><br>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul>
<li>item111</li>
<li>item222</li>
<li>item333</li>
</ul>
</body>
</html>
s10.html文件代码：
<html>
<head>
<title>jquery10.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
$('#form1 input:disabled')
.css('border','1px dotted red');
}
function f2(){
//$('#form1 input:enabled')
//.css('border','1px dotted red');
$('#form1 input:enabled')
.attr('disabled',true);
}
function f3(){
var length =
$('#form2 input:checked').length;
alert(length);
alert($('#form2 input:checked').val());
}
function f4(){
alert($('#form3 select option:selected').val());
alert($('option:selected').val());
}
</script>
</head>
<body>
<!-- 表单对象属性过滤选择器 -->
<!-- ：enabled
：disable
：checked
：selected
-->
<a href="javascript:;" onclick="f4();">
表单对象属性过滤选择器</a><br><br>
<form id="form1">
username:<input name="username"/><br/>
name:<input name="name" disabled="disabled"/><br/>
</form>
<form id="form2">
兴趣：吃饭<input type="checkbox" name="interest"
value="eating" checked="checked">
喝茶<input type="checkbox" name="interest"
value="drinking" >
看报纸<input type="checkbox" name="interest"
value="reading" >
</form>
<form id="form3">
<select>
<option value="math">数学</option>
<option value="english"
selected="selected">英语</option>
<option value="computer">计算机</option>
</select>
</form>
</body>
</html>
e01.html文件代码：
<html>
<head>
<title>e01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
$('tbody tr:even').css('background-color',
'#fff8dc');
$('tbody tr:odd').css('background-color',
'yellow');
}
function f2(){
$('tbody tr:contains(王五)').css(
'background-color','yellow');
}
function f3(){
$('tbody tr:eq(1) td:eq(1)').css(
'background-color','red');
}
</script>
</head>
<body onload="f1();">
<table width="50%" border="1" cellpadding="0"
cellspacing="0">
<caption style="font-weight:800;">员工信息</caption>
<thead>
<tr><th>姓名</th><th>薪水</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>20000</td><td>23</td></tr>
<tr><td>李四</td><td>22000</td><td>22</td></tr>
<tr><td>王五</td><td>14000</td><td>26</td></tr>
<tr><td>马六</td><td>15000</td><td>21</td></tr>
</tbody>
</table>
<input type="button" value="Click1" onclick="f2();"/>
<input type="button" value="Click2" onclick="f3();"/>
</body>
</html>
4 jQuery操作DOM
4.1 问题
使用jQuery对DOM节点进行增删改查追加等操作。
4.2 方案
使用jQuery中关于DOM操作的有关方法。实现DOM的查询、创建、插入节点、删除节点、复制节点、属性操作、样式操作、遍历节点。
4.3 步骤
步骤一：DOM操作：查询
新建d01.html文件：
图 - 43
添加方法：
图 - 44
图 - 45
运行查看结果：
图 - 46
步骤二：DOM操作：创建、插入、删除
新建d02.html文件：
图 - 47
添加方法：
图 - 48
图 - 49
运行查看结果：
图 - 50
图– 51
步骤三：分离JavaScritp代码
分别使用传统方法和jQuery方法，在页面加载时就执行一段JavaScript代码。并将这些代码分离到一个js文件中。
新建d03.html文件：
图 - 52
新建j03.js文件：
图 - 53
新建d04.html页面：
图– 54
新建j04.js文件
图– 55
d03.html文件和d04.html文件完成的操作是等价的。运行结果相同，都会在页面加载后，为div添加了点击事件，点击之后，div内的文字会变更为“hello Ajax”。
图 - 56
步骤四：复制节点
新建d05.html文件：
图 - 57
添加方法：
图 - 58
运行查看结果：
图– 59
复制完的item3节点不具备原节点同样的单击事件。
图– 60
图– 61
clone方法添加了true参数以后，复制的节点也具有同原始节点相同的点击事件。
步骤五：样式操作
新建d06.html文件：
图 - 62
添加方法：
图 - 63
运行查看结果：
参考浏览器的实际运行效果。
步骤六：遍历节点
新建d07.html文件：
图 - 64
添加方法：
图 - 65
运行查看结果：
逐个方法运行查看结果，以浏览器实际运行结果为准。
4.4 完整代码
d01.html文件代码如下：
<html>
<head>
<title>d01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
/* html() innerHTML
text() innerText
*/
function f1(){
//alert($('#d1').html());
alert($('#d1').text());
}
function f2(){
$('#d1').html('<p>hello dojo</p>');
}
/*val() value*/
function f3(){
//alert($(':text').val());
$(':text').val('kitty');
}
function f4(){
//alert($('#d1').attr('id'));
$('#d1').attr('style','color:red;font-style:italic;');
}
</script>
</head>
<body>
<!-- DOM操作:查询 -->
<!--
找到节点之后，可以读取或者修改节点的
HTML内容、文本内容、value属性值和属性值
-->
<div id="d1"><span>Hello jQuery</span></div>
username:<input name="username"/><br/>
<a href="javascript:;" onclick="f4();">DOM操作</a>
</body>
</html>
d02.html文件代码如下：
<html>
<head>
<title>d02.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
var $obj =
$('<div>猜对了，在这里</div>');
$('body').append($obj);
//$('body').prepend($obj);
}
function f2(){
$('body').append(
'<div>猜对了，在这里</div>');
}
function f3(){
//$('ul').after('<p>hello jQuery</p>');
$('ul').before('<p>hello jQuery</p>');
}
function f4(){
//$('ul li:eq(1)').remove();
$('ul li:eq(1)').empty();
}
function f5(){
$('ul li').remove('#l2');
}
</script>
</head>
<body>
<!-- DOM操作：创建、插入、删除 -->
<!--
创建 : $(html)
插入节点:
append（）：作为最后一个孩子添加进来。
prepend（）：作为第一个孩子添加进来。
after（）：作为下一个兄弟添加进来
before（）：作为上一个兄弟添加进来
删除节点 :
remove（）
remove（selector）
empty（）：清空节点
-->
<a href="javascript:;"
onclick="f2();">DIV的内容在哪里?</a>
<ul>
<li>item1</li>
<li id="l2">item2</li>
<li>item3</li>
</ul>
<input type="button" value="插入"
onclick="f3();"/>
<input type="button" value="删除"
onclick="f5();"/>
</body>
</html>
d03.html文件代码如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/j03.js"> </script> </head> <body> <div id="d1">hello jQuery</div> </body> </html>
j03.js文件代码如下：
window.onload = function(){
var obj = document.getElementById('d1');
obj.onclick=function(){
this.innerHTML = 'hello Ajax';
};
};
d04.html文件代码如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.11.1.js"></script> <script type="text/javascript" src="../js/j04.js"></script> </head> <body > <div id="d1">hello jQuery</div> </body> </html>
j04.文件代码如下：
$(function(){
$('#d1').click(function(){
$(this).html('hello Ajax');
});
});
d05.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('ul li:eq(2)').click(function(){
$(this).css('font-size','30px');
});
$('#a1').click(function(){
var $obj = $('ul li:eq(2)').clone(true);
$('ul').append($obj);
});
});
</script>
</head>
<body >
<!-- 复制节点 -->
<!--
clone（）：
clone（true）：使复制的节点也具有行为
（将处理代码一块复制）
-->
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<a href="javascript:;" id="a1">复制节点</a>
</body>
</html>
d06.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.s1{
color:red;
}
.s2{
font-size:20px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#a1').click(function(){
//$('#d1').attr('style','color:red;font-size:30px;');
//$('#d1').attr('class','s1');
//$('#d1').addClass('s1');
//$('#d1').addClass('s1 s2');
//$('#d1').removeClass('s1');
//$('#d1').toggleClass('s2');
//alert($('#d1').hasClass('s1'));
$('#d1').css('font-style','italic');
});
});
</script>
</head>
<body>
<!-- 样式操作 -->
<!--
获取和设置：attr("class" , " ") 或者 attr("style", " ");
追加： addClass(' ')
移除：removeClass(' ')或者
removeClass('s1 s2')或者
removeClass( ) 会删除所有样式
切换样式：toggleClass，有该样式就删除，没有就添加
是否有某个样式hasClass(' ')
读取css(' ')
设置css (' ', ' ' )
或者css({' ':' ' , ' ' : ' ' })设置多个样式
-->
<div id="d1">hello jQuery</div>
<a href="javascript:;" id="a1">样式操作</a>
</body>
</html>
d07.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#a1').click(function(){
var $obj = $('#d1').children('div');
alert($obj.length);
$obj.css('font-size','60px');
$('#d3').next().css('font-size','60px');
$('#d3').next('p').css('font-size','60px');
$('#d3').prev().css('font-size','60px');
$('#d3').siblings().css('font-size','60px');
$('#d3').siblings('div').css('font-size','60px');
$('#d1').find('p').css('font-size','60px');
alert($('#d3').parent().attr('id'));
});
});
</script>
</head>
<body>
<!-- 遍历节点 -->
<!--
children（）/ children(selector)：
只考虑子元素，不考虑其它后代
next（）/ next（selector）：下一个兄弟
prev（）/ prev(selector)：上一个兄弟
siblings（）/siblings(selector）：其它兄弟
find（selector）：查找满足选择器的所有后代
parent（）：父节点（没有选择器）
-->
<div id="d1">
<div id="d2">hello 1</div>
<div id="d3">hello 2</div>
<div id="d4">hello 3</div>
<p>hello 4</p>
</div>
<a href="javascript:;" id="a1">遍历节点</a>
</body>
</html>