知识点
1、position:fixed;窗口定位的时候(在刷新页面时若未出现、得稍等一会的话,就直接把需要定位的内容写在<html>标签的首部。这样页面加载html的时候首先加载fixed定位的内容。就不会出现延时才会加载的情况。)
2、margin-top为负值可以实现超出。如果被父盒子挡住了就用定位来实现浮动起来,那样就不会被遮住了。
3、js没有执行的可能原因?
1)、js没引进来
2)、js引进来了,不执行; 此时设置断点来看是否执行了。
3)、页面还没渲染就已经执行了。此时js文件也不会起作用。处理:等页面渲染完了,再加载js(即等页面渲染完成后再添加js文件)。
4、有的时候在bind()之前得先解绑:使用unbind()来解除之前的绑定、才不导致后续绑定的事件又将之前的绑定执行一遍。
$(selector).unbind("click").bind("click", function(){
....
});
5、或 (用来设置变量的默认值---先取第一个值,如果不存在则考虑第二个值)
var token=FL.token||'dbf92433c0711129e300f2fc8f112f55',
mid=FL.mid||'1398319';
6、超出部分省略号:
可不要设置高 自适应 别忘了overflow:hidden;
.box{
width: 100%;
// height: .70rem;
// line-height: .36rem;
margin: .2rem 0 .4rem;
font-size: .28rem;
overflow: hidden;
}
//超出部分隐藏
//两行超出隐藏
.overhide {
display: -webkit-box !important;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
//一行超出隐藏
.overhideline1 {
display: -webkit-box !important;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
7、<%=# 内容 %> 识别html标签
<%=#result.goods_discount_desc%>
8、如图
HTML:
<span class="association_sp2"> <span class="min"> - </span> <input class="text_box" type="text" value="1" /> <span class="add" > + </span> </span>
JavaScript:
function add_min(){ //点击增加和减少 $(".add").bind('click',function(){ var t=$(this).parent().find('input[class*=text_box]'); t.val(parseInt(t.val())+1) setTotal(); }) $(".min").bind('click',function(){ var t=$(this).parent().find('input[class*=text_box]'); t.val(parseInt(t.val())-1) if(parseInt(t.val())<0){ t.val(0); } setTotal(); }) function setTotal(){ var s=0; $("#tab td").each(function(){ s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text()); }); $("#total").html(s.toFixed(2)); } setTotal(); }
css:
.cars_ul li dl dd .association_p2 span.association_sp2 span { color: #000; display: inline-block; width: .32rem; height: .36rem; float: left; text-align: center; line-height: .36rem; } .cars_ul li dl dd .association_p2 span.association_sp2 span.min { border-right: 1px solid #ccc; } .cars_ul li dl dd .association_p2 span.association_sp2 span.add { border-left: 1px solid #ccc; } .cars_ul li dl dd .association_p2 span.association_sp2 input { text-align: center; float: left; border: 0; width: .90rem; height: .36rem; line-height: 0.36rem; padding: 0; }
9、
template.js 页面渲染
html:
<section class="cars-list-html"></section> <script type="text/html" id="cars-list-tpl"> <%if(result&&result.goods_list){%> <%for(var i=0;i<result.goods_list.length;i++){%> 页面的HTML内容.................. <%}%> <%}%> </script>
JavaScript:
var shopcart = url; (数据接口 ) function carGoodsList(){ FL.ajaxDate('get',shopcart,{ //需要的参数 token:token, mid:mid },function(data){
if(data&&data.error=='0'){ console.log(data); var html = template('cars-list-tpl',data); $('.cars-list-html').html(html); } }); }
10、吸顶菜单:
var topHeight;
setTimeout(function(){
topHeight = $('.nav-pills').offset().top;
},500);
$(window).scroll(function(){
var st = $(this).scrollTop();
//console.log(topHeight)
if(st>topHeight){
$('.fh-nav').css({"position":"fixed","top":"0.68rem","width":"100%","z-index":"103"});
}else{
$('.fh-nav').css({"position":"relative","top":"0"});
}
});
11、attr() 方法 (除了可以取属性值,还可以改属性值):
<script type="text/javascript"> $(document).ready(function(){ $("button").unbind().bind('click',function(){ $("img").attr("width","180"); //修改属性值 $("img").attr({width:"50",height:"80"}); }); }); </script>
12、jquery获取对象元素的属性值的方法:
html code:
<div class = "classNamevalue"></div>
Jquery code:
$('div').attr('class') //返回的结果是:classNamevalue
我们用jquery获取到了div的class的属性值。
如果要获取的是css的标签属性值,我们可以这样来写:
$(selector).css(css标签名)
example:$('div').css('display') //display是css里面的一个标签
13、字符串逆序输出(人人)
"能给你个拥抱像以前一样可以吗".split("").reverse().join("");
14、
1. 获取 / 设置某一个标签属性的值
$("标签").attr("属性名");//获取属性值
$('div').attr('id');
$('div#idname').attr('id');
$('div.classname').attr('id');
$("标签").attr('属性名','属性值');//设置属性值
$('div').attr('id','xxvalue');
$('div#idname').attr('id','xxvalue');
$('div.classname').attr('id','xxvalue');
2. hide() & show()用法
隐藏标签:$('标签名').hide();
显示标签:$("标签名").show();
3.获取标签文本值
$('div#hideOrShowDiv').text()
4.向指定标签中插入文本
$('div#hideOrShowDiv').html("contentValue");
5. jQuery 判断元素上是否绑定了事件
//jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件
var $events = $("#foo").data("events");
if( $events && $events["click"] ){
//your code
}
6. 如何使用jQuery来切换样式表
//找出你希望切换的媒体类型(media-type),然后把href设置成新的样式表。
$('link[media='screen'').attr('href', 'alternative.css');
7. 如何验证某个元素是否为空:
// 方法一
if (! $('#keks').html()) {
//什么都没有找到;
}
// 方法二
if ($('#keks').is(":empty")) {
//什么都没有找到;
}
8. 如何追加或是添加html到元素中:
$('#lal').append('sometext');
15. 如何使用jQuery来预加载图像:
jQuery.preloadImages = function() { for(var i = 0; i < arguments.length; i++) { $("<img />").attr('src', arguments); } }; //用法 $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
9. 如何检测各种浏览器:......
检测Safari (if( $.browser.safari)), 检测IE6及之后版本 (if ($.browser.msie && $.browser.version > 6 )), 检测IE6及之前版本 (if ($.browser.msie && $.browser.version <= 6 )), 检测FireFox 2及之后版本 (if ($.browser.mozilla && $.browser.version >= '1.8' )),
10. 如何禁用右键单击上下文菜单:
$(document).bind('contextmenu',function(e){
return false;
});
11. 如何检查某个元素是否存在
if ($('#someDiv').length) {
//万岁!!!它存在……
}
12. 如何使用jQuery来检测右键和左键的鼠标单击两种情况:
//判断是鼠标左键还是右键执行点击了
$("#someelement").bind('click', function(e) {
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
alert("点击的是左鼠标!!");
} else if(e.button == 2) {
alert("点击的是右鼠标!!");
}
});
注:
'$.browser.msie' 为空或不是对象,这个是jQuery错误
出现这个错误,是因为升级了jQuery版本,从1.9以前升级到1.9以后,因为$.browser.msie在1.9以后的jQuery中不存在了,所以报错。
jQuery 1.9 移除了 $.browser 的替代方法
$.browser是通过正则表达式来匹配userAgent来判断浏览器版本和种类的.jquery1.3.2版本的文档中已经声明jquery.browser及jquery.browser.version建议弃用,可以使用jquery.support来代替。
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9或者jQuery 1.10.1等。 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是:
<!--[if lt IE 9]>
<script src='http://keleyi.com/keleyi/pmedia/jquery-1.10.1.min.js'></script>
<![endif]-->
<!--[if gte IE 9]>
<script src='http://keleyi.com/keleyi/pmedia/jquery-2.0.2.min.js'></script>
<![endif]-->
从长久来看,这样有利于在复杂情况下根据浏览器特性进行分别处理, 而不是简单的检测浏览器类型和版本。 但目前很多旧程序的移植恐怕无法直接过渡为根据浏览器支持特性, 所以在网上找了一些能够直接替换的解决办法。
判断浏览器类型:
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
等号后面的表达式返回的就是 true/false, 可以直接用来替换原来的 $.browser.msie 等。
检查是否为 IE6:
// Old
if ($.browser.msie && 7 > $.browser.version) {}
// New
if ('undefined' == typeof(document.body.style.maxHeight)) {}
检查是否为 IE 6-8:
if (!$.support.leadingWhitespace) {}
=============================================================================
13. 如何替换串中的词
var el = $('#id');
el.html(el.html().replace(/word/ig, '')); //i不区分大小写 g全局匹配
14. 如何把已创建的元素动态地添加到DOM中:
var newDiv = $('<div></div>'); newDiv.attr('id','myNewDiv').appendTo('body');