前端知识点或技巧总结

今天来总结一下前端的一下知识或技巧等问题：

1、 常用的清除浮动的方法： clear:both;

2、 隐藏多余部分：  overflow:hidden;

3、button 按钮圆角边框实现：  border-radius: 15px;

4、 背景色透明度：  opacity:0.8; 

5、 浏览器窗口大小改变防止div或其他元素布局方式错位，可以设置其最小宽度、最小高度，或 最大宽度、最大高度： 

       min-width:500px;  min-height:500px;   max-width:1000px;  max-height:1000px;

6、纯 html 文件中头、脚分离文件引入;

   <div id="header"></div> 

   <div id="footer"></div>

<script>

// jQuery 的load 函数动态载入，不过此方法直接通过文件名绝对路径的方式在Firefox里正常，IE里貌似不行；但通过server端访问没问题

标准格式：$("#id").load(url,[data],[callbak] );

说明：
 1.url 是一个url地址
 2.data 是可选的，这个一般是传递参数使用的，多数时候是post参数。 比如 ｛name:'test',address:'sz',sex:'男'｝这里向后台的url 地址传递三个参数，相当于get请求的参数是：url?name=test&address=sz&sex=男
 3.callbak 是可选的。是调用ajax load之后的一个回调函数，加载完成之后要做一些事情可以用这个回调来处理。比如：加载完成需要弹窗一下。这样就可以了：$("#id").load(url,{name:'test'},function(){alert('succ');} );

例如：
$(document).ready(function(){
    $("#header").load("header.html"," ",,function(){
          //回调函数：导航菜单
  sel_menu("1");
   });
    $("#footer").load("footer.html");
});
</script>

jsp 中引入其他文件的方式:     <jsp:include page="header.html"/>

7、jquery 动态添加或切换 css 样式名：

     $("#year_up").attr("class","dis_year_up"); 

    $("p").attr("'class", "high"); //设置p元素的class为 "high"

   jquery 动态移除 css 样式：

    $("p").removeClass("high");

   jQuery 动态添加css 单个样式属性：

    $("#item").css("line-height","200px");

8、jquery 为 li 下的 <a> 添加点击事件：

$(".year_li a").click(function(){
 console.log("绑定事件成功！");
});
<li id="y1" class="year_li"><a href="#">2016</a></li>

9、js 获取 时间年份、月份 ......：

 var date=new Date;
 var year=date.getFullYear(); 
 var month=date.getMonth()+1;

10、<div> 中包含着 <ul><li>，<li> 要横排显示（属性：float: left; list-style:none;），但是在浏览器的开发工具指针显示，<ul>没有被<div>包裹起来，可能是由于浮动float的原因，解决办法：在</ul> 后面添加清除浮动： <div style="clear:both;"></div>

11、button 按钮在点击的时候会在四周出现闪烁的边框线，解决办法，这里可以用 css 的 outline:none;  属性来消除。

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
outline-color
outline-style
outline-width

12、div 水平居中： margin:0 auto;

13、避免 <a href="#"> 点击时页面刷新或跳转，可以将 href 设置为：<a href="javascript:void(0);">

14、鼠标放上去显示不完整或隐藏的文字： <font title="文字提示">把鼠标放上来</font>

15、CSS first-child 示例，匹配表格每行的第一个单元格：

<style type="text/css" media="all">
table{
background: forestgreen;
color: #fff;
width: 100%;
}
tr td:first-child { 
     background: pink;
}
</style>

16、jquery 动态绑定click事件：

$(document).ready(function(){
     $(".load").click(function(){
           alert("go");
     });
});

根据 id 获取对象 $("#load")  

根据 class 获取对象 $(".load")

17、jquery 在 指定对象后面追加内容：append()

在指定对象里面填充html内容：html()

    $("#content").append(data_html);

    $("#content").html(data_html);

18、 js 数据类型转换 

 var a = 10; 

 parseInt(a)

19、图片随设备/浏览器宽度自适应/不变形：

width:100%; max-width:560px; max-height:249px; 

20、js 当浏览器尺寸变化时捕捉事件处理：

<script type="text/javascript">
window.onload=function(){  
resize();  
}  
window.onresize=function(){  
window.location.reload();
}  

function resize(){
var img1H = $("#img1").height();
var img1W = $("#img1").width();
var chaRH = img1H/1000;  //尺寸变化时图片的高度 除以 图片的原始高度，即高度变化的比率值
var chaRW = img1W/640;   //尺寸变化时图片的宽度 除以 图片的原始宽度，即宽度变化的比率值

$(".content").css("height",img1H);
var h2 = $(".target1").position().top;
var h3 = h2*chaRH;   //获取按比率变化后的值
$(".target1").css("top",h3);  
  
$(".content").css("width",img1W);
var ls = $(".target1").position().left; 
var ls2 = ls*chaRW;
$(".target1").css("left",ls2);
}
</script>

21、 jquery 动态给table添加列、删除列 td，获取表格列数、行数，循环遍历表格元素：

动态添加td元素： 

   $("#sel_table tr").append('<td><img src="a.jpg" width="64" height="64"/></td>');

动态循环遍历以及删除td元素：

$("#sel_table img").each(function (){ 
 var selected_src = $(this).attr("src");
if(url==selected_src){ 
      // 删除td元素
      $(this).parent('td').remove();
}
}); 

获取表格的行数：$(".sel_table tr").size();

获取表格的列数：$(".sel_table td").size();

<table id="sel_table" class="sel_table">

       <td></td>
       <td></td>
       <td></td>
   </tr>

</table>

先写这么多吧，以后有时间接着写！