知识点

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，官方的解决方案是：

从长久来看，这样有利于在复杂情况下根据浏览器特性进行分别处理，而不是简单的检测浏览器类型和版本。但目前很多旧程序的移植恐怕无法直接过渡为根据浏览器支持特性，所以在网上找了一些能够直接替换的解决办法。
判断浏览器类型：

$.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');

posted @ 2017-03-03 15:55 红妆满面阅读(261) 评论(0) 收藏举报

刷新页面返回顶部

知识点

公告