建设搜索引擎友好的网站,对做网站有什么建议,网站备案信息传,温州网页制作招聘文章目录 1.jquary#xff1a;选择器1.1 jquery框架引入#xff1a;$(mydiv) 当成id选择器1.2 jquery版本/对象#xff1a;$(js对象) - jquery对象1.3 jquery的页面加载事件#xff1a;$ 想象成 window.onload 1.4 jquery的基本选择器#xff1a;$()里内容… 文章目录 1.jquary选择器1.1 jquery框架引入$(mydiv) 当成id选择器1.2 jquery版本/对象$(js对象) - jquery对象1.3 jquery的页面加载事件$ 想象成 window.onload 1.4 jquery的基本选择器$()里内容1.5 层级/属性选择器先$(#btn1).click(function () {}1.6 jquery的基本过滤选择器$( : )隔行换色1.7 表单属性过滤选择器选择fori快捷键1.8 Dom操作_文本和属性getInnerText1.9 案例_全选.prop1.10 Dom操作_样式触摸换色1.11 Dom操作_追加prepend1.12 动画fn回调函数1.13 jquery的四种遍历方式两个for两个each1.14 事件绑定和切换eve事件1.15 案例_广告/抽奖.attr.prop1.16 jquery插件机制原理$.fn.extend({}1.17 jquery表单校验插件使用与扩展$(#.).validate({} 2.bootstrap布局容器2.1 bootstrap基本模板meta/titlelink/script2.2 两种布局容器/栅格系统自动补2.3 样式_表格/按钮/图片/表单class属性for属性联动2.4 组件_分页/导航条nav横着laquo书名号《sr-only2.5 插件_模态框和轮播图 classmodal-header 头2.6 案例_黑马旅游首页classimg-responsive图片压缩 3.vue创建实例3.1 vue安装MVVMVMView-Modelvue是mvvm架构的js框架3.2 案例对象是vm里面el等是构造参数3.3 案例num是数据即M前端是V这样交互简化了jquary(js)3.4 vue实例先绑定3.5 this/指令/插值表达式this就是当前vue实例在vue对象内部必须使用this才能访问vue中定义的data内属性或者methods中定义的方法3.6 v-textv-html解决插值闪烁将数据渲染到页面3.7 v-model数据的双向绑定使用v-model实现与表单form控件的双向绑定其他控件只能单向3.8 v-onv-for给页面元素绑定事件3.9 v-ifv-show渲染是源码不同于显示3.10 v-bind给html的属性绑定值html元素本来就有的属性 如nameid等3.11 computed计算属性进行逻辑处理才能得到最终的结果3.12 watch监控对用户界面输入数据进行异步校验3.13 组件可重复使用的代码 1.jquary选择器
1.1 jquery框架引入$(“mydiv”) 当成id选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- scriptvar $ function (id) { // $就是method01()id id.substring(1) // 因为传入的id为#mydiv切割字符串 【var div $(#mydiv)】var element document.getElementById(id); // id mydivreturn element}/script --!--111111111111111111111111111111111111111111111111111111111111111111111111111111-- script src../js/nb.js/script !-- js有两种引入方式内部或外部 --scriptwindow.onload function (ev) {// var div document.getElementById(mydiv); // 代码冗余 // var div $(mydiv); // 代码简单, 阅读性太差 var div $(#mydiv); // 兼顾阅读性和简洁效果同上行封装上面script里$div.innerText xx5}/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111--
bodydiv idmydiv/div
/body
/html//nb.js
var $ function (id) { //没有script../scriptid id.substring(1)var element document.getElementById(id);return element
}1.2 jquery版本/对象$(js对象) - jquery对象
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--jquery主要作用是简化js的dom树操作轻量级不是看大小看耦合度。jquery使用1. 在项目中js文件夹导入js文件。 2. 在html导入js文件 版本: 带min的 : 发布版(生产版) 阅读性差,文件很小()不带 : 开发版(阅读性好,文件比较大) --script src../js/jquery-3.3.1.js/script!--script src../js/jquery-3.3.1.min.js/script--scriptwindow.onload function (ev) {$(#myid).text(嘻嘻)}/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111--
bodydiv idmyid/div
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../js/jquery-3.3.1.js/scriptscript/** jquery对象: 1. 定义: jquery框架中的api获取的对象* 2. 语法: $(选择器) 如下面$(#myid)* $(js对象) 如下面$(div)* 3. 本质: 对js来说, jquery对象是一个数组。jquery对象不能直接调用js的api如.innerText* 总结: jquery对象 : 访问索引 - js对象* */window.onload function (ev) {$(#myid).text(嘻嘻) //这个数组只有一个元素 //api底层: 遍历 innerText $(.myclass).text(呼呼) //这个数组有两个元素$(#myid)[0].innerText 哈哈 //数组这样才能innerText不是上面.test的api/*for(var i0;i$(.myclass).length; i){$(.myclass)[i].innerText 啦啦}*/var div document.getElementById(myid2); // js对象$(div).text(呼呼2) // js对象 - jquery对象}/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodydiv idmyid/divdiv idmyid2/divdiv classmyclass/divdiv classmyclass/div
/body
/html1.3 jquery的页面加载事件$ 想象成 window.onload
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../js/jquery-3.3.1.js/scriptscriptwindow.onload function (ev) {$(#myid).text(嘻嘻)}/script!--1111111111111111111111111111111111111111111111111111111111111111111111--script //jquery页面加载事件 $(fn) : fn 完整版写法如下 /* var method01 function () { $(#myid2).text(嘻嘻2)}$(method01)*/$(function () { $(#myid2).text(嘻嘻2)})/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111--
bodydiv idmyid/divdiv idmyid2/divdiv idmyid3/div
/body
/html1.4 jquery的基本选择器$()里内容
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title01-基本选择器.html/title script src../js/jquery-3.3.1.js typetext/javascript/script
!-- script src./script/assist.js typetext/javascript/script-- !--这行动画-- link relstylesheet typetext/css href./css/style.css / script typetext/javascript$(function () { /* document.getElementById(btn1).onclick function (ev) {document.getElementById(one).style.backgroundColor red}*//** jquery对象: $(选择器)以下为对象的API* click(fn) : jquery的点击事件注册 (底层遍历 onclick)* text(value) : 遍历 innerText* css(key,value) : 遍历 keycss属性 value值 */$(#btn1).click(function () {$(#one).css(backgroundColor,green)})/** 基本 #idelement 标签选择器.class 类选择器* 所有整个页面selector1,selector2,selectorN 组合(用逗号隔开是并集用空格隔开是层集)*/$(#btn2).click(function () {$(.mini).css(backgroundColor,red)})$(#btn3).click(function () {$(div).css(backgroundColor,red)})$(#btn4).click(function () {$(*).css(backgroundColor,red)})$(#btn5).click(function () {$(span,#two).css(backgroundColor,red) //并集})})/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodybutton idreset手动重置页面元素/buttoninput typecheckbox idisreset checkedchecked/label forisreset点击下列按钮时先自动重置页面/labelbr /br /h3基本选择器./h3 !-- 控制按钮 --input typebutton value选择 id为 one 的元素. idbtn1/ input typebutton value选择 class 为 mini 的所有元素. idbtn2/input typebutton value选择 元素名是 div 的所有元素. idbtn3/input typebutton value选择 所有的元素. idbtn4/input typebutton value选择 所有的span元素和id为two的元素. idbtn5/br /br / !--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- !-- 测试的元素 --div classone idone id为one,class为one的divdiv classminiclass为mini/div/divdiv classone idtwo titletest id为two,class为one,title为test的div.div classmini titleotherclass为mini,title为other/divdiv classmini titletestclass为mini,title为test/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini titletesstclass为mini,title为tesst/div/divdiv styledisplay:none; classnonestyle的display为none的div/divdiv classhideclass为hide的div/divdiv包含input的type为hidden的divinput typehidden size8//divspan idmover正在执行动画的span元素./span
/body
/html1.5 层级/属性选择器先$(“#btn1”).click(function () {}
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title02-层次选择器.html/title!-- 引入jQuery -- script src../js/jquery-3.3.1.js typetext/javascript/scriptscript src./script/assist.js typetext/javascript/scriptlink relstylesheet typetext/css href./css/style.css / script typetext/javascript/*层级ancestor descendant祖先 后代 (多级: 一级子标签, 二级子标签)parent child父母 子女 (单级只隔一代)prev next : 前一个后一个 (平级)prev ~ siblings : 前一个 ~ 平级 (siblings兄弟姐妹)*/$(function () {$(#btn1).click(function () {$(body div).css(backgroundColor,red) //连小方框都选中})$(#btn2).click(function () {$(bodydiv).css(backgroundColor,red) //小方框没选中})$(#btn3).click(function () {$(#onediv).css(backgroundColor,red)})$(#btn4).click(function () {$(#two~div).css(backgroundColor,red)})})/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodyh3层次选择器./h3button idreset手动重置页面元素/buttoninput typecheckbox idisreset checkedchecked/label forisreset点击下列按钮时先自动重置页面/labelbr /br /h3常见选择器/h3input typebutton value选择 body内的所有div元素. idbtn1/input typebutton value在body内,选择子元素是div的。 idbtn2/ h3扩展选择器/h3input typebutton value选择 id为one 的下一个div元素. idbtn3/input typebutton value选择 id为two的元素的所有div兄弟元素. idbtn4/br /br / !--1111111111111111111111111111111111111111111111111111111111111111111111111111111-- !-- 测试的元素 --div classone idone id为one,class为one的divdiv classminiclass为mini/div/divdiv classone idtwo titletest id为two,class为one,title为test的div.div classmini titleotherclass为mini,title为other/divdiv classmini titletestclass为mini,title为test/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini titletesstclass为mini,title为tesst/div/divdiv styledisplay:none; classnonestyle的display为none的div/divdiv classhideclass为hide的div/divdiv包含input的type为hidden的divinput typehidden size8//divspan idmover正在执行动画的span元素./span
/body
/html!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title03-属性选择器.html/title!-- 引入jQuery --script src../js/jquery-3.3.1.js typetext/javascript/scriptscript src./script/assist.js typetext/javascript/scriptlink relstylesheet typetext/css href./css/style.css / script typetext/javascript/*[attribute] : 包含某个属性[attributevalue] : 不仅包含,还得值[attribute!value] : 上面结果取反(1.包含但是值! 2.没有这个属性)[attribute^value] : 以...开头[attribute$value] : 以什么结尾[attribute*value] : 包含,value中所有东西attribute都包含[attrSel1][attrSel2][attrSelN] 组合属性(与不仅满足A条件还要满足B条件)*/$(function () {$(#btn1).click(function () {$(div[title]).css(backgroundColor,red)})$(#btn2).click(function () {$(div[titletest]).css(backgroundColor,red)})$(#btn3).click(function () {$(div[title!test]).css(backgroundColor,red)})$(#btn4).click(function () {$(div[title^te]).css(backgroundColor,red)})$(#btn5).click(function () {$(div[title$est]).css(backgroundColor,red)})$(#btn6).click(function () {$(div[title*es]).css(backgroundColor,red)})$(#btn7).click(function () {$(div[id][title*es]).css(backgroundColor,red)})})/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111--
bodybutton idreset手动重置页面元素/buttoninput typecheckbox idisreset checkedchecked/label forisreset点击下列按钮时先自动重置页面/label h3 属性选择器./h3h3常见选择器/h3input typebutton value选取含有 属性title 的div元素. idbtn1/input typebutton value选取 属性title值等于“test”的div元素. idbtn2/input typebutton value组合属性选择器,首先选取有属性id的div元素然后在结果中 选取属性title值 含有“es”的元素. idbtn7/h3扩展选择器/h3input typebutton value选取 属性title值不等于“test”的div元素(没有属性title的也将被选中). idbtn3/input typebutton value选取 属性title值 以“te”开始 的div元素. idbtn4/input typebutton value选取 属性title值 以“est”结束 的div元素. idbtn5/input typebutton value选取 属性title值 含有“es”的div元素. idbtn6/!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--!-- 测试的元素 --br /br /div classone idone id为one,class为one的divdiv classminiclass为mini/div/divdiv classone idtwo titletest id为two,class为one,title为test的div.div classmini titleotherclass为mini,title为other/divdiv classmini titletestclass为mini,title为test/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini titletesstclass为mini,title为tesst/div/divdiv styledisplay:none; classnonestyle的display为none的div/divdiv classhideclass为hide的div/divdiv包含input的type为hidden的divinput typehidden size8//divspan idmover正在执行动画的span元素./span
/body
/html1.6 jquery的基本过滤选择器$( : )隔行换色
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title04-基本过滤选择器.html/title!-- 引入jQuery -- script src../js/jquery-3.3.1.js typetext/javascript/scriptscript src./script/assist.js typetext/javascript/scriptlink relstylesheet typetext/css href./css/style.css / script typetext/javascript/*:first 第一个:last 最后一个:not(selector) 非:even 偶数:odd 奇数:eq(index) equals:gt(index) 大于:lt(index) 小于:header 标题:animated 动画:focus1.6 焦点。pc端网页(手机可获取多个焦点) : 同一瞬间,只有一个焦点。一旦点按钮焦点就没了。索引: 0基,数开标签*/$(function () {$(#btn1).click(function () {$(div:first).css(backgroundColor,red)})$(#btn2).click(function () {$(div:last).css(backgroundColor,red)})$(#btn3).click(function () {$(div:not(.one)).css(backgroundColor,red)})$(#btn4).click(function () {$(div:even).css(backgroundColor,red)})$(#btn5).click(function () {$(div:odd).css(backgroundColor,red)})$(#btn6).click(function () {$(div:eq(3)).css(backgroundColor,red)})$(#btn7).click(function () {$(div:gt(3)).css(backgroundColor,red)})$(#btn8).click(function () {$(div:lt(3)).css(backgroundColor,red)})$(#btn9).click(function () {$(:header).css(backgroundColor,red)})$(#btn10).click(function () {$(:animated).css(backgroundColor,red)})$(:focus).css(backgroundColor,red)})/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodyh1基本过滤选择器./h1h2基本过滤选择器./h2h3基本过滤选择器./h3button idreset手动重置页面元素/buttoninput typecheckbox idisreset checkedchecked/label forisreset点击下列按钮时先自动重置页面/labelbr /br /input typebutton value选择第一个div元素. idbtn1/input typebutton value选择最后一个div元素. idbtn2/input typebutton value选择class不为one的 所有div元素. idbtn3/input typebutton value选择索引值为偶数 的div元素. idbtn4/input typebutton value选择索引值为奇数 的div元素. idbtn5/input typebutton value选择索引值等于3的元素. idbtn6/input typebutton value选择索引值大于3的元素. idbtn7/input typebutton value选择索引值小于3的元素. idbtn8/input typebutton value选择所有的标题元素. idbtn9/input typebutton value选择当前正在执行动画的所有元素. idbtn10/input typetext value请输入账号 defaultValue请输入账号 /input typetext value请输入密码 defaultValue请输入密码 autofocus/ !--输入框鼠标自动在上面--br /br /!-- 测试的元素 --div classone idone id为one,class为one的divdiv classminiclass为mini/div/divdiv classone idtwo titletest id为two,class为one,title为test的div.div classmini titleotherclass为mini,title为other/divdiv classmini titletestclass为mini,title为test/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini titletesstclass为mini,title为tesst/div/divdiv styledisplay:none; classnonestyle的display为none的div/divdiv classhideclass为hide的div/divdiv包含input的type为hidden的divinput typehidden size8//divspan idmover正在执行动画的span元素./span
/body
/html!DOCTYPE htmlhtmlheadmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.js/scriptscript$(function () { // 页面加载事件// 如下图tr6(index 0 ~ 5) - gt : 2~5(索引重置 0~3 )// 选择前 3 个之后的所有 tr 元素 $(tr:gt(2))// $(tr:gt(1):even).css(backgroundColor,green)$(tr:even:gt(0)).css(backgroundColor,green) //同上行})/script/head!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-- bodytable idtab1 border1 width800 aligncenter trtd colspan5input typebutton value添加/ input typebutton value删除/td/trtr stylebackground-color: #999999;thinput typecheckbox/thth分类ID/thth分类名称/thth分类描述/thth操作/th/trtrtdinput typecheckbox/tdtd1/tdtd手机数码/tdtd手机数码类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd2/tdtd电脑办公/tdtd电脑办公类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd3/tdtd鞋靴箱包/tdtd鞋靴箱包类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd4/tdtd家居饰品/tdtd家居饰品类商品/tdtda href修改/a|a href删除/a/td/tr/table/body
/html1.7 表单属性过滤选择器选择fori快捷键
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title05-表单对象属性过滤选择器.html/title!-- 引入jQuery --script src../js/jquery-3.3.1.js typetext/javascript/scriptscript src./script/assist.js typetext/javascript/scriptlink relstylesheet typetext/css href./css/style.css / script typetext/javascript/** 表单对象属性 (伪类选择器):enabled 可用的:disabled 不可用的:checked radio/checkbox 选中:selected select(option) 选中*/$(function () {$(input:enabled).val(呼呼) //.val 赋值enabled默认$(input:disabled).val(哈哈)$(#btn3).click(function () {var length $(input[typecheckbox][namenewsletter]:checked).length;alert(length)})$(#btn4).click(function () {var array $(select[nametest] option:selected);for(var i0;iarray.length;i){alert(array[i].innerText) //数组取出索引变js对象}})})/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodyh3 表单对象属性过滤选择器./h3button typereset重置所有表单元素/buttoninput typecheckbox idisreset checkedchecked/label forisreset点击下列按钮时先自动重置页面/label br /br /button idbtn1对表单内 可用input 赋值操作./buttonbutton idbtn2对表单内 不可用input 赋值操作./buttonbutton idbtn3获取多选框选中的个数./buttonbutton idbtn4获取下拉框选中的内容./buttonbr /br / 可用元素input nameadd value可用文本框/ br/不可用元素input nameemail disableddisabled value不可用文本框/br/可用元素 input nameche value可用文本框 /br/不可用元素input namename disableddisabled value不可用文本框/br/br/多选框br/input typecheckbox namenewsletter checkedchecked valuetest1 /test1input typecheckbox namenewsletter valuetest2 /test2input typecheckbox namenewsletter valuetest3 /test3input typecheckbox namenewsletter checkedchecked valuetest4 /test4input typecheckbox namenewsletter valuetest5 /test5div idcheckboxDivId/divbr/br/br/br/br/br/br/br/br/br/下拉列表1br/select nametest multiplemultiple styleheight:100pxoption浙江/optionoption selectedselected湖南/optionoption北京/optionoption selectedselected天津/optionoption广州/optionoption湖北/option/selectbr/br/下拉列表2br/select nametest2 option浙江/optionoption湖南/optionoption selectedselected北京/optionoption天津/optionoption广州/optionoption湖北/option/selectbr/br/div idselectDivId/div
/body
/html1.8 Dom操作_文本和属性getInnerText
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.js/scriptscript/*html - js中的innerHTMLtext - js中的innerTextval - value (input标签的value 属性)text(value) - setInnerText(value)text() - getInnerText*/$(function () {// $(#mydiv).text(呼呼) // - 遍历 set// var str $(div).text(); // - 遍历 get 返回数组// console.log(str)// $(div).text(h1啦啦/h1) //显示两行 h1啦啦/h1// $(div).html(h1啦啦/h1) //显示两行 啦啦var val $(#myinput).val();console.log(val) //张三})/script /head!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-- bodyinput idmyinput typetext nameusername value张三 /br /div 嘻嘻/divdiv 嘻嘻2/div/body
/html!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
htmlheadtitle获取属性/titlemeta http-equivcontent-type contenttext/html; charsetUTF-8script typetext/javascript src../js/jquery-3.3.1.js/scriptstyle typetext/cssdiv,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div.mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}/style /head !--11111111111111111111111111111111111111111111111111111111111111111111111111111111111-- body ulli idbj namebeijing xxxyyy北京/lili idtj nametianjin天津/li/ulinput typecheckbox idhobby /复选框 /body!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111-- script typetext/javascript/** 属性 field/attribute/property* 规律: attr(key) - value getKey* attr(key,value) - put(K,V)* 1. attr : 只能获取写出来的 (文本类型)* 2. prop : 获取boolean状态的属性(checked/seleted/disabled/readonly ... )*///获取北京节点的name属性值var attr $(#bj).attr(name);console.log(attr)//设置北京节点的name属性的值为dabeijing$(#bj).attr(name,dabeijing)//新增北京节点的desc属性 属性值是didu$(#bj).attr(desc,didu)//删除北京节点的name属性并检验name属性是否存在$(#bj).removeAttr(xxx)//获得hobby的的选中状态var attr2 $(#hobby).attr(checked);console.log(attr2) //checked。应该获取boolen因为没写checkedtruevar attr3 $(#hobby).prop(checked); //prop()方法用于检索属性值console.log(attr3) //true/script
/html1.9 案例_全选.prop
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.js/scriptscriptfunction selectAll(all) {// var prop $(#myid).prop(checked); //这行通过下面写法可省略// console.log(prop) //勾上为true没勾上为false// console.log(all) //打印:input typecheckbox οnclickselectAll(this) idmyid //console.log(all.checked) //allthis - this.checked js对象 //勾上为true没勾上为false$(.itemSelect).prop(checked,all.checked) //一行实现全选全不选}//1111111111111111111111111111111111111111111111111111111111111111111111111111111111111 /** 需求: 全选状态, 子选项全部勾起 - 子选项但凡有一个不勾,那么全选按钮也不勾* 事件: 所有的子选项 : 点击事件* 逻辑 : 子选项点击, 判断所有的状态是否都是勾起,如果是, 全选勾起*/$(function () {$(.itemSelect).click(function () {// prop获取的是一个boolean,如果对象是数组,那获取的一直是第一个元素的状态// var prop $(.itemSelect).prop(checked);// console.log(prop) //勾上为true没勾上为falsevar array $(.itemSelect);var result true;for (var i 0; i array.length; i) {var obj array[i]; // jquery对象 - js对象result result obj.checked //有一个为false结果为false}// console.log(result)$(#myid).prop(checked,result)})})/script!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111--/headbodytable idtab1 border1 width800 aligncenter trtd colspan5input typebutton value删除/td/trtr!-- TODO: 命名注册 this 当前标签对象场景: 当注册事件的标签 的事件触发时,需要找到自己--thinput typecheckbox onclickselectAll(this) idmyid全选 /thth分类ID/thth分类名称/thth分类描述/thth操作/th/trtrtdinput typecheckbox classitemSelect/tdtd1/tdtd手机数码/tdtd手机数码类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox classitemSelect/tdtd2/tdtd电脑办公/tdtd电脑办公类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox classitemSelect/tdtd3/tdtd鞋靴箱包/tdtd鞋靴箱包类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox classitemSelect/tdtd4/tdtd家居饰品/tdtd家居饰品类商品/tdtda href修改/a|a href删除/a/td/tr/table/body
/html1.10 Dom操作_样式触摸换色
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
htmlheadtitle样式操作/titlemeta http-equivcontent-type contenttext/html; charsetUTF-8script typetext/javascript src../js/jquery-3.3.1.js/scriptstyle typetext/css.one{width: 200px;height: 140px;margin: 20px;background: red;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;} div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;} div .mini{width: 40px;height: 40px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 40px;height: 40px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;} /*待用的样式*/.second{width: 300px;height: 340px;margin: 20px;background: yellow;border: pink 3px dotted;float:left;font-size: 22px;font-family:Roman;} /*#one{background-color: blue;font-size: 30px;}*/ .my{background-color: yellow;}/style!--111111111111111111111111111111111111111111111111111111111111111111111111111111111--script/*css(name|pro|[,val|fn]) 改样式同下面三个 addClass(class|fn) 添加removeClass([class|fn]) 移除toggleClass(class|fn[,sw]) 切换*/$(function () {$(#b1).click(function () {var color $(#one).css(backgroundColor); //不给value 为获取console.log(color)$(#one).css(backgroundColor,red); //给value 为设置})$(#b2).click(function () {$(#one).addClass(my) //设置类样式 //找到上面.my{background...}需要把上面#one{back..}注掉因为id选择器优先级高于类选择器})$(#b3).click(function () {$(#one).removeClass(my) // 移除类样式 //脱衣服 不是 换衣服})$(#b4).click(function () {$(#one).toggleClass(my) // 切换类样式})})/script/head !--111111111111111111111111111111111111111111111111111111111111111111111111111111111--body input typebutton value保存 classmini nameok classmini /input typebutton value采用属性增加样式(改变idone的样式) idb1/input typebutton value addClass idb2/input typebutton valueremoveClass idb3/input typebutton value 切换样式 idb4/input typebutton value 通过css()获得id为one背景颜色 idb5/input typebutton value 通过css()设置id为one背景颜色为绿色 idb6/!--1111111111111111111111111111111111111111111111111111111111111111111111111111--h1有一种奇迹叫坚持/h1h2自信源于努力/h2div idoneid为one /divdiv idtwo classmini id为two class是 mini div classmini class是 mini/div/divdiv classone class是 one div classmini class是 mini/divdiv classmini class是 mini/div/divdiv classone class是 one div classmini01 class是 mini01/divdiv classmini class是 mini/div/divdiv idmover 动画/divspan classspanone span/span /body!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- script typetext/javascript //input typebutton value采用属性增加样式(改变idone的样式) idb1/ //input typebutton value addClass idb2/ //input typebutton valueremoveClass idb3/ //input typebutton value 切换样式 idb5/ /script
/html!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.js/scriptstyle.my{background-color: yellow;}/stylescript$(function () { //触摸换色$(tr:gt(1)).mouseover(function () { //类选择器过滤选择器 //索引大于1才生效 $(this).addClass(my) //js对象 - jquery对象})$(tr:gt(1)).mouseout(function () {// js对象 - jquery对象$(this).removeClass(my)})})/script /head!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- bodytable idtab1 border1 width800 aligncenter trtd colspan5input typebutton value删除/td/trtr stylebackground-color: #999999;thinput typecheckbox/thth分类ID/thth分类名称/thth分类描述/thth操作/th/trtrtdinput typecheckbox/tdtd1/tdtd手机数码/tdtd手机数码类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd2/tdtd电脑办公/tdtd电脑办公类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd3/tdtd鞋靴箱包/tdtd鞋靴箱包类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd4/tdtd家居饰品/tdtd家居饰品类商品/tdtda href修改/a|a href删除/a/td/tr/table/body
/html1.11 Dom操作_追加prepend
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
htmlheadtitle内部插入脚本/titlemeta http-equivcontent-type contenttext/html; charsetUTF-8script languageJavaScript src../js/jquery-3.3.1.js/scriptstyle typetext/cssdiv,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;} div .mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;} div.visible{display:none;}/style /head !--111111111111111111111111111111111111111111111111111111111111111111111111111111111--bodyul idcityli idbj namebeijing北京/lili idtj nametianjin天津/lili idcq namechongqing重庆/li/ulul idloveli idfk namefankong反恐/lili idxj namexingji星际/li/uldiv idfoo1Hello1/div /body!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-- script typetext/javascript/** innerText* 1. : 设置,覆盖* 2. : 追加* text() : 获取* text(value) : 设置* text(text() value) : 追加** 内部插入 : 内部追加 (包含)append(content|fn) : 追加到末尾appendTo(content) 主宾倒装prepend(content|fn) : 追加到开头prependTo(content)外部插入 : 平级添加after(content|fn)before(content|fn)insertAfter(content)insertBefore(content)*/// $(#city).append(li idcq namechengdu成都/li) //添加一个新内容// $(#city).append( $(#fk) ) //添加页面已有的内容: 剪切// $(#fk).appendTo( $(#city) ) //效果同上上行我添加谁这行谁添加到我$(#city).prepend( $(#fk) )$(#city).before( $(#love) )/script
/html如下星际和反恐是love爱好。
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
htmlheadtitle删除节点/titlemeta http-equivcontent-type contenttext/html; charsetUTF-8script typetext/javascript src../js/jquery-3.3.1.js/scriptstyle typetext/cssdiv,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;} div.mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;} div.visible{display:none;}/style /head!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- bodyul idcityli idbj namebeijing北京/lili idtj nametianjin天津/lili idcq namechongqing重庆/li/ulp classhelloHello/p how are pyou?/p /body!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- script typetext/javascript /*删除 empty() : 清空所有的子元素 (杀孩子)remove([expr]) : 移除自己 (自杀) */// $(#city).empty()$(#city).remove()/script
/html!DOCTYPE html
html
headmeta charsetUTF-8 /titleQQ表情选择/title style typetext/css*{margin: 0;padding: 0;list-style: none;}.emoji{margin:50px;}ul{overflow: hidden;}li{float: left;width: 48px;height: 48px;cursor: pointer;}.emoji img{ cursor: pointer; }/stylescript src../js/jquery-3.3.1.js/scriptscript/** 需求: 点击表情添加到发言框中* 事件: 表情标签img : click* 逻辑: 点击哪个图片,就会被添加到发言框*/$(function () {$(.emoji ul li img).click(function () {// $(img).click(function () { //这行相对上行粗糙因为body里 请发言下面也有imgvar copy $(this).clone();$(.word).append(copy) //只有这行的话点一次表情就会被剪切掉})})/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodydiv classemojiulliimg srcimg/01.gif height22 width22 alt //liliimg srcimg/02.gif height22 width22 alt //liliimg srcimg/03.gif height22 width22 alt //liliimg srcimg/04.gif height22 width22 alt //liliimg srcimg/05.gif height22 width22 alt //liliimg srcimg/06.gif height22 width22 alt //liliimg srcimg/07.gif height22 width22 alt //liliimg srcimg/08.gif height22 width22 alt //liliimg srcimg/09.gif height22 width22 alt //liliimg srcimg/10.gif height22 width22 alt //liliimg srcimg/11.gif height22 width22 alt //liliimg srcimg/12.gif height22 width22 alt //li/ulp classwordstrong请发言/strongimg srcimg/12.gif height22 width22 alt / !-- 这里也有img标签 --/p /div
/body
/html1.12 动画fn回调函数
!DOCTYPE html
html
headmeta charsetUTF-8titleInsert title here/titlescript typetext/javascript src../js/jquery-3.3.1.min.js/scriptscript/*show([s,[e],[fn]])hide([s,[e],[fn]])toggle([s],[e],[fn]) 参数: speed : (time) 动画执行时间 mseasing : 动画执行模式1. swing 摇摆 (先快后慢) - 正余弦2. linear 线 (匀速)fn : 动画执行完毕,回调函数如抽奖原理: (hide为例)width/ height : 100% - 0%opacity : 1 - 0 透明度【ARGB : A就是alpha 透明度 (0 完全透明看不到, 1 完全不透明)】 */function hideFn() {// 100% - 0% - css: displaynone// $(#showDiv).hide() //下面是参数演示$(#showDiv).hide(3000,swing,function () {// alert(恭喜你,结束了)})}function showFn() {$(#showDiv).show(3000,swing)}function toggleFn() {$(#showDiv).toggle(3000,linear)}/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111111--
body
input typebutton value点击按钮隐藏div onclickhideFn()
input typebutton value点击按钮显示div onclickshowFn()
input typebutton value点击按钮切换div显示和隐藏 onclicktoggleFn()div idshowDiv stylewidth:300px;height:300px;background:reddiv显示和隐藏/div
/body
/html!DOCTYPE html
html
headmeta charsetUTF-8titleInsert title here/titlescript typetext/javascript src../js/jquery-3.3.1.min.js/scriptscript/** 淡入淡出fadeIn([s],[e],[fn])fadeOut([s],[e],[fn])fadeToggle([s,[e],[fn]])*/function hideFn() {$(#showDiv).fadeOut(3000)}function showFn() {$(#showDiv).fadeIn(3000,swing)}function toggleFn() {$(#showDiv).fadeToggle(3000,linear)}/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111111--
body
input typebutton value点击按钮隐藏div onclickhideFn()
input typebutton value点击按钮显示div onclickshowFn()
input typebutton value点击按钮切换div显示和隐藏 onclicktoggleFn()div idshowDiv stylewidth:300px;height:300px;background:reddiv显示和隐藏/div
/body
/html!DOCTYPE html
html
headmeta charsetUTF-8titleInsert title here/titlescript typetext/javascript src../js/jquery-3.3.1.min.js/scriptscript/** 滑动slideDown([s],[e],[fn])slideUp([s,[e],[fn]])slideToggle([s],[e],[fn])*/function hideFn() {$(#showDiv).slideUp(3000)}function showFn() {$(#showDiv).slideDown(3000,swing)}function toggleFn() {$(#showDiv).slideToggle(3000,linear)}/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111--
body
input typebutton value点击按钮隐藏div onclickhideFn()
input typebutton value点击按钮显示div onclickshowFn()
input typebutton value点击按钮切换div显示和隐藏 onclicktoggleFn()div idshowDiv stylewidth:300px;height:300px;background:reddiv显示和隐藏/div
/body
/html1.13 jquery的四种遍历方式两个for两个each
!DOCTYPE html
html
headmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.min.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(function () {/** 1. 普通for循环* */var array $(li);for (var i 0; i array.length; i) {var obj array[i];// console.log(obj.innerText)}//11111111111111111111111111111111111111111111111111111111111111111111111111111111111 /** 2. for...of循环同java中增强for-each循环* */var array $(li);for(var element of array){// console.log(element.innerText -)}//1111111111111111111111111111111111111111111111111111111111111111111111111111111111 /** 3. jquery对象遍历方式* jquery对象.each(callback)* callback的执行次数跟jquery对象的元素个数有关系* callback(index,element)* 1. index : 当前执行的元素索引* 2. element: 当前执行的元素* */$(li).each(function (index,element) {// console.log(index- element.innerText)})//111111111111111111111111111111111111111111111111111111111111111111111111111111111 /** 4. jquery全局对象遍历方式* $ : 全局对象* each(obj,callback)* 1. obj : 被遍历的jquery对象* 2. callback : 回调函数* */$.each( $(li), function (index,element) {console.log(index--- element.innerText)})})/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111--
body
ul idcityli北京/lili上海/lili天津/lili重庆/li
/ul
/body
/html1.14 事件绑定和切换eve事件
!DOCTYPE html
html
headmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.min.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(function () {$(#btn1).click(function () {alert(呼呼)}) /** 事件处理: on(eve,fn)1.7 : 事件绑定off(eve)1.7 : 事件解绑需求: 需要动态切换事件效果案例: 会动的时钟问题: 开始按钮不能连续点击开始按钮: 点一下, 有效果 , 最终解绑事件(用户的眼里,可以点)暂停按钮: 点一下, 有效果 , 最终给开始按钮绑定事件*/$(#btn2).on(click,function () {alert(啦啦)})$(#btn2).off(click)})/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111--
bodyinput idbtn1 typebutton value使用默认方式注册事件input idbtn2 typebutton value使用on绑定点击事件
/body
/html!DOCTYPE html
html
headmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.min.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(function () {//1. 标准/*$(#myDiv).mouseover(function () {$(this).css(backgroundColor,green)})$(#myDiv).mouseout(function () {$(this).css(backgroundColor,red)})*///2. 链式/*$(#myDiv).mouseover(function () {$(this).css(backgroundColor,blue)}).mouseout(function () {$(this).css(backgroundColor,red)})*///3. on绑定/* $(#myDiv).on(mouseover,function () {$(this).css(backgroundColor,green)})$(#myDiv).on(mouseout,function () {$(this).css(backgroundColor,red)})*///4. hover 悬浮$(#myDiv).hover(function () {$(this).css(backgroundColor,pink)},function () {$(this).css(backgroundColor,red)})})/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111--
bodydiv idmyDiv stylewidth:300px;height:300px;background:red鼠标移入变成绿色移出回复红色/div
/body
/html1.15 案例_广告/抽奖.attr.prop
!DOCTYPE html
html
headmeta charsetUTF-8title广告的自动显示与隐藏/titlestyle#content{width:100%;height:500px;background:#999}/style!--引入jquery--script typetext/javascript src../js/jquery-3.3.1.min.js/scriptscriptfunction method01() {$(#ad).slideUp(1000)}$(function () {$(#ad).slideDown(3000)setInterval(method01,8000) //同时执行所以8秒-3秒广告显示5秒})/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111--
body
!-- 整体的DIV --
div!-- 广告DIV --div idad styledisplay: none;img stylewidth:100% src../img/adv.jpg //div!-- 下方正文部分 --div idcontent正文部分/div
/div
/body
/html!DOCTYPE html
html
headmeta charsetUTF-8titlejquery案例之抽奖/titlescript typetext/javascript src../js/jquery-3.3.1.min.js/scriptscript/** 开始按钮: 1. 小图片轮播* 停止按钮: 1. 小图片停止轮播* 2. 大图片跟小图片同步* 禁用传入this参数* */var i 0;function changeImg() {i;$(#img1ID).attr(src,../img/man0i.jpg)if(i 6){i -1}}var timer;function imgStart(a) { //点开始按钮timer setInterval(changeImg,1000)// $(a).prop(disabled,true) //js对象- jquery对象 //但用jquery对象不一定简洁用如下行a.disabled true //让开始按钮点击第一次后变灰色}function imgStop() { //点停止按钮clearInterval(timer)var src $(#img1ID).attr(src);$(#img2ID).attr(src,src) //同步大小图$(#startID).prop(disabled,false) //点停止按钮永不变灰让开始按钮灰色转正常// $(#img2ID).fadeToggle(1000) //这行需要手动再点击停止按钮显示所以要封装成bling方法setInterval(bling,1000)}function bling() {$(#img2ID).fadeToggle(100)}/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--
body
!-- 小像框 --
div styleborder-style:dotted;width:160px;height:100pximg idimg1ID src../img/man00.jpg stylewidth:160px;height:100px/
/div!-- 大像框 --
divstyleborder-style:double;width:800px;height:500px;position:absolute;left:500px;top:10pximg idimg2ID src../img/man00.jpg width800px height500px/
/div!-- 开始按钮 --
inputidstartIDtypebuttonvalue点击开始stylewidth:150px;height:150px;font-size:22pxonclickimgStart(this)!-- 停止按钮 --
inputidstopIDtypebuttonvalue点击停止stylewidth:150px;height:150px;font-size:22pxonclickimgStop()script languagejavascript typetext/javascript//准备一个一维数组装用户的像片路径var imgs [../img/man00.jpg,../img/man01.jpg,../img/man02.jpg,../img/man03.jpg,../img/man04.jpg,../img/man05.jpg,../img/man06.jpg];
/script
/body
/html1.16 jquery插件机制原理$.fn.extend({}
!DOCTYPE html
html
headmeta charsetUTF-8title01-jQuery对象进行方法扩展/titlescript src../js/jquery-3.3.1.min.js typetext/javascript charsetutf-8/scriptscript src../js/jq_nb.js/scriptscript typetext/javascript/** jquery插件: 基于jquery扩展的功能* jquery插件是怎么写出来的? 知道即可* 插件机制: jQuery.fn.extend(object) : 给jquery对象添加功能/函数jQuery.extend(object) : 可以给jquery全局对象添加功能 $/** object { n1 : v1, n2 : v2}* {name : zs, age : 18}* name : value* 函数名 : 匿名函数* check function(){$(this).prop(checked,true)}*/$.fn.extend({check : function () {$(this).prop(checked,true) //全选},uncheck : function () {$(this).prop(checked,false) //全不选}})/scriptscriptfunction checkFn() {// $(input[typecheckbox]).prop(checked,true) //全选$(input[typecheckbox]).check() //调用上面check函数效果同上行}function uncheckFn() {// $(input[typecheckbox]).prop(checked,false) //全不选$(input[typecheckbox]).uncheck()}/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodyinput idbtn-check typebutton value点击选中复选框 onclickcheckFn()input idbtn-uncheck typebutton value点击取消复选框选中 onclickuncheckFn()br/input typecheckbox valuefootball足球input typecheckbox valuebasketball篮球input typecheckbox valuevolleyball排球
/body
/html// jq_nb.js$.fn.extend({check : function () {$(this).prop(checked,true)},uncheck : function () {$(this).prop(checked,false)} !DOCTYPE html
html
headmeta charsetUTF-8title01-jQuery对象进行方法扩展/titlescript src../js/jquery-3.3.1.min.js typetext/javascript charsetutf-8/scriptscript $.extend({ //jQuery.extend(object)getMaxx : function (a,b) {return ab? a : b;}})/scriptscript typetext/javascript//对全局方法扩展2个方法扩展min方法求2个值的最小值扩展max方法求2个值最大值var maxx $.getMaxx(1,2);console.log(maxx) //2/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111--
body
/body
/html1.17 jquery表单校验插件使用与扩展$(“#.”).validate({}
htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8 /title我的jquery表单校验页面/titlestyle typetext/cssp{text-align: center;font-size:24px;}table{margin: 0 auto;border: 0;}table tr{height:40px;border:0;}table tr td{padding:0 14px;border:1px solid #999}.error{color:red}/style!-- 注意: jquery先于validate导入--script typetext/javascript src../js/jquery-3.3.1.js/scriptscript src../js/jquery.validate.js/scriptscript src../js/messages_ja.js/script !-- 日文插件 语言包 --!--本土化: 语言提示信息 优先级: 1. 自定义 2. 语言包3. 默认--!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- script/*自定义规则* $.validator.addMethod(校验规则名称,function(value,element,params)){},messages提示信息 )* 1. value : 使用当前规则的输入框中的value* 2. element : 使用当前规则的输入框标签* 3. params : 使用当前规则传入的参数 如数组[3,5] , params[0]3*/$.validator.addMethod(cnid,function (value,element,params) {if(value.length ! params[0] value.length ! params[1]){return false;}return true;},输入的内容必须3位或5位)/script!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-- script/** 表单校验* $(form表单的选择器).validate({ rules:{表单项name值:校验规则表单项name值:校验规则... ...},messages:{表单项name值:错误提示信息表单项name值:错误提示信息... ...}}); //如下v1又是一个object 如下{} * jquery对象.validate( object )* object {* n1 : {* n11 : v11,* n12 : v12...},* n2 : v2...* }** 原理: form表单标签事件onsubmit (return false 拒绝提交)* */$(function () {$(#empForm).validate({rules:{realname2 : {required:true // 框架底层校验 输入框中的内容是否为空,为空return false},username : {required:true,rangelength:[5,8]},email : {email:true},cart : {//TODO:cnid : [3,5] //含义: 中国的id必须3位或5位}},messages:{email : 请输入一个合法的邮箱地址}})})/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodyp员工信息录入/pform nameempForm idempForm methodget actiontest.htmltable border1trtd真实姓名(不能为空 ,没有其他要求)/tdtdinput typetext idrealname namerealname2 //td/trtrtd登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):/tdtdinput typetext idusername nameusername //td/trtr td密码(不能为空,长度6-12字符或数字,不能包含中文字符):/tdtdinput typepassword idpsw namepsw //td/trtr td重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):/tdtdinput typepassword idpsw2 namepsw2 //td/trtrtd性别(必选其一)/tdtdinput typeradio idgender_male valuem namegender/nbsp;男nbsp;nbsp;input typeradio idgender_female valuef namegender/nbsp;女/td/trtrtd年龄(必填26-50):/tdtdinput typetext idage nameage //td/trtr td你的学历:/tdtd select nameedu ideduoption value请选择你的学历/optionoption valuea专科/optionoption valueb本科/optionoption valuec研究生/optionoption valuee硕士/optionoption valued博士/option/select/td/trtr td出生日期(1982/09/21):/tdtdinput typetext idbirthday namebirthday value //td/trtr td兴趣爱好:/tdtd colspan2 input typecheckbox namecheckbox1 idqq1/nbsp;乒乓球 nbsp;input typecheckbox namecheckbox1 idqq2 value1 /nbsp;羽毛球 nbsp;input typecheckbox namecheckbox1 idqq3 value2 /nbsp;上网 nbsp;input typecheckbox namecheckbox1 idqq4 value3 /nbsp;旅游 nbsp;input typecheckbox namecheckbox1 idqq5 value4 /nbsp;购物 nbsp;/td/trtr td alignleft电子邮箱:/tdtdinput typetext idemail nameemail //td/trtr td alignleft身份证(15-18):/tdtdinput typetext idcart namecart //td/trtrtd/tdtdinput typesubmit namefirstname idfirstname value保存/td/tr/table
/form
script typetext/javascript
/script
/body
/html2.bootstrap布局容器
2.1 bootstrap基本模板meta/titlelink/script
!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedge!-- 支持IE(edge) : --meta nameviewport contentwidthdevice-width, initial-scale1!-- 视图窗口 , 内容 设备宽度(浏览器) 初始比例1 (0.25~5) --!-- 上述3个meta标签 必须 放在最前面任何其他内容都 必须 跟随其后 --titleBootstrap 101 Template/title!-- Bootstrap : html css js jquery --!--link hrefhttps://cdn.jsdelivr.net/npm/bootstrap3.3.7/dist/css/bootstrap.min.css relstylesheet-- !--如下不需要连网--link href../css/bootstrap.css relstylesheet !-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery所以必须放在前边) --script src../js/jquery-3.3.1.js/script !-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --script src../js/bootstrap.js/script!-- 向下兼容: 兼容IE9一下的版本 -- !-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询media queries功能 --!-- 警告通过 file:// 协议就是直接将 html 页面拖拽到浏览器中访问页面时 Respond.js 不起作用 --!--[if lt IE 9]
!-- script srchttps://cdn.jsdelivr.net/npm/html5shiv3.7.3/dist/html5shiv.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/respond.js1.4.2/dest/respond.min.js/script--![endif]--
/head!--111111111111111111111111111111111111111111111111111111111111111111111111111111--
body
h1你好世界/h1
/body
/html如下是上面的简洁标准模板
!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelink href../css/bootstrap.css relstylesheetscript src../js/jquery-3.3.1.js/scriptscript src../js/bootstrap.js/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111--
body
h1你好世界/h1
/body
/html2.2 两种布局容器/栅格系统自动补
!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelink href../css/bootstrap.css relstylesheetscript src../js/jquery-3.3.1.js/scriptscript src../js/bootstrap.js/scriptstylediv{border: 1px solid red;height: 100px;}.my{color: blue;}.your{font-size: 50px;}/style
/head!--111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodyspan classmy yourspan/span !--一个标签引用多个类样式-- !--写一个网页(一个图片200px宽) : 屏幕宽1200px (写6个) 屏幕宽600px(3个) 200px(1个) 做适配: 根据当前的屏幕宽度,改变自己的显示策略 (工作量大if else)响应式布局如下两种: 只要写一套布局, 根据不同的屏幕大小动态变化显示策略 www.jd.com m.jd.com1.布局容器1. .container-fluid (类选择器样式) : 容器-流动 (流式布局 : 100%)2. .container : 支持响应式布局不是上行的占100% media (min-width: 1200px) 底层是媒体查询 : if ... else if....container {width: 1170px;}浏览器的宽度 1200px ,那么布局宽度1170px - large lg 大屏幕电脑浏览器的宽度 992px ,那么布局宽度970px - medium md 中屏幕电脑浏览器的宽度 768px ,那么布局宽度750px - small sm 平板浏览器的宽度 768px ,那么布局宽度100% - extra small xs 手机2.栅格系统容器 行 列一行12列 原理: 浮动float visible-lg : 大屏可见其他屏这列不可见hidden-lg : 大屏不可见 --!--如下是两种布局容器 --div classcontainer-fluid/divdiv classcontainer/div!--如下是栅格系统 --div classcontainer !-- .container按tab键 -- div classrow !--行-- !--如下如果不设置sm当屏幕是sm时去找xs--div classcol-xs-12 col-md-4 col-lg-3 hidden-lg1/div !--列-- div classcol-xs-12 col-md-4 col-lg-32/divdiv classcol-xs-12 col-sm-6 col-md-4 col-lg-33/divdiv classcol-xs-12 col-sm-6 col-md-4 col-lg-34/div/div/div
/body
/html如下是两种布局容器上下对应。 如下全是栅格系统1行12列每个div跨3列最后一个div改为4了如下数字4每个横跨4列。 如下先看右边浏览器大小即屏幕大小为984小于992为sm屏幕所以选择sm横跨6列所以显示2列。
2.3 样式_表格/按钮/图片/表单class属性for属性联动
!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelink href../css/bootstrap.css relstylesheet !--点进bootstrap.css可修改table-striped等参数--script src../js/jquery-3.3.1.js/scriptscript src../js/bootstrap.js/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodytable classtable table-striped table-bordered table-hover !--table-striped:隔行换色。table-bordered带灰色边框。table-hover: 触摸换色--trtd1/tdtd2/tdtd3/tdtd4/td/trtrtd1/tdtd/tdtd/tdtd/td/trtrtd1/tdtd/tdtd/tdtd/td/trtrtd1/tdtd/tdtd/tdtd/td/trtrtd1/tdtd/tdtd/tdtd/td/trtrtd1/tdtd/tdtd/tdtd/td/trtrtd1/tdtd/tdtd/tdtd/td/trtrtd1/tdtd/tdtd/tdtd/td/trtrtd1/tdtd/tdtd/tdtd/td/trtrtd1/tdtd/tdtd/tdtd/td/tr/table
/body
/html!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelink href../css/bootstrap.css relstylesheetscript src../js/jquery-3.3.1.js/scriptscript src../js/bootstrap.js/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111111--
body
hr
input typebutton value按钮
button按钮2/button
a href#超链接/a !-- a标签的本质也是按钮--hrinput typebutton value我的按钮 classbtn btn-success !-- 成功颜色绿色 --
button typebutton classbtn btn-default默认样式Default/button
button typebutton classbtn btn-primary首选项Primary/button
button typebutton classbtn btn-success成功Success/button
button typebutton classbtn btn-info一般信息Info/button
button typebutton classbtn btn-warning警告Warning/button
button typebutton classbtn btn-danger危险Danger/button
button typebutton classbtn btn-link链接Link/buttonhrhr
img src../img/banner_1.jpg classimg-responsive img-circle altResponsive image
/body
/html!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelink href../css/bootstrap.css relstylesheetscript src../js/jquery-3.3.1.js/scriptscript src../js/bootstrap.js/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111111--
body
!--label : 默认有一个字体加粗效果联动效果: 设置: for属性值要跟其他的某个标签的id一致 (关联)
--blabel/blabel !--加粗--divlabel用户名/label !--加粗--input typetext !--点击用户名鼠标不会自动跳到这个框中--/div!--11111111111111111111111111111111111111111111111111111111111111111111111-- hr form actiondiv classform-group !--form-group把设置成一整个模块横跨满网页。上下成组的div间还有间距--label forexamEmail address/label !-- forexam关联到下行id -- input typeemail classform-control idexam placeholderEmail !--点击Email address鼠标不会自动跳到这个框中--/div!--1111111111111111111111111111111111111111111111111111111111111111111111111-- div classform-grouplabel forexampleInputPassword1Password/labelinput typepassword classform-control idexampleInputPassword1 placeholderPassword!--form-control圆角矩形样式--/div!--111111111111111111111111111111111111111111111111111111111111111111111111111-- div classform-grouplabel forexampleInputFileFile input/labelinput typefile idexampleInputFilep classhelp-blockExample block-level help text here./p/div!--11111111111111111111111111111111111111111111111111111111111111111111111111-- div classcheckboxlabelinput typecheckbox Check me out/label/divbutton typesubmit classbtn btn-defaultSubmit/button/form
/body
/html2.4 组件_分页/导航条nav横着laquo书名号《sr-only
!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelink href../css/bootstrap.css relstylesheetscript src../js/jquery-3.3.1.js/scriptscript src../js/bootstrap.js/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111111--
body!--nav : div语义化标签 header/main/footernavigation 导航 nav bar 导航栏/条--nav aria-labelPage navigationul classpaginationlia href# aria-labelPreviousspan aria-hiddentruelaquo;/span /a/lilia href#1/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href# aria-labelNextspan aria-hiddentrueraquo;/span/a/li/ul/nav
/body
/html!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelink href../css/bootstrap.css relstylesheetscript src../js/jquery-3.3.1.js/scriptscript src../js/bootstrap.js/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111111111--
body
nav classnavbar navbar-defaultdiv classcontainer-fluid !--第一部分 : 商标 和 汉堡按钮。 data-target : 某个id值 - 关联 --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalse !--如上data-target绑定下面第二部分id即button点击事件被触发会关联下面第二部分-- span classsr-onlyToggle navigation/span!--sr-only:screen reader:屏幕阅读器:声音-- span classicon-bar/span !--汉堡按钮三条横线--span classicon-bar/spanspan classicon-bar/span/button a classnavbar-brand hrefhttp://www.itcast.cn传智播客/a !--商标--/div!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- !--第二部分 : 导航选项: 汉堡按钮展开部分--div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#黑马程序员 span classsr-only(current)/span/a/lilia href#博学谷/a/lili classdropdowna href# classdropdown-toggledata-toggledropdown rolebutton aria-haspopuptruearia-expandedfalse下拉span classcaret/span !--这行span就是多了一个箭头去除了还可下拉-- /aul classdropdown-menulia href#酷丁鱼/a/lilia href#传智学院/a/lilia href#院校邦/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button !--classbtn btn-default设置了样式 -- /form/div!-- /.navbar-collapse --/div!-- /.container-fluid --
/nav
/body
/html2.5 插件_模态框和轮播图 class“modal-header” 头
!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelink href../css/bootstrap.css relstylesheetscript src../js/jquery-3.3.1.js/scriptscript src../js/bootstrap.js/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--
body!-- Button trigger modal -- !-- 按钮触发器 : data-target --button typebutton classbtn btn-primary btn-lg data-togglemodal data-target#myModalLaunch demo modal !-- btn-lg: 尺寸 --/button!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- !-- Modal -- !-- 模态框--div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-header !-- 头-- !--data-dismissmodal : 这个按钮被点击,模态框消失times乘号模态框右上角--button typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabelModal title/h4/div!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111-- div classmodal-body !-- 中-- !--加入一个表单-- form actiondiv classform-grouplabel forexamEmail address/labelinput typeemail classform-control idexam placeholderEmail/divdiv classform-grouplabel forexampleInputPassword1Password/labelinput typepassword classform-control idexampleInputPassword1 placeholderPassword/divdiv classform-grouplabel forexampleInputFileFile input/labelinput typefile idexampleInputFilep classhelp-blockExample block-level help text here./p/divdiv classcheckboxlabelinput typecheckbox Check me out/label/divbutton typesubmit classbtn btn-defaultSubmit/button/form/div!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- div classmodal-footer !-- 尾-- button typebutton classbtn btn-default data-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div/div
/body
/html!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap 101 Template/titlelink href../css/bootstrap.css relstylesheetscript src../js/jquery-3.3.1.js/scriptscript src../js/bootstrap.js/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--
body
div idcarousel-example-generic classcarousel slide data-ridecarousel!-- Indicators : 指示器 --ol classcarousel-indicatorsli data-target#carousel-example-generic data-slide-to0 /lili data-target#carousel-example-generic data-slide-to1/lili data-target#carousel-example-generic data-slide-to2 classactive/li/ol !--网页右击刷新会回到classactive位置这张图位置下面classitem active也要对应--!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--!-- 图片主体 -- !-- Wrapper for slides -- div classcarousel-inner rolelistbox !--listbox列表盒--div classitemimg src../img/banner_1.jpg alt... !-- 0索引--div classcarousel-caption西安有大雁塔,/div/divdiv classitemimg src../img/banner_2.jpg alt... !-- 1索引--div classcarousel-caption.../div/divdiv classitem activeimg src../img/banner_3.jpg alt... !-- 2索引--div classcarousel-caption.../div/div/div!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- !-- Controls : 控制器 -- !-- data-target和href一个性质 -- a classleft carousel-control href#carousel-example-generic rolebutton data-slideprevspan classglyphicon glyphicon-chevron-left aria-hiddentrue/span !-- glyphicon-chevron-left是一个图标封装在font文件夹文件里 -- span classsr-onlyPrevious/span/aa classright carousel-control href#carousel-example-generic rolebutton data-slidenextspan classglyphicon glyphicon-chevron-right aria-hiddentrue/spanspan classsr-onlyNext/span/a
/div
/body
/html2.6 案例_黑马旅游首页classimg-responsive图片压缩
//index.html
!DOCTYPE html
html langzh-CN
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedge!--meta nameviewport contentwidthdevice-width, initial-scale1--meta nameviewport contentwidthdevice-width, initial-scale1.0!-- meta nameviewport contentwidthdevice-width, initial-scale1.0--titleBootstrap 101 Template/title!-- Bootstrap --link hrefcss/bootstrap.css relstylesheet!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery所以必须放在前边) --script srcjs/jquery-3.2.1.min.js/script!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --script srcjs/bootstrap.js/scriptstyle*{margin: 0px;padding: 0px;}/* div{border: 1px solid red;}*//* search_input 文本框宽400高36左浮动边框2颜色#ffc900左内边距10外轮廓outline设置为0.search_button 点击按钮是一个链接左浮动宽90高36背景色#ffc900行高36文本居中*/.search_input{width: 300px;height: 36px;float: left;border: 2px solid #ffc900;padding-left: 10px;outline: 0px;}.search_button{float: left;width: 90px;height: 36px;background-color: #ffc900;line-height: 36px;text-align: center;}/style
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111111--
bodydiv classcontainerdiv classcontainer-fluid !--第1行一张图-- img srcimage/top_banner.jpg classimg-responsive / /div!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111-- div classcontainerdiv classrow !--第2行列的比例4 5 3-- div classcol-md-4 text-centerimg srcimage/logo.jpg class//div!--.search_input 文本框宽400高36左浮动边框2颜色#ffc900左内边距10外轮廓outline设置为0.search_button 点击按钮是一个链接左浮动宽90高36背景色#ffc900行高36文本居中-- div classcol-md-5 stylepadding-top: 10pxinput typetext placeholder请输入 classsearch_input/!-- button value搜索 classsearch_button/button--a href# classsearch_button搜索/a/divdiv classcol-md-3img srcimage/hotel_tel.png classimg-responsive width70%//div/div/div!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111111-- !-- 导航条 -- !--第3行可以将前一文章导航栏复制进来-- nav classnavbar navbar-defaultdiv classcontainer-fluiddiv classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapse data-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#首页/a/divdiv classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#门票 span classsr-only(current)/span/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/lilia href#酒店/a/li/ul/div !-- /.navbar-collapse --/div !-- /.container-fluid --/nav!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111--!--轮播图-- !--第4行可以将上一节复制进来-- div idcarousel-example-generic classcarousel slide data-ridecarousel!-- Indicators --ol classcarousel-indicatorsli data-target#carousel-example-generic data-slide-to0 classactive/lili data-target#carousel-example-generic data-slide-to1/lili data-target#carousel-example-generic data-slide-to2/li/ol !-- Wrapper for slides --div classcarousel-inner rolelistboxdiv classitem activeimg srcimage/banner_1.jpg alt...div classcarousel-caption.../div/divdiv classitemimg srcimage/banner_2.jpg alt...div classcarousel-caption.../div/divdiv classitemimg srcimage/banner_3.jpg alt...div classcarousel-caption.../div/div/div !-- Controls --a classleft carousel-control href#carousel-example-generic rolebutton data-slideprevspan classglyphicon glyphicon-chevron-left aria-hiddentrue/spanspan classsr-onlyPrevious/span/aa classright carousel-control href#carousel-example-generic rolebutton data-slidenextspan classglyphicon glyphicon-chevron-right aria-hiddentrue/spanspan classsr-onlyNext/span/a/div !--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111--div classcontainer-fluid !--第5行--div classrow!-- img srcimage/icon_5.jpg/b黑马精选/bbr/span styleborder-bottom: 2px solid #ffc900;width: 100%; 2/span--!--border-bottom 黑马精选 底部的横线--div classjx_top styleborder-bottom: 2px solid #ffc900;height: 40pximg srcimage/icon_5.jpgspan黑马精选/span/div/div/div!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111--div classcontainer-fluid !--第6行列比例3 3 3 3-- div classrow div classcol-md-3img srcimage/jiangxuan_1.jpg classimg-responsive /div classcaptionp上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/div/divdiv classcol-md-3img srcimage/jiangxuan_1.jpg classimg-responsive /div classcaptionp上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/div/divdiv classcol-md-3img srcimage/jiangxuan_1.jpg classimg-responsive /div classcaptionp上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/div/divdiv classcol-md-3img srcimage/jiangxuan_1.jpg classimg-responsive /div classcaptionp上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/div/div/div/div!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111--div classcontainer-fluid !--第7行-- div classrowdiv classjx_top styleborder-bottom: 2px solid #ffc900;height: 40px ; margin-bottom: 10pximg srcimage/icon_6.jpgspan国内游/span/div/div/div!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--div classcontainer-fluid !--第8行--div classrowdiv classcol-md-4img srcimage/guonei_1.jpg classimg-responsive//divdiv classcol-md-8 !--看成12列下面是自己的相对比例--div classrowdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/div/div/div/div/div!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- div classcontainer-fluiddiv classrow!-- img srcimage/icon_5.jpg/b黑马精选/bbr/span styleborder-bottom: 2px solid #ffc900;width: 100%; 2/span--div classjx_top styleborder-bottom: 2px solid #ffc900;height: 40px; margin-bottom: 10pximg srcimage/icon_6.jpgspan境外游/span/div/div/div!--111111111111111111111111111111111111111111111111111111111111111111111111111111111--div classcontainer-fluiddiv classrowdiv classcol-md-4img srcimage/guonei_1.jpg classimg-responsive//divdiv classcol-md-8div classrowdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/divdiv classcol-md-4img srcimage/jiangxuan_4.jpg classimg-responsive/p上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/pspan stylecolor: red网付价: 899/span/div/div/div/div/div!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-- div classcontainer-fluiddiv classrowimg srcimage/footer_service.png classimg-responsive //divdiv classrow text-center styleheight: 40px;line-height: 40px;background-color: #ffc900;江苏传智播客教育科技股份有限公司 版权所有Copyright 2006‐2018, All Rights Reserved 苏ICP备16007882/div/div/div
/body
/html3.vue创建实例
3.1 vue安装MVVMVMView-Modelvue是mvvm架构的js框架 html能被浏览器解析成本低就像静态文件一样拿来就能用性能高。jsp不能被浏览器解析必须经过服务端处理成html再返回前端。 如下vue三种安装方式 CDN服务器存静态资源图片js文件css文件。应用场景直播视频对速度要求高的网站加速资源请求。 idea创建vue工程-y(yes)Static Web - Static Web。
3.2 案例对象是vm里面el等是构造参数
如下拖进来表示导入因为是js代码所以在 script 标签里。 网页显示如下。 如下网页控制台name属性是我们自己写的上面的网页显示也跟着变。
3.3 案例num是数据即M前端是V这样交互简化了jquary(js)
!DOCTYPE html
html langen
headmeta charsetUTF-8title入门案例2/title!--1.导入vue.js--script srcnode_modules/vue/dist/vue.js/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111--
body
div idapp !--视图模型--{{name}}比较帅br有很多粉丝{{num}}个input typetext v-modelnum/brbutton v-on:clickadd刷粉/button
/div
/body!--11111111111111111111111111111111111111111111111111111111111111111111111111--
script//2.创建vue的实例//{}对象//数据的双向绑定必须和表单控件input select texteare进行绑定//v-model将表单控件与vue定义的属性进行绑定var vm new Vue({//el element 元素el: #app,//3.将vue的实例与视图元素进行绑定指定vue的操作范围data: {//4.定义需要渲染的数据模型name: 宝强,//定义数据num: 100},methods: {//定义用户事件或方法 function add(){} 或 addfunction(){} add() { //ES6语法this.num;},other() {this.add();}}});
/script
/html3.4 vue实例先绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8title创建vue的实例/title!--1.导入vue.js--script srcnode_modules/vue/dist/vue.js/script
/head!--11111111111111111111111111111111111111111111111111111111111111111111111111--
body !--视图模块--
{{name}}1div idapp {{name}} !--渲染数据 {{}}差值表达式--button v-on:clickadd点我/button/div
{{name}}2
/body!--111111111111111111111111111111111111111111111111111111111111111111111111--
script var vm new Vue({ //2.创建vue的实例el:#app, //id选择器将vue的实例与视图元素进行绑定指定vue的操作范围data:{ //定义需要渲染的数据模型name:jack //定义数据},methods:{ //定义用户事件或方法add(){alert(别瞎点);}}});
/script
/html3.5 this/指令/插值表达式this就是当前vue实例在vue对象内部必须使用this才能访问vue中定义的data内属性或者methods中定义的方法
$vue框架自己的属性或方法用于区分与用户自定义的属性或方法。指令在视图元素中使用v-前缀的属性只有vue能识别。
!DOCTYPE html
html langen
headmeta charsetUTF-8title入门案例1/title!--1.导入vue.js--script srcnode_modules/vue/dist/vue.js/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111--
bodyh3差值表达式{{}}}/h3div idapp基本数据类型{{name}}br对象数据类型{{user.name}}--{{user.age}}br表达式{{11}}brjs内置对象{{new Date()}}br调用方法{{add()}}br/div
/body!--111111111111111111111111111111111111111111111111111111111111111111111111--
scriptvar vm new Vue({//el element 元素el:#app, //3.将vue的实例与视图元素进行绑定指定vue的操作范围data:{ //4.定义需要渲染的数据模型name:jack,user:{name:ross,age:18}},methods:{add(){return 你是最棒的;}}});
/script
/html3.6 v-textv-html解决插值闪烁将数据渲染到页面 !DOCTYPE html
html langen
headmeta charsetUTF-8title入门案例1/titlescript srcnode_modules/vue/dist/vue.js/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111--
bodyh3v-textbrv-html/h3div idappv-text:li v-textname/brv-html:li v-htmlname//div
/body!--111111111111111111111111111111111111111111111111111111111111111111111111--
scriptvar vm new Vue({el:#app,//3.将vue的实例与视图元素进行绑定指定vue的操作范围data:{//4.定义需要渲染的数据模型name:bjack/b,},});
/script
/html差值闪烁差值表达式数据没过来显示源码。
3.7 v-model数据的双向绑定使用v-model实现与表单form控件的双向绑定其他控件只能单向 !DOCTYPE html
html langen
headmeta charsetUTF-8titlev-model/titlescript srcnode_modules/vue/dist/vue.js/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111--
bodyh3v-model 实现数据的双向绑定/h3div idapp{{name}}brinput typetext v-modelname / !--input表单元素v-model--/div
/body!--111111111111111111111111111111111111111111111111111111111111111111111111--
scriptvar vm new Vue({el:#app, data:{ //定义需要渲染的数据模型name:,},});
/script
/html3.8 v-onv-for给页面元素绑定事件 !DOCTYPE html
html langen
headmeta charsetUTF-8titlev-on/titlescript srcnode_modules/vue/dist/vue.js/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111--
bodyh3v-for 遍历数据/h3div idappulli v-foritem in users{{item.name}}-- {{item.gender}}-- {{item.age}}/li/ul-------序号ulli v-for(item,indx) in users{{indx}}--{{item.name}}-- {{item.gender}}-- {{item.age}}/li/ul--------遍历对象ulli v-for(v,k,index) in user !--很少用--{{index1}}--- {{v}}-- {{k}}/li/ul/div
/body!--111111111111111111111111111111111111111111111111111111111111111111111111--
scriptvar vm new Vue({el:#app, data:{ users:[{name: 柳岩, gender: 女, age: 21},{name: 有哥, gender: 男, age: 30},{name: 范冰冰, gender: 女, age: 24},{name: 刘亦菲, gender: 女, age: 18},{name: 古力娜扎, gender: 女, age: 25}],user:{name:柳岩, gender:女, age: 21}}});
/script
/html3.9 v-ifv-show渲染是源码不同于显示
!DOCTYPE html
html langen
headmeta charsetUTF-8title v-ifv-show根据条件渲染/titlescript srcnode_modules/vue/dist/vue.js/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111--
bodyh3v-ifv-show根据条件渲染/h3div idappp v-ifshow看得见我if/p p v-else !--if else必须连着写中间不能加任何元素-- 我是看不见else/p------v-showp v-showshow我是v-show/p/div
/body!--1111111111111111111111111111111111111111111111111111111111111111111111--
scriptvar vm new Vue({el:#app, data:{show:true}});
/script
/html3.10 v-bind给html的属性绑定值html元素本来就有的属性 如nameid等 !DOCTYPE html
html langen
headmeta charsetUTF-8title v-bind/titlescript srcnode_modules/vue/dist/vue.js/script
/head!--1111111111111111111111111111111111111111111111111111111111111111111111111--
bodyh3v-bind 给用html元素绑定值/h3div idappa :namename v-bind:hrefurlbaidu/abra :idid :hrefurlbaidu/a !--上行的简写--/div
/body!--1111111111111111111111111111111111111111111111111111111111111111111111111--
scriptvar vm new Vue({el:#app,data:{url:http://www.baidu.com,name:baidu,id:my}});
/script
/html下行是上行的简写。
3.11 computed计算属性进行逻辑处理才能得到最终的结果
!DOCTYPE html
html langen
headmeta charsetUTF-8title计算属性/title!--1.导入vue.js--script srcnode_modules/vue/dist/vue.js/script
/head!--111111111111111111111111111111111111111111111111111111111111111111111111--
bodyh3计算属性/h3div idapp语文input typetext v-modelchinese/br数学input typetext v-modelmath/br总分{{total}}/div
/body!--111111111111111111111111111111111111111111111111111111111111111111111111--
script//2.创建vue的实例//{}对象var vm new Vue({//el element 元素el:#app, //3.将vue的实例与视图元素进行绑定指定vue的操作范围data:{chinese:100,math:10},computed:{total(){return this.chinesethis.math;}}});
/script
/html3.12 watch监控对用户界面输入数据进行异步校验 3.13 组件可重复使用的代码
