12 2018 档案

摘要:<style> *{ padding: 0; margin: 0; } .box{ width: 400px; height: 400px; border-radius: 200px; background-color: #ccc; margin:100px auto; position: rela 阅读全文
posted @ 2018-12-26 23:38 lujieting0 阅读(209) 评论(0) 推荐(0) 编辑
摘要:<style> *{ padding: 0; margin: 0; } body{ background-color: #31965b; } .box{ width: 440px; margin:100px auto; } .box>img{ transition: transform 1s; } 阅读全文
posted @ 2018-12-26 23:37 lujieting0 阅读(5427) 评论(0) 推荐(0) 编辑
摘要:<style> *{ padding: 0; margin: 0; } .pkBox{ width: 155px; height: 219px; margin: 200px auto; position: relative; } .pkBox>img{ width: 100%; height: 10 阅读全文
posted @ 2018-12-26 23:36 lujieting0 阅读(300) 评论(0) 推荐(0) 编辑
摘要:<style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: red; margin-left: 200px; margin-top:10px; /*添加过渡效果 css样式名称 耗时* 阅读全文
posted @ 2018-12-26 23:35 lujieting0 阅读(216) 评论(0) 推荐(0) 编辑
摘要:<style> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; background-color: red; position: absolute; left: 100px; top: 100px; /*添加过渡效果:过渡效 阅读全文
posted @ 2018-12-26 23:31 lujieting0 阅读(167) 评论(0) 推荐(0) 编辑
摘要:<style> *{ padding: 0; margin: 0; } .menu{ width: 200px; height:auto; margin:100px auto; } .item > h3{ height: 40px; line-height: 40px; background-col 阅读全文
posted @ 2018-12-26 23:31 lujieting0 阅读(196) 评论(0) 推荐(0) 编辑
摘要:<style> *{ padding: 0; margin: 0; } /*提升移动端响应区域的大小*/ a{ width: 50px; height: 50px; display: block; background-color: #ddd; margin:100px auto; box-sizi 阅读全文
posted @ 2018-12-26 23:30 lujieting0 阅读(147) 评论(0) 推荐(0) 编辑
摘要:<style> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; margin:100px auto; box-sizing: border-box; border: 27px solid red; /*padding: 27 阅读全文
posted @ 2018-12-26 23:30 lujieting0 阅读(193) 评论(0) 推荐(0) 编辑
摘要:<style> div{ width: 300px; height: 500px; border: 1px solid red; /*添加背景*/ background-image: url("images/img/bg-img.jpg"); /*background-image: url("ima 阅读全文
posted @ 2018-12-26 23:29 lujieting0 阅读(178) 评论(0) 推荐(0) 编辑
摘要:<style> /*线性渐变*/ div{ width: 300px; height: 300px; /*添加渐变:渐变不是一个单一钩,它产生的是图像,所以需要使用background*/ /*linear-gradient(方向,开始颜色 位置,颜色2 位置,颜色3 位置...);*/ /*方向: 阅读全文
posted @ 2018-12-26 23:28 lujieting0 阅读(688) 评论(0) 推荐(0) 编辑
摘要:<style> *{ padding: 0; margin: 0; } body { margin: 0; padding: 0; background-color: #F7F7F7; } img { width: 100%; display: block; } .items { padding: 阅读全文
posted @ 2018-12-26 23:27 lujieting0 阅读(221) 评论(0) 推荐(0) 编辑
摘要:<!--/*设置盒模型*/--><!--content-box:你设置的width属性值仅仅是内容的宽度, 盒子的最终的宽高值在width的基础上再加上padding和border的宽度*/--><!--border-box:你设置的width属性值就是盒子的最终的宽度, 包含了border和pad 阅读全文
posted @ 2018-12-19 20:09 lujieting0 阅读(367) 评论(0) 推荐(0) 编辑
摘要:/*添加阴影 text-shadow:offsetX offsetY blur color*/.demo1{ text-shadow: -2px -2px 5px red;}.demo2{ text-shadow: 0px 0px 30px #fff;}/*多层阴影效果*/.demo3{ text- 阅读全文
posted @ 2018-12-19 20:08 lujieting0 阅读(228) 评论(0) 推荐(0) 编辑
摘要:/*1.使用预设了值*//**//*2.使用颜色拾取器*//**//*rgb(红,绿,蓝)*/background-color: rgb(255,150,0);/*hsl(颜色(0~360),饱和度(0%~100%),明度(0%~100%))*//*明度默认是50%,一般建议保留50的值*/back 阅读全文
posted @ 2018-12-19 20:07 lujieting0 阅读(515) 评论(0) 推荐(0) 编辑
摘要:div:nth-of-type(2)::before{ /*必须添加content属性,否则后期不可见*/ content: ""; /*默认是行级元素,如果想设置宽高,就必须转换为块级元素*/ position: absolute; width: 20px; height: 20px; backg 阅读全文
posted @ 2018-12-19 20:05 lujieting0 阅读(1382) 评论(0) 推荐(0) 编辑
摘要:/*属性选择器:属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素*//*1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签*/li[style]{ text-decoration: underline;}/*2.E[attr=value 阅读全文
posted @ 2018-12-19 20:04 lujieting0 阅读(438) 评论(0) 推荐(0) 编辑
摘要:<h3 class="playerTitle">视频播放器</h3><div class="player"> <video src="mp4/chrome.mp4"></video> <div class="controls"> <a href="javascript:;" class="switc 阅读全文
posted @ 2018-12-19 20:01 lujieting0 阅读(359) 评论(0) 推荐(0) 编辑
摘要:<pre>sessionStorage的使用:存储数据到本地。存储的容量5mb左右。 1.这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据 2.它的生命周期为关闭当前页面,关闭页面,数据会自动清除setItem(key,value):存储数据,以键值对的方式存储getItem 阅读全文
posted @ 2018-12-19 20:00 lujieting0 阅读(296) 评论(0) 推荐(0) 编辑
摘要:<style> .de{ width: 300px; height: 300px; border: 1px solid #ddd; } </style></head><body><div id="demo" class="de"></div><script> var x=document.getEl 阅读全文
posted @ 2018-12-13 22:03 lujieting0 阅读(261) 评论(0) 推荐(0) 编辑
摘要:<style> *{ margin: 0; padding: 0; } .div1{ width: 200px; height: 200px; border: 1px solid red; position: relative; margin-left:20px; float: left; } .d 阅读全文
posted @ 2018-12-13 22:02 lujieting0 阅读(293) 评论(0) 推荐(0) 编辑
摘要:<style> div{ height: 20px; width: 0%; background-color:red; } </style></head><body><!--展示图片:--><!--src:指定路径(资源定位--url):src请求的是外部文件,一般来说是服务器资源。意味着它需要向服 阅读全文
posted @ 2018-12-13 22:01 lujieting0 阅读(1103) 评论(0) 推荐(0) 编辑
摘要:<script> /*1.ononline:网络连通的时候触发这个事件*/ window.addEventListener("online",function(){ alert("网络连通了"); }); /*2.onoffline:网络断开时触发*/ window.addEventListener 阅读全文
posted @ 2018-12-13 22:00 lujieting0 阅读(244) 评论(0) 推荐(0) 编辑
摘要:<style> .red{ color:red } .green{ color: green; } .blue{ color: blue; } .underline{ text-decoration: underline; } </style></head><body><ul> <li class= 阅读全文
posted @ 2018-12-13 21:59 lujieting0 阅读(291) 评论(0) 推荐(0) 编辑
摘要:<!--定义--><!--规范:1.data-开头2.data-后必须至少有一个字符,多个单词使用-连接建议:1.名称应该都使用小写--不要包含任何的大写字符2.名称中不要有任何的特殊符号3.名称不要副作用纯数字--><p data-school-name="itcast">传智播客</p><p d 阅读全文
posted @ 2018-12-13 21:59 lujieting0 阅读(144) 评论(0) 推荐(0) 编辑
摘要:<style> .red{ color: red; } .green{ color: green; } .blue{ color: blue; } </style></head><body><ul> <li>请选择</li> <li class="red">前端</li> <li class="gr 阅读全文
posted @ 2018-12-13 21:58 lujieting0 阅读(121) 评论(0) 推荐(0) 编辑
摘要:!--embed:可以直接插入音频视频,本质是通过本机安装的音频视频播放软件来播放的。要求必须已经安装了这些软件 兼容性--><!--flash: 1.先学习flash,增加使用成本 2.iphone,ipd,不支持flash--><!--audio:音频--><!--src:播放文件的路径cont 阅读全文
posted @ 2018-12-13 21:57 lujieting0 阅读(246) 评论(0) 推荐(0) 编辑
摘要:<form action=""> <fieldset> <legend>学生档案</legend> <label for="userName">姓名:</label> <input type="text" name="userName" id="userName" placeholder="请输入您 阅读全文
posted @ 2018-12-13 21:55 lujieting0 阅读(182) 评论(0) 推荐(0) 编辑
摘要:<!--max:最大值value:当前进度值--><progress max="100" value="100"></progress><!--度量器:衡量当前进度值--><!--high:规定的较高的值<!--high:规定的较高的值low:规定的较低的值max:最大值min:最小值value:当 阅读全文
posted @ 2018-12-13 21:54 lujieting0 阅读(162) 评论(0) 推荐(0) 编辑
摘要:<form action=""> 用户名:<input type="text" name="userName" id="userName"><br> 电话:<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> < 阅读全文
posted @ 2018-12-13 21:53 lujieting0 阅读(446) 评论(0) 推荐(0) 编辑
摘要:<form action=""> 用户名:<input type="text" name="userName"> <br> 密码:<input type="password" name="userPwd"> <br> <!--email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含 阅读全文
posted @ 2018-12-13 21:52 lujieting0 阅读(515) 评论(0) 推荐(0) 编辑
摘要:<form action=""> <!--专业: <select name="" id=""> <option value="1">前端与移动开发</option> <option value="2">java</option> <option value="3">javascript</optio 阅读全文
posted @ 2018-12-13 21:52 lujieting0 阅读(268) 评论(0) 推荐(0) 编辑
摘要:<!--语义化标签兼容--><script src="html5shiv.min.js"></script><!--可以用了代替div并不需要class--><header>头部</header><nav>导航</nav><main> <article>主体内容(左边)</article> <asi 阅读全文
posted @ 2018-12-13 21:51 lujieting0 阅读(135) 评论(0) 推荐(0) 编辑
摘要:<style> *{ margin: 0; padding: 0; list-style:none; } div{ width: 1200px; height: 400px; border:2px solid #000; margin: 100px auto; } li{ width: 240px; 阅读全文
posted @ 2018-12-12 20:34 lujieting0 阅读(296) 评论(0) 推荐(0) 编辑
摘要:<style> div{ width: 200px; height: 200px; background-color: pink; } </style></head><body><div></div><script src="jquery-1.12.4.js"></script><script sr 阅读全文
posted @ 2018-12-12 20:32 lujieting0 阅读(109) 评论(0) 推荐(0) 编辑
摘要:<style> ul { list-style: none; } li { float: left; width: 200px; height: 200px; background: pink; text-align: center; line-height: 200px; margin: 0 20 阅读全文
posted @ 2018-12-12 20:31 lujieting0 阅读(249) 评论(0) 推荐(0) 编辑
摘要:<style> * { padding: 0; margin: 0; } .comment { font-size: 40px; color: #ff16cf; } .comment li { float: left; } ul { list-style: none; }</style><scrip 阅读全文
posted @ 2018-12-12 20:30 lujieting0 阅读(262) 评论(0) 推荐(0) 编辑
摘要:<a href="http://www.baidu.com" id="link">百度</a><script src="jquery-1.12.4.js"></script><script> $(function () { $("#link").on("click",function (e) { a 阅读全文
posted @ 2018-12-12 20:29 lujieting0 阅读(644) 评论(0) 推荐(0) 编辑
摘要:<div> 这是一个div</div><p> 这是一个p</p><script src="jquery-1.12.4.js"></script><script> $(function () { //100,注册的时候的时候,把100传到事件里面去。 var money = 100; //on(typ 阅读全文
posted @ 2018-12-12 20:28 lujieting0 阅读(208) 评论(0) 推荐(0) 编辑
摘要:<style> * { padding: 0; margin: 0; } .wrap { width: 410px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px s 阅读全文
posted @ 2018-12-12 20:27 lujieting0 阅读(203) 评论(0) 推荐(0) 编辑
摘要:<input type="button" value="触发" id="btn"/><p>这是一个p标签</p><script src="jquery-1.12.4.js"></script><script> $(function () { //注册事件 $("input").on("click", 阅读全文
posted @ 2018-12-12 20:27 lujieting0 阅读(184) 评论(0) 推荐(0) 编辑
摘要:<input type="button" value="增加" id="btn"><div> <p>111111</p> <p>111111</p> <p>111111</p> <p>111111</p></div><script src="jquery-1.12.4.js"></script><s 阅读全文
posted @ 2018-12-12 20:26 lujieting0 阅读(694) 评论(0) 推荐(0) 编辑
摘要:<style> * { margin: 0; padding: 0; } .father { width: 400px; height: 400px; background-color: pink; position: relative; margin: 100px; } .son { width: 阅读全文
posted @ 2018-12-12 20:25 lujieting0 阅读(356) 评论(0) 推荐(0) 编辑
摘要:<style> #box { width: 500px; height: 500px; background-color: pink; } </style></head><body><!--点击按钮,在div里面创建一个新的p元素--><input type="button" value="按钮" 阅读全文
posted @ 2018-12-12 20:25 lujieting0 阅读(272) 评论(0) 推荐(0) 编辑
摘要:<style> body { height: 8000px; } a { color: #FFF; } .actGotop { position: fixed; bottom: 50px; right: 50px; width: 150px; height: 195px; display: none 阅读全文
posted @ 2018-12-12 20:23 lujieting0 阅读(484) 评论(0) 推荐(0) 编辑
摘要:<style> * { margin: 0; padding: 0 } img { vertical-align: top; } .main { margin: 10px auto 0; width: 1000px; } .fixed { position: fixed; top: 0; left: 阅读全文
posted @ 2018-12-12 20:22 lujieting0 阅读(832) 评论(0) 推荐(0) 编辑
摘要:val方法:<input type="text" value="洋酒" id="txt"/><script src="jquery-1.12.4.js"></script><script> $(function () { $("#txt").focus(function () { //如果是默认值, 阅读全文
posted @ 2018-12-11 20:11 lujieting0 阅读(115) 评论(0) 推荐(0) 编辑
摘要:<style type="text/css"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: "微软雅黑"; font-size: 62.5%; } .boxDom { width: 1 阅读全文
posted @ 2018-12-11 20:07 lujieting0 阅读(183) 评论(0) 推荐(0) 编辑
摘要:<style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 600px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textar 阅读全文
posted @ 2018-12-11 20:06 lujieting0 阅读(507) 评论(0) 推荐(0) 编辑
摘要:<div id="box"> 我是内容</div><p class='des'>我是外面的p元素</p><script src="jquery-1.12.4.js"></script><script> $(function () { //创建jq对象 $("div").append('<a href 阅读全文
posted @ 2018-12-11 20:05 lujieting0 阅读(186) 评论(0) 推荐(0) 编辑
摘要:<style> select { width: 200px; background-color: teal; height: 200px; font-size: 20px; } .btn-box { width: 30px; display: inline-block; vertical-align 阅读全文
posted @ 2018-12-11 20:04 lujieting0 阅读(496) 评论(0) 推荐(0) 编辑
摘要:<style> ul { list-style: none; } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: 阅读全文
posted @ 2018-12-11 20:02 lujieting0 阅读(358) 评论(0) 推荐(0) 编辑
摘要:<input type="button" value="开始"/><input type="button" value="结束"/><div id="btn"></div><script src="jquery-1.12.4.js"></script><script> $(function () { 阅读全文
posted @ 2018-12-11 20:00 lujieting0 阅读(241) 评论(0) 推荐(0) 编辑
摘要:show():显示* hide():隐藏** slideDown():滑入* slideToggle():滑出** fadeIn():淡入* fadeOut():淡出* fadeToggle():切换 <div class="slider"> <ul> <li><a href="#"><img sr 阅读全文
posted @ 2018-12-11 19:58 lujieting0 阅读(338) 评论(0) 推荐(0) 编辑
摘要:<div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="j_tb"> <tr> 阅读全文
posted @ 2018-12-10 22:05 lujieting0 阅读(387) 评论(0) 推荐(0) 编辑
摘要:<h2> 美女画廊</h2><ul id="imagegallery"> <li><a href="imgs/imags/1.jpg" title="美女A"> <img src="imgs/imags/1-small.jpg" width="100" alt="美女1"/> </a></li> < 阅读全文
posted @ 2018-12-10 22:04 lujieting0 阅读(436) 评论(0) 推荐(0) 编辑
摘要:<img src="imgs/01.jpg" alt="京剧小公仔" title="京剧"><script src="jquery-1.12.4.js"></script><script> $(function () { //设置单个属性 attr(name,value) // $("img").a 阅读全文
posted @ 2018-12-10 22:03 lujieting0 阅读(151) 评论(0) 推荐(0) 编辑
摘要:<div class="wrapper"> <ul class="tab"> <li class="tab-item active">国际大牌<span>◆</span></li> <li class="tab-item">国妆名牌<span>◆</span></li> <li class="tab 阅读全文
posted @ 2018-12-10 22:02 lujieting0 阅读(476) 评论(0) 推荐(0) 编辑
摘要:<input type="button" value="添加basic类" ><input type="button" value="添加bigger类"><input type="button" value="移除bigger类"><input type="button" value="判断big 阅读全文
posted @ 2018-12-10 22:00 lujieting0 阅读(465) 评论(0) 推荐(0) 编辑
摘要:<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul><script src="jquery-1.12.4.js"></script><script> //修改单个样式 // $("li").css("backgroundColor","pink" 阅读全文
posted @ 2018-12-10 21:59 lujieting0 阅读(356) 评论(0) 推荐(0) 编辑
摘要:<script> $(function () { $("#left>li").mouseenter(function () { //让center中对应下标的li显示,其他li隐藏 var idx=$(this).index(); $("#center>li:eq("+idx+")").show() 阅读全文
posted @ 2018-12-10 21:57 lujieting0 阅读(353) 评论(0) 推荐(0) 编辑
摘要:<script> $(function () { //给所有的span注册点击事件,让当前span的兄弟div显示出来 $(".groupTitle").click(function () { //链式编程:在jQuery里面,方法可以一直调用下去。 $(this).next().slideDown 阅读全文
posted @ 2018-12-10 21:56 lujieting0 阅读(320) 评论(0) 推荐(0) 编辑
摘要:<div class="wrap"> <ul> <li><a href="#"><img src="imgs/01.jpg" alt=""/></a></li> <li><a href="#"><img src="imgs/02.jpg" alt=""/></a></li> <li><a href 阅读全文
posted @ 2018-12-10 21:54 lujieting0 阅读(126) 评论(0) 推荐(0) 编辑
摘要:<div class="wrap"> <ul> <li> <a href="javascript:void(0);">一级菜单1</a> <ul class="ul"> <li><a href="javascript:void(0);">二级菜单11</a></li> <li><a href="ja 阅读全文
posted @ 2018-12-10 21:52 lujieting0 阅读(149) 评论(0) 推荐(0) 编辑
摘要:<ul> <li id="btn1">1</li> <li>2</li> <li class="green">3</li> <li class="green">4</li> <li>5</li></ul><div class="green">1</div><div class="green">1</ 阅读全文
posted @ 2018-12-10 21:50 lujieting0 阅读(367) 评论(0) 推荐(0) 编辑
摘要:<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li></ul><script src="jquery-1.12.4.js"></script><script> $(function () { 阅读全文
posted @ 2018-12-10 21:47 lujieting0 阅读(377) 评论(0) 推荐(0) 编辑
摘要:<ul> <li id="cloth">衣服</li> <li>裤子</li> <li>外套</li> <li>袜子</li></ul><script src="jquery-1.12.4.js"></script><script> /* * DOM对象:用js的方式获取到的对象是DOM对象 * j 阅读全文
posted @ 2018-12-10 21:45 lujieting0 阅读(176) 评论(0) 推荐(0) 编辑
摘要://:入口函数的标准$(document).ready(function () { //注册事件,把on去掉,是个方法 $("#btn1").click(function () { //隐式迭代:偷偷的遍历,jquery会自动遍历 $("div").show(1000); }); $("#btn2" 阅读全文
posted @ 2018-12-10 21:44 lujieting0 阅读(167) 评论(0) 推荐(0) 编辑
摘要:1:真数组的长度是可变的,伪数组的长度不可变* 2:真数组可以使用数组中的方法(.forEach),伪数组不可以* 3:真数组可以使用原型辨别,伪数组没有__proto__和prototype //复习创建对象的三种方式* 1: 字面量的方式* 2:调用系统的函数构造* 3:自定义构造函数 //实例 阅读全文
posted @ 2018-12-07 13:58 lujieting0 阅读(2891) 评论(0) 推荐(0) 编辑
摘要:* 1:通过构造函数创建对象* 2:字面量的方式创建对象** */var reg=new RegExp(/\d{5}/);var str="我的电话号码是10086";//调用方法验证字符串是否匹配var flag=reg.test(str);console.log(flag);//true//字面 阅读全文
posted @ 2018-12-07 13:57 lujieting0 阅读(913) 评论(0) 推荐(0) 编辑
摘要:* 正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的 * * 正则表达式的作用:匹配字符串的 * * 在大多数编程语言中都可以使用 * * 正则表达式的组成:是由元字符或者限定符组成的一个式子 * ** 元字符:** . 表示的是:除了\n以外的任意的一 阅读全文
posted @ 2018-12-07 13:51 lujieting0 阅读(359) 评论(0) 推荐(0) 编辑
摘要:<h1>遍历 DOM 树</h1><p style="color: green;">Tip: 可以在遍历的回调函数中任意定制需求</p><div> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <div> <div> <span>haha</sp 阅读全文
posted @ 2018-12-07 13:49 lujieting0 阅读(383) 评论(0) 推荐(0) 编辑
摘要://浅拷贝var obj1={ age:10, sex:"男", car:["奥迪","宝马","奔驰","玛莎拉蒂"]};//另一个对象var obj2={};//写一个函数,作用:把一个对象的属性复制到另一个对象中,浅拷贝//把a对象中的所有的属性复制到对象b中function extend(a 阅读全文
posted @ 2018-12-07 13:48 lujieting0 阅读(139) 评论(0) 推荐(0) 编辑
摘要://递归:函数中调用函数自己,此时就是递归,递归一定要有结束的条件var i=0;function f1() { i++; if(i<5){ //条件 f1(); // } console.log("采蘑菇的小姑娘");}f1();// //案例:求n个数字的和function getSum(x) 阅读全文
posted @ 2018-12-07 13:47 lujieting0 阅读(157) 评论(0) 推荐(0) 编辑
摘要:* 沙箱:环境,虚拟* ()();* (());* * 优点:代码结束,释放空间* *///沙箱小案例(function () { var str="小白喜欢小黑"; str=str.substr(2);//截取从第二个后开始 console.log(str);//喜欢小黑})();(functio 阅读全文
posted @ 2018-12-07 13:45 lujieting0 阅读(183) 评论(0) 推荐(0) 编辑
摘要://函数模式的闭包,在一个函数中有一个函数function f1() { var num=10; function f2() { console.log(num); } f2();}f1();//对象模式的闭包,函数中有一个对象function f3() { var num=10; var obj= 阅读全文
posted @ 2018-12-07 13:43 lujieting0 阅读(207) 评论(0) 推荐(0) 编辑
摘要://获取某个对象的类型是不是你传入的类型//[10,20,30]是不是"[object Array]"//type 是变量 是参数 "[object Array]"//obj 是变量 是参数 [10,20,30]function getFunc(type) { return function (ob 阅读全文
posted @ 2018-12-07 13:41 lujieting0 阅读(307) 评论(0) 推荐(0) 编辑
摘要:// function f1(x,y) {// console.log((x+y)+" "+this);// }// //复制了一份的时候,把参数传入到f1函数中,x >10,y >20,null就是this,默认是window// //bind方法是复制的意思,参数可以在复制的时候传进去,也可以在 阅读全文
posted @ 2018-12-07 13:36 lujieting0 阅读(389) 评论(0) 推荐(0) 编辑
摘要:*apply和call都可以改变this的指向*函数的调用,改变this的指向** */function f1(x,y) { console.log((x+y)+" "+this); return "这是函数的返回值";}//apply和call的调用var r1=f1.apply(null,[10 阅读全文
posted @ 2018-12-07 13:35 lujieting0 阅读(206) 评论(0) 推荐(0) 编辑
摘要:* 普通函数中的this是谁? 》window* 对象.方法中的this是谁? >当前的实例对象* 定时器方法中的this是谁? >window* 构造函数中的this是谁? >实例对象* 原型对象中的this是谁? 》实例对象** *///普通函数function f1() { console.l 阅读全文
posted @ 2018-12-04 21:37 lujieting0 阅读(188) 评论(0) 推荐(0) 编辑
摘要:// //1:这类拷贝仅仅拷贝了地址,不在堆上面复制内容// var obj1={// name:"小东",// age:10,// sleep:function () {// console.log("睡觉啦");// }// };// //改变了地址的指向// var obj2=obj1;// 阅读全文
posted @ 2018-12-04 21:32 lujieting0 阅读(254) 评论(0) 推荐(0) 编辑
摘要:* 原型实现继承* 借用构造函数实现继承* 组合继承:原型继承+借用构造函数继承* */function Person(name,age,sex) { this.name=name; this.age=age; this.sex=sex;}Person.prototype.sayHi=functio 阅读全文
posted @ 2018-12-04 21:31 lujieting0 阅读(147) 评论(0) 推荐(0) 编辑
摘要:* 借用构造函数:构造函数的名字.call(当前对象,属性,属性,属性,····)* 解决了属性继承,并且值不重复的问题* 缺陷:父级类别中的方法不能继承* */function Person(name,age,sex,weight) { this.name=name; this.age=age; 阅读全文
posted @ 2018-12-04 21:30 lujieting0 阅读(357) 评论(0) 推荐(0) 编辑
摘要:function Person(name,age,sex) { this.name=name; this.age=age; this.sex=sex;}Person.prototype.eat=function () { console.log("吃好吃的");};Person.prototype. 阅读全文
posted @ 2018-12-04 21:29 lujieting0 阅读(159) 评论(0) 推荐(0) 编辑
摘要:function Person(age) { this.age=age;}//指向改变了Person.prototype={ eat:function () { console.log("吃吃吃"); }};//先添加原型方法Person.prototype.sayHi=function () { 阅读全文
posted @ 2018-12-04 21:26 lujieting0 阅读(234) 评论(0) 推荐(0) 编辑
摘要:// //自调用函数// (function (形参) {// var num=10;//局部变量// })(实参);// console.log(num);(function (win) { var num=10; //js是一门动态语言,对象没有属性,点了就有了 win.num=num;//把局 阅读全文
posted @ 2018-12-04 21:25 lujieting0 阅读(508) 评论(0) 推荐(0) 编辑
摘要:// //倒序字符串的方法String.prototype.myReverse=function () { for(var i=this.length-1;i>=0;i--){ console.log(this[i]); }};var str="1234567";str.myReverse();// 阅读全文
posted @ 2018-12-04 21:23 lujieting0 阅读(393) 评论(0) 推荐(0) 编辑
摘要:构造函数可以实例化对象* 构造函数中有一个属性叫prototype,是构造函数的原型对象* 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就说自己所在的原型对象所在的构造函数* 实例对象的原型对象(__proto__)指向的是该构造函数额原型对象* 构 阅读全文
posted @ 2018-12-04 21:20 lujieting0 阅读(1700) 评论(1) 推荐(0) 编辑
摘要:* 原型链:实例对象和原型对象之间的关系,主要是通过__proto__和prototype来联系** 原型的指向是可以改变的,所以js中是通过改变原型来实现继承** 原型的作用:* 实现数据共享,继承,都是为了节省内存空间* 如果属性和方法都需要共享,那么就把属性和方法添加到原型中 function 阅读全文
posted @ 2018-12-04 21:16 lujieting0 阅读(271) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><table id="tb" border="1"> <tbody id="tbd"> <tr> <td>猪猪: 阅读全文
posted @ 2018-12-03 15:27 lujieting0 阅读(164) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="button" value="拼接吧" id="btn"/><br/><input t 阅读全文
posted @ 2018-12-03 15:26 lujieting0 阅读(364) 评论(0) 推荐(0) 编辑
摘要:document.getElementById("btn").onclick=function () { //隐藏div //不占位 ver("dv").style.display="none"; //占位 //ver("dv").style.visibility="hidden"; //占位 // 阅读全文
posted @ 2018-12-03 15:25 lujieting0 阅读(941) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #list li { list-style-type: none; width: 80px; height: 30px; 阅读全文
posted @ 2018-12-03 15:25 lujieting0 阅读(475) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .wrap { width: 500px; margin: 1 阅读全文
posted @ 2018-12-03 15:24 lujieting0 阅读(225) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .box { width: 300px; height: 50 阅读全文
posted @ 2018-12-03 15:23 lujieting0 阅读(236) 评论(0) 推荐(0) 编辑
摘要:<style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 40 阅读全文
posted @ 2018-12-03 15:01 lujieting0 阅读(374) 评论(0) 推荐(0) 编辑
摘要:* client:可视区域* clientWidth:可视区域的宽(没有边框),边框内部的宽度* clientHeight:可视区域的高(没有边框),边框内部的高度* clientTop:上边边框的宽度* clientLeft:左边边框的宽度 <!DOCTYPE html><html lang="e 阅读全文
posted @ 2018-12-03 15:00 lujieting0 阅读(195) 评论(0) 推荐(0) 编辑
摘要:<style> .wrap{ width:1200px; margin:100px auto; } .slide { height:500px; position: relative; } .slide li{ position: absolute; left:200px; top:0; } .sl 阅读全文
posted @ 2018-12-03 14:58 lujieting0 阅读(211) 评论(0) 推荐(0) 编辑
摘要:<style> ul { list-style: none; } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: 阅读全文
posted @ 2018-12-03 14:57 lujieting0 阅读(247) 评论(0) 推荐(0) 编辑
摘要://计算后的样式属性 一个元素的任意的一个样式属性值function getStyle(element,attr) { //判断这个浏览器是否支持这个方法 return window.getComputedStyle?window.getComputedStyle(element,null)[att 阅读全文
posted @ 2018-12-02 21:03 lujieting0 阅读(214) 评论(0) 推荐(0) 编辑
摘要://计算后的样式属性 一个元素的任意的一个样式属性值function getStyle(element,attr) { //判断这个浏览器是否支持这个方法 return window.getComputedStyle?window.getComputedStyle(element,null)[att 阅读全文
posted @ 2018-12-02 21:02 lujieting0 阅读(238) 评论(0) 推荐(0) 编辑
摘要://计算后的样式属性 一个元素的任意的一个样式属性值function getStyle(element,attr) { //判断这个浏览器是否支持这个方法 return window.getComputedStyle?window.getComputedStyle(element,null)[att 阅读全文
posted @ 2018-12-02 21:01 lujieting0 阅读(188) 评论(0) 推荐(0) 编辑
摘要://匀速动画function animate(element,target) { //清理定时器 clearInterval(element.timeId); element.timeId=setInterval(function () { //获取元素当前位置 var current=elemen 阅读全文
posted @ 2018-12-02 20:52 lujieting0 阅读(203) 评论(0) 推荐(0) 编辑
摘要:<div class="top" id="topPart"> <img src="imgs/top.png" alt=""/></div><div class="nav" id="navBar"> <img src="imgs/nav.png" alt=""/></div><div class="m 阅读全文
posted @ 2018-12-02 20:51 lujieting0 阅读(237) 评论(0) 推荐(0) 编辑
摘要:<style> img{ position: absolute; } </style></head><body><img src="imgs/tianshi.gif" alt="" id="im"><script src="../DOM/commer.js"></script><script>// 阅读全文
posted @ 2018-12-02 20:48 lujieting0 阅读(266) 评论(0) 推荐(0) 编辑
摘要:* 没有脱离文档流* offsetLeft:父级元素margin+父级元素padding+父级元素border+自己的margin** 脱离文档流* 主要是自己的left和自己的margin //获取bodyconsole.log(document.body);//获取的是元素 标签//获取titl 阅读全文
posted @ 2018-12-02 20:47 lujieting0 阅读(194) 评论(0) 推荐(0) 编辑
摘要:<style> * { margin: 0; padding: 0; } ul { list-style: none; } img { vertical-align: top; } /*取消图片底部3像素距离*/ .box { width: 300px; height: 200px; margin: 阅读全文
posted @ 2018-12-02 20:44 lujieting0 阅读(321) 评论(0) 推荐(0) 编辑
摘要:<div class="all" id='box'> <div class="screen"><!--相框--> <ul> <li><img src="imgs/1.1.jpg" width="500" height="200"/></li> <li><img src="imgs/2.2.jpg" 阅读全文
posted @ 2018-12-01 18:16 lujieting0 阅读(250) 评论(0) 推荐(0) 编辑
摘要://对象中的属性和方法//location 对象console.log(window.location);//地址栏上#及后面的内容console.log(window.location.hash);//主机及端口号console.log(window.location.host);//主机名con 阅读全文
posted @ 2018-12-01 18:08 lujieting0 阅读(194) 评论(0) 推荐(0) 编辑
摘要:<input type="button" value="停止" id="btn"/><script> /* * 定时器 * 参数1:函数 * 参数2:时间 毫秒 * 执行过程:页面加载完毕后,过了1秒,执行一次代码,又过1秒再执行一次函数 * 返回值是定时器的id值 * * */ var timeI 阅读全文
posted @ 2018-12-01 18:08 lujieting0 阅读(151) 评论(0) 推荐(0) 编辑
摘要:<input type="button" value="点击" id="btn"/><script src="commer.js"></script><script> //为同一个元素绑定不同的事件指向同一个事件的处理函数 ver("btn").onclick=f1; ver("btn").onmo 阅读全文
posted @ 2018-12-01 18:06 lujieting0 阅读(256) 评论(0) 推荐(0) 编辑
摘要:<div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div></div><script src="commer.js"></script><!--事件的阶段--><!--1:事件捕获阶段-&#45;&#45;》从外向内 》1--><!--2:事件 阅读全文
posted @ 2018-12-01 18:04 lujieting0 阅读(116) 评论(0) 推荐(0) 编辑
摘要:<input type="button" value="点击" id="btn"/><input type="button" value="干掉第一个按钮的事件" id="btn2"/><script src="commer.js"></script> <!--解绑事件--> <!--注意:用什么方 阅读全文
posted @ 2018-12-01 18:03 lujieting0 阅读(192) 评论(0) 推荐(0) 编辑
摘要:<script> //为元素绑定事件兼容代码 //为任意元素.绑定任意的事件,任意的元素,事件的类型,事件处理函数 function addEventlistener(element,type,fn) { //判断浏览器是否支持这个方法 if(element.addEventListener){ e 阅读全文
posted @ 2018-12-01 18:00 lujieting0 阅读(152) 评论(0) 推荐(0) 编辑
摘要:<input type="button" value="点击" id="bt"/><div id="dv"></div><script src="commer.js"></script><script> var arr=[ {name:"百度",href:"http://www.baidu.com" 阅读全文
posted @ 2018-12-01 17:59 lujieting0 阅读(250) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示