java web 31 : jQuery
文档就绪事件函数，加载完网页元素后立即执行
JS写法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //加载完所有网页元素后立即执行 var oDiv = document.getElementById("demo"); alert(oDiv.innerHTML); } </script> </head> <body> <div id="demo"> welcome </div> </body> </html>
jQuery写法
$(function() {
}）
*******************************************************************************
jQuery选择器
<!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> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> /* 文档就绪事件函数(即在浏览器加载完最后一个html元素后立即执行) */ $(function() { /* -------一、基本选择器------- */ /* 1、选中id为b1的按钮,为b1按钮绑定点击事件，点击b1按钮：改变所有 div 元素的背景色为 #FD5551 */ $("#b1").click(function(){ $("div").css("background-color", "#FD5551") }) /* $("#b1").click(function(){ //JSON格式,多个属性赋值 $("div").css({ "background-color":"#FD5551", "border": "3px solid blue", }) }) */ /* 2、选中id为b2的按钮,为b2按钮绑定点击事件，点击b2按钮：改变 id 为 one 的元素的背景色为 #91BF2F */ $("#b2").click(function(){ $("#one").css("background-color", "#91BF2F"); }) /* 3、选中id为b3的按钮,为b3按钮绑定点击事件，点击b3按钮： 改变 class 为 mini 的所有元素的背景色为 #EE82EE */ $("#b3").click(function(){ $(".mini").css("background-color", "#EE82EE"); //$("#one, .mini").css("background-color", "#EE82EE"); //逻辑或 }) /* ---------二、层级选择器------- */ /* 4、选中id为b4的按钮,为b4按钮绑定点击事件，点击b4按钮：改变 div 内所有 span 的背景色为 #DC21D2 */ $("#b4").click(function(){ $("div span").css("background-color", "#DC21D2"); }) /* 5、选中id为b5的按钮,为b5按钮绑定点击事件，点击b5按钮：改变 id为two 元素的下一个相邻的 div元素 的背景色为 #2CADAA */ $("#b5").click(function(){ $("#two+div").css("background-color", "#2CADAA"); //$("#two").next("div").css("background-color", "#2CADAA"); //$("#two").prev("div").css("background-color", "#2CADAA"); //如果不限定元素类型，next()可以不写参数 }) /* 6、选中id为b6的按钮,为b6按钮绑定点击事件，点击b6按钮：改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #ECD822 */ $("#b6").click(function(){ $("#two").nextAll("div").css("background-color", "#ECD822"); }) /* 7、选中id为b7的按钮,为b7按钮绑定点击事件，点击b7按钮：改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #EE0077 */ $("#b7").click(function(){ $("#two").siblings("div").css("background-color", "#EE0077"); //等价于nextAll + prevAll }) /* ---------三、基本过滤选择器------- */ /* 8、选中id为b8的按钮,为b8按钮绑定点击事件，点击b8按钮：改变第一个以及最后一个 div 元素的背景色为 #0074E8 */ $("#b8").click(function(){ $("div:first, div:last").css("background-color", "#0074E8"); //$("div:eq(0),div:eq(-1)").css("background-color", "#0074E8"); //$("div").eq(0).css("background-color", "#0074E8"); //底层为div编号，0表示第一个，-1表示最后一个 }) /* 9、选中id为b9的按钮,为b9按钮绑定点击事件，点击b9按钮：改变第4个 div 元素的背景色为 #D917C6 */ $("#b9").click(function(){ $("div:nth(4)").css("background-color", "#D917C6"); }) }); </script> </head> <body> 基本选择器→： <!-- 按钮,id为b1 --> <input type="button" id="b1" value="b1,改变所有 div 元素的背景色为 #FD5551" /> <!-- 按钮,id为b2 --> <input type="button" id="b2" value="b2,改变 id 为 one 的元素的背景色为 #91BF2F"/> <!-- 按钮,id为b3 --> <input type="button" id="b3" value="b3,改变 class 为 mini 的所有元素的背景色为 #EE82EE"/> <hr/> 层级选择器→： <!-- 按钮,id为b4 --> <input type="button" id="b4" value="b4,改变 div 内所有 span 的背景色为 #DC21D2"/> <!-- 按钮,id为b5 --> <input type="button" id="b5" value="b5,改变 id为two 元素的下一个相邻的 div元素 的背景色为 #2CADAA"/> <!-- 按钮,id为b6 --> <input type="button" id="b6" value="b6,改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #ECD822"/> <!-- 按钮,id为b7 --> <input type="button" id="b7" value="b7,改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #EE0077"/> <hr/> 基本过滤选择器→： <!-- 按钮,id为b8 --> <input type="button" id="b8" value="b8,改变第一个/最后一个 div 元素的背景色为 #0074E8"/> <!-- 按钮,id为b9 --> <input type="button" id="b9" value="b9,改变第4个 div 元素的背景色为 #D917C6"/> <h3>点击按钮查看效果...</h3> <div id="one"> 这是一个div1,id是one <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>
jQuery总结
-------------------------------------------
一、jQuery概述
1、什么是jQuery
jQuery是一门轻量的、免费开源的JS函数库
其实就是一个JS的框架
jQuery可以极大的简化JS代码
核心思想：“写的更少、但做的更多”
2、jQuery的优势
可以极大的简化JS代码
可以像css选择器一样获取元素
可以修改css样式来控制页面的效果
可以兼容常用的浏览器
。。。
3、引入jQuery
jQuery函数库文件就是一个js文件，要想使用jQuery，需要先引入jQuery的函数库文件
<script src="./js/jquery-1.8.3.js"></script>
4、文档就绪事件函数
JS提供的文档就绪事件函数
window.onload = function(){
//在浏览器加载完整个html网页后,立即执行
}
jQuery提供的文档就绪事件函数
$(function(){
//在浏览器加载完整个html网页后,立即执行
});
完整写法:
$(document).ready(function(){
//在浏览器加载完整个html网页后,立即执行
});
总结：什么时候需要用到文档就绪事件函数:
通常是在获取元素时, 如果"获取元素的代码" 执行的时间, 比 "元素本身加载的时间" 还要早(也就是说,在获取元素时,元素还没有被浏览器加载), 那么元素必然是获取不到的!
可以将获取元素的代码放在文档就绪事件函数中, 由于文档就绪事件函数是在浏览器加载完整个网页后立即执行，因此在这个函数中获取任何元素都可以获取到。
二、jQuery选择器
1.基本选择器
(1) $("div") -- 匹配所有的div元素
$("span") -- 匹配所有的soan元素
(2) $(".mini") -- 匹配所有class值为mini的元素
$("span.mini") -- 匹配所有class值为mini的span元素
(3) $("#one") -- 匹配id值为 one 的元素
(4) $("div,span,.mini") -- 匹配所有的div元素 和 所有的span元素 以及 class值为mini的元素
2.层级选择器
$("#one span") -- 匹配id为one的元素内部的所有span元素
$("#one+span") -- 匹配id为one的元素后面紧邻的span兄弟元素
$("#one").next("span") -- 匹配id为one的元素下一个紧邻的span兄弟元素
$("#one").prev("span") -- 匹配id为one的元素上一个紧邻的span兄弟元素
$("#one").nextAll("span") -- 匹配id为one的元素后面所有的span兄弟元素
$("#one").prevAll("span") -- 匹配id为one的元素前面所有的span兄弟元素
$("#one").siblings("span") -- 匹配id为one的元素前后所有的span兄弟元素
3.基本过滤选择器
$("span:first") -- 匹配所有span中的第一个span元素
$("span:eq(0)") -- 匹配所有span中的第一个span元素
$("span").eq(0) -- 匹配所有span中的第一个span元素
$("span:last") -- 匹配所有span中的最后一个span元素
$("span:eq(-1)") -- 匹配所有span中的最后一个span元素
$("span").eq(-1) -- 匹配所有span中的最后一个span元素
$("span:eq(n)") -- (n从零开始)匹配所有span中的第 n+1 个span元素
4.其他选择器
$(":input") -- 匹配所有的表单项元素(可以是input、select、option、textarea等元素)
$(":checkbox") -- 匹配所有的复选框
等价于 $("input[type='checkbox']") -- 匹配所有的复选框
$(":checked") -- 可以匹配所有被选中的单选框或复选框,以及被选中的option选项
$("input:checked") -- 表示匹配所有被选中的单选框或复选框
$("input[type='checkbox']:checked") -- 表示匹配所有被选中的复选框
$("input[type='checkbox']:not(:checked)") -- 表示匹配所有没有被选中的复选框
三、jQuery API总结
1、html元素操作
(1)创建html元素
$("<div></div>") -- 创建一个div元素,返回一个jQuery对象
$("<div>这是一个div元素</div>") -- 创建一个包含内容的div元素,返回一个jQuery对象
$("<input type='text'/>") -- 创建文本输入框,返回一个jQuery对象
(2)添加子元素 -- append()
$("body").append("<table><tr><td>这是一个td元素</td></tr></table>");
-- 往body中添加一个表格元素
var $div = $("<div>这是一个div元素</div>");
$("body").append( $div ) -- 往body中添加一个div元素
(3)删除元素 -- remove()
$("div").remove() -- 删除所有匹配的div元素
(4)替换元素 -- replaceWith()
$("div").replaceWith("<p>我是来替换div的p元素!!</p>")
2、html内容 及 值的操作
html()函数 -- 获取元素的所有内容(包裹在开始标签和结束标签中的所有内容)
如果通过选择器匹配了多个元素,只能获取第一个元素的内容
html()函还可以设置元素的内容,如果通过选择器匹配了多个元素,则会给所有元素设置内容
-- 在js中对应的是innerHTML属性
text()函数 -- 获取元素中的所有文本内容(值获取文本,不获取标签)
如果通过选择器匹配了多个元素,可以将所有元素内部的文本都返回
text()函数还可以为元素的设置文本内容(只能设置文本)
-- 在js中对应的是innerText属性(这个属性在部分浏览器中不兼容)
val()函数 -- 获取表单项元素的value值 或者是 为表单项元素设置value值
表单项元素: input/select/option/textarea
3、html元素属性 或者 css属性操作
prop()函数 -- 获取元素的某一个属性值,或者为元素设置属性值
attr()函数 -- 可以获取元素的属性值,或者为元素设置属性值
prop()和attr()的区别:
(1) prop函数是在jquery1.6版本之后才出现,用于获取或设置元素的属性(固有属性)值,
attr函数是在jquery1.6版本之前就有的函数,用于获取或设置元素的属性(自定义属性)值
css()函数 -- 可以获取或设置元素的css样式
4、动画函数
show() -- 设置元素为显示状态, 等价于 css("display", "block|inline");
hide() -- 设置元素为隐藏状态, 等价于 css("display", "none");
toggle() -- 切换元素的显示状态, 如果元素本身是显示的,则会变成隐藏状态,如果元素本身是隐藏的,则会变成显示状态
slideToggle() -- 切换元素的显示状态, 如果元素本身是显示的,则会变成隐藏状态,如果元素本身是隐藏的,则会变成显示状态
5、parent()/parents()/find()
parent() -- 获取当前元素的父元素, 类似于js中的 parentNode属性
parents() -- 获取当前元素的所有的祖先元素
find() -- 获取当前元素内部指定的后代元素
$("div").find("span") -- 获取所有div元素内部的span元素
$("div span") -- 获取所有div元素内部的span元素
*******************************************************************************
创建表格元素
<!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="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ /** 练习1：创建单行单列的表格 */ $("#button1").click(function(){ console.log(0); var $oTable = $("<table></table>"); var $oTr = $("<tr></tr>"); var $oTd = $("<td></td>"); //返回的是jQuery对象，只能调用jQuery函数和属性 $oTd.html("我是td元素"); $oTr.append($oTd); $oTable.append($oTr); $("body").append($oTable); }) /** 练习2：创建5行6列的表格 */ $("#button2").click(function(){ var $oTable = $("<table></table>"); for(var i = 0; i < 5; i++){ var $oTr = $("<tr></tr>"); for(var j = 0; j < 6; j++){ var $oTd = $("<td></td>"); $oTd.html("我是td"); $oTr.append($oTd); } $oTable.append($oTr); } $("body").append($oTable); }) /** 练习3：创建指定行列的表格 */ $("#button3").click(function(){ var row = $("#rows").val(); //var row = document.getElementById("rows").value; //JS写法 var col = $("#cols").val(); var $oTable = $("<table></table>"); for(var i = 0; i < row; i++){ var $oTr = $("<tr></tr>"); for(var j = 0; j < col; j++){ var $oTd = $("<td></td>"); $oTd.html("我是td"); $oTr.append($oTd); } $oTable.append($oTr); } $("body").append($oTable); }) }) </script> </head> <body> <!-- 练习1：点击下列按钮创建单行单列表格 --> <input type="button" id="button1" value="创建单行单列表格" /><br/><br/> <!-- 练习2：点击下列按钮创建5行6列表格 --> <input type="button" value="创建表格(5行6列)" id="button2"/><br/><br/> <!-- 练习3：点击下列按钮创建指定行、指定列的表格 --> <input type="button" value="创建表格(输入行数和列数)" id="button3"/><br/> 行数：<input type="text" id="rows"/><br/> 列数：<input type="text" id="cols"/><br/><br/> <!-- 将创建的表格添加到body内部(追加到最后) --><hr/> </body> </html>
浙公网安备 33010602011771号