5 jQuery
5.1 Query简介
5.1.1 什么是jQuery(了解)
jQuery是一门<mark>轻量的</mark>、<mark>免费开源</mark>的<mark>JS函数库</mark>，可以极大的简化JS代码。
jQuery的核心思想：“写得更少,但做得更多”
JQuery 是 JS 的框架，目的是为了简化 JS 代码。
- <mark>轻量的</mark>：<mark>代码或项目对一门技术的依赖程度</mark>，依赖程度越低，这个技术越轻；
（解耦）- 反之，依赖程度越高，这个技术越重，推荐使用轻量级的技术。
/* JQuery 简化代码 - 示例： *删除全部div元素的父元素 */
//js
var divArr = document.getElementsByTagName("div");
for(var i=0; i<divArr.length ; i++){
var parent = divArr[i].parentNode;
parent.removeChild(divArr[i]);
}
//JQuery
$("div").remove();
5.1.2 jQuery的优势(了解)
(1) 可以极大的简化JS代码
(2) 可以像css选择器一样获取元素
$("#div1") – 获取id为div1的元素
$(".c1") – 获取所有class值为c1的元素
$("#div1 span") – 获取id值为div1元素内部的所有span 元素
(3)可以通过修改css样式控制页面的效果
//为所有div设置背景(jquery方式)
$("div").css("background","red");
//为所有div设置背景(js方式)
var arr = Document.getElementsByTagName("div");
for(var i=0;i<arr.length;i++){
arr[i].style.background = “red”;
}
(4)可以兼容常用浏览器 (谷歌/火狐/苹果/欧朋)
5.1.3jQuery引入
jQuery函数库其实就是一个JS文件(其中封装了很多js函数)
如果要使用jQuery,
将jQuery函数库文件引入即可!
<!-- 引入jQuery库文件 -->
<script src="js/jquery-1.8.3.js"></script>
在引入时,如果路径书写不正确,浏览器的控制台会报如下错误：
5.1.4 文档就绪事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery-测试 O(∩_∩)O~~</title>
<!-- 引入jQuery库文件(js文件) -->
<script type="text/javascript" src="resource/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//$() 什么意思？
//$() == jQuery()
$(function() {
// 这个函数会在页面加载完后，才执行。所以会先执行下面的 alert(13);
//这jQuery提供的文档就绪事件 函数。
alert("看到这个弹框，表明整个页面都加载完毕!");
});
alert(13);
</script>
</head>
<body>
</body>
</html>
问题描述：上面的代码执行时，会抱一个错误：
原因描述：在执行获取id为d1的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。
- 解决方式一：可以将js代码放到h1元素的下面，让浏览器先加载h1元素，再执行获取h1的代码。就可以正常执行。
- 解决方式二：
将获取h1元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完整个html文档后立即执行！
//下面这个onload()，是浏览器调用的。
//js提供，文档就绪事件函数：
// 在浏览器加载完整个网页后，立即执行function
window.onload = function(){};
- 解决方式三：（· 推荐）
//jQuery提供的文档就绪事件函数：
//方式一：最简单
// $(function(){
// var h1 = document.getElementById("d1");
// alert(h1.innerHTML);
// });
//方式二：完整写法
$(document).ready(function(){
//在整个html网页被加载完成后，立即执行。
})
5.2 jQuery选择器(重点掌握)
5.2.1 基本选择器
1、元素名(标签名)选择器
$(“div”) – 获取所有div元素
$(“span”) – 获取所有的span元素
2、类选择器
$(".c1") – 获取所有class值为c1的元素
$(“div.c1”) – 获取所有class值为c1的div元素
3、ID选择器
$("#one") – 获取id为one的元素
5.2.2 层级选择器
1、后代选择器
$("#one span") – 匹配id为one的元素内部的所有span元素
2、相邻兄弟选择器
$("#one+span") – 匹配id为one的元素后面紧邻的span兄弟元素
等价于:
$("#one").next(“span”) – 匹配id为one的元素后面紧邻的span兄弟元素
$("#one").prev(“span”) – 匹配id为one的元素前面紧邻的span兄弟元素
3、$("#two~div")
$("#one~span") – 匹配id为one的元素后面所有的span兄弟元素
$("#one").nextAll(“span”) – 匹配id为one的元素后面所有的span兄弟元素
$("#one").prevAll(“span”) – 匹配id为one的元素前面所有的span兄弟元素
$("#one").siblings(“span”) – 匹配id为one的元素前、后所有的span兄弟元素
5.2.3 基本过滤选择器
1、:first | :last
2、:eq(n)
$(“div:first”) – 匹配所有div中的第一个div元素
$(“div:last”) – 匹配所有div中的最后一个div元素
$(“div:eq(0)”) – 匹配所有div中的第一个div元素
$(“div”).eq(0) – 匹配所有div中的第一个div元素
$(“div:eq(-1)”) – 匹配所有div中的最后一个div元素
$(“div”).eq(-1) – 匹配所有div中的最后一个div元素
选择器练习
练习题
<!DOCTYPE> <html>
<head>
<meta charset="utf-8"/>
<title>选择器练习</title>
<style type="text/css"> body{ font-family:"微软雅黑"; font-size:20px;padding-bottom:300px;} input{font-size:18px;margin-top:10px;} div,span{width:300px;border:1px solid #000;padding-left:10px;background:#bed4ef;;} span{display:block;} body>div,body>span{height:100px;margin:10px 0px 0px 20px;display:inline-block;vertical-align:middle;} #one{width:300px;height:185px;} div>span,div>div{width:250px;height:35px;margin:10px;} </style>
<!-- 引入jquery函数库文件 -->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript"> /* 文档就绪事件函数(即在浏览器加载完最后一个html元素后立即执行) */ $(function() { /* -------一、基本选择器练习------- */ /* 1、选中b1按钮,为b1按钮绑定点击事件， 点击b1按钮实现：改变所有 div 元素的背景色为 #FA8072 */ $("#b1").click(function() { $("div").css("background" , "#FA8072" ) ; }) /* 2、选中b2按钮,为b2按钮绑定点击事件，点击b2按钮实现：改变 id 为 one 的元素的背景色为 #9ACD32 */ /* 3、选中b3按钮,为b3按钮绑定点击事件，点击b3按钮实现： 改变 class 为 mini 的所有元素的背景色为 #EE82EE */ /* ---------二、层级选择器------- */ /* 4、选中b4按钮,为b4按钮绑定点击事件，点击b4按钮实现：改变 div 内所有 span 的背景色为 #7CFC00 */ /* 5、选中b6按钮,为b6按钮绑定点击事件，点击b6按钮实现：改变 id为two 元素的下一个相邻的 div元素 的背景色为 #48D1CC */ /* 6、选中b7按钮,为b7按钮绑定点击事件，点击b7按钮实现：改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #D2FA7E */ /* 7、选中b8按钮,为b8按钮绑定点击事件，点击b8按钮实现：改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #FF69B4 */ /* ---------三、基本过滤选择器------- */ /* 8、选中b9按钮,为b9按钮绑定点击事件，点击b9按钮实现：改变第一个/最后一个 div 元素的背景色为 #1E90FF */ /* 9、选中b10按钮,为b10按钮绑定点击事件，点击b10按钮实现：改变第4个 div 元素的背景色为 #EA3AD8 */ }); </script>
</head>
<body>
基本选择器→：
<!-- 按钮,id为b1 -->
<input type="button" id="b1" value="b1,改变所有 div 元素的背景色为 #FA8072" />
<!-- 按钮,id为b2 -->
<input type="button" id="b2" value="b2,改变 id 为 one 的元素的背景色为 #9ACD32"/>
<!-- 按钮,id为b3 -->
<input type="button" id="b3" value="b3,改变 class 为 mini 的所有元素的背景色为 #EE82EE"/>
<hr/>
层级选择器→：
<!-- 按钮,id为b4 -->
<input type="button" id="b4" value="b4,改变 div 内所有 span 的背景色为 #7CFC00"/>
<!-- 按钮,id为b5 -->
<input type="button" id="b5" value="b5,改变 div 内 input子元素的背景色为 #FFFF00"/>
<!-- 按钮,id为b6 -->
<input type="button" id="b6" value="b6,改变 id为two 元素的下一个相邻的 div元素 的背景色为 #48D1CC"/>
<!-- 按钮,id为b7 -->
<input type="button" id="b7" value="b7,改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #D2FA7E"/>
<!-- 按钮,id为b8 -->
<input type="button" id="b8" value="b8,改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #FF69B4"/>
<hr/>
基本过滤选择器→：
<!-- 按钮,id为b9 -->
<input type="button" id="b9" value="b9,改变第一个/最后一个 div 元素的背景色为 #1E90FF"/>
<!-- 按钮,id为b10 -->
<input type="button" id="b10" value="b10,改变第4个 div 元素的背景色为 #EA3AD8"/>
<h3>点击按钮查看效果...</h3>
<div id="one">
这是一个div1
<div class="one01">这是一个div11</div>
<span class="mini">这是一个span,class为mini</span>
<span class="mini">这是一个span,class为mini</span>
</div>
<div>这是一个div2
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
</div>
<div id="two">这是一个div3,id是two
<span>这是一个span</span>
</div>
<div>这是一个div4</div>
<div>这是一个div5</div>
<span class="mini">这是一个span,class为mini</span>
<div>这是一个div6</div>
<span class="mini01">这是一个span,class为mini01</span>
<span class="mini">这是一个span,class为mini</span>
</body>
</html>
基本练习
1、 选择 层属性 div， 两个函数，click 和 css
选中b1按钮,为b1按钮绑定点击事件， 点击b1按钮实现：改变所有 div 元素的背景色为 #FA8072
/* 1、选中b1按钮,为b1按钮绑定点击事件， 点击b1按钮实现：改变所有 div 元素的背景色为 #FA8072 */
$("#b1").click(function() {
$("div").css("background" , "#FA8072" ) ;
})
2、 选择 id属性 #id， 多个 css 设置
选中b2按钮,为b2按钮绑定点击事件，点击b2按钮实现：
改变 id 为 one 的元素的背景色为 #9ACD32
/* 2、选中b2按钮,为b2按钮绑定点击事件， 点击b2按钮实现： 改变 id 为 one 的元素的背景色为 #9ACD32 */
$("#b2").click(function() {
// $("#one").css("background","#9ACD32");
// $("#one").css("border" , "10px solid red");
// $("#one").css("color" , "yellow");
/* css 同时设置多个属性 */
$("#one").css({
"background":"#9ACD32",
"border":"10px solid red",
"color" : "yellow"
});
});
3、 选择 class 属性 .class
选中b3按钮,为b3按钮绑定点击事件，点击b3按钮实现：
改变 class 为 mini 的所有元素的背景色为 #EE82EE
/* 3、选中b3按钮,为b3按钮绑定点击事件，点击b3按钮实现： 改变 class 为 mini 的所有元素的背景色为 #EE82EE */
$("#b3").click(function() {
$(".mini").css("background", "#EE82EE");
});
层级选择 练习
4、 选择 子层 （空格）
选中b4按钮,为b4按钮绑定点击事件， 点击b4按钮实现：
改变 div 内所有 span 的背景色为 #7CFC00 */
/* 4、选中b4按钮,为b4按钮绑定点击事件， 点击b4按钮实现： 改变 div 内所有 span 的背景色为 #7CFC00 */
$("#b4").click(function(){
$("div span").css("background", "#7CFC00");
});
5、 选择 兄弟层 +
/* 5、选中b6按钮,为b6按钮绑定点击事件， 点击b6按钮实现： 改变 id为two 元素的下一个相邻的 div元素 的背景色为 #48D1CC */
$("#b6").click(function() {
$("#two+div").css("background", "#48D1CC");
var t = $("#two");
console.log(t.next("div").toArray());
console.log(t.prev("div").toArray());
});
6、 选择 兄弟层 ~ 后
/* 6、选中b7按钮,为b7按钮绑定点击事件， 点击b7按钮实现： 改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #D2FA7E */
$("#b7").click(function() {
$("#two").siblings("div").css("background" , "#D2FA7E") ;
});
7、 选择 兄弟层 （前后）
/* 7、选中b8按钮 ,为b8按钮绑定点击事件， 点击b8按钮实现：改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #FF69B4 */
$("#b8").click(function() {
$("#two").siblings("div").css("background" , "#FF69B4") ;
// $("#one~span") – 匹配id为one的元素后面所有的span兄弟元素
// $("#one").nextAll("span") – 匹配id为one的元素后面所有的span兄弟元素
// $("#one").prevAll("span") – 匹配id为one的元素前面所有的span兄弟元素
// $("#one").siblings("span") – 匹配id为one的元素前、后所有的span兄弟元素
});
过滤器 练习
选 div 第一个、最后一个
/* 8、 选中b9按钮,为b9按钮绑定点击事件， 点击b9按钮实现： 改变第一个/最后一个 div 元素的背景色为 #1E90FF */
$("#b9").click(function() {
//匹配第一个
$("div:eq(0)").css("background" , "#1E90FF");
$("div").eq(0).css("background" , "#1E90FF");
//匹配最后一个
$("div").eq(-1).css("background" , "#1E90FF");
var len = $("div").length ;
$("div:eq("+ (len-1) +")").css("background" , "#1E90FF");
});
选div第三个
/* 9、选中b10按钮,为b10按钮绑定点击事件， 点击b10按钮实现： 改变第4个 div 元素的背景色为 #EA3AD8 */
$("#b10").click(function() {
$("div").eq(3).css("background" , "#EA3AD8");
});
完整
<!DOCTYPE> <html>
<head>
<meta charset="utf-8"/>
<title>选择器练习</title>
<style type="text/css"> body{ font-family:"微软雅黑"; font-size:20px;padding-bottom:300px;} input{font-size:18px;margin-top:10px;} div,span{width:300px;border:1px solid #000;padding-left:10px;background:#bed4ef;;} span{display:block;} body>div,body>span{height:100px;margin:10px 0px 0px 20px;display:inline-block;vertical-align:middle;} #one{width:300px;height:185px;} div>span,div>div{width:250px;height:35px;margin:10px;} </style>
<!-- 引入jquery函数库文件 -->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript"> /* 文档就绪事件函数(即在浏览器加载完最后一个html元素后立即执行) */ $(function() { /* -------一、基本选择器练习------- */ /* 1、选中b1按钮,为b1按钮绑定点击事件， 点击b1按钮实现：改变所有 div 元素的背景色为 #FA8072 */ $("#b1").click(function() { $("div").css("background" , "#FA8072" ) ; }); /* 2、选中b2按钮,为b2按钮绑定点击事件， 点击b2按钮实现： 改变 id 为 one 的元素的背景色为 #9ACD32 */ $("#b2").click(function() { // $("#one").css("background","#9ACD32"); // $("#one").css("border" , "10px solid red"); // $("#one").css("color" , "yellow"); /* css 同时设置多个属性 */ $("#one").css({ "background":"#9ACD32", "border":"10px solid red", "color" : "yellow" }); }); /* 3、选中b3按钮,为b3按钮绑定点击事件，点击b3按钮实现： 改变 class 为 mini 的所有元素的背景色为 #EE82EE */ $("#b3").click(function() { // div .mini #b3 $(".mini").css("background", "#EE82EE"); }); /* ---------二、层级选择器------- */ /* 4、选中b4按钮,为b4按钮绑定点击事件， 点击b4按钮实现： 改变 div 内所有 span 的背景色为 #7CFC00 */ $("#b4").click(function(){ $("div span").css("background", "#7CFC00"); }); /* 5、选中b6按钮,为b6按钮绑定点击事件， 点击b6按钮实现： 改变 id为two 元素的下一个相邻的 div元素 的背景色为 #48D1CC */ $("#b6").click(function() { $("#two+div").css("background", "#48D1CC"); var t = $("#two"); console.log(t.next("div").toArray()); console.log(t.prev("div").toArray()); }); /* 6、选中b7按钮,为b7按钮绑定点击事件， 点击b7按钮实现： 改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #D2FA7E */ $("#b7").click(function() { $("#two").siblings("div").css("background" , "#D2FA7E") ; }); /* 7、选中b8按钮 ,为b8按钮绑定点击事件， 点击b8按钮实现：改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #FF69B4 */ $("#b8").click(function() { $("#two").siblings("div").css("background" , "#FF69B4") ; // $("#one~span") – 匹配id为one的元素后面所有的span兄弟元素 // $("#one").nextAll("span") – 匹配id为one的元素后面所有的span兄弟元素 // $("#one").prevAll("span") – 匹配id为one的元素前面所有的span兄弟元素 // $("#one").siblings("span") – 匹配id为one的元素前、后所有的span兄弟元素 }); /* ---------三、基本过滤选择器------- */ /* 8、 选中b9按钮,为b9按钮绑定点击事件， 点击b9按钮实现： 改变第一个/最后一个 div 元素的背景色为 #1E90FF */ $("#b9").click(function() { //匹配第一个 $("div:eq(0)").css("background" , "#1E90FF"); $("div").eq(0).css("background" , "#1E90FF"); //匹配最后一个 $("div").eq(-1).css("background" , "#1E90FF"); var len = $("div").length ; $("div:eq("+ (len-1) +")").css("background" , "#1E90FF"); }); /* 9、选中b10按钮,为b10按钮绑定点击事件， 点击b10按钮实现： 改变第4个 div 元素的背景色为 #EA3AD8 */ $("#b10").click(function() { $("div").eq(3).css("background" , "#EA3AD8"); }); }); </script>
</head>
<body>
基本选择器→：
<!-- 按钮,id为b1 -->
<input type="button" id="b1" value="b1,改变所有 div 元素的背景色为 #FA8072" />
<!-- 按钮,id为b2 -->
<input type="button" id="b2" value="b2,改变 id 为 one 的元素的背景色为 #9ACD32"/>
<!-- 按钮,id为b3 -->
<input type="button" id="b3" value="b3,改变 class 为 mini 的所有元素的背景色为 #EE82EE"/>
<hr/>
层级选择器→：
<!-- 按钮,id为b4 -->
<input type="button" id="b4" value="b4,改变 div 内所有 span 的背景色为 #7CFC00"/>
<!-- 按钮,id为b5 -->
<input type="button" id="b5" value="b5,改变 div 内 input子元素的背景色为 #FFFF00"/>
<!-- 按钮,id为b6 -->
<input type="button" id="b6" value="b6,改变 id为two 元素的下一个相邻的 div元素 的背景色为 #48D1CC"/>
<!-- 按钮,id为b7 -->
<input type="button" id="b7" value="b7,改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #D2FA7E"/>
<!-- 按钮,id为b8 -->
<input type="button" id="b8" value="b8,改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #FF69B4"/>
<hr/>
基本过滤选择器→：
<!-- 按钮,id为b9 -->
<input type="button" id="b9" value="b9,改变第一个/最后一个 div 元素的背景色为 #1E90FF"/>
<!-- 按钮,id为b10 -->
<input type="button" id="b10" value="b10,改变第4个 div 元素的背景色为 #EA3AD8"/>
<h3>点击按钮查看效果...</h3>
<div id="one">
这是一个div1
<div class="one01">这是一个div11</div>
<span class="mini">这是一个span,class为mini</span>
<span class="mini">这是一个span,class为mini</span>
</div>
<div>这是一个div2
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
</div>
<div id="two">这是一个div3,id是two
<span>这是一个span</span>
</div>
<div>这是一个div4</div>
<div>这是一个div5</div>
<span class="mini">这是一个span,class为mini</span>
<div>这是一个div6</div>
<span class="mini01">这是一个span,class为mini01</span>
<span class="mini">这是一个span,class为mini</span>
</body>
</html>
5.3 综合案例
5.3.1 全选或全不选
input[name='item']、 prop("checked" , status )
/** 练习1：点击全选设置 员工所在的行全选或者全不选 */
function checkAll(){
//1.获取全选框的选中状态(选中true 取消false)
var status = $("#all").prop("checked") ;
console.log(status);
var is = $("input[name='item']") ;
console.log(is.length);
$("input[type='checkbox']:not(#all)").prop("checked" , status);
/*for(var i=0 ; i<is.length ; i++ ){ var e = is.eq(i); console.log(e.prop("checked")); e.prop("checked" , status) ; }*/
}
$("....").each(function(){...}) 、$("#count").html(sum);、$(this).val();
/** 练习2：点击按钮,计算所有被选中商品的总金额 */
function getSum(){
var sum = 0 ;
$("input[name='item']:checked").each(function() {
sum+=$(this).val()-0;
});
$("#count").html(sum);
}
全部代码
<!DOCTYPE HTML>
<html>
<head>
<title>全选或全不选</title>
<meta charset="utf-8"/>
<style type="text/css"> body{font-family: "微软雅黑"} div#box1, div#box2 {text-align:center;} table{text-align: center;border-collapse:collapse;} td,th{padding:10px 30px;} th{background-color: #DCDCDC;} </style>
<!--引入jquery的js库-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript"> /** 练习1：点击全选设置 员工所在的行全选或者全不选 */ function checkAll(){ //1.获取全选框的选中状态(选中true 取消false) var status = $("#all").prop("checked") ; console.log(status); var is = $("input[name='item']") ; console.log(is.length); $("input[type='checkbox']:not(#all)").prop("checked" , status); // for(var i=0 ; i<is.length ; i++ ){ // var e = is.eq(i); // console.log(e.prop("checked")); // e.prop("checked" , status) ; // } } /** 练习2：点击按钮,计算所有被选中商品的总金额 */ function getSum(){ var sum = 0 ; $("input[name='item']:checked").each(function() { sum+=$(this).val()-0; }); $("#count").html(sum); } </script>
</head>
<body>
<h2>员工列表</h2>
<table border="1">
<tr>
<th><!-- 全选复选框 -->
<input type="checkbox" id="all" onclick="checkAll()"/>
</th>
<th>商品名称</th>
<th>分类</th>
<th>价格</th>
</tr>
<tr>
<td><!-- 以下为普通复选框 -->
<input type="checkbox" name="item" value="1200"/>
</td>
<td>三星硬盘</td>
<td>电脑配件</td>
<td>1200</td>
</tr>
<tr>
<td><!-- 以下为普通复选框 -->
<input type="checkbox" name="item" value="1700"/>
</td>
<td>海尔洗衣机</td>
<td>家用电器</td>
<td>1700</td>
</tr>
<tr>
<td><!-- 以下为普通复选框 -->
<input type="checkbox" name="item" value="3100"/>
</td>
<td>格力空调</td>
<td>家用电器</td>
<td>3100</td>
</tr>
<tr>
<td><!-- 以下为普通复选框 -->
<input type="checkbox" name="item" value="5200"/>
</td>
<td>联想笔记本</td>
<td>电脑办公</td>
<td>5200</td>
</tr>
<tr>
<td><!-- 以下为普通复选框 -->
<input type="checkbox" name="item" value="6300"/>
</td>
<td>iphone手机</td>
<td>电子数码</td>
<td>6300</td>
</tr>
</table> <br/>
<input type="button" value="总金额为:" onclick="getSum()"/>
<span id="count">0</span> 元
</body>
</html>
5.3.2 创建表格元素
练习1：$("<td></td>") 、$("body").append(t);
创建单行单列的表格
/** 练习1：创建单行单列的表格 */
function createTable1(){
var td = $("<td></td>") ;
var tr = $("<tr></tr>");
var t = $("<table></table>");
$("body").append(t);
$("body").append($("<hr>"));
t.append(tr);
tr.append(td);
td.html("创建单行单列的表格");
}
练习2.1：创建单行6列的表格
练习2.2：创建5行6列的表格
/** 练习2：创建5行6列的表格 */
function createTable2(){
var row = 5 ;
var col = 6 ;
var t = $("<table></table>");
for(var r=0 ; r<row ; r++) {
var tr = $("<tr></tr>");
for(var c=0 ; c<col ; c++) {
var td = $("<td></td>");
td.html("创建5行6列的表格");
tr.append(td);
}
t.append(tr);
}
$("body").append(t);
$("body").append($("<hr>"));
}
练习3：td.html("创建5行6列的表格");
创建指定行和列的表格
/** 练习3：创建指定行和列的表格 */
function createTable3(){
var row =document.getElementById("rows").value; // js方式 - 注意：没有#
var col = $("#cols").val() ;
var t = $("<table></table>");
for(var r=0 ; r<row ; r++) {
var tr = $("<tr></tr>");
for(var c=0 ; c<col ; c++) {
var td = $("<td></td>");
td.html("创建5行6列的表格");
tr.append(td);
}
t.append(tr);
}
$("body").append(t);
$("body").append($("<hr>"));
}
总和
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建表格</title>
<style type="text/css">
/* 为表格定义CSS样式 */
body{padding-left:15px;font-size:20px;}
table{ border:1px solid #0099FF; width:70%; border-collapse:collapse; }
table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; }
input[type='text']{width:150px;height:20px;vertical-align:text-bottom;text-indent:5px;font-size:20px;}
input[type='button']{font-size:20px;}
</style>
<!-- 引入jquery函数库文件 -->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
/** 练习1：创建单行单列的表格 */
function createTable1(){
var td = $("<td></td>") ;
var tr = $("<tr></tr>");
var t = $("<table></table>");
$("body").append(t);
$("body").append($("<hr>"));
t.append(tr);
tr.append(td);
td.html("创建单行单列的表格");
}
/** 练习2：创建5行6列的表格 */
function createTable2(){
var row = 5 ;
var col = 6 ;
var t = $("<table></table>");
for(var r=0 ; r<row ; r++) {
var tr = $("<tr></tr>");
for(var c=0 ; c<col ; c++) {
var td = $("<td></td>");
td.html("创建5行6列的表格");
tr.append(td);
}
t.append(tr);
}
$("body").append(t);
$("body").append($("<hr>"));
}
/** 练习3：创建指定行和列的表格 */
function createTable3(){
var row =document.getElementById("rows").value; // js方式
var col = $("#cols").val() ;
var t = $("<table></table>");
for(var r=0 ; r<row ; r++) {
var tr = $("<tr></tr>");
for(var c=0 ; c<col ; c++) {
var td = $("<td></td>");
td.html("创建5行6列的表格");
tr.append(td);
}
t.append(tr);
}
$("body").append(t);
$("body").append($("<hr>"));
}
</script>
</head>
<body>
<!-- 练习1：点击下列按钮创建单行单列表格 -->
<input type="button" value="创建单行单列表格" onclick="createTable1()" /><br/><br/>
<!-- 练习2：点击下列按钮创建5行6列表格 -->
<input type="button" value="创建表格(5行6列)" onclick="createTable2()" /><br/><br/>
<!-- 练习3：点击下列按钮创建指定行、指定列的表格 -->
<input type="button" value="创建表格（输入行数和列数）" onclick="createTable3()" /><br/>
行数：<input type="text" id="rows"/><br/>
列数：<input type="text" id="cols"/><br/><br/>
<!-- 将创建的表格添加到body内部(追加到最后) --><hr/>
</body>
</html>
5.3.3 parent、find、toggle、hide
仿QQ好友列表
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>仿QQ好友分组</title>
<style type="text/css"> table{border:#09f 1px solid;width:100px;border-collapse:collapse;margin:15px 10px;width:10%;margin:20px 20px;} table td{border:#06f 1px solid;background-color:#6f5f3e;text-align:center;padding:5px 0;} table td div{background-color:#ff9;text-align:left;line-height:28px;padding-left:14px;text-indent:padding-left:20px;} table td span{color:#fff;font-size:19px;width:100%;border:none;display:block;cursor:pointer;} table td a:hover{color:#0c0} </style>
<!--引入jquery的js库-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript"> /** 通过jQuery实现仿QQ列表好友列表 */ function openDiv(thisobj){ //在展开当前分组之前, 先关闭其他三个分组 //>>选中其他三个分组并关闭. //$("div").css({"display":"none"}); //find 找当前元素的所有后代 $(thisobj).parents("tr").siblings("tr").find("div").hide(); //.css({"displey":"none"}); //点击当前分组, 切换分组的状态(如果展开则关闭, 如果关闭则展开) var d = $(thisobj).next("div") d.toggle(); // toggle 开关 //d.css({"display":"block"}); } /** 通过javascipt实现仿QQ列表好友列表 function openDiv(thisobj){ //1.获取当前分组内好友列表div var oDiv = thisobj.parentNode.getElementsByTagName("div")[0]; //2.判断当前分组div是展开还是关闭 if(oDiv.style.display == "block"){ //3.如果当前div是打开的, 只需关闭该div即可 oDiv.style.display = "none"; }else{ //4.如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的 //获取所有分组内的div,遍历依次关闭所有分组 var aDiv = document.getElementsByTagName("div"); for(var i=0;i<aDiv.length; i++){ aDiv[i].style.display = "none"; } //再打开当前分组 oDiv.style.display = "block"; } } */ </script>
</head>
<body>
<table>
<tr>
<td>
<span onclick="openDiv(this)">君王好友</span>
<div style="display:none">
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<span onclick="openDiv(this)">三国好友</span>
<div style="display:none">
刘备<br />
关羽<br />
张飞<br />
赵云<br />
</div>
</td>
</tr>
<tr>
<td>
<span onclick="openDiv(this)">美女好友</span>
<div style="display:none">
西施<br />
貂蝉<br />
杨贵妃<br />
王昭君<br />
</div>
</td>
</tr>
<tr>
<td>
<span onclick="openDiv(this)">IT好友</span>
<div style="display:none">
王海涛<br />
马云<br />
李开复<br />
俞敏洪<br />
</div>
</td>
</tr>
</table>
</body>
</html>
换肤练习（jQuery版本）
<html>
<head>
<meta charset="utf-8"/>
<title>网页换肤</title>
<style type="text/css"> body{font-size:18px;font-family:"微软雅黑";} hr{border:1px solid yellow;} a{font-size:17px;font-weight:500;} a:hover {color:#0099FF;} h2,#change-font{text-align:center;} #newstext{padding:10px;margin:0 auto;letter-spacing:2px;} /* 预先定一些选择器 */ .min{ font-size:16px; } .middle{ font-size:18px; } .max{ font-size:20px; } .super-max{ font-size:24px; } </style>
<!-- 引入外部的CSS文件 -->
<link rel="stylesheet" href="css/none.css" id="link"/>
<!--引入jquery的js库-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript"> /** 练习1：执行下面的函数，切换字体大小 */ function resize(size){ $("#newstext").prop("class" , size) ; } //定义数组，存放不同的皮肤（css文件的路径） var styleArr = ["css/red.css","css/green.css","css/blue.css"]; var i = 0; /** 练习2：执行下面的函数，为页面切换不同的皮肤 */ function changeStyle(){ $("#link").prop("href" , styleArr[i]) ; i++ ; i = i>=styleArr.length ? 0 : i ; } </script>
</head>
<body >
<h2>达内时代科技集团简介</h2>
<div id="change-font">
<a href="javascript:void(0)" onclick="resize('min')">小字体</a>
<a href="javascript:void(0)" onclick="resize('middle')">中字体</a>
<a href="javascript:void(0)" onclick="resize('max')">大字体</a>
<a href="javascript:void(0)" onclick="resize('super-max')">超大字体</a>
<a href="javascript:void(0)" onclick="changeStyle()">换肤</a>
</div>
<hr/>
<div id="newstext" class="middle">
<p>
达内时代科技集团有限公司，是中国高端IT培训的领先品牌，致力于培养面向互联网、电信和金融领域的Java、C++、C#、.Net、软件测试、嵌入式、PHP、android等方面的中高端软件人才。
</p>
<p>
达内创办于2002年，专注IT职业教育17年，2014年在美国纳斯达克上市公司。目前，已开设24大课程方向，在全国70多个城市建立了330家培训中心，真正实现“一地学习，全国就业”。高薪聘请总监级名师全职授课，术业有专攻，名师出高徒。实施“因材施教，分级培优”教学方案，让每一位学员都成才，让强者更强。采用“先学习，就业后付款”的模式，已帮助80万名学员成功就业。
</p>
<p>
达内优秀的教学效果和行业领先的经营模式赢得了社会各界的广泛赞誉和好评，荣获了各界权威机构的颁奖：达内成为业界唯一的一家2006、2007、2008、2009连续4年入选德勤评选的 “中国高科技高成长50强公司”、“亚太地区高科技高成长500强公司”，获得首届中国留学人才归国创业“腾飞”奖、中关村管理委员会指定的“软件人才培养示范基地”、被《计算机世界》评选的“就业服务杰出贡献奖”、被《中国计算机报》评选的“最具影响力培训机构奖”、被搜狐评为“中国十大教育集团”、被腾讯评为“中国大学生心目中最具影响力的IT品牌”。
有实力、有信誉，要培训，就选上市公司！
</p>
</div>
<hr/>
</body>
</html>
5.4 总结
5.4.1 html元素操作
1、创建元素
$("<div></div>") -- 创建一个 div 元素，返回的是表示 div 元素的 jQuery 对象。
$("<div>xxxxx<span>aaaaaaaaaaaaaaa</span>ssssssssss</div>") -- 创建一个包含 html 内容的 div 元素
-- 上面等价于下面 -----
var $div = $("<div></div>") ;
$div.html("xxxxx<span>aaaaaaaaaaaaaaa</span>ssssssssss");
2、添加子元素
$parent.append($child) ;
-- 通过父元素添加一个子元素，父元素和子元素都是 jQuery 对象
3、删除元素
$ele.remove() -- 将选择器匹配的所有元素全部删除
$("div").remove() -- 删除所有的 div 元素
--- 等价于下面代码
---
var divArr = document.getElementsByTagName("div");
for(var i=0 ; i< divArr.length ; i++ ) {
divArr[i].parentNode.removeChild(divArr[i]);
}
4、替换元素
$ele.replaceWith($other) -- 用其他元素替换当前元素
--- 如下：
$("div").replaceWith("<p>我是来替换的</p>")
5.4.2 html元素内容和值的操作
$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容
1、html()函数 (类似于js中的innerHTML属性)
– 用于获取或设置元素的内容，比如为div、span、p、h1等元素设置内容
$("#div1").html(); -- 获取 id 为 div1 元素的所有内容
$("#div1").html("xxx") ; --- 位 id 位 div1 元素设置内容（原有内容将会被全部覆盖）
2、text()函数 (类似于js中的innerText属性)
– 用于获取或设置元素的文本内容
$("#div1").text() -- 获取 id 为 div1 元素内部的文本 （不包括标签）
$("#div1").text("xxx") --- 覆盖文本内容 （包括标签也会被视为文本，被写入/覆盖）
<mark>注意：如果xxx里面有标签，标签也会被视为文本，不会被浏览器解释</mark>
3、val()函数 (类似于js中的value属性)
– 获取或设置表单项元素的value值(
- <mark>input</mark>/
- select/
- option/
- textarea
- )
$("#user").val() -- 获取用户名输入框中的值
$("#user").val("张珊") --- 设置值
5.4.3 元素属性 和 css属性 操作
<input type="text" name="username" id="user"/>
直接写在元素上的属性称为元素属性，例如：
- type
- name
- id
- class
- checked
- value
- …
1、 prop()函数 – 用于获取或设置元素的属性值
在<mark>jQuery1.6版本之后才有这个函数</mark>，1.6之前版本的jQuery可以使用attr()函数
$("#user").prop("name") -- 获取用户名输入框元素的 name 属性
$("#user").prop("name" , "user") -- 将用户输入框元素的 name 属性值改为 user
2、 css()函数 – 用于获取或设置元素的css属性值
$("#div1").css("width") -- 获取 id 为 div1 元素的宽度 如 200px
$("#div1").css("width" , "200px") ;
$("#div1").css({
"width" : "200px" ,
"height" : "100px"
});
∗∗parseInt()∗∗
parseInt(200px) // 返回 200
5.4.4其他函数
1、show()/hide()
show() – 设置元素由隐藏变为显示
hide() – 设置元素由显示变为隐藏
$("div").show() -- 设置所有的div元素为显示
等价于:
$("div").css("display", "block");
$("div").hide() -- 设置所有的div元素为隐藏
等价于:
$("div").css("display", "none")
2、toggle()/slideToggle()
toggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示, 切换为显示为下拉状态, 隐藏为收缩状态.
5.5 jQuery事件绑定
以点击事件为例，为元素绑定点击事件的方式为:
- 方式1(js版)：
<script> function fn(){ alert("input按钮被点击了..."); } </script>
<body>
<input onclick="fn()" type="button" value="点我~!" />
</body>
- 方式2(js版)：
<script> window.onload = function(){ //获取id为btn的元素 var btn = document.getElementById("btn"); btn.onclick = function(){ alert("input按钮被点击了..."); } } </script>
</head>
<body>
<input id="btn" type="button" value="点我~!" />
</body>
- 方式3(jQuery版)：
<script> $(function(){ //当点击btn按钮时,触发点击事件执行其中的函数 $("#btn").click( function(){ alert("input按钮被点击了..."); }); }); </script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>
京公网安备 11010502036488号