css+js相关笔记
程序员文章站
2023-09-29 09:07:51
1.内联元素垂直居中的设置;
2.页头,页尾拼接;
3.圆角;
1.ajax语法;
2.判断字符串为空的方法;
3.截取地址栏的参数;
4.用反引号(键盘1左边的)做字符串拼接 ......
作者:故事我忘了c
个人微信公众号:程序猿的月光宝盒
个人微信公众号:程序猿的月光宝盒
css部分:
1.内联元素垂直居中的设置:
(1) 设置父级元素的行高 line-height,和高度 height
原则:line-height=height
(2) 再设置内联元素的
vertical-align: middle
2.页头,页尾拼接
通常在开发中,都会有公共的页面部分(不只是导航栏,头部,尾页等)
2.1拼接法则:
主页面中,需要拼接的地方,加入以下代码:
<iframe src="common/log_reg_top.html" height="60" scrolling="no" frameborder="no"></iframe>
参数解读:
src
:要贴进来的页面地址
height
:原页面的高
scrolling
:取消滚轮
frameborder
:取消框架的边缘线
2.2对应的css样式:
iframe{ /*变成块级元素*/ display: block; /*宽度100*/ width: 100%; }
如果嫌麻烦也可以写在2.1的代码里,这里作为抽取公共代码角度把他抽出来,放在一个公共的css样式里
3.圆角
3.1单词
border-radius
3.2语法
1.div{border-radius:x[px]}
2.div{border-radius:x[px] x[px] x[px] x[px]}
js部分:
1.ajax语法
$.ajax({ url :"",//跳转到的url地址 type:"",//请求方式 post/get datatype :"",//返回来的数据类型 //需要传递的数据,以json格式,如:"username":username,"password":password //$("#edit").serialize():表单序列化.注意:必须存在name属性,其他用法google //作用:获取id为edit的所有input标签的值并自己转入到对象中 data:{}, async : true,//是否异步 success:function (obj) {//成功的回调函数,obj为传回来的数据 if (obj!==null){ console.log(obj); // object { realname="金圣聪", password="xxx", id=1, 更多...} //js中设置session,对应的取session是sessionstorage.getitem(key) sessionstorage.setitem("realname",obj.realname); sessionstorage.setitem("id",obj.id); //跳转到主页 location.href="main.html"; }else{ alert("登录失败!用户名或密码错误"); } }, error:function () {//失败执行的方法 alert("登录失败!用户名或密码错误"); } })
2.判断字符串为空的方法
/** * 判断字符串为空 * @param obj 需要判断的字符串 * @returns {boolean} true 为空,false不为空 */ function isempty(obj){ return typeof obj === "undefined" || obj === null || obj === ""; }
3.截取地址栏的参数
//(很重要)截取地址栏上的参数 function getlocationparam(name) { var reg = new regexp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); // alert(window.location.search); if (r != null) return unescape(r[2]); return null; }
4.用反引号(键盘
1左边的)
做字符串拼接
var rightbottomstrhead = ` <strong style="float: left">销售信息查询:</strong> 排序方式: <select name="condition"> <option value="0">销售日期</option> <option value="1">单笔总价</option> </select> <div style="float: right" class="rightbottomstrhead"> </div> `;