jQuery是集成了DOM/BOM/JavaScript的类库
版本:
1.x 1.12 //推荐
2.x
3.x
转换:
jquery对象[index] ==> Dom对象
Dom对象 ==> $(Dom对象)
一、查找元素
DOM
繁琐
jQuery:
选择器,直接找到某个或者某类标签
1. id
$('#id')
2. class
<div class='c1'></div> $(".c1")
3. 标签
<div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') // 找到所有的a标签
4. 组合a
<div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') //找到所有的a标签 $('.c2') //找到所有class为c2的标签 $('a,.c2,#i10') //找到所有a标签,所有class为c2的标签,所有id为i10的标签
$('div.c1') //找到所有div标签里class为c1的标签
5. 层级
$('#i10 a') //找到id为i10的子子孙孙里面的a标签
$('#i10>a') //找到id为i10的儿子里面的a标签
6. 基本
:first
$('#i2 a:first') //找到id为i2的子子孙孙里的a标签里的第一个
:last
$('#i2 a:last') //找到id为i2的子子孙孙里的a标签里的最后一个
:eq()
$('#i2 a:eq(1)') //找到id为i2的子子孙孙里的a标签里的index为1的标签
7. 属性
$('[alex]') // 具有alex属性的所有标签 $('[alex="123"]') // alex属性等于123的所有标签 <input type='text'/> <input type='text'/> <input type='file'/> <input type='password'/> $("input[type='text']") // input标签里面type属性等于text的所有标签 $(':text') // 表单选择器,获取input标签里type属性为text的所有标签
实例:
多选,反选,全选
方式一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" id="i1"> <input type="button" value="反选" id="i2"> <input type="button" value="取消" id="i3"> <table id="tb1" border="1"> <thead> <th>选项</th> <th>IP</th> <th>PORT</th> </thead> <tr> <td><input type="checkbox"></td> <td>10.0.1.2</td> <td>22</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.1.2</td> <td>22</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.1.2</td> <td>22</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.1.2</td> <td>22</td> </tr> </table> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function () { $('#tb1 :checkbox').prop('checked',true); //设置id为tb1的所有input标签里type为checkbox的标签被选中 }); $('#i3').click(function () { $('#tb1 :checkbox').prop('checked',false); //设置id为tb1的所有input标签里type为checkbox的标签取消选中 }); $('#i2').click(function () { $('#tb1 :checkbox').each(function () { //对id为tb1的所有input标签里type为checkbox的标签执行each里面的函数 if ($(this).prop('checked')){ //这里的this为DOM对象,用$(this)转为jQuery对象,然后获取当前选中状态。 $(this).prop('checked',false) }else { $(this).prop('checked',true) } }) }); </script> </body> </html>
方式二:
<input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverseAll()"> <input type="button" value="取消" onclick="cancelAll()"> <table id="i1" border="1"> <thead> <tr> <td>选项</td> <td>ip</td> <td>port</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>10.0.1.1</td> <td>22</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.1.1</td> <td>22</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.1.1</td> <td>22</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $('#i1 :checkbox').prop('checked',true) } function cancelAll() { $('#i1 :checkbox').prop('checked',false) } function reverseAll() { $('#i1 :checkbox').each(function () { if(this.checked){ this.checked = false }else { this.checked = true } }) } </script>
筛选
$('#i1').next() $('#i1').nextAll() $('#i1').nextUntil('#ii1') <div> <a>asdf</a> <a>asdf</a> <a id='i1'>asdf</a> <a>asdf</a> <a id='ii1'>asdf</a> <a>asdf</a> </div> $('#i1').prev() #找到i1之前的一个元素 $('#i1').prevAll() #找到i1之前的所有元素 $('#i1').prevUntil('#ii1') #找到i1之前直到ii1的所有元素 $('#i1').parent() #找到i1的父元素 $('#i1').parents() #找到i1的所有祖先元素 $('#i1').parentsUntil() $('#i1').children() #找到i1的孩子元素 $('#i1').siblings() #找到i1的兄弟元素 $('#i1').find() #找到i1的子孙元素 $('li:eq(1)') $('li').eq(1) first() last() hasClass(class) #判断属否存在class
左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .title{ width: 200px; background-color: cornflowerblue; } .hide{ display: none; } .content{ min-height: 50px; } </style> </head> <body> <div> <div class="item"> <div class="title">标题一</div> <div class="content">内容</div> </div> <div class="item"> <div class="title">标题二</div> <div class="content">内容2</div> </div> <div class="item"> <div class="title">标题三</div> <div class="content">内容3</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.title').click(function () { $(this).next().removeClass('hide'); var ii = $(this).parent().siblings().children('.content').addClass('hide'); }) </script> </body> </html>
文本操作
$(..).text() # 获取文本内容 $(..).text(“<a>1</a>”) # 设置文本内容 $(..).html() $(..).html("<a>1</a>") $(..).val() # 获取可以form提交的标签里的值 $(..).val(..) # 设置可以form提交的标签里的值
样式操作
addClass
removeClass
toggleClass //如果有就去除,没有就添加
属性操作:
# 专门用于做自定义属性 $(..).attr('n') #显示属性为n的属性的值 $(..).attr('n','v') #不存在则创建,存在则更改,将属性为n的属性的值改为v $(..).removeAttr('n') #去除标签里的n属性 <input type='checkbox' id='i1' /> # 专门用于chekbox,radio $(..).prop('checked') $(..).prop('checked', true)
$(..).prop('name','myname') //只可以对一些内置的属性进行获取及定义 PS: index 获取索引位置
实例:编辑表单
<!DOCTYPE html> <html lang="en"> <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> <tr> <td target="hostname">1.1.1.14</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> function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); } // 找到点击目标行 $('.edit').click(function () { // 弹出编辑对话框 $('.modal,.shadow').removeClass('hide'); // 找到当前编辑行要编辑的所有元素 $(this).parent().prevAll().each(function () { // 找到当前要编辑的元素的target属性值 var target = $(this).attr('target'); // 找到当前要编辑的元素里的内容 var text = $(this).text(); $('.modal input[name="'+target+'"]').val(text) //经典用法 }) }) </script> </body> </html>
实例:切换菜单,内容也切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ width: 700px; height: 38px; } .menu-item{ line-height: 38px; float: left; } .active{ background-color: darkcyan; } .content{ min-height: 100px; } .hide{ display: none; } </style> </head> <body> <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> <script src="jquery-1.12.4.js"></script> <script> $('.menu').children().click(function () { $(this).addClass('active').siblings().removeClass('active'); var val = $(this).attr('a'); $('.content').children('[b="'+ val +'"]').removeClass('hide').siblings().addClass('hide') }) </script> </body> </html>
文档处理
$(..).append(..) // 添加内容到所有匹配到的标签内部的最后面。 $(..).prepend(..) // 添加内容到所有匹配到的标签内部的最前面。 $(..).after(..) // 添加内容到所有匹配到的标签的后面。 $(..).before(..) // 添加内容到所有匹配到的标签的前面。 $('..').remove(..) //清除所有匹配到的标签 $('..').empty(..) //清除所有匹配到的标签里的内容 $('..').clone() //克隆所有匹配到的标签,得到的结果是jQuery对象
jQuery没有创建标签的功能,需要用DOM进行创建
document.createElement("p") //创建一个p标签
css
$("p").css("color"); // 显示style的color对应的值
$("p").css({ "color": "#ff0011", "background": "blue" }); // 设置style的样式
$("p").css("color","red"); // 设置style的样式
实例:点赞
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ border-bottom: 1px solid black; padding: 50px; } .item{ width: 35px; position: relative; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <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 () { addFunc(this); console.log(1) }); function addFunc(self) { var tag = document.createElement('span'); $(tag).text('+1'); var rigth = 0; var top = 0; var opacity = 1; var fontSize = 15; $(tag).css({'color':'green','position':'absolute','right':rigth+'px','top':top+'px','opacity':opacity,'font-size':fontSize+'px'}); $(self).append(tag); var obj = setInterval(function () { rigth = rigth - 5; top = top - 5; opacity = opacity - 0.1; fontSize = fontSize + 5; $(tag).css({'color':'green','position':'absolute','right':rigth+'px','top':top+'px','opacity':opacity,'font-size':fontSize+'px'}); if(opacity < 0){ clearInterval(obj); console.log($(self)); $(self).children().remove('[style]'); } },100); } </script> </body> </html>
位置
$("div").scrollTop(); // 显示当前div的位置 $("div").scrollTop(300); //设置div显示的位置 $(window).scrollTop(); // 显示当前窗口的位置 $(window).scrollTop(300); //设置当前窗口显示的位置 $("p:last").offset(); // 显示当前元素的 top 和 left 坐标。 $("p:last").offset({ top: 10, left: 30 }); // 设置当前元素的 top 和 left 坐标。 $("p:last").position() // 获取指定标签相对父标签(relative)的坐标 $('.c1').height() // 获取标签的纯高度 $('.c1').innerHeight() // 获取纯高度 + padding*2 $('.c1').outerHeight() // 获取纯高度 + 边框*2 + padding*2 $('.c1').outerHeight(true) // 获取纯高度 + 边框*2 + padding*2 + margin*2
事件
click([[data],fn]) // 触发每一个匹配元素的click事件。 $("p").click( function () { $(this).hide(); }) // 将页面内所有段落点击后隐藏。
on可以对后生成的元素绑定事件。
on(events,[selector],[data],fn) // events:一个或多个事件 $('#i2').on('click','li',function () { var v = $(this).text(); alert(v); })
阻止默认事件发生(a标签,input的submit,这些都会带默认事件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a id="i1" href="http://www.baidu.com">跳转</a> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function () { alert(123); // 先执行绑定事件,再执行默认事件 return false // 阻止默认事件发生 }) </script> </body> </html>
希望查看页面立即执行的操作
$(function () { ... })
验证流程
前端js验证--->后端python验证
表单验证(浏览器级别做一些小处理)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form id="f1" action="http://www.baidu.com" method="GET"> <p><input type="text" name="username" require="true" /></p> <p><input type="password" name="password" require="true" min-len="6" max-len="18" /></p> <p><input type="text" name="phone" require="true" phone="true" /></p> <input type="submit" value="提交" /> </form> <script src="jquery-1.12.4.js"></script> <script> $(function () { checkValidate(); }); function checkValidate() { $('#f1').find(':submit').click(function () { $('#f1').find('span').remove(); var flag = true; $('#f1').find(':text,:password').each(function () { // $(this)代指每一个input标签 // 每一次执行都是一个标签 // 如果有某个标签的某一项不满足,调到下一个标签 var value = $(this).val(); var require = $(this).attr('require'); if(require){ if(value.length == 0){ var n = $(this).attr('name'); var errorTag = document.createElement('span'); errorTag.innerHTML = n + '输入不能为空'; $(this).after(errorTag); flag = false; // return true; // continue跳出当前循环开始下次循环 return false; // break跳出所有循环 } } var minLen = $(this).attr('min-len'); if(minLen){ var valueLen = value.length; var minLen = parseInt(minLen); if(valueLen < minLen){ var n = $(this).attr('name'); var errorTag = document.createElement('span'); errorTag.innerHTML = n + '太短了'; $(this).after(errorTag); flag = false; // return true; // continue return false; // break; } } var phone = $(this).attr('phone'); if(phone){ // value: asdfasdf var re = /^\d+$/; if(!re.test(value)){ var n = $(this).attr('name'); var errorTag = document.createElement('span'); errorTag.innerHTML = n + '格式错误'; $(this).after(errorTag); flag = false; // return true; // continue return false; // break; } } }); return flag; // 判断是否执行默认事件 }) } </script> </body> </html>
jQuery扩展
<script src="jquery-1.12.4.js"></script> <script> $.extend({ // 方式一 'login':function (arg) { return arg } }); var v = $.login(123); // 方式一 console.log(v); $.fn.extend({ // 方式二 'login2':function (arg) { return arg } }); var v2 = $('li').login2(456); //方式二 console.log(v2) </script>
自定义jQuery组件:
plugin1.js
(function (arg) { var status = 1; arg.extend({ // 这里的arg是$ 'login':function (arg2) { return arg2 } }); })($); // 定义一个自执行函数,将jQuery作为参数传进去。
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-1.12.4.js"></script> <script src="plugin1.js"></script> <script> var v = $.login(123); console.log(v); </script> </body> </html>