web-小知识点（随记）

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:;

width: .90rem;

height: .36rem;

line-height: 0.36rem;

padding:; }

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

web-小知识点（随记）的更多相关文章

web小知识点
写在前面: 该篇是个人平时对web前端小知识点的总结,会不定时更新...... 如有错误,敬请批评指正. 正文: 1.WWW是World Wide Web的缩写. 2.HTML(Hyper Text ...
【转】HTML5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...
html5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...
Perl小知识点之排序sort
脚本这种东西,就是要常用,否则一段时间不用就生疏了,因此决定时时记一些小知识点,一来回顾一下,二来需要的时候可以迅速获得提示. Sort by number You could now write a ...
刚接触Linux，菜鸟必备的小知识点（一）
身为一个将要大四的学生,而且还是学计算机的没有接触过linux简直是羞愧难当.这个假期做了一个软件测试员,必须要熟悉linux的操作,所以对于我这个菜鸟我也就说几点比较重要的小知识点吧. 第一.cd指 ...
Java学习过程中的总结的小知识点（长期更新）
Java学习过程中的总结的小知识点 (主要是自己不会的知识和容易搞错的东西) 计算某个程序运行的时间 long stime=System.currentTimeMillis(); copy3(file ...
AngularJS的小知识点
小知识点:$scope和$rootScope (1)每次使用ngController指令,都会调用控制器的创建函数,创建出一个控制器对象. (2)每次创建一个控制器对象,AngularJS都会创建一个 ...
js中关于value的一个小知识点(value既是属性也是变量)
今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...
[BS] 小知识点总结-05
[BS] 小知识点总结-05 1. 不论UIWindow的rootViewController是navC.tabBarC还是VC,也不管modalVC和rootVC中间隔着多少个VC,但是modal出 ...
一个关于echo的小知识点
一个关于echo的小知识点 echo一个布尔值时,如果是true,输出1,而如果是false,将什么都不输出! 网上搜的一个解释: 对于数字类型来说,false 确实是 0, 而对strin ...

随机推荐

前端面试知识点锦集（JavaScript篇）
目录 1.谈谈你对Ajax的理解?(概念.特点.作用) 2.说说你对延迟对象deferred的理解? 3.什么是跨域,如何实现跨域访问? 4.为什么要使用模板引擎? 5.JavaScript是一门什么 ...
UVALive（LA） 4487 Exclusive-OR（带权并查集）
题意:对于n个数X[0]~X[n-1],但你不知道它们的值,通过逐步提供给你的信息,你的任务是根据这些信息回答问题,有三种信息如下: I p v : Xp = v; Xp 的值为v I p q ...
#424 Div2 E
#424 Div2 E 题意给出一个 n 个数的数列,从前往后取数,如果第一个数是当前数列的最小值,则取出,否则将它放到数列尾端,问使数列为空需要多少步操作. 分析用数据结构去模拟. 线段树维护区 ...
luogu P1494 岳麓山上打水
题目描述今天天气好晴朗,处处好风光,好风光!蝴蝶儿忙啊,蜜蜂也忙,信息组的同学们更加忙.最近,由于XX原因,大家不得不到岳麓山去提水.55555555~,好累啊. 信息组有一个容量为q升的大缸,由于 ...
[BZOJ 1509] 逃学的小孩
Link: BZOJ 1509 传送门 Solution: 一开始受样例影响又犯了想当然的毛病……图中的C点不一定在直径上! 3次$dfs$求出树的直径及直径的两个端点$rt1,rt2$到每个点的距离 ...
MySQL 三节点企业版
https://promotion.aliyun.com/ntms/act/rds/mysqlenterprise.html
【mybatis】mybatis中的<if test=“”>test中多条件
mybatis中的<if test=“”>test中多条件代码展示: 其中 accountCode和apiName都是ApiAllRespBean的属性 <select id=&q ...
如何对POST请求但是URL中也有参数/GET请求但是请求体中也有参数的情况进行安全扫描
通常情况下,GET的参数都在URL中,POST的参数都在请求体中,但是如题的情况也有,像使用方法PUT.DELETE的情况也有,这些情况该如何进行安全扫描呢?
django book用户认证学习
用户与Authentication 通过session,我们可以在多次浏览器请求中保持数据, 接下来的部分就是用session来处理用户登录了. 当然,不能仅凭用户的一面之词,我们就相信,所以我们需要 ...
JSONUtil.bean2Json()报Property 'key' of class has no read method. SKIPPED的问题处理
错误警告信息描述: net.sf.json.JSONObject.defaultBeanProcessing(JSONObject.java:) Property 'handler' of class ...

web-小知识点（随记）

web-小知识点（随记）的更多相关文章

随机推荐

热门专题