[学习交流] 【石家庄校区】第五章 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 > <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> <button id="toRight">--></button> <button id="toLeft"><--</button> <button id="toAllRight">-->></button> <button id="toAllLeft"><<--</button> </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>tr5>td5:生成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>

```

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【石家庄校区】第五章 JQuery篇

0 个回复