黑马程序员技术交流社区
标题:
【石家庄校区】第五章 JQuery篇
[打印本页]
作者:
玩玩
时间:
2017-11-19 15:08
标题:
【石家庄校区】第五章 JQuery篇
本帖最后由 小石姐姐 于 2017-11-20 15:07 编辑
第五章 JQuery
* slide : 滑动* fade : 褪色* animate : 赋予生命* toggle : 拴牢; 系紧, 一步一步的* opacity : 透明度* odd : 奇数的* even : 偶数的* multiple: 并联的,用于显示select列表的**全部选项**
JQuery介绍
说是框架,其实不算是框架,它仅仅是个工具类(JS的类库),对传统的JS进行了封装
EXTJS,太笨重,除非是企业级,其他时候很少用
框架
AngularJS
Angular
VUE
JQuery版本
1.X 兼容IE6、7、8
2.X 不兼容IE6、7、8,对最新的JS特性也不支持
3.X 不兼容IE6、7、8,支持JS最新的特性
JQuery入门
引入Jquery的js文件
jquery对象
里面实际上是Dom数组,我们操作JQuery对象,实际上就是操作里面的每一个元素
只有被$()包裹的对象才是JQuery对象
JQuery与DOM对象的转换
JQuery=>dom $("div")[0];
dom=>JQuery{dom对象};
JQuery完成显示和隐藏
show()
:
jq对象.show();
jq对象.show("slow");//slow,normal,fast
jq对象.show(毫秒值);//1000
jq对象.show(毫秒值,function(){});
hide()
:
jq对象.hide();
jq对象.hide("slow");//slow,normal,fast
jq对象.hide(毫秒值);//1000
jq对象.hide(毫秒值,function(){});
slideDown():向下滑动
jq对象.slideDown();
jq对象.slideDown("slow");//slow,normal,fast
jq对象.slideDown(毫秒值);//1000
jq对象.slideDown(毫秒值,function(){});
slideUp():向上滑动
jq对象.slideUp();
jq对象.slideUp("slow");//slow,normal,fast
jq对象.slideUp(毫秒值);//1000
jq对象.slideUp(毫秒值,function(){});
fadeIn():淡入
jq对象.fadeIn();
jq对象.fadeIn("slow");//slow,normal,fast
jq对象.fadeIn(毫秒值);//1000
jq对象.fadeIn(毫秒值,function(){});
fadeOut():淡出
jq对象.fadeOut();
jq对象.fadeOut("slow");//slow,normal,fast
jq对象.fadeOut(毫秒值);//1000
jq对象.fadeOut(毫秒值,function(){});
animate():自定义动画
animate({ height:200px, width:200px, opacity:.1 },5000);
toggle():单击切换函数
Jq对象.toggle(fn1,fn2...)
单击第一下的时候执行fn1,单击第二下执行fn2...
JQ的事件切换
toggle(); --单击事件的切换
hover(); --鼠标悬停的切换
```
//1.写出JQ的入口函数//2.JQ对象和DOM对象的转换//3.使用JQ完成显示和隐藏<html> <head> <meta charset="utf-8" /> <title>定时弹出广告</title> <style> .ad{ width: 200px; height:100px; border:1px solid red; /*绝对定位,相对于body元素*/ position:absolute; /*距离body的底部0*/ bottom:0; /*距离body的右边0*/ right:0; /*不显示*/ display: none; background-image: url(img/AD.png); /*缩放显示背景图*/ background-repeat:round; } </style> <script src="jquery-1.11.3.min.js"></script> <script> /** * 需求：网页打开后1S弹出广告，4S后广告消失 */ $(function(){ setTimeout(function(){ $("#ad").show(); setTimeout(function(){ $("#ad").hide(); },4000); },1000); }); </script> </head> <body style="background-image: url(img/shouye.png);"> <div class="ad" id="ad"> </div> </body></html>
```
JQ的选择器
基本选择器
id选择器
用法:$(“#id”)
类选择器
用法:$(“.类名”)
元素选择器
用法:$(“元素名称”)
通配符选择器(不重要,认识就行)
用法:$(“*”)
并列选择器
用法:$(“选择器1,选择器2,选择器3,...”)
层级选择器
后代(子孙)选择器:使用空格 所有后代包含孙子及以下的元素
子元素选择器:使用> 第一层的元素（儿子）
基本过滤选择器
:eq(index)
:匹配一个给定索引值的元素,
注意:
这里没有引号
:even
:匹配所有索引值为偶数的元素，从 0 开始计数
:odd
:匹配所有索引值为奇数的元素，从 0 开始计数
:first
:
:last
:
属性选择器
input[type='']
表单选择器(认识就行)
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单属性选择器
:checked
```
//1.通过选择器获取奇数行，添加样式//2.通过选择器获取偶数行，添加样式<html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <style> .bg-red{ background-color:red; } .bg-gray{ background-color:gray; } </style> <script src="jquery-1.11.3.min.js"></script> <script> $(function(){ $("table tr:odd").addClass('bg-gray'); $("table tr:even").addClass('bg-red'); }); </script> </head> <body> <table id="tb" border="1" style="width: 300px;height: 300px;"> <tr> <td>A</td> <td>A</td> </tr> <tr> <td>B</td> <td>B</td> </tr> <tr> <td>C</td> <td>C</td> </tr> <tr> <td>D</td> <td>D</td> </tr> <tr> <td>E</td> <td>E</td> </tr> </table> </body></html>
```
JQuery对属性的操作的方法
val();
传入值表示赋值
不传入值表示获取
attr();
使用方法一：$(“”).attr(“src”);
使用方法二：$(“”).attr(“src”,”test.jpg”);
使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
removeAttr();
prop();新版本的方法.
使用方法一：$(“”).prop(“src”);
使用方法二：$(“”).prop(“src”,”test.jpg”);
使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
removeProp();
addClass();
removeClass();
prop和attr的区别
prop:操作的是原始属性,非自定义
attr:操作自定义属性
```
//1.获取最上面的多选框选中的状态//2.将最上面多选框选中的状态赋值给下面所有的多选框<html> <head> <meta charset="UTF-8"> <title>复选框的全选和全不选</title> <--熟练使用prop()val()方法--> <script src="./jquery-1.11.3.min.js"></script> <script> $(function(){ $("#checkAll").on('click',function(){ //1.获取最上面的多选框选中的状态 var checked = $("#checkAll").prop("checked"); //2.将最上面多选框选中的状态赋值给下面所有的多选框 $("input:checkbox[name='cb']").prop('checked',checked); }); }) </script> </head> <body > <table id="tb" border="1" style="width: 300px;height: 300px;"> <tr> <td><input type="checkbox" id="checkAll" />全选/全不选 </td> <td>列1</td> <td>列2</td> </tr> <tr> <td> <input type="checkbox" name="cb"/> </td> <td>B</td> <td>B</td> </tr> <tr> <td> <input type="checkbox" name="cb"/> </td> <td>C</td> <td>C</td> </tr> <tr> <td> <input type="checkbox" name="cb"/> </td> <td>D</td> <td>D</td> </tr> <tr> <td> <input type="checkbox" name="cb"/> </td> <td>E</td> <td>E</td> </tr> </table> </body></html>
```
JQuery的DOM操作
append();
在某个元素后添加内容
如果添加的元素已经存在,那就变成移动了
html();
传入之表示,覆盖某个元素的内容
不传入值表示,获取
appendTO(); ---将某个元素添加到另一个元素后.
remove(); ---将某个元素移除.
JQuery的遍历
$.each(objects,function(index,element){});
$(“”).each(function(index,element){});
```
//1.获取选中的省份//2.清除城市列表//3.获取城市列表//4.将城市列表添加到下拉框中 <html> <head> <meta charset="UTF-8"> <title>省市联动</title> <--创建元素$("")，添加子元素，删除子元素，遍历数组--> <script src="jquery-1.11.3.min.js"></script> <script> // 定义数组：二维数组.实质上存储的是每个省份包含的市 var arrs = new Array(5); arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");//浙江省的市级城市 arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");//江苏省的市级城市 $(function(){ $("#province").on('change',function(){ //1.获取选中的省份 var value = $("#province").prop('value'); //2.清除城市列表 $("#city").empty(); $("#city").append('<option>请选择</option>') //3.获取城市列表 var cities = arrs[value]; //4.将城市列表添加到下拉框中 $(cities).each(function(index, element){ $("#city").append($("<option>"+element+"</option>")) }) }); }) </script> </head> <body> <select id="province" name="province" > <option value="">-请选择-</option> <option value="0">浙江省value=0</option> <option value="1">江苏省value=1</option> </select> <select id="city" name="city"> <option >-请选择-</option> </select> </body></html>
```
JQ的查找事件
find()
$("p").find("span")
搜索所有与指定表达式匹配的元素。
这个函数是找出正在处理的元素的后代元素的好方法。
parent()
$("p").parent()获取父元素
children()
$("div").children()获取子元素
```
//1.获取选中的下拉列表//2.将选中的下拉选项添加到另一个下拉列表钟<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } select{ width: 100%; height: 100%; } #container{ height:400px; border:1px solid black } #container div{ width: 33.33333333333%; height: 100%; float: left; } button{ display: block; width: 100%; height: 25%; } </style> <script src="jquery-1.11.3.min.js"></script> <script> $(function(){// 向右移动按钮 $("#toRight").on('click',function(){ var options = $("#left").find('option:selected'); $("#right").append(options) });// 向左移动按钮 $("#toLeft").on('click',function(){ var options = $("#right").find('option:selected'); $("#left").append(options) });// 向右移动全部 $("#toAllRight").on('click',function(){ var options = $("#left").find('option'); $("#right").append(options) }); //向左移动全部 $("#toAllLeft").on('click',function(){ var options = $("#right").find('option'); $("#left").append(options) }); }); </script> </head> <body> <div id="container" class="clearfix"> <!--左边div--> <div > <select name="left" id="left" multiple> <option value="0">苹果</option> <option value="1">香蕉</option> <option value="2">李子</option> <option value="3">火龙果</option> <option value="4">樱桃</option> <option value="5">黄瓜</option> <option value="6">榴莲</option> <option value="7">琵琶</option> <option value="8">柿子</option> <option value="9">石榴</option> <option value="10">潘石榴</option> <option value="11">西瓜</option> </select> </div> <!--中间div--> <div> <button id="toRight">--></button> <button id="toLeft"><--</button> <button id="toAllRight">-->></button> <button id="toAllLeft"><<--</button> </div> <!--右边div--> <div> <select name="right" id="right" multiple> </select> </div> </div> </body></html>
```
JQ的事件处理
trigger:触发某个或某类元素中的事件
$("input").trigger("focus");
triggerHandler:触发某个元素中的事件
$("input").triggerHandler("focus");
扩展
setTimeout():是异步的,异步池
事件绑定
$().click(function(){});
onclick(function(){});
$().on('click','span',function(){});
几个操作
attr()
empty()
html()
css()
table>tr
5>td
5:生成5行5列的表格的快捷键
$("input[type='checkbox']:checked"):获取所有被选中的checkbox类型的input
事件委派
```
<html> <head> <meta charset="UTF-8"> <title></title> <!--给动态创建的标签对象绑定事件--> <script src="jquery-1.11.3.min.js"></script> <script> $(function(){ $("button").on('click',function(){ $("ul").append('<li>棒球棒</li>') }); $("ul").on('click','li',function(){ var _this = $(this); alert(_this.html()); }); }) </script> </head> <body> <button type="button">添加</button> <ul> <li>黄瓜</li> <li>莲藕</li> </ul> </body></html>
```
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2