前端武器库之jQuery示例
1.全选 反选 取消
相关知识点：
- 选择器 - .prop $('#tb:checkbox').prop('checked'); 获取值 $('#tb:checkbox').prop('checked', true); 设置值 - .each jQuery方法内置循环： $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){ // k当前索引 // this，DOM，当前循环的元素 $(this) }) - 三元运算 var v = 条件 ? 真值 : 假值
<body> <input type="button" value="全选" onclick="checkAll();" /> <input type="button" value="反选" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancelAll();"/> <table border="1"> <thead> <tr> <th>选项</th><th>IP</th><th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true); } // .prop 专门对checked操作 function cancelAll() { $('#tb :checkbox').prop('checked',false); } function reverseAll() { $(':checkbox').each(function(k){ // .each 循环选中的每一个元素 /* Dom实现 if(this.checked){ this.checked = false; }else{ this.checked = true; } */ // this,代指当前循环的每一个元素；三元运算var v = 条件? 真值：假值 var v = $(this).prop('checked')?false:true; // console.log(k,this); $(this).prop('checked',v); }) } </script> </body>
2.筛选器示例：左侧菜单点击展开内容
筛选器：
$('#i1').next() // 下一个
$('#i1').prev() //往上找
$('#i1').nextAll() // 下面所有
$('#i1').prevAll()
$('#i1').nextUntil('#ii1') // 下面直到哪里
$('#i1').prevUntil('#ii1')
$('#i1').parent() // 父标签
$('#i1').parents() // 取得一个包含着所有匹配元素的祖先元素的元素集合
$('#i1').parentsUntil() //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li').eq(1) <——> $('li:eq(1)')
first()
last()
hasClass(class)
添加移除样式：
$('#i1').addClass(..) // 添加样式
$('#i1').removeClass(..)// 移除样式
示例：
<head> <style> .header{ background-color: royalblue; } .content{ min-height: 70px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">标题一</div> <div id="i1" class="content hide">内容</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function(){ // 当前点击的标签 $(this)； .next 获取某个标签的下一个标签 // $(this).next().removeClass('hide'); 移除hide属性 // $(this).parent().siblings().find('.content').addClass('hide') $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') // 链式编程 }) </script> </body>
3.jQuery文本 样式 属性 文档处理操作
- 文本操作：
$(..).text() // 获取文本内容 $(..).text("<a>1</a>") // 设置文本内容 $(..).html() // 获取 $(..).html("<a>1</a>") // 设置 $(..).val() // 获取 $(..).val(..) // 设置
- 样式操作：
addClass
removeClass
toggleClass 比如实现网页开关灯功能
开关灯示例：
<head> <style> .hide{ display: none; } </style> </head> <body> <input type='checkbox' id='i2' /> <input id="i1" type="button" value="开关" /> <div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function(){ // if($('.c1').hasClass('hide')){ // $('.c1').removeClass('hide'); // }else{ // $('.c1').addClass('hide'); // } $('.c1').toggleClass('hide'); // 一句搞定 }) </script> </body>
- 属性操作：
// 专门用于做自定义属性 $(..).attr('n') // 获取 $(..).attr('n','v') // 设置 $(..).removeAttr('n') // 删除 <input type='checkbox' id='i1' /> // 专门用于chekbox,radio jQuery1、2版本checkbox使用attr的话有bug，所以用prop $(..).prop('checked') $(..).prop('checked', true)
- 文档处理：
append // 往后加 prepend // 往前加 after // 紧挨着后面 before // 紧挨着前面 remove // 删除 empty // 只清空内容 clone // 克隆一份数据
3.模态对话框
<head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="确定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $('.del').click(function () { $(this).parent().parent().remove(); }); function confirmModal() { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = "11.11.11.11"; var td2 = document.createElement('td'); td2.innerHTML = "8001"; $(tr).append(td1); $(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide'); } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td的target属性值 var n = $(this).attr('target'); // 获取td中的内容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); // var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // // $('.modal input[name="hostname"]').val(host); // $('.modal input[name="port"]').val(port); // 循环获取tds中内容 // 获取 <td>内容</td> 获取中间的内容 // 赋值给input标签中的value }); </script> </body>
4.tab切换菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); var target = $(this).attr('a'); $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
上面是通过自定义属性实现的，下面不用自定义属性，用索引也能实现。
index 获取索引位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" >菜单一</div> <div class="menu-item" >菜单二</div> <div class="menu-item" >菜单三</div> </div> <div class="content"> <div >内容一</div> <div class="hide" >内容二</div> <div class="hide">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
5.点赞及jQuery css操作
Query css处理操作
$('t1').css('样式名称', '样式值')
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
点赞示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { AddFavor(this); }); function AddFavor(self) { // DOM对象 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>
6.拖动面板及位置操作
- 位置操作：
$(window).scrollTop() // 获取windows滑轮位置 // 注意是谁的滑轮 $(window).scrollTop(0) // 设置windows滑轮位置 scrollLeft([val]) // 左右滚动滑轮设置 $('#i1').offset() // 获取标签位置 offset().left // 指定标签在html中的坐标位置 offset().top // 指定标签在html中的坐标位置
<!-- position() 指定标签相对父标签(找到relative)标签的坐标-->
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>
<script> // 纯高度，边框，外边距，内边距
$('i1').height() // 获取标签的高度 纯高度
$('i1').innerHeight() // 获取自身高度+padding；
$('i1').outerHeight() // 参数：false-->获取自身高度+padding+border；
$('i1').outerHeight(true) // 获取自身高度+padding+border+margin；
</script>
- 拖动面板示例：
注意这里直接使用#title方式不是太好。
<body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }); $("#title").mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }); $("#title").mouseup(function(){ $("#title").off('mousemove'); }); }) </script> </body>
7.jQuery绑定事件及示例
- 绑定事件知识点：
// DOM： 三种绑定方式 // jQuery：四种 // 第一种： $('.c1').click() $('.c1')..... // 第二种： $('.c1').bind('click',function(){ // 绑定 }) $('.c1').unbind('click',function(){ // 解绑 }) // 第三种：*******有特殊功能，看示例（一开始并没有绑定事件，当点击的时候才给绑定事件） $('.c').delegate('a', 'click', function(){ // 绑定、委托 }) $('.c').undelegate('a', 'click', function(){ // 解绑 }) // 第四种：上面调用的实际上都是这种 $('.c1').on('click', function(){ }) $('.c1').off('click', function(){ })
- 示例：添加内容，并自动绑定事件
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
// 第三种绑定方式
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
})
// 第一种绑定方式
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// })
// 第二种绑定方式
// $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// })
// 第四种绑定方式
// $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// })
</script>
</body>
8.JQuery事件之阻止事件发生 及示例：表单验证
a标签是不是默认有个onclick事件，如果再给绑定一个onclick事件会怎么样？
默认：先执行绑定事件，在执行a标签的默认事件。
阻止事件发生 return false # 当页面框架加载完成之后，自动执行 $(function(){ $(...) })
示例：
<body> <!--Dom方式：onclick里需要加return--> <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <!--jQuery方式：--> <a id="i1" href="http://www.oldboyedu.com">走你2</a> <script src="jquery-1.12.4.js"></script> <script> // Dom方式： function ClickOn() { alert(123); return true; // true：执行后面操作，dom绑定里需要加return } // jQuery方式： $('#i1').click(function () { alert(456); return false; // false：不执行后面操作 }) </script> </body>
- 示例：表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; } </style> </head> <body> <!--功能：输入值：运行提交；未输入：不允许提交--> <form id="f1" action="s5.html" method="POST"> <div><input name="n1" tex = "用户名" type="text" /></div> <div><input name="n2" tex = "密码" type="password" /></div> <div><input name="n3" tex = "邮箱" type="text" /></div> <div><input name="n4" tex = "端口" type="text" /></div> <div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" /> <!--<img src="...">--> </form> <script src="jquery-1.12.4.js"></script> <script> // // 当页面框架加载完毕后，自动执行，比如加载图片，框加载后，图片还没加载，函数就执行了 // $(function(){ // // }); $(function(){ // 当页面所有元素完全加载完毕后，执行 $(':submit').click(function () { $('.error').remove(); // 先清空错误样式 var flag = true; // 创建局部变量 $('#f1').find('input[type="text"],input[type="password"]').each(function () { var v = $(this).val(); var n = $(this).attr('tex'); if(v.length <= 0){ flag = false; var tag = document.createElement('span'); tag.className = "error"; tag.innerHTML = n + "必填"; $(this).after(tag); // return false; // 加上false后，第一个不合法，后面不通过 } }); return flag; }); }); // $(':submit').click(function () { // var v = $(this).prev().val(); // if(v.length > 0){ // return true; // }else{ // alert('请输入内容'); // return false // } // }) </script> </body> </html>
