day 56 jQuery学习
1.补充：each
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素
$.each() 是调用jQuery中的each方法 用法 如 $.each($(':checkbox'),function( ){ 注意function(i,v) 里边可以加这两个参数，代表索引，对象
与$(selector).each() 这个是调用这和个对象的each()方法 如 $(':checkbox').each(function () {
用each 方法完成反选
$('#x2').on('click',function () {
$.each($(':checkbox'),function(){
//each方法，从checkbox列表中依次取出每个checkbox对象，然后对其进行操作
console.log(this);
if ($(this).prop('checked')===false)//判断checkbox框中是否为选中，是的话就执行下一段
{
$(this).prop('checked',true);
}else{$(this).prop('checked',false);}
} ); 下有重要代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<!--table 里边的border是特殊属性，不是style 里的， 不能直接在哪儿设置-->
<table border="8">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td ><input class="c1" type="checkbox" value="1" ></td>
<td>alex</td>
<td>18</td>
</tr>
<tr>
<td ><input class="c1" type="checkbox" value="2" ></td>
<td>agon</td>
<td>18</td>
</tr>
<tr>
<td ><input class="c1" type="checkbox" value="3" ></td>
<td>haha</td>
<td>18</td>
</tr>
</tbody>
</table>
<input id="x1" type="button" value="全选" >
<input id='x2' type="button" value="反选" >
<input id="x3" type="button" value="取消" >
<script src="../jquery-3.2.1.min.js"></script>
<script>
$('#x1').on('click',function () { $(':checkbox').prop('checked',true); }); // $('#x3').on('click',function () { $('.c1').val([]); 传统写法 但是一般true 或false的用prop
$('#x3').on('click',function () { $(':checkbox').prop('checked',false);
});
//each方法，从checkbox列表中依次取出每个checkbox对象，然后对其进行操作
// 反选方法1： $('#x2').on('click',function () { $(':checkbox').each(function () { this.checked=!this.checked;
//this就是指的是当前取出的对象
// });
//下边是反选方法2
$('#x2').on('click',function () {
$.each($(':checkbox'),function(){
//each方法，从checkbox列表中依次取出每个checkbox对象，然后对其进行操作
console.log(this);
//this 指的是当前被each到的对像
if ($(this).prop('checked')===false){
$(this).prop('checked',true);
}else{$(this).prop('checked',false);}
} ); }); </script>
</body>
</html>
each用法实例 反选
//return false 能够起到当出现 3 时候就停止循环return false;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<script src="jquery-3.2.1.min.js"></script>
<script> $.each($('p'),function(){
if ($(this).text()==="3"){
//return false 能够起到当出现 3 时候就停止循环
return false;
}
else{console.log(this);}
}) </script>
</body>
</html>
例子
- 如果一个jQuery查找的对象被多次用到，我们可以用变量把它保存起来，减少重复查找
还有就是存到变量里， 多次查找调用不会飘黄报错，否则会飘黄
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$('ul').append(lielem); 注意被放进去的对象是DOM对象的形式放进去
$(A).appendTo(B)// 把A追加到B 注意 To 中的 T 是大写
$(lielem).appendTo($('ul'));
append(content)
关于append中可以插入的从内容详解
可以是一下三种的任意一种
HTML 元素 如 "<p>你好</p>"
jQuery 对象 如 $('input[typt="checkbox "]')
DOM 元素 如 ulElem
详细解法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文档操作</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery-3.2.1.min.js"></script>
<script>
//在jQuery中最常用的DOM方法就是这个了*****，其他的不怎么用
//先创建一个li标签
var lielem=document.createElement('li');
//给li标签里面放值
lielem.innerText='5';
//用append方法放进去 注意 被放进去的对象是 以 DOM对象 的形式放进去的
$('ul').append(lielem); </script>
</body>
</html>
添加到指定元素内部的前面 这个的用法和append的用法一致 只不过是往前边插入
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
如： var pelem=document.createElement('p');
pelem.innerText='我是外部的P';
$('ul').after(pelem);
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
用法 $('li:first').remove() 删除第一个li标签
empty()// 删除匹配的元素集合中所有的子节点。
例子：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
关于触发事件的绑定的重要代码******
// 不能用$('.delete')来绑定这个事件，因为，开始绑定，如果又新增了一行则，
//这一行的.delete是无效的， 所以要用tbody 来绑定删除事件（相当于表身体的全局），以便新增后也能用
// 用tbody 绑定的用法要记住
$('tbody').on('click','.delete',function () {
$(this).parent().parent().remove();
重要代码（内涵事件委托冒泡算法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档操作示例</title>
</head>
<body> <button id="b1">新增</button>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
<td>
<input type="button" value="编辑">
<input class="delete" type="button" value="删除">
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>吹牛逼</td>
<td>
<input type="button" value="编辑">
<input class="delete" type="button" value="删除">
</td>
</tr>
<tr>
<td>3</td>
<td>Yuan</td>
<td>日天</td>
<td>
<input type="button" value="编辑">
<input class="delete" type="button" value="删除">
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('#b1').on('click',function(){
var trelem=document.createElement('tr');
trelem.innerHTML='<td>4</td> <td>Yuan</td> <td>日天</td> <td> <input type="button" value="编辑"> <input class="delete" type="button" value="删除"> </td>';
$('tbody').append(trelem); });
// 不能用$('.delete')来绑定这个事件，因为，开始绑定，如果又新增了一行则，
//这一行的.delete是无效的， 所以要用tbody 来绑定删除事件，以便新增后也能用
$('tbody').on('click','.delete',function () { $(this).parent().parent().remove(); }) </script> </body>
</html>
姓名爱好表格的增删
替换
replaceWith()
用法：
$('p').replaceWith(spanElem) p 被后边的 spanelem对像替代
$("p").replaceWith("<b>Hello world!</b>");
replaceAll()
提示：replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。
克隆
clone()// 参数
用法：$(this).clone().inertAfter(this) 其中有参数 不写的话默认是false 写上true的话规定需也复制事件处理程序。
克隆示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#b1{height: 30px;
width: 80px;
background-color: #8eb031;
color: white; }
#b1{height: 30px;
width: 80px;
background-color: darkorange;
color: white; }
</style>
<body>
<button id="b1" class="button" >屠龙宝刀，点击就送</button>
<button id="b2" class="button1" >屠龙宝刀，点击就送11</button> <script src="jquery-3.2.1.min.js"></script>
<script>
$('#b1').on('click',function () {
$(this).clone().insertAfter(this)
//不写参数默认数false 只是克隆内容，不复制事件处理程序，
// 就是他绑定的方法不被克隆
});
$('#b2').on('click',function () {
$(this).clone(true).insertAfter(this)
// 规定需复制事件处理程序。 也就是被克隆的带有点击克隆的功能
}) </script>
</body>
</html>
屠龙宝刀，点击就复制
事件
常用事件
click(function(){...})
hover(function(){...}) 这个不可以用事件绑定方法
blur(function(){...})
focus(function(){...})
change(function(){...}) 常用于监控select 选择框中的变化
keyup(function(){...})
用法 jQurey对象.click(function(){.........})
如 $('input.delete').click(function(){......})
常用的还是 即下边的事件绑定： jQurey对象.on('动作 如 click',function(){.........})
keydown和keyup事件组合示例：
事件绑定
.on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
移除事件（这个不常用）
.off( events [, selector ][,function(){}])
off() 方法移除用[ .on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等 如登录页面 不提交即点提交后不刷新提交到后台去
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法： 以后写jQuery代码都要加这一局
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
文档加载完绑定事件，并且阻止默认事件发生：
事件委托(常用在触发事件的标签过多，或者被触发事件的标签在创建完之后还不存在的情况下)
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：（如100个li 中显示点击的那个li的innertext内容，还有就是表格操作中新增的行的删除功能能够使用）
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
详见上边的例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$('ul').on('click',function (event) { console.log(event.target);//这个代表被选中的对象 event事件 target目标
var clickedli=event.target;
alert(clickedli.innerText); }) })
</script>
</body>
</html>
打印出100个li中被选中的
动画效果
// 基本
show([s,[e],[fn]]) 出现
hide([s,[e],[fn]]) 消失
toggle([s],[e],[fn]) 里边可以放时间毫秒 如 $('img').toggle(3000) 三秒内逐渐消失
// 滑动
slideDown([s],[e],[fn]) 从上往下放下
slideUp([s,[e],[fn]]) 向上收起
slideToggle([s],[e],[fn]) 放下的则收起，收起的点击则放下
// 淡入淡出
fadeIn([s],[e],[fn])··出现
fadeOut([s],[e],[fn]) 消失
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义
animate(p,[s],[e],[fn])
day 56 jQuery学习的更多相关文章
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jquery学习（一）
简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- 很不错的jQuery学习资料和实例
这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...
随机推荐
- iconfont.cn批量加入
iconfont.cn还没有一个批量加入的功能 以下是最新的图标批量加入购物车功能代码. var icons = document.querySelectorAll('.icon-gouwuche1' ...
- (C/C++学习笔记) 二十一. 异常处理
二十一. 异常处理 ● 异常的概念 程序的错误通常包括:语法错误.逻辑错误.运行异常. 语法错误指书写的程序语句不合乎编译器的语法规则,这种错误在编译.连接时由编译器指出. 逻辑错误是指程序能顺利运行 ...
- 【重大更新】DevExpress WinForms v18.2新版亮点（七）
买 DevExpress Universal Subscription 免费赠 万元汉化资源包1套! 限量15套!先到先得,送完即止!立即抢购>> 行业领先的.NET界面控件2018年第 ...
- socket-重叠模型(overlap)
socket-重叠模型(overlap) 重叠模型的基本设计原理便是让应用程序使用一个重叠的数据结构,一次投递一个或多个Winsock I/O请求.针对那些提交的请求,在它们完成之后,应用程序可为它们 ...
- 5.Python爬虫入门五之URLError异常处理
大家好,本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理. 1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本机无法上网 连接不到特定的 ...
- transform子元素，绝对定位失效
公司项目需要上拉刷新功能, mui下拉刷新组件采用固定布局,无法触发浏览器自带的隐藏地址栏功能. 思路: touchmove事件监听程序中,判断滚动位置:上下顶点使用transform 移动最外层容器 ...
- Linux：NFS配置
NFS配置 1.创建分享的文件:touch /var/www/html/aa.txt2.查看是否安装NFS:rpm -qa|grep nfs3.查看IP地址:ifconfig4.配置NFS:vi /e ...
- Codex Delphi Expert
https://www.delphiworlds.com/codex/?tdsourcetag=s_pcqq_aiomsg Codex是什么? 是一个可以安装到Delphi IDE中的专家 有助于提高 ...
- PCMU G.711U/PCMA G.711A简介
PCMA(G.711A) 类型:Audio 制定者:ITU-T 所需频宽:64Kbps(90.4) 特性:PCMU和PCMA都能提供较好的语音质量,但是它们占用的带宽较高,需要64kbps. 优点:语 ...
- "@P0"附近有语法错误解释及定位修复
解释: "@P0" 指的是sql语句被预编译之后,其所对应的占位符的相对顺序位置,通俗的讲,就是它代表第几个占位符的位置,其中的0,并不是固定的,如果将定位符看做数组的话,这里的数 ...