您的位置：首页 > Web前端 > JQuery

HTML, CSS, Javascript和jQuery的一些经验总结

2014-03-23 18:46 786 查看

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;

http://stackoverflow.com/questions/8200204/fit-background-image-to-div

2. 文字阴影效果

text-shadow:1px 1px 0px #ffffff;

http://www.soleilneon.com/blog/2010/10/add-css3-border-radius-and-box-shadow-to-your-design/

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>

http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page

4. z-index与position的关系

z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。

/article/4780181.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() ;">

<script>
window.onload=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.onload=happycode ;
</script>
</body>
</html

http://www.mkyong.com/javascript/javascript-call-funtion-after-page-load/

6. 用jQuery获取id

<div id="test"></div>

$(document).ready(function() {
alert($('#test').attr('id'));
});

http://stackoverflow.com/questions/3239598/how-can-i-get-the-id-of-an-element-using-jquery

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)

http://www.w3schools.com/jsref/jsref_charat.asp

9. 获取当前href所在的div的id

$(this).parent().attr('id')

10. 点击href调用js function

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

<a href="javascript:ShowOld(2367,146986,2);">

http://stackoverflow.com/questions/5003867/how-to-call-javascript-function-instead-of-href-in-html

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();
});
});

http://stackoverflow.com/questions/17975922/how-to-change-active-class-wile-click-to-another-link-in-bootstrap-use-jquery

12. div滑动切换

jQuery:

$(function(){
$("#site").cycle({
fx : "scrollHorz",
next : ".next a",
prev : ".prev a",
startingSlide : 1,
timeout : 0
});
});

HTML:

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

CSS:

html, body, #page1, #page2, #page3, #site {height:100%;width:100%}

http://jsfiddle.net/JKirchartz/zLekb/

13. How to make the body fill the entire screen?

html, body {
margin: 0;
width: 100%;
height: 100%;
}

http://stackoverflow.com/questions/5721904/make-body-fill-entire-screen

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>

或文字

……

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

on

$('#checkbox').is('checked')

always
returns

false

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

,
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>");

$("<tr></tr>").append("<td>blah</td><td>blah</td><td>blah</td>")
.appendTo( '#table tbody' );

22. 向某元素后插入元素

http://api.jquery.com/insertafter/

.insertAfter()

1	$( "<p>Test</p>" ).insertAfter( ".inner" );

1	$( "h2" ).insertAfter( $( ".container" ) );

23. 向某元素内添加元素

https://api.jquery.com/append/ https://api.jquery.com/appendTo/

.append() & appendTo()

1	$( ".inner" ).append( "<p>Test</p>" );

1	$( ".container" ).append( $( "h2" ) );

1	$( "<p>Test</p>" ).appendTo( ".inner" );

1	$( "h2" ).appendTo( $( ".container" ) );

24. set and get attribute

https://api.jquery.com/attr/

Set:

1	$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );

Get:

1	$( "#greatphoto" ).attr( "title");

25. add class

http://api.jquery.com/addclass/

.addClass()

1	$( "p" ).addClass( "myClass yourClass" );

This method is often used with

.removeClass()

to
switch elements' classes from one to another, like so:

1	$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

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

$( "ul li" ).addClass(function( index ) {

return "item-" + index;

});

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 a = parseInt("10") + " ";

var b = parseInt("10.00") + " ";

var c = parseInt("10.33") + " ";

var d = parseInt("34 45 66") + " ";

var e = parseInt(" 60 ") + " ";

var f = parseInt("40 years") + " ";

var g = parseInt("He was 40") + " ";

var h = parseInt("10",10)+ " ";

var i = parseInt("010")+ " ";

var j = parseInt("10",8)+ " ";

var k = parseInt("0x10")+ " ";

var l = parseInt("10",16)+ " ";

var n = a + b + c + d + e + f + g + " " + h + i + j + k +l;

The result of n will be:

10

10

10

34

60

40

NaN

10

8

8

16

16

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航