jQuery
- 是一款基于JS封装的前端框架产品，也是目前最主流的JS框架产品，简化JS原生编程的复杂性
jQuery开发
-
搭建开发环境：引入jQuery的依赖文件
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> -
使用jQuery方式开发DOM编程
- jQuery编程的核心语法：$()
-
jQuery方式获取的对象与原生的DOM对象
function fun(){ //使用js原生方式获取指定的标签对象 var username = document.getElementById("username"); console.log(username); //使用jQuery的方式获取指定的标签对象 var $username = $('#username'); console.log($username); } 原生DOM对象：<input type="text" name="username" id="username"> jQuery对象：w.fn.init [ input#username ] -
原生DOM对象与jQuery对象之间的属性和方法不能相互调用
-
DOM对象和jQuery对象之间的转换
-
DOM —> jQuery：$(DOM对象)
-
jQuery —> DOM：$obj.get(0)
-
-
jQuery的选择器
-
基础选择器
-
ID选择器：$(’#id属性值’)
-
class选择器：$(’.class属性值’)
-
标签选择器：$(‘标签名’)
<script type="text/javascript"> function fun(){ //ID选择器 $('#dv1').css('background-color','orange'); //class选择器 $('.dvd').css('background-color','orange'); //标签选择器 $('div').css('background-color','orange'); } </script>
-
-
层次选择器
-
获取所有的后代：$(selor1 selor2) ，获取到满足selor2选择器的所有selor1的后代，包括孙子元素对象
-
获取直接后代：$(selor1>selor2) ，获取到满足selor2选择器的所有selor1的直接子代，不包括孙子辈
-
获取后续第一个兄弟：$(selor1+selor2)
-
获取后续所有的兄弟：$(selor1~selor2)
<script type="text/javascript"> //层次选择器 function fun1(){ //获取指定标签下所有满足条件的后代，包含孙子辈 console.log($('#dv3 span')); //获取所有满足条件的直接子代 console.log($('#dv3>span')); //获取下一个弟弟标签对象 console.log($('#dv3+div')); //获取后面的所有弟弟对前对象 console.log($('#dv3~div')); } </script> -
-
简单过滤选择器
$(selor:first) 返回数组中第一个标签对象 $(selor:last) 返回数组中最后一个标签对象 $(selor:lt(index)) 返回小于指定下标的对象 $(selor:gt(index)) 返回大于指定下标的对象 $(selor:eq(index)) 返回等于指定下标的对象 $(selor:even) 返回偶数下标的对象 $(selor:odd) 返回奇数下标的对象 $(selor:not(selector)) 返回除了指定选择器外的所有 //简单过滤选择器 function fun1(){ //$('div:first').css('background-color','pink'); //$('div:last').css('background-color','pink'); //$('div:gt(3)').css('background-color','pink'); //$('div:lt(3)').css('background-color','pink'); //$('div:eq(3)').css('background-color','pink'); //$('div:even').css('background-color','pink'); //$('div:odd').css('background-color','pink'); $('div:not("#dv3")').css('background-color','pink'); } -
内容过滤选择器
parent 返回标签体有内容的对象 empty 返回标签体没有内容的对象 contains(内容) 返回包含指定内容的对象 //内容过滤选择器 function fun2(){ //$('div:parent').css('background-color','pink'); //$('div:empty').css('background-color','pink'); $('div:contains("div4")').css('background-color','pink'); } -
可见性选择器
hidden 返回所有隐藏的元素对象
拿到隐藏的对象visible 返回所有可见的元素对象
拿到页面可访问的对象//可见性选择器 function fun3(){ //$(':hidden').css('background-color','pink'); $(':visible').css('background-color','pink'); } -
属性选择器
function fun1(){ //选择所有包含指定属性的标签对象 //console.log($('input[value]')); 一个属性是双引号可以省略 //包含两个class属性的需要加双引号 $('div[class="dv dvd"]').css('background-color','orange'); //选择所有包含指定属性的，满足指定值的标签对象 console.log($('input[value="eat"]')); //属性名为dd的 $('div[name=dd]').css('background-color','orange'); }
jQuery对象数组的遍历
-
for循环遍历：遍历的对象是原生的DOM对象
function fun2(){ var inps = $('input'); /* for(var i=0;i<inps.size();i++){ //高版本好像取消了size方法 for(var i=0;i<inps.length;i++){ console.log(inps.get(i)); //展示的是DOM对象 //console.log($(inps.get(i))); 展示jQuery对象 } */ } -
$obj.each()函数遍历：遍历的对象是原生的DOM对象
function fun2(){ var inps = $('input'); inps.each(function(){ console.log(this); //this为数组中的标签对象，也是DOM对象 }); //可以链式调用 $('div').each(function(){ //this原生的DOM对象 console.log('each遍历：',this); }); } -
使用jQuery编程操作HTML页面结构
-
添加
-
创建标签对象：$(‘直接书写原生的HTML标签语法’)
-
追加到指定的父元素下： p a r e n t O b j . a p p e n d ( parentObj.append( parentObj.append(obj);
function fun(){ //创建一个标签对象 var $sp = $('<span style="color:pink;">Hello</span>'); //添加到父节点下 $('#dv1').append($sp); }
-
-
删除
-
$obj.empty(); 清空标签体内容，包含文本内容和子标签
-
$obj.remove(); 移除当前标签对象
//删除节点 function fun1(){ //清空标签体内容，包含文本内容和子标签 //$('#dv3').empty(); //移除当前标签对象 $('#dv3').remove(); //移除数组中满足指定选择器的标签对象 //$('div').remove('#dv1'); $('span').remove('.sp'); }
-
-
修改
-
操作标签属性
-
获取属性值：$obj.attr(属性名) 或 $obj.prop(属性名)
-
设置属性值：$obj.attr(属性名，值) 或 $obj.prop(属性名，值)
-
o b j . a t t r 是 1.6 版 本 之 前 推 出 ， obj.attr是1.6版本之前推出， obj.attr是1.6版本之前推出，obj.prop是1.6版本之后推出
//操作标签属性 function fun2(){ //获取属性值 //var val = $('#dv1').attr('class'); //var val = $('#dv1').prop('class'); var val = $('#username').prop('name'); console.log(val); //设置属性值，会覆盖之前的 //$('#dv1').attr('class','dv-c'); //$('#username').prop('name','name'); $('#username').prop('type','checkbox'); //通用 console.log($('input[value="male"]').prop('checked')); } -
针对文本输入框的value属性操作简化
-
设置：$obj.val(新值)
-
获取：$inp.val()
//获取 //console.log($('#username').val()); //设置 $('#username').val('yuan');
-
-
操作标签体内容
-
获取
$obj.text(); 操作纯文本内容
$obj.html() 可以获取到html标签以及文本内容 -
设置
$obj.text(内容); 操作纯文本内容
$obj.html(内容); 操作带标签的内容function fun4(){ //获取标签体内容 //console.log($('#dv1').text()); console.log($('#dv1').html()); //设置标签体内容 //$('#dv1').text('<h3>erha</h3>'); //不会解析标签功能 $('#dv1').html('<h3>erha</h3>'); //会解析标签功能 }
-
-
操作class属性值
-
给标签追加class：$obj.addClass(class 名);
-
移除一个class：$obj.removeClass(…);
移除标签所有的class属性值：$obj.removeClass();
移除指定的一个class属性值：$obj.removeClass(class 值)
function fun(){ //给标签添加class属性值，可以添加多个 $('#username').addClass('inp_text1'); $('#username').addClass('inp_text2'); //移除class $('#username').removeClass(); } -
设置CSS样式
-
设置一个CSS样式
o b j . c s s ( ′ 样 式 属 性 名 ′ ， ′ 样 式 属 性 值 ) ; = = obj.css('样式属性名'，'样式属性值); == obj.css(′样式属性名′，′样式属性值);==obj.css( { 样式属性名：样式属性值 } );== JSON方式 -
设置多个CSS样式
o b j . c s s ( ′ 样 式 属 性 名 ′ ， ′ 样 式 属 性 值 ′ ) . c s s ( ′ 样 式 属 性 名 ′ ， ′ 样 式 属 性 值 ′ ) ; = = obj.css('样式属性名'，'样式属性值').css('样式属性名'，'样式属性值'); == obj.css(′样式属性名′，′样式属性值′).css(′样式属性名′，′样式属性值′);==obj.css( { 样式属性名：样式属性值 ，属性名：属性值} );== JSON方式//操作css样式 function fun(){ //设置一个属性，或多个属性 /* $('#dv').css('border','solid 2px red').css('background-color','pink'); $('#dv').css('width','200px'); $('#dv').css('height','50px');*/ //使用JSON方式设置多个样式 $('#dv').css({ 'border':'solid 2px red', 'background-color':'pink', 'width':'200px', 'height':'50px' }); }
-
-
-
-
获取关系元素对象，jQuery自动处理空格节点
-
获取父节点对象：$obj.parent();
-
获取所有祖先节点：$obj.parents();
-
获取所有祖先中指定的一个：$obj.parents(‘选择器’);
-
获取所有孩子节点：$obj.children();
-
获取指定孩子节点：$obj.children(选择器);
-
获取哥哥节点：$obj.prev();
-
获取弟弟节点：$obj.next();
//获取关系节点对象 function fun5(){ //获取直接父节点对象 //console.log($('#password').parent()); //获取所有的祖先 //console.log($('#password').parents()); //获取指定的祖先 //console.log($('#password').parents('body')); //获取所有的后代，不包括孙子辈，jQuery自动处理空格节点 //console.log($('body').children()); //获取指定的后代 //console.log($('body').children('form')); //获取兄弟节点 console.log($('#password').next().next()); }
-
jQuery中事件开发
-
事件开发的方式
-
基于HTML标签书写事件属性方式开发
- 书写HTML标签
- 书写事件属性
- 书写监听函数
- 调用(回调)事件监听函数
-
JS原生编程事件开发
<body> <div> <button type="button" id="btn1">点我</button> <button type="button" id="btn2">点不到</button> </div> <script type="text/javascript"> //JS编程方式开发单击事件 var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); //直接绑定一个匿名回调函数 btn1.onclick = function(){ alert("点中了"); }; //通过指定函数名绑定 function btn2Fun(){ alert('跑不了'); } btn2.onclick = btn2Fun; //绑定事件 //btn2.onclick = btn2Fun();//被调用 </script> -
jQuery的事件绑定：jQuery针对javascript的事件属性都封装了对应的时间函数，函数名都是在原生事件属性上去掉前面的on，如
//jQuery事件绑定 //通过定义匿名回调函数 $('#btn3').click(function(){ alert("jQery事件绑定"); }); //指定一个回调函数名 $('#btn4').click(btn2Fun);
-
-
文档加载完毕执行
-
JS方式的文档加载完毕执行
//body上的onload属性 <body onload="func()"> //JS文档加载完毕 window.onload = function(){ //JS编程实现事件绑定 var btn2 = document.getElementById('btn2'); //btn2.onclick = fun1; btn2.onclick = function(){ alert('btn2匿名函数'); }; //jQuery事件绑定 //$('#btn3').click(fun1); $('#btn3').click(function(){ alert('btn3匿名函数'); }); } -
jQuery方式文档加载完毕执行，使用jQuery开发，习惯性的开发方式是在书写其他代码前，先书写文档加载完毕执行函数
- 标准版
//jQuery实现文档加载完毕执行 $(document).ready(function(){ $('#btn3').click(function(){ alert("jQuery实现文档加载完毕") }) });- 简化版
$(function(){ $('#btn3').click(function(){ alert('简化版'); }) }); -
jQuery中常用事件函数：通过jQuery方式给元素绑定的事件，触发的同时会自动向监听函数中传递当前的元素对象this，是一个DOM对象。
<script type="text/javascript"> //文档加载完毕执行 $(function(){ $('#btn1').dblclick(function(){ console.log(this); alert('双击事件'); }); $('#btn2').mouseover(function(){ console.log(this); alert('挡着我了'); }); $('#btn3').mouseout(function(){ console.log(this); alert('别走'); }); $('#btn4').mousemove(function(){ console.log(this); alert('别动'); }); $('#txt1').keydown(function(){ console.log(this); alert('按下按键'); }); $('#txt2').keyup(function(){ console.log(this); alert('松开按键'); }); $('#txt3').blur(function(){ console.log(this); alert('失去焦点'); }); $('#txt4').focus(function(){ console.log(this); alert('获得焦点'); }); $('#hobby').change(function(){ console.log(this); alert('爱好是'); }); $('#fom').submit(function(){ console.log(this); alert('准备提交'); return false;//返回false可以直接阻止表单提交 }); }); </script> <body> <div style="text-align: center"> <button type="button" id="btn1">双击事件</button> <button type="button" id="btn2">鼠标覆盖事件</button> <button type="button" id="btn3">鼠标移出事件</button> <button type="button" id="btn4">鼠标移动事件</button> <input type="text" id="txt1" placeholder="按下按键事件"></input> <input type="text" id="txt2" placeholder="抬起按键事件"></input> <input type="text" id="txt3" placeholder="失去焦点事件"></input> <input type="text" id="txt4" placeholder="获得焦点事件"></input> <select id="hobby"> <option value="eat">吃饭</option> <option value="sleep">睡觉</option> <option value="hetBee">打豆豆</option> </select> <form action="" method="post" id="fom"> Username:<input type="text"> <input type="submit"> </form> </div> </body> -
事件绑定函数
//文档加载完毕执行 $(function(){ //1.9之后移除，给元素绑定单击事件，同时可指定多个事件监听函数 //$('#btn1').toggle(test1,test2,test3,test4); //绑定鼠标覆盖和移出事件；相当于mouseover和mouseout的组合 $('#btn2').hover(test5,test6); });
-
-
动态事件绑定
-
$obj.live(事件名，function（）{ … }); 可以给动态创建的元素绑定事件
-
$obj.on(…);
-
一个元素绑定一个事件，有当前this对象
参数一：事件名没有JS原生事件属性的on字符
参数二：回调函数$(function () { $('#btn1').on('dblclick',function(){ console.log("双击事件绑定",this); }); $('#btn2').on('mouseover',function(){ console.log("鼠标覆盖事件",this); }); }); -
一个元素绑定多个事件
//一个标签多个事件 $('#btn3').on({ dblclick:function(){ console.log('双击事件',this) }, mouseover:function(){ console.log('鼠标覆盖事件',this) }, mouseout:function(){ console.log('鼠标移出事件',this) } }); -
多个元素绑定一个事件，后面选择器只想对标签对象，必须是前面标签对象的子节点
//给多个标签绑定相同的事件，满足子节点的参数绑定监听事件，必须是子节点 $('#sup_div').on('click','div,p,#btn8',function(){ console.log('事件触发'); }) <div style="text-align: center" id="sup_div"> <div></div> <p>逆行者</p> <button type="button" id="btn8">按钮</button> </div> -
多个元素绑定多个事件
//多个标签绑定多个事件，必须是前面body的子节点 //给满足body下的指定子节点的标签对像，绑定多个事件 $("body").on({ dblclick:function(){ console.log('双击事件',this) }, mouseover:function(){ console.log('鼠标覆盖事件',this) }, mouseout:function(){ console.log('鼠标移出事件',this) } },'div'); -
动态绑定事件，需要基于一个父元素，给他下面指定的子元素绑定动态事件
-
-
动画相关函数
-
三个简单的动画函数
$(function(){ $('#btn2').click(function(){ //隐藏 //$('#dv1').hide(3000);//向左上隐藏，参数为动画时间/毫秒 //$('#dv1').fadeOut();//淡出 $('#dv1').slideUp(3000); //向上压缩 }); $('#btn1').click(function(){ //出现 //$('#dv1').show(3000);//从坐上出现，参数为动画时间/毫秒 //$('#dv1').fadeIn(3000); //淡现 $('#dv1').slideDown(3000); //从上展开 }); }); -
animate动画函数
//自定义动画，支持有限的CSS样式属性，可以控制速度 $('#aniBtn').click(function () { $('#dv3').animate({width: "400", height: "400", fontSize: "96px"}); }); <script type="text/javascript"> //文档加载完毕执行 $(function(){ //滑动函数 var index = 0; function slide(){ index++; $('#dv2').animate({left:-298*index},'slow'); if(index>3){ index=0; //$('#dv2').animate({right:0},0); } } //声明一个定时器 var timer1 = window.setInterval(function(){ slide(); },2000); //第一个参数：css样式，left给的值是相对值 //第二个参数：滑动的时间，slow、fast、毫秒 $('#btn1').click(function(){ $('#dv2').animate({ left:-300 },'slow'); }) }); </script>
jQuery插件使用
-
放大镜插件使用
-
引入插件的功能文件，必须先引入jQuery依赖
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/zoom/jquery.jqzoom-core.js"></script> -
调用插件函数
//文档加载完毕执行 $(function(){ $('#zoom').jqzoom({ zoomWidth:300, zoomHeight:300 }); }); <a href="js/zoom/d2.jpg" id="zoom"> <img src="js/zoom/s2.jpg"> </a>
-
-
日期插件
//文档加载完毕执行 $(function(){ $('#btn').click(function(){ WdatePicker({ readOnly:true, isShowWeek: true //显示现在是当年第几周 }); }); }); <input type="text" class="Wdate" id="btn"> //class是插件中定好的样式，不能更改
正则表达式
-
主要用于对用户输入的内容进行合法性验证
-
JS中使用正则表达式匹配的方法：/ 正则表达式 /. test(目标匹配的内容) 返回值为布尔值 正常匹配返回true，匹配不上返回false
-
正则表达式的书写语法：
-
单个字符匹配：/1$/.test(val); ^代表匹配第一个字符 $匹配最后一个字符
//文档加载完毕执行 $(function(){ $('#txt').keyup(function(){ //获取输入的内容 var val = $(this).val(); //进行正则的匹配验证 //var r = /^[a-z]$/.test(val); var r = /^\w$/.test(val); //相当于[a-zA-Z] //[0-9] console.log(r); }); }); -
匹配多个字符：
[…]{n} 输入的字符只能是n个
[…]{n,}输入的字符至少是n个，最多没有限制
[…]{n,m}输入的字符在n到m个之间，包含边界//精准匹配，只有六位时才为true var r = /^[0-9]{6}$/.test(val); //最少是六位 var r = /^[0-9]{6,}$/.test(val); //6到9位之间 var r = /^[0-9]{6,9}/.test(val); console.log(r); -
特殊个数匹配
[…]? 匹配0个或1个
[…]+ 匹配一个到多个
[…]* 匹配任意个，0个或多个
/./ 匹配任意字符//匹配0个或1个 var r = /^[0-9]?$/.test(val); //匹配一个到多个 var r = /^[0-9]+$/.test(val); //匹配任意个 var r = /^[0-9]*$/.test(val); //匹配任意字符，永远为true var r = /./.test(val) //匹配一个点，点比较特殊 需要转译 var r = /\./.test(val); -
分组匹配
//18到59为true var r = /(^[1][8-9]$)|(^[2-5][0-9]$)/.test(val); //匹配邮箱 var r = /^[a-zA-Z0-9]{6,10}@[a-zA-Z0-9]{2,3}\.[a-z]{2,5}$/.test(val);
-
//一个字符串中是否包含另一个字符串方法
$('#btn').click(function(){
console.log("abcd".indexOf("abd")); //包含为0，否则-1
});
MD5登陆加密
- MD5加密算法
- 相同的字符串加密后的结果一致，不同的字符串加密的结果一定不一致
- 任何长度的字符串，MD5加密后生成的长度都是32位
- MD5是不可逆的加密算法
public static void main(String[] args){
String pwd = "password";
//获取指定的算法加密对象
MessageDigest digest = MessageDigest.getInstance("md5");
//给指定的字符串加密，参数为字节数组
//byte的取值范围为 -128～127
byte[] bs = digest.digest(pwd.getBytes()); //返回十六个元素的字节数组
//把字节数组转成16进制
for(int i=0; i<bs.length; i++){
StringBuilder sbu = new StringBuilder();
//&进行二进制运算特点：相同为1，不同为0
int n = bs[i] & 0xff; //与16进制进行与运算 可以全部变为正数
System.out.println(Integer.toHexString(n)); //把int类型的数转换成16进制
//作是否大于16的判断，一位的十六进制要加0，这样可以做到最后凑齐32为长度
if(n < 16){ //补位，补什么都可以
sbu.append("0")
}
//字符串拼接
sbu.append(Integer.toHexString(n));
}
}
public static void main(String[] args){
//对密码进行加盐(随机数)操作，提高安全性，在用户原始的密码之上，拼接一个随机数
getStringMD5("password")+SecurityCode.getSecurityCode();
//做登陆时，需要使用到盐
//获取用户盐值，使用盐+登陆提交密码进行MD5，得到的结果与用户的实际密码信息对比
}
- 工具类的使用
//str在登陆过程中需要加密的密码
public static String getStringMD5(String str){
}
//工具类的使用
public static void main(String[] args){
//此时md5即为加密过的结果
String md5 = getStringMD5("密码");
}
匹配条件 ↩︎
扫一扫
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
