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 ...

随机推荐

Xdebug安装对应版本与配置
Xdebug安装地址https://xdebug.org/download.php,进入下载页面后点击custom installation instructions,可以找到适合的Xdebug版本. ...
mysql故障（主从复制sql线程不运行）
故障现象: 进入slave服务器,运行: mysql> show slave status\G ....... Relay_Log_File: localhost Relay_Log_Pos: ...
hdu 1142(迪杰斯特拉+记忆化搜索)
A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...
POJ 1189 钉子和小球
题目链接:http://poj.org/problem?id=1189 dp 可以知道一共有2^n条路径,则设顶点有2^n个球,若当前为'*'则向左右的球各有一半:若为'.',则球全部掉入正下方. # ...
关于asp.net中gridview的问题，关于footer，16aspx上下的英语交流网程序，管理员的添加和修改有问题
css部分这是添加用户的方法但是A.AdminName 和后面的A.取到的都是空值protected void GridView1_RowCommand(object sender,GridVie ...
HDU 6299.Balanced Sequence-贪心、前缀和排序 (2018 Multi-University Training Contest 1 1002)
HDU6299.Balanced Sequence 这个题就是将括号处理一下,先把串里能匹配上的先计数去掉,然后统计左半边括号的前缀和以及右半边括号的前缀和,然后结构体排序,然后遍历一遍,贪心策略走一 ...
UVA 1151 Buy or Build MST(最小生成树)
题意: 在平面上有n个点,要让所有n个点都连通,所以你要构造一些边来连通他们,连通的费用等于两个端点的欧几里得距离的平方.另外还有q个套餐,可以购买,如果你购买了第i个套餐,该套餐中的所有结点将变得相 ...
洛谷——P1143 进制转换
P1143 进制转换题目描述请你编一程序实现两种不同进制之间的数据转换. 输入输出格式输入格式: 输入数据共有三行,第一行是一个正整数,表示需要转换的数的进制n(2≤n≤16),第二行是一个n进 ...
js部分的总结
一.词法结构 1.区分大小写 2.注意//单行/*多行注释* 3.字面量(直接量 literal) 12 //数字 5.8 //小数 “hello” ‘hello’ true /js/gi //正则 ...
Requirement Analysis
BRD:Business Requirements Document,商业需求文档.这是产品声明周期中最早的问的文档,再早就应该是脑中的构思了,其内容涉及市场分析,销售策略,盈利预测等,通常是和老大们 ...

web-小知识点（随记）

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

随机推荐

热门专题