jquery基础
jquery基础
1.id $('#id')
2. class <div class='c1'></div> $('.c1')
3.标签： <div class='c1'> <a>f</a> <a>f</a> </div> $('a')取出a标签 4. 取出多个标签 $('a,.c1') 取出a和.c1 标签 5.层级： $('#id a') 取出这个id下的所有a标签 $('#id>a') 取出这个id下的a标签 first: 等同于 $('#id a:eq(0)') 取到第一个值
not
属性
$('[aa]') 具有aa属性的标签 $('[aa="aaaa"]') aa属性为aaaa的值得标签 <input type='text'> <input type='file'>
要求查找type为text的标签： $("input[type='text']") $(':text') 表单对象属性 disabled 不可编辑标签
jquery示例一全选多选反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value='全选' onclick="choseAll();"/> <input type="button" value="取消" onclick="cancelAll();"/> <input type="button" value="反选" onclick="reverseAll();"/> <table border="1"> <thead> <tr> <td>选项</td> <td>ip</td> <td>端口</td> <td>主机名</td> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td><input type="checkbox" /></td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td><input type="checkbox" /></td> <td>10</td> <td>11</td> <td>12</td> </tr> </tbody> </table> <script src="jquery-3.2.1.js"></script> <script> function choseAll() { $('#tb :checkbox').prop('checked',true); } function cancelAll() { $('#tb :checkbox').prop('checked',false); } function reverseAll() { /* //反选 基础的选择方法jquery $('#tb :checkbox').each(function(){ //###jquery for 循环 if($(this).prop('checked')){ $(this).prop('checked',false) } else{ $(this).prop('checked',true) } }) */ /* 三元运算方法 */ $('#tb :checkbox').each(function(){ var v = $(this).prop("checked")?false:true; $(this).prop('checked',v) }) } </script> </body>
说明
$('#tb :checkbox').prop('checked'） 获取值 $('#tb :checkbox').prop('checked',true) 设置值 jquery 方法内置循环 $('#tb :checkbox').xxx jquery for 循环： $('#tb :checkbox').each(function(){} k 当前索引 this 当前循环的元素
jquery示例之左侧菜单栏
jquery支持链式编程
//$(this) 当前点击的标签 /* $(this).next() 获取当前标签的下一个标签 $(this).prev() 获取当前标签的上一个标签 $(this).parent() 获取当前标签的父标签 $(this).children() 获取当前标签的子标签 $(this).siblings() 获取当前标签的兄弟标签 $(this).find('.content') 查找content标签
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ background-color: yellow; width:300px; min-height: 20px; } </style> </head> <body> <div style="height: 48px;"> <div class="item"> <div class="menu">menu1</div> <div class="content hide">content1</div> </div> <div class="item"> <div class="menu">menu2</div> <div class="content hide">content4</div> </div> <div class="item"> <div class="menu">menu3</div> <div class="content hide">content7</div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> $('.menu').click(function () { $(this).next().removeClass('hide'); $(this).parent().siblings().find('.content').addClass('hide'); }) </script> </body> </html>
jquery文本操作筛选实例（添加和编辑内容）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .showModal{ position: fixed; background-color: green; top:50%; left:50%; width: 500px; height: 400px; margin-top: -200px; margin-left: -250px; z-index: 10; } .shadow{ position: fixed; background-color: black; top:0; left:0; opacity: 0.6; z-index: 9; right: 0; bottom: 0; } </style> </head> <body> <a onclick="addElement()">添加</a> <table border="1"> <tbody> <tr> <td>hostname</td> <td>ip</td> <td>port</td> <td>options</td> </tr> <tr> <td>test</td> <td>1.1.1.1</td> <td>1234</td> <td><a class="edit">编辑</a>|<a>删除</a></td> </tr> <tr> <td>test2</td> <td>2.2.2.2</td> <td>5678</td> <td><a class="edit">编辑</a>|<a>删除</a></td> </tr> <tr> <td>test3</td> <td>3.3.3.3</td> <td>4567</td> <td><a class="edit">编辑</a>|<a>删除</a></td> </tr> </tbody> </table> <div class="showModal hide"> <div> <input name="hostname" type="text" /> <input name="ip" type="text" /> <input name="port" type="text" /> </div> <div> <a onclick="cancel()">取消</a> <a onclick="confirm()">确认</a> </div> </div> <div class="shadow hide"></div> <script src="jquery-3.2.1.js"></script> <script> function addElement(){ $(".showModal,.shadow").removeClass('hide'); } function cancel() { $(".showModal,.shadow").addClass('hide'); //当编辑取消后从新点击添加时确保输入框里事空白的 $('.showModal input[type="text"]').val(""); } function confirm() { $(".showModal,.shadow").addClass('hide'); } $('.edit').click(function () { $(".showModal,.shadow").removeClass('hide'); //查找所有的兄弟标签 var tds = $(this).parent().prevAll(); //将弹出的对话框里显示当前行的内容 var host = $(tds[2]).text(); var ip = $(tds[1]).text(); var port = $(tds[0]).text(); //赋值给各个输入框 $('.showModal input[name="hostname"]').val(host); $('.showModal input[name="ip"]').val(ip); $('.showModal input[name="port"]').val(port) }) </script> </body> </html>
jquery属性操作之实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .showModal{ position: fixed; background-color: green; top:50%; left:50%; width: 500px; height: 400px; margin-top: -200px; margin-left: -250px; z-index: 10; } .shadow{ position: fixed; background-color: black; top:0; left:0; opacity: 0.6; z-index: 9; right: 0; bottom: 0; } </style> </head> <body> <a onclick="addElement()">添加</a> <table border="1"> <tbody> <tr> <td>hostname</td> <td>ip</td> <td>port</td> <td>options</td> </tr> <tr> <td target="hostname">test</td> <td target="ip">1.1.1.1</td> <td target="port">1234</td> <td><a class="edit">编辑</a>|<a>删除</a></td> </tr> <tr> <td target="hostname">test2</td> <td target="ip">2.2.2.2</td> <td target="port">5678</td> <td><a class="edit">编辑</a>|<a>删除</a></td> </tr> <tr> <td target="hostname">test3</td> <td target="ip">3.3.3.3</td> <td target="port">4567</td> <td><a class="edit">编辑</a>|<a>删除</a></td> </tr> </tbody> </table> <div class="showModal hide"> <div> <input name="hostname" type="text" /> <input name="ip" type="text" /> <input name="port" type="text" /> </div> <div> <a onclick="cancel()">取消</a> <a onclick="confirm()">确认</a> </div> </div> <div class="shadow hide"></div> <script src="jquery-3.2.1.js"></script> <script> function addElement(){ $(".showModal,.shadow").removeClass('hide'); } function cancel() { $(".showModal,.shadow").addClass('hide'); //当编辑取消后从新点击添加时确保输入框里事空白的 $('.showModal input[type="text"]').val(""); } function confirm() { $(".showModal,.shadow").addClass('hide'); } $('.edit').click(function () { $(".showModal,.shadow").removeClass('hide'); //查找所有的兄弟标签 var tds = $(this).parent().prevAll(); //将弹出的对话框里显示当前行的内容 // var host = $(tds[2]).text(); // var ip = $(tds[1]).text(); // var port = $(tds[0]).text(); // //赋值给各个输入框（一行一赋值，如果列太多，操作繁琐） // $('.showModal input[name="hostname"]').val(host); // $('.showModal input[name="ip"]').val(ip); // $('.showModal input[name="port"]').val(port); //第二种方法(使用字符串拼接的方式，解决多行繁琐操作) tds.each(function () { var n = $(this).attr('target'); ###获取target属性 var text = $(this).text(); var a = '.showModal input[name="'; var a1 = '"]'; var temp = a + n + a1; $(temp).val(text); }) }) </script>dddd </body> </html>
jquery实例之菜单切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ background-color: #eeeeee; height:38px; } .menu .item{ float: left; border-right: 1px solid red; padding:0 5px; cursor: pointer; line-height: 38px; } .content{ min-height: 100px; border: 1px solid black; } .active{ background-color: #00CC00; } </style> </head> <body> <div style="width:700px;margin: 0 auto"> <div class="menu"> <div class="item active" a="1">菜单一</div> <div class="item" a="2">菜单二</div> <div class="item" a="3">菜单三</div> </div> <div class="content"> <div b="1">content1</div> <div class="hide" b="2">content2</div> <div class="hide" b="3">content3</div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> //找到item触发点击事件，点击时将其他菜单内容隐藏，显示与本菜单相关的内容 $(".item").click(function () { $(this).addClass('active').siblings().removeClass('active'); //获取item属性下a属性的值 var aa = $(this).attr('a'); //获取content内容 $(".content").children("[b='" + aa +"']").removeClass('hide').siblings().addClass('hide') }) </script> </body> </html> 索引操作： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ background-color: #eeeeee; height:38px; } .menu .item{ float: left; border-right: 1px solid red; padding:0 5px; cursor: pointer; line-height: 38px; } .content{ min-height: 100px; border: 1px solid black; } .active{ background-color: #00CC00; } </style> </head> <body> <div style="width:700px;margin: 0 auto"> <div class="menu"> <div class="item active">菜单一</div> <div class="item">菜单二</div> <div class="item">菜单三</div> </div> <div class="content"> <div >content1</div> <div class="hide" >content2</div> <div class="hide" >content3</div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> $(".item").click(function () { $(this).addClass('active').siblings().removeClass('active'); // var aa = $(this).attr('a'); // $(".content").children("[b='" + aa +"']").removeClass('hide').siblings().addClass('hide') var v = $(this).index(); console.log(v); $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide') }) </script> </body> </html>
jquery form表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a onclick="return clickOn()" href="http://www.baidu.com">text111</a> <a id="i1" href="http://www.baidu.com">tessssss</a> <script src="jquery-3.2.1.js"></script> <script> function clickOn() { alert(123); return true; ##此处为false只打印123，为true时，打印123，跳转到指定url,需要标签里加上return } $('#i1').click(function () { alert(456); return false; #####此处为false只打印456，为true时，打印456，跳转到指定url }) </script> </body> </html> 示例2： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .error{ color: red; } </style> </head> <body> <form id="f1" action="test.html" method="post"> <div><input name='n1' type="text"/></div> <div><input name='n2' type="text"/></div> <div><input name='n3' type="password"/></div> <div><input name='n4' type="text"/></div> <div><input name='n5' type="text"/></div> <input type="submit" value="tijiao"/> </form> <script src="jquery-3.2.1.js"></script> <script> $(':submit').click(function () { $('.error').remove(); var flag = true; // var v=$(this).prev().val(); $('#f1').find('input[type="text"],input[type="password"]').each(function () { var v=$(this).val(); if (v.length<=0){ flag=false; var tag = document.createElement('span'); tag.className='error'; tag.innerHTML="必填"; $(this).after(tag); //return false; } }); return flag // if (v.length>0){ // return true; // }else { // alert('不允许为空'); // return false // } }) </script> </body> </html>
jquery筛选
<div class="item"> <div class="menu">menu1</div> <div class="content hide">content1</div> <div id="aa">content1</div> <div class="content hide">content1</div> <div class="content hide">content1</div> </div>
$('#aa').next() ###查找下一个标签 $('#aa').nextAll() ###查找下一个所有标签 $('#aa').nextUntil('#id') ###查找下一个标签直到到哪为止 $('#aa').prev() ###查找上一个标签 $('#aa').prevAll() ###查找上一个所有标签 $('#aa').prevUntil('#id') ###查找上一个标签直到到哪为止 $('#aa').parents() ###查找父标签 $('#aa').parentsUntil() ###查找父标签直到
文本操作
a标签 $(..).text() ##获取文本内容 $(..).text('<a>1</a>') ###设置文本内容 $(..).html() $(..).html("<a>1</a>") input 标签 $(..).val() ###获取值 $(..).val(’a‘) ##设置值
样式操作：
addClass removeClass toggleClass ##没有添加，有就删除
属性操作
$(..).attr（） ###用于作自定义属性（获取属性对应的值，传一个值事查询，俩值事赋值） $(..).removeAttr() ##删除属性 $(..).prop ###专门用于checkbox，radio $(..).prop('checked') ##获取选中 $(..).prop('checked',true) ##设置选中 index 属性索引
文档处理:
append 追加值到最后去
preappend 在最前面添加
.after()
.before()
empty() 删除
remove() 删除
clone 克隆
位置：
$(window).scrollTop 获取 $(vindow).scrollTop(100) 设置 position 获取指定标签相对夫标签标签的坐标 $(‘标签’).height ##获取标签的高度，，纯高度、 $(‘标签’).innerHeight() ###获取边框+纯高度
事件：
Dom 三种绑定方式 jQuery $('').click $('.').bind(click,function) $('.').unbind(click,function) $('.c1').on(click,fucntion) $('.c1').off(click,funcntion) $('.').delegate('标签'，‘click’,function()) 添加内容使其具有以前内容的属性 $('.').undelegate('标签'，‘click’,function())
jquery扩展：
$.extend({ 'aa':function(){ return 'aa' } }) var v = $.aa(); alert(v); $.extenf() $.fn.extend() 自执行函数，解决全局变量冲突问题 (function(){ var v = 1; })
js正则
test - 判断字符串是否符合规定的正则
exec - 获取匹配的数字
正则表达式：
/ 正则/;
/b /b 表示中间有空格，全局匹配 在最后加g
分组
m多行匹配（默认就是多行匹配，加上m后，如果出现^$）
浙公网安备 33010602011771号