网站建设 教材,iis默认网站属性,计算机电子商务主要学什么,专业网站优化排名jQuery jQuery的思想#xff0c;实际上很简单#xff0c;八个字可以概括#xff1a;选取元素#xff0c;对其操作。 元素选取的表达式遵循 CSS 以及 XPath 的标准。选取结果可以是一个或多个#xff0c;后面的操作针对所有被选取的元素。多个连续的操作可以用“链式”实现… jQuery jQuery的思想实际上很简单八个字可以概括选取元素对其操作。 元素选取的表达式遵循 CSS 以及 XPath 的标准。选取结果可以是一个或多个后面的操作针对所有被选取的元素。多个连续的操作可以用“链式”实现 当然jQuery 还包装一些通用的功能比如 Ajax。 jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互能够极大地简化JavaScript编程。它的宗旨就是“Write less, do more.“jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便比如要找到某个DOM对象的相邻元素JS可能要写好几行代码而jQuery一行代码就搞定了再比如要将一个表格的隔行变色jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码并且代码的可读性也比js要强。Ajax操作支持。jQuery简化了AJAX操作后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件例如树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件并且用jQuery插件做出来的效果很炫并且可以根据自己需要去改写和封装插件简单实用。jQuery内容 选择器筛选器样式操作文本操作属性操作文档处理事件动画效果插件each、data、Ajax下载链接jQuery官网 中文文档jQuery AP中文文档 jQuery版本 1.x兼容IE678,使用最为广泛的官方只做BUG维护功能不再新增。因此一般项目来说使用1.x版本就可以了最终版本1.12.4 (2016年5月20日)2.x不兼容IE678很少有人使用官方只做BUG维护功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x最终版本2.2.4 (2016年5月20日)3.x不兼容IE678只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。维护IE678是一件让人头疼的事情一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少PC端用户已经逐步被移动端用户所取代如果没有特殊要求的话一般都会选择放弃对678的支持。 jQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象那么它就可以使用jQuery里的方法例如$(“#i1”).html()。 $(#i1).html()的意思是获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于 document.getElementById(i1).innerHTML; 虽然 jQuery对象是包装 DOM对象后产生的但是 jQuery对象无法使用 DOM对象的任何方法同理 DOM对象也没不能使用 jQuery里的方法。 一个约定我们在声明一个jQuery对象变量的时候在变量名前面加上$ var $variable jQuery对象
var variable DOM对象
$variable[0]//jQuery对象转成DOM对象 拿上面那个例子举例jQuery对象和DOM对象的使用 $(#i1).html();//jQuery对象可以使用jQuery的方法
$(#i1)[0].innerHTML;// DOM对象使用DOM的方法 jQuery基础语法 $(selector).action() 查找标签 基本选择器 id选择器 $(#id) 标签选择器 $(tagName) class选择器 $(.className) 配合使用 $(div.c1) 所有元素选择器 $(*) 组合选择器 $(#id, .className, tagName) 层级选择器 x和y可以为任意选择器 $(x y);// x的所有后代y (子子孙孙)
$(x y);// x的所有儿子y (儿子)
$(x y);// 找到所有紧挨在x后面的y
$(x ~ y);// x之后的所有的兄弟y 基本筛选器 :first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素从 0 开始计数
:odd // 匹配所有索引值为奇数的元素从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 例子 $(div:has(h1))// 找到所有后代中有h1标签的div标签
$(div:has(.c1))// 找到所有后代中有c1样式类的div标签
$(li:not(.c1))// 找到所有不包含c1样式类的li标签
$(li:not(:has(a)))// 找到所有后代中不含a标签的li标签 练习 自定义模态框使用jQuery实现弹出和隐藏功能。 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title自定义模态框/titlestyle.cover {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: darkgrey;z-index: 999;}.modal {width: 600px;height: 400px;background-color: white;position: fixed;left: 50%;top: 50%;margin-left: -300px;margin-top: -200px;z-index: 1000;}.hide {display: none;}/style
/head
body
input typebutton value弹 idi0div classcover hide/div
div classmodal hidelabel fori1姓名/labelinput idi1 typetextlabel fori2爱好/labelinput idi2 typetextinput typebutton idi3 value关闭
/div
script srchttps://cdn.bootcss.com/jquery/3.2.1/jquery.min.js/script
scriptvar tButton $(#i0)[0];tButton.onclickfunction () {var coverEle $(.cover)[0];var modalEle $(.modal)[0];$(coverEle).removeClass(hide);$(modalEle).removeClass(hide);};var cButton $(#i3)[0];cButton.onclickfunction () {var coverEle $(.cover)[0];var modalEle $(.modal)[0];$(coverEle).addClass(hide);$(modalEle).addClass(hide);}
/script
/body
/html jQuery版自定义模态框 属性选择器 [attribute]
[attributevalue]// 属性等于
[attribute!value]// 属性不等于 例子 // 示例
input typetext
input typepassword
input typecheckbox
$(input[typecheckbox]);// 取到checkbox类型的input标签
$(input[type!text]);// 取到类型不是text的input标签 表单筛选器 :text
:password
:file
:radio
:checkbox:submit
:reset
:button 例子 $(:checkbox) // 找到所有的checkbox 表单对象属性: :enabled
:disabled
:checked
:selected 例子 找到可用的input标签 forminput nameemail disableddisabled /input nameid /
/form$(input:enabled) // 找到可用的input标签 找到被选中的option select ids1option valuebeijing北京市/optionoption valueshanghai上海市/optionoption selected valueguangzhou广州市/optionoption valueshenzhen深圳市/option
/select$(:selected) // 找到所有被选中的option 筛选器方法 下一个元素 $(#id).next()
$(#id).nextAll()
$(#id).nextUntil(#i2) 上一个元素 $(#id).prev()
$(#id).prevAll()
$(#id).prevUntil(#i2) 父亲元素 $(#id).parent()
$(#id).parents() // 查找当前元素的所有的父辈元素
$(#id).parentsUntil() // 查找当前元素的所有的父辈元素直到遇到匹配的那个元素为止。 儿子和兄弟元素 $(#id).children();// 儿子们
$(#id).siblings();// 兄弟们 查找 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 $(div).find(p) 等价于$(div p) 筛选 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。 $(div).filter(.c1) // 从结果集中过滤出有c1样式类的 等价于 $(div.c1) 补充 .first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素 示例左侧菜单 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title左侧菜单示例/titlestyle.left {position: fixed;left: 0;top: 0;width: 20%;height: 100%;background-color: rgb(47, 53, 61);}.right {width: 80%;height: 100%;}.menu {color: white;}.title {text-align: center;padding: 10px 15px;border-bottom: 1px solid #23282e;}.items {background-color: #181c20;}.item {padding: 5px 10px;border-bottom: 1px solid #23282e;}.hide {display: none;}/style
/head
bodydiv classleftdiv classmenudiv classitemdiv classtitle菜单一/divdiv classitemsdiv classitem111/divdiv classitem222/divdiv classitem333/div/div/divdiv classitemdiv classtitle菜单二/divdiv classitems hidediv classitem111/divdiv classitem222/divdiv classitem333/div/div/divdiv classitemdiv classtitle菜单三/divdiv classitems hidediv classitem111/divdiv classitem222/divdiv classitem333/div/div/div/div
/div
div classright/div
script srchttps://cdn.bootcss.com/jquery/3.2.1/jquery.min.js/scriptscript$(.title).click(function (){ // jQuery绑定事件// 隐藏所有class里有.items的标签// $(.items).addClass(hide); //批量操作// $(this).next().removeClass(hide);// jQuery链式操作$(this).next().removeClass(hide).parent().siblings().find(.items).addClass(hide)});
/script 左侧菜单栏 操作标签 样式操作 样式类 addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名如果有就移除如果没有就添加。 示例开关灯和模态框 CSS css(color,red)//DOM操作tag.style.colorred 示例 $(p).css(color, red); //将所有p标签的字体设置为红色 位置操作 offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移 .offset()方法允许我们检索一个元素相对于文档document的当前位置。 和 .position()的差别在于 .position()是相对于相对于父级元素的位移。 示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title位置相关示例之返回顶部/titlestyle.c1 {width: 100px;height: 200px;background-color: red;}.c2 {height: 50px;width: 50px;position: fixed;bottom: 15px;right: 15px;background-color: #2b669a;}.hide {display: none;}.c3 {height: 100px;}/style
/head
body
button idb1 classbtn btn-default点我/button
div classc1/div
div classc31/div
div classc32/div
div classc33/div
div classc34/div
div classc35/div
div classc36/div
div classc37/div
div classc38/div
div classc39/div
div classc310/div
div classc311/div
div classc312/div
div classc313/div
div classc314/div
div classc315/div
div classc316/div
div classc317/div
div classc318/div
div classc319/div
div classc320/div
div classc321/div
div classc322/div
div classc323/div
div classc324/div
div classc325/div
div classc326/div
div classc327/div
div classc328/div
div classc329/div
div classc330/div
div classc331/div
div classc332/div
div classc333/div
div classc334/div
div classc335/div
div classc336/div
div classc337/div
div classc338/div
div classc339/div
div classc340/div
div classc341/div
div classc342/div
div classc343/div
div classc344/div
div classc345/div
div classc346/div
div classc347/div
div classc348/div
div classc349/div
div classc350/div
div classc351/div
div classc352/div
div classc353/div
div classc354/div
div classc355/div
div classc356/div
div classc357/div
div classc358/div
div classc359/div
div classc360/div
div classc361/div
div classc362/div
div classc363/div
div classc364/div
div classc365/div
div classc366/div
div classc367/div
div classc368/div
div classc369/div
div classc370/div
div classc371/div
div classc372/div
div classc373/div
div classc374/div
div classc375/div
div classc376/div
div classc377/div
div classc378/div
div classc379/div
div classc380/div
div classc381/div
div classc382/div
div classc383/div
div classc384/div
div classc385/div
div classc386/div
div classc387/div
div classc388/div
div classc389/div
div classc390/div
div classc391/div
div classc392/div
div classc393/div
div classc394/div
div classc395/div
div classc396/div
div classc397/div
div classc398/div
div classc399/div
div classc3100/divbutton idb2 classbtn btn-default c2 hide返回顶部/button
script srcjquery-3.2.1.min.js/script
script$(#b1).on(click, function () {$(.c1).offset({left: 200, top:200});});$(window).scroll(function () {if ($(window).scrollTop() 100) {$(#b2).removeClass(hide);}else {$(#b2).addClass(hide);}});$(#b2).on(click, function () {$(window).scrollTop(0);})
/script
/body
/html 返回顶部示例 尺寸 height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth() 文本操作 HTML代码 html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容 文本值 text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容 值 val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值 例如 input typecheckbox valuebasketball namehobby篮球
input typecheckbox valuefootball namehobby足球select multiple ids1option value11/optionoption value22/optionoption value33/option
/select 设置值 $([namehobby]).val([basketball, football]);
$(#s1).val([1, 2]) 示例 获取被选中的checkbox或radio的值 label forc1女/label
input namegender idc1 typeradio value0
label forc2男/label
input namegender idc2 typeradio value1 可以使用 $(input[namegender]:checked).val() !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title文本操作之登录验证/titlestyle.error {color: red;}/style
/head
bodyform actiondivlabel forinput-name用户名/labelinput typetext idinput-name namenamespan classerror/span/divdivlabel forinput-password密码/labelinput typepassword idinput-password namepasswordspan classerror/span/divdivinput typebutton idbtn value提交/div
/form
script srchttps://cdn.bootcss.com/jquery/3.2.1/jquery.min.js/script
script$(#btn).click(function () {var username $(#input-name).val();var password $(#input-password).val();if (username.length 0) {$(#input-name).siblings(.error).text(用户名不能为空);}if (password.length 0) {$(#input-password).siblings(.error).text(密码不能为空);}})
/script
/body
/html 自定义登录校验示例 属性操作 用于ID等或自定义属性 attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性 用于checkbox和radio prop() // 获取属性
removeProp() // 移除属性 注意 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug在3.x版本的jQuery中则没有这个问题。为了兼容性我们在处理checkbox和radio的时候尽量使用特定的prop()不要使用attr(checked, checked)。 input typecheckbox value1
input typeradio value2
script$(:checkbox[value1]).prop(checked, true);$(:radio[value2]).prop(checked, true);
/script prop和attr的区别 attr全称attribute(属性) prop全称property(属性) 虽然都是属性但他们所指的属性并不相同attr所指的属性是HTML标签属性而prop所指的是DOM对象属性可以认为attr是显式的而prop是隐式的。 举个例子 input typecheckbox idi1 value1 针对上面的代码 $(#i1).attr(checked) // undefined
$(#i1).prop(checked) // false 可以看到attr获取一个标签内没有的东西会得到undefined而prop获取的是这个DOM对象的属性因此checked为false。 如果换成下面的代码 input typecheckbox checked idi1 value1 再执行 $(#i1).attr(checked) // checked
$(#i1).prop(checked) // true 这已经可以证明attr的局限性它的作用范围只限于HTML标签内的属性而prop获取的是这个DOM对象的属性选中返回true没选中返回false。 接下来再看一下针对自定义属性attr和prop又有什么区别 input typecheckbox checked idi1 value1 me自定义属性 执行以下代码 $(#i1).attr(me) // 自定义属性
$(#i1).prop(me) // undefined 可以看到prop不支持获取标签的自定义属性。 总结一下 对于标签上有的能看到的属性和自定义属性都用attr对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。 练习题全选、反选、取消 文档处理 添加到指定元素内部的后面 $(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B 添加到指定元素内部的前面 $(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B 添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面 添加到指定元素外部的前面 $(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面 移除和清空元素 remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。 例子 点击按钮在表格添加一行数据。 点击每一行的删除按钮删除当前行数据。 替换 replaceWith()repalceAll() 克隆 clone()// 参数 克隆示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title克隆/titlestyle#b1 {background-color: deeppink;padding: 5px;color: white;margin: 5px;}#b2 {background-color: dodgerblue;padding: 5px;color: white;margin: 5px;}/style
/head
bodybutton idb1屠龙宝刀点击就送/button
hr
button idb2屠龙宝刀点击就送/buttonscript srcjquery-3.2.1.min.js/script
script// clone方法不加参数true克隆标签但不克隆标签带的事件$(#b1).on(click, function () {$(this).clone().insertAfter(this);});// clone方法加参数true克隆标签并且克隆标签带的事件$(#b2).on(click, function () {$(this).clone(true).insertAfter(this);});
/script
/body
/html 点击复制按钮 事件 常用事件 click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...}) keydown和keyup事件组合示例 !DOCTYPE html
html langzh-CN
headmeta http-equivcontent-Type charsetUTF-8meta http-equivx-ua-compatible contentIEedgetitleTitle/title
/head
bodytable border1theadtrth#/thth姓名/thth操作/th/tr/theadtbodytrtdinput typecheckbox/tdtdEgon/tdtdselectoption value1上线/optionoption value2下线/optionoption value3停职/option/select/td/trtrtdinput typecheckbox/tdtdAlex/tdtdselectoption value1上线/optionoption value2下线/optionoption value3停职/option/select/td/trtrtdinput typecheckbox/tdtdYuan/tdtdselectoption value1上线/optionoption value2下线/optionoption value3停职/option/select/td/trtrtdinput typecheckbox/tdtdEvaJ/tdtdselectoption value1上线/optionoption value2下线/optionoption value3停职/option/select/td/trtrtdinput typecheckbox/tdtdGold/tdtdselectoption value1上线/optionoption value2下线/optionoption value3停职/option/select/td/tr/tbody
/tableinput typebutton idb1 value全选
input typebutton idb2 value取消
input typebutton idb3 value反选script srcjquery-3.3.1.js/script
scriptvar flag false;// shift按键被按下的时候$(window).keydown(function (event) {console.log(event.keyCode);if (event.keyCode 16){flag true;}});// shift按键被抬起的时候$(window).keyup(function (event) {console.log(event.keyCode);if (event.keyCode 16){flag false;}});// select标签的值发生变化的时候$(select).change(function (event) {// 如果shift按键被按下就进入批量编辑模式// shift按键对应的code是16// 判断当前select这一行是否被选中console.log($(this).parent().siblings().first().find(:checkbox));var isChecked $(this).parent().siblings().first().find(:checkbox).prop(checked);console.log(isChecked);if (flag isChecked) {// 进入批量编辑模式// 1. 取到当前select选中的值var value $(this).val();// 2. 给其他被选中行的select设置成和我一样的值// 2.1 找到那些被选中行的selectvar $select $(input:checked).parent().parent().find(select)// 2.2 给选中的select赋值$select.val(value);}});
/script
/body
/html 按住shift实现批量操作 hover事件示例 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
p苍茫的天涯是我的哎绵绵的青山脚下一片海/pscript srcjQuery-3.3.1.js
/script
script$(p).hover(function () {alert(来啦老弟)},function () {alert(慢走哦)})
/script
/body
/html hover事件 实时监听input输入值变化示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title实时监听input输入值变化/title
/head
body
input typetext idi1script srcjquery-3.2.1.min.js/script
script/** oninput是HTML5的标准事件* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化* 在内容修改后立即被触发不像onchange事件需要失去焦点才触发* oninput事件在IE9以下版本不支持需要使用IE特有的onpropertychange事件替代* 使用jQuery库的话直接使用on同时绑定这两个事件即可。* */$(#i1).on(input propertychange, function () {alert($(this).val());})
/script
/body
/html input值变化事件 事件绑定 .on( events [, selector ],function(){})events 事件selector: 选择器可选的function: 事件处理函数移除事件 .off( events [, selector ][,function(){}])off() 方法移除用 .on()绑定的事件处理程序。 events 事件selector: 选择器可选的function: 事件处理函数阻止后续事件执行 return false; // 常见阻止表单提交等e.preventDefault(); !DOCTYPE html
html langen
headmeta charsetUTF-8title阻止默认事件/title
/head
bodyform actionbutton idb1点我/button
/formscript srcjquery-3.3.1.min.js/script
script$(#b1).click(function (e) {alert(123);//return false;e.preventDefault();});
/script
/body
/html 注意 像click、keydown等DOM中定义的事件我们都可以使用.on()方法来绑定事件但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。 想使用事件委托的方式绑定hover事件处理函数可以参照如下代码分两步绑定事件 $(ul).on(mouseenter, li, function() {//绑定鼠标进入事件$(this).addClass(hover);
});
$(ul).on(mouseleave, li, function() {//绑定鼠标划出事件$(this).removeClass(hover);
}); 阻止事件冒泡 !DOCTYPE html
html langen
headmeta charsetUTF-8title阻止事件冒泡/title
/head
body
divpspan点我/span/p
/div
script srcjquery-3.3.1.min.js/script
script$(span).click(function (e) {alert(span);e.stopPropagation();});$(p).click(function () {alert(p);});$(div).click(function () {alert(div);})
/script
/body
/html 页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数因为它可以极大地提高web应用程序的响应速度。 两种写法 $(document).ready(function(){
// 在这里写你的JS代码...
}) 简写 $(function(){
// 你在这里写你的代码
}) 文档加载完绑定事件并且阻止默认事件发生 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title登录注册示例/titlestyle.error {color: red;}/style
/head
bodyform idmyFormlabel forname姓名/labelinput typetext idnamespan classerror/spanlabel forpasswd密码/labelinput typepassword idpasswdspan classerror/spaninput typesubmit idmodal-submit value登录
/formscript srcjquery-3.2.1.min.js/script
script srcs7validate.js/script
scriptfunction myValidation() {// 多次用到的jQuery对象存储到一个变量避免重复查询文档树var $myForm $(#myForm);$myForm.find(:submit).on(click, function () {// 定义一个标志位记录表单填写是否正常var flag true;$myForm.find(:text, :password).each(function () {var val $(this).val();if (val.length 0 ){var labelName $(this).prev(label).text();$(this).next(span).text(labelName 不能为空);flag false;}});// 表单填写有误就会返回false阻止submit按钮默认的提交表单事件return flag;});// input输入框获取焦点后移除之前的错误提示信息$myForm.find(input[type!submit]).on(focus, function () {$(this).next(.error).text();})}// 文档树就绪后执行$(document).ready(function () {myValidation();});
/script
/body
/html 登录校验示例 与window.onload的区别 window.onload()函数有覆盖现象必须等待着图片资源加载完成之后才能调用jQuery的这个入口函数没有函数覆盖现象文档加载完成之后就可以调用建议使用此函数事件委托 事件委托是通过事件冒泡的原理利用父标签去捕获子标签的事件。 示例 表格中每一行的编辑和删除按钮都能触发相应的事件。 $(table).on(click, .delete, function () {// 删除按钮绑定的事件
}) 动画效果 // 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
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]) 自定义动画示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title点赞动画示例/titlestylediv {position: relative;display: inline-block;}divi {display: inline-block;color: red;position: absolute;right: -16px;top: -5px;opacity: 1;}/style
/head
bodydiv idd1点赞/div
script srcjquery-3.2.1.min.js/script
script$(#d1).on(click, function () {var newI document.createElement(i);newI.innerText 1;$(this).append(newI);$(this).children(i).animate({opacity: 0}, 1000)})
/script
/body
/html 点赞特效简单示例 补充 each jQuery.each(collection, callback(indexInArray, valueOfElement)) 描述一个通用的迭代函数它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性如一个函数的参数对象来迭代数字索引从0到length - 1。其他对象通过其属性名进行迭代。 li [10,20,30,40]
$.each(li,function(i, v){console.log(i, v);//index是索引ele是每次循环的具体元素。
}) 输出 010120230340 .each(function(index, Element)) 描述遍历一个jQuery对象为每个匹配元素执行一个函数。 .each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的所以关键字 this 总是指向这个元素。 // 为每一个li标签添加foo
$(li).each(function(){$(this).addClass(c1);
}); 注意: jQuery的方法返回一个jQuery对象遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时它通常不需要显式地循环的 .each()方法 也就是说上面的例子没有必要使用each()方法直接像下面这样写就可以了 $(li).addClass(c1); // 对所有标签做统一操作 注意 在遍历过程中可以使用 return false提前结束each循环。 终止each循环 return false 伏笔... .data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 .data(key, value): 描述在匹配的元素上存储任意相关数据。 $(div).data(k,100);//给所有div标签都保存一个名为k值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。 $(div).data(k);//返回第一个div标签中保存的k的值 .removeData(key): 描述移除存放在元素上的数据不加key参数表示移除所有保存的数据。 $(div).removeData(k); //移除元素上存放k对应的数据 示例 模态框编辑的数据回填表格 插件(了解即可) jQuery.extend(object) jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。 示例 script
jQuery.extend({min:function(a, b){return a b ? a : b;},max:function(a, b){return a b ? a : b;}
});
jQuery.min(2,3);// 2
jQuery.max(4,5);// 5
/script jQuery.fn.extend(object) 一个对象的内容合并到jQuery的原型以提供新的jQuery实例方法。 scriptjQuery.fn.extend({check:function(){return this.each(function(){this.checked true;});},uncheck:function(){return this.each(function(){this.checked false;});}});
// jQuery对象可以使用新添加的check()方法了。
$(input[typecheckbox]).check();
/script 单独写在文件中的扩展 (function(jq){jq.extend({funcName:function(){...},});
})(jQuery); 例子 自定义的jQuery登录验证插件 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title登录校验示例/titlestyle.login-form {margin: 100px auto 0;max-width: 330px;}.login-form div {margin: 15px 0;}.error {color: red;}/style
/head
bodydivform action classlogin-form novalidatedivlabel forusername姓名/labelinput idusername typetext namename required autocompleteoffspan classerror/span/divdivlabel forpasswd密码/labelinput idpasswd typepassword namepassword required autocompleteoffspan classerror/span/divdivlabel formobile手机/labelinput idmobile typetext namemobile required autocompleteoffspan classerror/span/divdivlabel forwhere来自/labelinput idwhere typetext namewhere autocompleteoffspan classerror/span/divdivinput typesubmit value登录/div/form
/divscript srchttps://cdn.bootcss.com/jquery/3.2.1/jquery.min.js/script
script srcvalidate.js/script
script$.validate();
/script
/body
/html HTML文件 use strict;
(function ($) {function check() {// 定义一个标志位表示验证通过还是验证不通过var flag true;var errMsg;// 校验规则$(form input[type!:submit]).each(function () {var labelName $(this).prev().text();var inputName $(this).attr(name);var inputValue $(this).val();if ($(this).attr(required)) {// 如果是必填项if (inputValue.length 0) {// 值为空errMsg labelName 不能为空;$(this).next().text(errMsg);flag false;return false;}// 如果是密码类型我们就要判断密码的长度是否大于6位if (inputName password) {// 除了上面判断为不为空还要判断密码长度是否大于6位if (inputValue.length 6) {errMsg labelName 必须大于6位;$(this).next().text(errMsg);flag false;return false;}}// 如果是手机类型我们需要判断手机的格式是否正确if (inputName mobile) {// 使用正则表达式校验inputValue是否为正确的手机号码if (!/^1[345678]\d{9}$/.test(inputValue)) {// 不是有效的手机号码格式errMsg labelName 格式不正确;$(this).next().text(errMsg);flag false;return false;}}}});return flag;}function clearError(arg) {// 清空之前的错误提示$(arg).next().text();}// 上面都是我定义的工具函数$.extend({validate: function () {$(form :submit).on(click, function () {return check();});$(form :input[type!submit]).on(focus, function () {clearError(this);});}});
})(jQuery); JS文件 传参版插件 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title登录校验示例/titlestyle.login-form {margin: 100px auto 0;max-width: 330px;}.login-form div {margin: 15px 0;}.error {color: red;}/style
/head
bodydivform action classlogin-form novalidatedivlabel forusername姓名/labelinput idusername typetext namename required autocompleteoffspan classerror/span/divdivlabel forpasswd密码/labelinput idpasswd typepassword namepassword required autocompleteoffspan classerror/span/divdivlabel formobile手机/labelinput idmobile typetext namemobile required autocompleteoffspan classerror/span/divdivlabel forwhere来自/labelinput idwhere typetext namewhere autocompleteoffspan classerror/span/divdivinput typesubmit value登录/div/form
/divscript srchttps://cdn.bootcss.com/jquery/3.2.1/jquery.min.js/script
script srcvalidate3.js/script
script$.validate({name:{required: true}, password: {required: true, minLength: 8}, mobile: {required: true}});
/script
/body
/html HTML文件 use strict;
(function ($) {function check(arg) {// 定义一个标志位表示验证通过还是验证不通过var flag true;var errMsg;// 校验规则$(form input[type!:submit]).each(function () {var labelName $(this).prev().text();var inputName $(this).attr(name);var inputValue $(this).val();if (arg[inputName].required) {// 如果是必填项if (inputValue.length 0) {// 值为空errMsg labelName 不能为空;$(this).next().text(errMsg);flag false;return false;}// 如果是密码类型我们就要判断密码的长度是否大于6位if (inputName password) {// 除了上面判断为不为空还要判断密码长度是否大于6位if (inputValue.length arg[inputName].minLength) {errMsg labelName 必须大于arg[inputName].minLength位;$(this).next().text(errMsg);flag false;return false;}}// 如果是手机类型我们需要判断手机的格式是否正确if (inputName mobile) {// 使用正则表达式校验inputValue是否为正确的手机号码if (!/^1[345678]\d{9}$/.test(inputValue)) {// 不是有效的手机号码格式errMsg labelName 格式不正确;$(this).next().text(errMsg);flag false;return false;}}}});return flag;}function clearError(arg) {// 清空之前的错误提示$(arg).next().text();}// 上面都是我定义的工具函数$.extend({validate: function (arg) {$(form :submit).on(click, function () {return check(arg);});$(form :input[type!submit]).on(focus, function () {clearError( JS文件 课后习题 登录验证左侧菜单表格-增、删、改、查http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html 转载于:https://www.cnblogs.com/Ryan-Yuan/p/11492934.html
