css+js相关笔记
2019-11-28 16:00:32来源:博客园 阅读 ()
css+js相关笔记
作者:故事我忘了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>
`;
原文链接:https://www.cnblogs.com/jsccc520/p/11953130.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:HTML学习 day04
- HTML骨架 2020-06-10
- HTML+CSS+JS模仿win10亮度调节效果 2020-06-04
- [书籍精读]《CSS世界》精读笔记分享 2020-05-17
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读 2020-05-07
- [书籍精读]《Web前端黑客技术揭秘》精读笔记分享 2020-04-26
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash