1. 背景图片的大小随div大小成比例变化
//To scale the background image to fit inside the div:
background-size: contain;
//To scale the background image to cover the whole div:
background-size: cover;
2. 文字阴影效果
text-shadow:1px 1px 0px #ffffff;3. 隐藏滚动条
Set overflow: hidden; on the body tag like this:
<style type="text/css">
body {
overflow:hidden;
}
</style>
The code above hides both horizontal and vertical scrollbar.
If you want to hide only the vertical scrollbar, use overflow-y:
<style type="text/css">
body {
overflow-y:hidden;
}
</style>
And if you want to hide only the horizontal scrollbar, use overflow-x:
<style type="text/css">
body {
overflow-x:hidden;
}
</style>4. z-index与position的关系
z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。
http://www.cnblogs.com/dolphinX/p/3262469.html
5. How to call a Javascript function after a page is loaded?
Usually we call a function during page on load with following two methods.
<body onload="happycode() ;">or
<script>
window.οnlοad=happycode ;
</script>But how can we call a JavaScript function after page is loaded?. I solved it by using a very simple method, it did exactly what i want and call after page and content is loaded.
Just add an onload function at the end of the body. :)
<html>
<script language='javascript'>
function happycode(){
alert('helo');
}
</script>
<body>
<h1>Javascript call after page loaded</h1>
<script>
//call after page loaded
window.οnlοad=happycode ;
</script>
</body>
</html
6. 用jQuery获取id
<div id="test"></div>
$(document).ready(function() {
alert($('#test').attr('id'));
});
7 Javascript创建数组
1.单纯创建JavaScript数组:
vararr=newArray();
要点:用new关键字创建数组对象Array(),Array()对象是一个本地类,可以用new创建一个对象后使用
2.创建JavaScript数组的同时规定数组大小:
vararr=newArray(10);//这里就创建了一个初始化大小为10的数组
注意:当使用数组大小操作初始化大小时,数组会自动被撑大,不会像C语言那样发生错误.动态增长是js数组的一个性质.另外,js中支持最大数组长度为4294967295
3.直接初始化:
vararr=newArray("草履虫","爱","毛毛");//这里就直接初始化了数组或vararr=["草履虫","爱","毛毛"];//括号也可以声明一个数组对象，
4.varm=["am","bm","cm"];//用括号声明一个数组对象
http://developer.51cto.com/art/201010/229092_all.htm
8. String charAt() in JavaScript
var str = "HELLO WORLD";
var res = str.charAt(0)9. 获取当前href所在的div的id
$(this).parent().attr('id')
<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">or
<a href="javascript:ShowOld(2367,146986,2);">
11. 用jQuery给li取消或加上Bootstrap的active类
$(document).ready(function () {
$('.nav li').click(function(e) {
$('.nav li').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
//e.preventDefault();
});
});
12. div滑动切换
jQuery:
$(function(){
$("#site").cycle({
fx : "scrollHorz",
next : ".next a",
prev : ".prev a",
startingSlide : 1,
timeout : 0
});
});<div id="site">
<div id="page1">
<h1>Page 1</h1>
<p>...</p>
<div class="next"><a href="#">»</a></div>
</div>
<div id="page2">
<div class="prev"><a href="#">«</a></div>
<h1>Page 2</h1>
<p>...</p>
<div class="next"><a href="#">»</a></div>
</div>
<div id="page3">
<div class="prev"><a href="#">«</a></div>
<h1>Page 3</h1>
<p>...</p>
</div>
</div>html, body, #page1, #page2, #page3, #site {height:100%;width:100%}13. How to make the body fill the entire screen?
html, body {
margin: 0;
width: 100%;
height: 100%;
}14. 在图片上加超链接
<a href="http://api.jquery.com/category/ajax/" title="http://api.jquery.com/category/ajax/">
<img src="image/ajax-logo.png" style="height:50px">
</a>15. 鼠标提示信息
想实现鼠标提示信息？很简单，不用js，用html就可以了，在html中有title属性，很方便。
<a title="你想要的提示信息">显示提示信息的内容</a>
或<p title="你想要的提示信息">文字</p>
……
title属性可以使用在除了base、basefont、head、html、meta、param、script、title之外的所有标签中
好了，当鼠标移动到显示提示信息的内容上面时就会出现你想要的提示内容了
16. get value in the input text box
http://stackoverflow.com/questions/4088467/get-value-in-input-text-box
//get
var bla = $('#txt_name').val();
//set
$('#txt_name').val('bla');17. How to check if a div is empty.
var content = $("#alertdiv").html();
var val = content.trim().length;
if(val == 0){
}
else{
$("#alertdiv").empty();
var newalert = document.createElement("div");
newalert.className = "alert alert-error";
newalert.innerHTML = content;
$("#alertdiv").append(newalert);
}18. JQuery get <span> text and <label> text
$('#someSpan').text();$('#someLabel').text();19. JQuery Select 操作
（1）获取被选中的option的value或text
https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/
Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy:
1
2
$( "#myselect" ).val();
// => 1
The second is the text value of the select. For example, using the following select box:
1
2
3
4
5
6
7
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
If you wanted to get the string "Mr" if the first option was selected (instead of just "1") you would do that in the following way:
1
2
$( "#myselect option:selected" ).text();
// => "Mr"（2）remove option
http://stackoverflow.com/questions/1518216/jquery-remove-options-from-select
Try this:
$(".ct option[value='X']").each(function() {
$(this).remove();
});
Or to be more terse, this will work just as well:
$(".ct option[value='X']").remove();20. 获取checkbox状态
http://stackoverflow.com/questions/2834350/get-checkbox-value-in-jquery
For some reason:
-
$('#checkbox').val()always returnson -
$('#checkbox').is('checked')always returnsfalse
But,
$('#checkbox').prop('checked')Returns the right checkbox state.
21. 向Table中动态添加行
http://stackoverflow.com/questions/3956158/add-table-elements-from-array-of-objects-using-jquery
When you do:
b.append($("<tr></tr>")); it is returning b, so the tr variable is actually referenceing the tbody.
Try this:
var b = $('#table tbody');
tr = $("<tr></tr>").appendTo(b);
tr.append( "<td>blah</td><td>blah</td><td>blah</td>" ); This uses jQuery's .appendTo() method instead in order to reverse the position so that the new <tr> is being returned.
Or you could avoid the variables altogether like this:
$("<tr></tr>").appendTo( '#table tbody' )
.append("<td>blah</td><td>blah</td><td>blah</td>");or
$("<tr></tr>").append("<td>blah</td><td>blah</td><td>blah</td>")
.appendTo( '#table tbody' );
22. 向某元素后插入元素
http://api.jquery.com/insertafter/
.insertAfter()
|
1
|
|
|
1
|
|
23. 向某元素内添加元素
https://api.jquery.com/append/ https://api.jquery.com/appendTo/
.append() & appendTo()
|
1
|
|
|
1
|
|
|
1
|
|
|
1
|
|
24. set and get attribute
Set:
|
1
|
|
|
1
|
|
25. add class
http://api.jquery.com/addclass/
.addClass()
|
1
|
|
This method is often used with .removeClass() to switch elements' classes from one to another, like so:
|
1
|
|
Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added.
As of jQuery 1.4, the .addClass() method's argument can receive a function.
|
1
2
3
|
|
Given an unordered list with two <li> elements, this example adds the class "item-0" to the first <li> and "item-1" to the second.
26. Set multiple attributes
http://stackoverflow.com/questions/5151874/jquery-change-multiple-attributes-or-replace-entire-html
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});27. Create a div in JQuery
http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery
jQuery('<div/>', {
id: 'foo',
href: 'http://google.com',
title: 'Become a Googler',
rel: 'external',
text: 'Go to Google!'
}).appendTo('#mySelector');28. Detect if some element is existed with JQuery
http://stackoverflow.com/questions/4592493/check-if-element-exists-in-jquery
if( $('#selector').length ) // use this if you are using id to check
{
// it exists
}
if( $('.selector').length ) // use this if you are using class to check
{
// it exists
}29. Javascript convert string to integer
http://www.w3schools.com/jsref/jsref_parseint.asp
Parse different strings:
var b = parseInt("10.00") + "<br>";
var c = parseInt("10.33") + "<br>";
var d = parseInt("34 45 66") + "<br>";
var e = parseInt(" 60 ") + "<br>";
var f = parseInt("40 years") + "<br>";
var g = parseInt("He was 40") + "<br>";
var h = parseInt("10",10)+ "<br>";
var i = parseInt("010")+ "<br>";
var j = parseInt("10",8)+ "<br>";
var k = parseInt("0x10")+ "<br>";
var l = parseInt("10",16)+ "<br>";
var n = a + b + c + d + e + f + g + "<br>" + h + i + j + k +l;
The result of n will be:
10
10
34
60
40
NaN
10
8
8
16
16
1398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
