学做网站最好的网站,宁波seo行者seo09,企业营销推广策划,如何让自己做的网站让别人看到jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计#xff0c;全世界排名前100万的网站#xff0c;有46%使用jQuery#xff0c;远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列#xff0c;1.x系列兼容低版本…jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计全世界排名前100万的网站有46%使用jQuery远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列1.x系列兼容低版本的浏览器2.x、3.x系列放弃支持低版本浏览器目前使用最多的是1.x系列的。
jquery是一个函数库一个js文件页面用script标签引入这个js文件就可以使用。
script typetext/javascript srcjs/jquery-1.12.2.js/scriptjquery的口号和愿望 Write Less, Do More写得少做得多
1、http://jquery.com/ 官方网站 2、https://code.jquery.com/ 版本下载
jquery文档加载完再执行
将获取元素的语句写到页面头部会因为元素还没有加载而出错jquery提供了ready方法解决这个问题它的速度比原生的 window.onload 更快。
script typetext/javascript$(document).ready(function(){......});可以简写为
script typetext/javascript$(function(){......});/script示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscriptwindow.onload function(){var oDiv document.getElementById(div01);alert(原生javascript获取div;oDiv); //原生javascript获取div;[object HTMLDivElement]}//这个会先执行// $(document).ready(function(){// var $div $(#div01);// alert(jquery获取的div:$div); //jquery获取的div:[object Object]// })// 上面ready的写法可以简写成下面的形式$(function(){var $div $(#div01);alert(jquery1获取的div:$div); //jquery获取的div:[object Object]})/script
/head
bodydiv iddiv01这是一个div/div
/body
/htmljquery选择器
jquery用法思想一 选择某个网页元素然后对它进行某种操作
jquery选择器 jquery选择器可以快速地选择元素选择规则和css样式相同使用length属性判断是否选择成功。
$(#myId) //选择id为myId的网页元素
$(.myClass) // 选择class为myClass的元素
$(li) //选择所有的li元素
$(#ul1 li span) //选择id为为ul1元素下的所有li下的span元素
$(input[namefirst]) // 选择name属性等于first的input元素对选择集进行过滤
$(div).has(p); // 选择包含p元素的div元素
$(div).not(.myClass); //选择class不等于myClass的div元素
$(div).eq(5); //选择第6个div元素示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){//id选择器var $div $(#div01);//类选择器var $div2 $(.box);// 选择所有的li元素标签选择器var $li $(li);//层级选择器var $span $(.box span);//属性选择器var $div3 $(div[classbox2]);//选择包含span标签的divvar $div4 $(div).has(span);//选择class并不是box2的divvar $div5 $(div).not(.box2);// 选择第4个livar $li2 $(li).eq(3);//设置样式$div.css({color:red,font-size:30});$div2.css({color:gold,fontSize:30px});$li.css({background:gold,list-style:none});//font-weight加粗$span.css({color:red,font-weight:bold});$div3.css({color:pink,font-size:30});//text-indent 缩进$div4.css({text-indent:50});//text-decoration 下划线$div5.css({text-decoration:underline});$li2.css({text-indent:50});})/script
/head
bodydiv iddiv01这是一个div/divdiv classbox这是第二个spandiv/span/divdiv classbox这是第三个div/divdiv classbox2这是第四个div/divulli列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/li/ul
/body
/html选择集转移
$(#box).prev(); //选择id是box的元素前面紧挨的同辈元素
$(#box).prevAll(); //选择id是box的元素之前所有的同辈元素
$(#box).next(); //选择id是box的元素后面紧挨的同辈元素
$(#box).nextAll(); //选择id是box的元素后面所有的同辈元素
$(#box).parent(); //选择id是box的元素的父元素
$(#box).children(); //选择id是box的元素的所有子元素
$(#box).siblings(); //选择id是box的元素的同级元素
$(#box).find(.myClass); //选择id是box的元素内的class等于myClass的元素示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){//id选择器var $div $(#div01);//$(#box).prev(); //选择id是box的元素前面紧挨的同辈元素$div.prev().css({color:red});//p标签// $(#box).prevAll(); //选择id是box的元素之前所有的同辈元素//text-indent缩进$div.prevAll().css({text-indent:50});// h2 p// $(#box).next(); //选择id是box的元素后面紧挨的同辈元素$div.next().css({color:pink});//h3// $(#box).nextAll(); //选择id是box的元素后面所有的同辈元素$div.nextAll().css({text-indent:30}); // h3 p// $(#box).parent(); //选择id是box的元素的父元素$div.parent().css({background:#ddd}); //父级div// $(#box).children(); //选择id是box的元素的所有子元素$div.children().css({color:red});// $(#box).siblings(); //选择id是box的元素的同级元素$div.siblings().css({text-decoration:underline}); // h2 p h3 p// $(#box).find(.myClass); //选择id是box的元素内的class等于myClass的元素$div.find(.sp02).css({font-size:70});})/script
/head
bodydivh2这是一个h2标题/h2p这是第一个段落标签/pdiv iddiv01这是一个spandiv/spanspan classsp02第二个span/span/divh3这是一个h3标题/h3p这是第二个段落标签/p/div
/body
/html判断是否选择到了元素 jquery有容错机制即使没有找到元素也不会出错可以用length属性来判断是否找到了元素,length等于0就是没选择到元素length大于0就是选择到了元素。
var $div1 $(#div1);
var $div2 $(#div2);
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
div iddiv1这是一个div/divjquery样式操作
jquery用法思想二 同一个函数完成取值和赋值
操作行间样式
// 获取div的样式
$(div).css(width);
$(div).css(color);//设置div的样式
$(div).css(width,30px);
$(div).css(height,30px);
$(div).css({fontSize:30px,color:red});特别注意 选择器获取的多个元素获取信息获取的是第一个比如$(“div”).css(“width”)获取的是第一个div的width。
操作样式类名
$(#div1).addClass(divClass2) //为id为div1的对象追加样式divClass2
$(#div1).removeClass(divClass) //移除id为div1的对象的class名为divClass的样式
$(#div1).removeClass(divClass divClass2) //移除多个样式
$(#div1).toggleClass(anotherClass) //重复切换anotherClass样式示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptstyle.red{color:red;}.big{font-size:30px;}.noline{text-decoration:none;}/stylescript$(function(){var $div $(#div01);var $div2 $(div);var $a $(#link01);//读取样式属性值var sSize $div.css(font-size); //文字大小默认是16px// alert(sSize);//16px//写样式属性也叫设置样式属性// 设置一个样式属性可以不写成字典的形式$div.css(color,red);//font-weight 加粗$div.css({font-size:30,font-weight:bold});//读取多个元素样式属性值得到的是第一个元素的值var sSize2 $div2.css(font-size);// alert(sSize2);//30px//操作样式类名// $(#div1).addClass(divClass2) //为id为div1的对象追加样式divClass2$a.addClass(red);$a.addClass(big);$a.addClass(noline);// $(#div1).removeClass(divClass) //移除id为div1的对象的class名为divClass的样式// $(#div1).removeClass(divClass divClass2) //移除多个样式$a.removeClass(red);$a.removeClass(noline);})/script
/head
bodydiv iddiv01这是一个div/divdiv这是第二个div/diva href# idlink01这是一个链接/a
/body
/html绑定click事件
给元素绑定click事件可以用如下方法
$(#btn1).click(function(){// 内部的this指的是原生对象// 使用jquery对象用 $(this)})获取元素的索引值 有时候需要获得匹配元素相对于其同胞元素的索引位置此时可以用index()方法获取
var $li $(.list li).eq(1);
alert($li.index()); // 弹出1
......
ul classlistli1/lili2/lili4/lili5/lili6/li
/ul示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){var $li $(.list li);//选中八个livar $p $(p);//绑定click事件$li.click(function(){//this表示当前发生的对象他是一个原生js对象 点哪一个就是哪一个是this// this.style.background red; //原生对象//$(this)表示当前发生事件的jquery对象$(this).css(background,gold);//获取当前点击的li的索引值// alert($(this).index());})alert($p.eq(0).index()); //0alert($p.eq(1).index()); //0})/script
/head
bodyul classlistli列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/li/uldivp这是第一个段落/p/divdivp这是第二个段落/p/div
/body
/html选项卡案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle.tab_con{width:500px;height:350px;margin:50px auto 0;}.tab_btns{height:50px;}.tab_btns input{width:100px;height:50px;background:#ddd;border:0px;/* 轮廓 */outline:none;}.tab_btns .active{background:gold;}.tab_cons{height:300px;background:gold;}.tab_cons div{height:300px;line-height:300px;text-align:center;display:none;font-size:30px;}.tab_cons .current{/* 转换位块元素 */display:block;}/stylescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){//选择三个按钮var $btn $(.tab_btns input);// alert($btn.length);//选择三个divvar $div $(.tab_cons div);$btn.click(function(){//addClass当前添加classactive//siblings 反选到兄弟节点上//removeClass 移除class active$(this).addClass(active).siblings().removeClass(active);// alert( $(this).index() );$div.eq($(this).index()).addClass(current).siblings().removeClass(current);})})/script
/headbodydiv classtab_condiv classtab_btnsinput typebutton value按钮一 classactiveinput typebutton value按钮二input typebutton value按钮三/divdiv classtab_consdiv classcurrent按钮一对应的内容/divdiv按钮二对应的内容/divdiv按钮三对应的内容/div/div/div
/body
/htmljquery动画
通过animate方法可以设置元素某属性值上的动画可以设置一个或多个属性值动画执行完成后会执行一个函数。
/*animate参数参数一要改变的样式属性值写成字典的形式参数二动画持续的时间单位为毫秒一般不写单位参数三动画曲线默认为‘swing’缓冲运动还可以设置为‘linear’匀速运动参数四动画回调函数动画完成后执行的匿名函数*/$(#div1).animate({width:300,height:300
},1000,swing,function(){alert(done!);
});示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptstyle.box{width: 200px;height: 200px;background: gold;}/stylescript$(function(){var $btn $(#btn);var $box $(.box);$btn.click(function(){// $box.css({width:1000})// $box.animate({width:1000});/* animate的参数参数一要做动画的样式属性写成字典形式参数二动画持续的时间默认是400毫秒设置时不写单位参数三动画曲线默认是swing,缓冲运动还有linear 匀速运动 可以不写参数四动画的回调函数它是一个匿名函数在动画结束时会自动调用*/// $box.animate({width:1000},1000,swing);// $box.animate({width:1000},1000,swing,function(){// alert(动画完毕);// });$box.animate({width:1000},1000,swing,function(){$box.animate({margin-top:400},1000,function(){$box.animate({width:200,margin-top:0},1000);});});})})//持续动$(function(){var $btn $(#btn);var $box $(.box);$btn.click(function fnMove(){//$box.css({width:1000});// $box.animate({width:1000});/* animate的参数参数一要做动画的样式属性写成字典形式参数二动画持续的时间默认是400毫秒设置时不写单位参数三动画曲线默认是swing,缓冲运动还有linear 匀速运动参数四动画的回调函数它是一个匿名函数在动画结束时会自动调用*/$box.animate({width:1000},1000,swing,function(){ $box.animate({margin-top:400},1000,function(){ $box.animate({width:200,margin-top:0},1000,function(){fnMove();})})}); })})/script/head
bodyinput typebutton value动画 idbtndiv classbox/div
/body
/htmljquery特殊效果
fadeIn() 淡入$btn.click(function(){$(#div1).fadeIn(1000,swing,function(){alert(done!);});});fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 切换元素的可见状态 slideDown() 向下展开 slideUp() 向上卷起 slideToggle() 依次展开或卷起某个元素
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headstyle.box{width: 200px;height: 200px;background: gold;display: none;}/style
script srcjs/jquery-1.12.4.min.js/scriptscript$(function(){var $btn $(#btn);var $box $(.box);$btn.click(function(){//元素显示隐藏效果// hide() 隐藏元素// $box.hide(); //display: none;相当于隐藏// show() 显示元素// $box.show(); //display: block相当于显示// toggle() 切换元素的可见状态// $box.toggle();//元素淡入淡出效果// fadeIn() 淡入// $box.fadeIn(); //先默认隐藏// fadeOut() 淡出// $box.fadeOut(); //先默认是显示// fadeToggle() 切换淡入淡出// $box.fadeToggle();// slideUp() 向上卷起// $box.slideUp();// slideDown() 向下展开// $box.slideDown();// slideToggle() 依次展开或卷起某个元素// $box.slideToggle();//slideToggle特性 解决这个问题stop记录之前的动画全部停止保留最后一次$box.stop().slideToggle();})})
/scriptbodyinput typebutton value动画 idbtndiv classbox/div
/body
/htmljquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象所有jquery对象的方法可以连起来写
$(#div1) // id为div1的元素
.children(ul) //该元素下面的ul子元素
.slideDown(fast) //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children(ul) //这些兄弟元素中的ul子元素
.slideUp(fast); //高度实际高度变换到零来隐藏ul元素层次菜单 示例实现
!DOCTYPE html
html langen
headmeta charsetUTF-8title层级菜单/title style typetext/cssbody{font-family:Microsoft Yahei;}body,ul{margin:0px;padding:0px;}ul{list-style:none;}.menu{width:200px;margin:20px auto 0;}.menu .level1,.menu li ul a{display:block;width:200px;height:30px;line-height:30px;text-decoration:none;background-color:#3366cc;color:#fff;font-size:16px;text-indent:10px; }.menu .level1{border-bottom:1px solid #afc6f6;}.menu li ul a{font-size:14px;text-indent:20px;background-color:#7aa1ef;}.menu li ul li{border-bottom:1px solid #afc6f6;}.menu li ul{display:none;}.menu li ul.current{display:block;}.menu li ul li a:hover{background-color:#f6b544;}/stylescript srcjs/jquery-1.12.4.min.js/scriptscript typetext/javascript$(function(){var $a $(.level1);$a.click(function(){// $(this).next().stop().slideToggle();//parent转移到父级 siblings转移到li$(this).next().stop().slideToggle().parent().siblings().children(ul).slideUp();})})/script
/head
bodyul classmenulia href# classlevel1手机/aul classcurrentlia href#iPhone X 256G/a/lilia href#红米4A 全网通/a/lilia href#HUAWEI Mate10/a/lilia href#vivo X20A 4GB/a/li/ul/lilia href# classlevel1笔记本/aullia href#MacBook Pro/a/lilia href#ThinkPad/a/lilia href#外星人(Alienware)/a/lilia href#惠普(HP)薄锐ENVY/a/li/ul/lilia href# classlevel1电视/aullia href#海信(hisense)/a/lilia href#长虹(CHANGHONG)/a/lilia href#TCL彩电L65E5800A/a/li /ul/lilia href# classlevel1鞋子/aullia href#新百伦/a/lilia href#adidas/a/lilia href#特步/a/lilia href#安踏/a/li/ul/lilia href# classlevel1玩具/aullia href#乐高/a/lilia href#费雪/a/lilia href#铭塔/a/lilia href#贝恩斯/a/li/ul/li/ul
/body
/htmljquery属性操作
1、html() 取出或设置html内容
// 取出html内容var $htm $(#div1).html();// 设置html内容$(#div1).html(span添加文字/span);2、prop() 取出或设置某个属性的值
// 取出图片的地址var $src $(#img1).prop(src);// 设置图片的地址和alt属性$(#img1).prop({src: test.jpg, alt: Test Image });示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){var $a $(#link01);//读取属性值var sId $a.prop(id);// alert(sId);//link01//写属性值也叫做设置属性值$a.prop({href:http://www.baidu.com,title:这是百度的链接});//读取元素包裹的内容var sTr $a.html();// alert(sTr); //这是一个链接//设置元素包裹的内容$a.html(百度网);// 不规范可以这样做$a.html(ulli列表文字/lili列表文字/lili列表文字/li/ul)})/script
/head
bodya href# idlink01这是一个链接/a
/body
/html聊天对话框实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle typetext/css.talk_con{width:600px;height:500px;border:1px solid #666;margin:50px auto 0;background:#f9f9f9;}.talk_show{width:580px;height:420px;border:1px solid #666;background:#fff;margin:10px auto 0;overflow:auto;}.talk_input{width:580px;margin:10px auto 0;}.whotalk{width:80px;height:30px;float:left;outline:none;}.talk_word{width:420px;height:26px;padding:0px;float:left;margin-left:10px;outline:none;text-indent:10px;} .talk_sub{width:56px;height:30px;float:left;margin-left:10px;}.atalk{margin:10px; }.atalk span{display:inline-block;background:#0181cc;border-radius:10px;color:#fff;padding:5px 10px;}.btalk{margin:10px;text-align:right;}.btalk span{display:inline-block;background:#ef8201;border-radius:10px;color:#fff;padding:5px 10px;}/stylescript srcjs/jquery-1.12.4.min.js/scriptscript typetext/javascript // 写出对应功能代码 $(function(){var $words $(#words), $who $(#who),$talkwords $(#talkwords);$talksub $(#talksub);$talksub.click(function(){// // 读取属性值// var sVal01 $who.prop(value); //读取下拉框的值// var sVal02 $talkwords.prop(value); //读取输入框的值// alert(sVal02);// //清除输入框里面的内容// $talkwords.prop({value:});//操作value属性可以改成下面的val方法的写法://读取属性值var sVal01 $who.val();var sVal02 $talkwords.val();//清除输入框里面的内容$talkwords.val();//判断输入框是否为空if(sVal02 ){alert(请输入内容!);return;}//拼接字符串var sTr ;if(sVal010){sTr div classatalkspanA说 sVal02 /span/div;}else{sTr div classbtalkspanB说 sVal02 /span/div;}// alert($words.html());$words.html($words.html()sTr);})})/script
/head
bodydiv classtalk_condiv classtalk_show idwordsdiv classatalkspanA说吃饭了吗/span/divdiv classbtalkspanB说还没呢你呢/span/div/divdiv classtalk_inputselect classwhotalk idwhooption value0A说/optionoption value1B说/option/selectinput typetext classtalk_word idtalkwordsinput typebutton value发送 classtalk_sub idtalksub/div/div
/body
/htmljquery事件
事件函数列表
blur() 元素失去焦点
focus() 元素获得焦点
change() 当表单元素的值发生改变时
click() 鼠标单击
mouseover() 鼠标进入进入子元素也触发
mouseout() 鼠标离开离开子元素也触发
mouseenter() 鼠标进入进入子元素不触发
mouseleave() 鼠标离开离开子元素不触发
ready() DOM加载完成
submit() 用户递交表单示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){var $input $(#input01);var $form $(#from01);// $input.click(function(){// alert($(this).val());// })//绑定失去焦点的事件$input.blur(function(){// alert($(this).val());})$form.submit(function(){// alert(提交了!);//判断数据是否合法//阻止表单提交return false;})})/script
/head
bodyform idfrom01label用户名/labelinput typetext idinput01 nameusernameinput typesubmit value提交/form
/body
/htmlfocus和change事件
change() 当表单元素的值发生改变时和focus() 元素获得焦点–不太理解focus
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){var $input $(#input01);//绑定获取焦点的事件// $input.focus(function(){// console.log(aaaa);// alert( $(this).val() );// })// 在focus上绑定函数会反复触发一般不这么用,可以用click事件代替// focus一般用在让元素起始就获得焦点$input.focus();// 绑定change事件$input.change(function(){console.log( $(this).val() );})})/script
/head
bodyinput typetext idinput01
/body
/htmlmouseover() 鼠标进入进入子元素也触发 mouseout() 鼠标离开离开子元素也触发 mouseenter() 鼠标进入进入子元素不触发 mouseleave() 鼠标离开离开子元素不触发
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width: 200px;height: 200px;background: gold;margin: 50px auto;}.box2{width: 100px;height: 100px;background: green;}/stylescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){var $box $(.box);// //绑定鼠标移入事件// $box.mouseover(function(){// $(this).animate({margin-top:100});// })// //绑定鼠标移出事件// $box.mouseout(function(){// $(this).animate({margin-top:50});// })// 上面的移入移出事件移到子元素也会触发如果不希望触发可以改成下面的形式//绑定鼠标移入事件$box.mouseenter(function(){$(this).animate({margin-top:100});})//绑定鼠标移出事件$box.mouseleave(function(){$(this).animate({margin-top:50});})})/script
/head
bodydiv classboxdiv classbox2/div/div
/body
/html表单验证
1、什么是正则表达式 能让计算机读懂的字符串匹配规则。
2、正则表达式的写法
var renew RegExp(规则, 可选参数);
var re/规则/参数;3、规则中的字符
1普通字符匹配
如/a/ 匹配字符 ‘a’/a,b/ 匹配字符 ‘a,b’2转义字符匹配
\d 匹配一个数字即0-9
\D 匹配一个非数字即除了0-9
\w 匹配一个单词字符字母、数字、下划线
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
. 匹配一个任意字符var sTr01 123456asdf;
var re01 /\d/;//匹配纯数字字符串
var re02 /^\d$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false4、量词对左边的匹配字符定义个数
? 出现零次或一次最多出现一次出现一次或多次至少出现一次
* 出现零次或多次任意次
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾7、修饰参数
g global执行全局匹配查找所有匹配而非在找到第一个匹配后停止
i ingore case忽略大小写默认大小写敏感8、常用方法 test 用法正则.test(字符串) 匹配成功就返回真否则就返回假
正则默认规则 匹配成功就结束不会继续匹配区分大小写
常用正则规则
//用户名验证(数字字母或下划线6到20位)
var reUser /^\w{6,20}$/;//邮箱验证
var reMail /^[a-z0-9][\w\.\-]*[a-z0-9\-](\.[a-z]{2,5}){1,2}$/i;//密码验证
var rePass /^[\w!#$%^*]{6,20}$/;//手机号码验证
var rePhone /^1[34578]\d{9}$/;示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript//定义正则表达式var reTest01 /a/;var reTest02 /a/i; //i 忽略大小写var reTest03 /\d/; //出现1次到多次var reTest04 /^\d$/; //^开头是数字$结尾也是数字var sTr01 abc;var sTr02 Abc;var sTr03 123456;var sTr04 123456abcdef;// alert(reTest01.test(sTr01)); //true// alert(reTest01.test(sTr02)); //false// alert(reTest02.test(sTr02)); //true// alert(reTest03.test(sTr03)); //true// alert(reTest03.test(sTr04)); //true 只要前面有数字就OK了alert(reTest04.test(sTr03)); //truealert(reTest04.test(sTr04)); //false/script
/head
body/body
/html事件冒泡
什么是事件冒泡 在一个对象上触发某类事件比如单击onclick事件如果此对象定义了此事件的处理程序那么此事件就会调用这个处理程序如果没有定义此事件处理程序或者事件返回true那么这个事件会向这个对象的父级对象传播从里到外直至它被处理父级对象所有同类事件都将被激活或者它到达了对象层次的最顶层即document对象有些浏览器是window。
事件冒泡的作用 事件冒泡允许多个操作被集中处理把事件处理器添加到一个父级元素上避免把事件处理器添加到多个子级元素上它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡 事件冒泡机制有时候是不需要的需要阻止掉通过 event.stopPropagation() 来阻止
$(function(){var $box1 $(.father);var $box2 $(.son);var $box3 $(.grandson);$box1.click(function() {alert(father);});$box2.click(function() {alert(son);});$box3.click(function(event) {alert(grandson);event.stopPropagation();});$(document).click(function(event) {alert(grandfather);});
})......div classfatherdiv classsondiv classgrandson/div/div
/div阻止默认行为 阻止表单提交
$(#form1).submit(function(event){event.preventDefault();
})合并阻止操作 实际开发中一般把阻止冒泡和阻止默认行为合并起来写合并写法可以用
// event.stopPropagation();
// event.preventDefault();// 合并写法
return false;示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.grandfather{width:300px;height:300px;background:purple;}.father{width:200px;height:200px;background:gold;/* 相对定位 */position: relative;}.son{width:100px;height:100px;background:red;/* 绝对定位 */position: absolute;left:0px;top:400px;}/stylescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){$(.son).click(function(){alert(1);//阻止事件冒泡的简略写法 只会得到1return false;})// 父级阻止事件冒泡$(.father).click(function(ev){alert(2);// 阻止事件冒泡的完整写法ev.stopPropagation(); //只会得到2}); $(.grandfather).click(function(){alert(3);})// $(document) 代表最顶级的标签$(document).click(function(){alert(4);});})/scriptscript srcjs/jquery-1.12.4.min.js/script
/head
bodydiv classgrandfatherdiv classfatherdiv classson/div/div/div
/body
/html弹框
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgelink relstylesheet hrefcss/main.csstitleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript typetext/javascript$(function(){$(#btn01).click(function(){alert(1);$(#pop).show();//按钮阻止click的事件冒泡return false;})$(#shutoff).click(function(){alert(2);$(#pop).hide();});// 点击弹框其他的地方关闭弹框$(document).click(function(){alert(3);$(#pop).hide();});// 点击弹框弹框不应该隐藏所以弹框也需要阻止冒泡$(.pop_con).click(function(){alert(4);return false;})})/script
/head
bodyinput typebutton value弹出弹框 idbtn01div classpop_main idpopdiv classpop_condiv classpop_titleh3系统提示/h3a href# idshutoff×/a/divdiv classpop_detailp classpop_text亲请关注近期的优惠活动/p/divdiv classpop_footer/div/divdiv classmask/div/div
/body
/html事件委托
事件委托就是利用冒泡的原理把事件加到父级上通过判断事件来源的子集执行相应的操作事件委托首先可以极大减少事件绑定次数提高性能其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){$ali $(#list li);$ali.click(function() {$(this).css({background:red});});
})
...
ul idlistli1/lili2/lili3/lili4/lili5/li
/ul
事件委托的写法$(function(){$list $(#list);$list.delegate(li, click, function() {$(this).css({background:red});});
})
...
ul idlistli1/lili2/lili3/lili4/lili5/li
/ul示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){var $li $(.list li);var $ul $(.list);// $li.click(function(){// $(this).css({background: red});// })//上面的写法性能不高可以改成下面事件委托的写法$ul.delegate(li,click,function(){$(this).css({background: red});})})/script
/head
bodyul classlistli列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/lili列表文字/li/ul
/body
/htmlDom操作
Dom操作也叫做元素节点操作它指的是改变html的标签结构它有两种情况 1、移动现有标签的位置 2、将新创建的标签插入到现有的标签中
创建新标签
var $div $(div); //创建一个空的div
var $div2 $(div这是一个div元素/div);移动或者插入标签的方法 1、append()和appendTo()在现存元素的内部从后面放入元素
var $span $(span这是一个span元素/span);
$(#div1).append($span);… 2、prepend()和prependTo()在现存元素的内部从前面放入元素
3、after()和insertAfter()在现存元素的外部从后面放入元素
4、before()和insertBefore()在现存元素的外部从前面放入元素
删除标签
$(#div1).remove();示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){var $div $(#div01);var $p01 $(#p01);var $h01 $(#h01);var $p02 $(#p02);//当前元素的里面的后面要放另外一个元素 把p idp01div01外面的p标签/p放到了// div iddiv01h3div01里面的h3标题/h3pdiv01里面的p标签/p/div 后面$div.append($p01);// 当前元素里面的前面要放另外一个元素h2 idh01div01外面的h2标签/h2放到$div.prepend($h01);// 当前元素要放到另外一个元素里面的前面$h01.prependTo($div);// 当前元素外面的后面要放另外一个元素// $div.after($p02); // 当前元素要放到另外一个元素的外面的后面$p02.insertAfter($div);// 创建一个新的空的div标签var $newdiv01 $(div);// 创建一个有内容的div标签var $newdiv02 $(div新创建的第二个div/div);// 当前元素的外面的前面要放另外一个元素$div.before($newdiv01);// 当前元素要放到另外一个元素的外面的前面$newdiv02.insertBefore($div);// 删除标签$newdiv01.remove();$h01.remove();})/script
/head
bodyp idp02div01上面的p标签/pp idp01div01外面的p标签/ph2 idh01div01外面的h2标签/h2div iddiv01h3div01里面的h3标题/h3pdiv01里面的p标签/p/div
/body
/htmljavascript对象
javascript中的对象可以理解成是一个键值对的集合键是调用每个值的名称值可以是基本变量还可以是函数和对象。
创建javascript对象有两种方法一种是通过顶级Object类来实例化一个对象然后在对象上面添加属性和方法
var person new Object();// 添加属性
person.name tom;
person.age 25;// 添加方法
person.sayName function(){alert(this.name);
}// 调用属性和方法
alert(person.age);
person.sayName();还可以通过对象直接量的方式创建对象
var person2 {name:Rose,age: 18,sayName:function(){alert(My name is this.name);}
}// 调用属性和方法
alert(person2.age);
person2.sayName();示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript//直接量的方式定义对象var person {name: Tom,age:18,showName:function(){alert(我的名字是this.name);},showAge:function(){alert(我的年龄是this.age);}}//使用对象//调用对象的属性alert(person.name);//调用对象的方法person.showName();/script
/head
body/body
/htmljson
json是 JavaScript Object Notation 的首字母缩写单词的意思是javascript对象表示法这里说的json指的是类似于javascript对象的字符串它同时是一种数据格式目前这种数据格式比较流行逐渐替换掉了传统的xml数据格式。
json数据类似于JavaScript中的对象但是它的键对应的值里面是没有函数方法的值可以是普通变量但不支持undefined值还可以是数组或者JavaScript对象。
json写法需要注意的是json中的属性名称和字符串值需要用双引号引起来用单引号或者不用引号会导致读取数据错误。
json格式的数据
{name:tom,age:18
}json的另外一个数据格式是数组和javascript中的数组字面量相同。
[tom,18,programmer]还可以是更复杂的数据机构
{name:jack,age:29,hobby:[reading,travel,photography]school:{name:Merrimack College,location:North Andover, MA}
}json本质上是字符串如果在js中操作json数据可以将json字符串转化为JavaScript对象转化的方式如下
var sJson {name:tom,age:18};
var oPerson JSON.parse(sJson);// 操作属性
alert(oPerson.name);
alert(oPerson.age);示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript// 定义一个json数据var sJson {\name:tom,\age:18,\hobby:[study,shopping,singing],\school:{name:beida,location:beijing}\};// 将json数据转化成JavaScript对象var oJson JSON.parse(sJson);alert( oJson.name );alert( oJson.hobby[0] );alert( oJson.school.location );/script
/head
body/body
/html
