在过去几年中，jQuery一直是使用最为广泛的Java脚本库。今天达妹姜维各位web开发者提供8个最实用的jQuery代码片段，掌握这8大技巧，HR必疯抢你，有需要的开发者可以保存起来。
1禁用鼠标右键点击jQuery程序员可以使用此代码在网页上禁用鼠标右键点击。
1.$(document).ready(function() {
2. //catch the right-click context menu
3. $(document).bind("contextmenu",function(e) {
4. //warning prompt - optional
5. alert("No right-clicking!");
6.
7. //delete the default context menu
8. return false;
9. });
10.});
2利用jQuery调整文字大小使用此代码，用户可以重新网站上文字的大小（增大和减少）
1.$(document).ready(function() {
2. //find the current font size
3. var originalFontSize = $('html').css('font-size');
4.
5. //Increase the text size
6. $(".increaseFont").click(function() {
7. var currentFontSize = $('html').css('font-size');
8. var currentFontSizeNumber = parseFloat(currentFontSize, 10);
9.
10. var newFontSize = currentFontSizeNumber*1.2;
11. $('html').css('font-size', newFontSize);
12. return false;
13. });
14.
15. //Decrease the Text Size
16. $(".decreaseFont").click(function() {
17. var currentFontSize = $('html').css('font-size');
18. var currentFontSizeNum = parseFloat(currentFontSize, 10);
19.
20. var newFontSize = currentFontSizeNum*0.8;
21. $('html').css('font-size', newFontSize);
22. return false;
23. });
24.
25. // Reset Font Size
26. $(".resetFont").click(function(){
27. $('html').css('font-size', originalFontSize);
28. });
29.});
3在新的Windows打开链接Try this code and increase your site impressions because using this jquery code users will go on new window after clicking on any link of your site. Code is below: -
1.$(document).ready(function() {
2. //select all anchor tags that have http in the href
3. //and apply the target=_blank
4. $("a[href^='http']").attr('target','_blank');
5.});
4style sheets swapSwap style sheets using this code and the “Style sheets swap” is below: -
1.$(document).ready(function() {
2. $("a.cssSwap").click(function() {
3. //swap the link rel attribute with the value in the rel
4. $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
5. });
6.});
5回到顶部链接That is very common function you can see on eve site nowadays is ” Back to Top”. This functionality is very useful for long pages for make short in a single click. Visit this code below: -
1.$(document).ready(function() {
2. //when the id="top" link is clicked
3. $('#top').click(function() {
4. //scoll the page back to the top
5. $(document).scrollTo(0,500);
6. }
7.});
6获取鼠标光标的x和y轴You can find the values of X and Y coordinator of mouse pointer. Code is blow : -
1.$().mousemove(function(e){
2. //display the x and y axis values inside the P element
3. $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
4.});
7检测当前鼠标坐标使用这个脚本，你可以在jQuery所支持的任何Web浏览器找到当前鼠标的坐标。代码如下：
1.$(document).ready(function() {
2.$().mousemove(function(e)
3.{
4.$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
5.});
6.});
8在jQuery中预加载图片此图像预加载的脚本有助于非常快速加载图像或网页。你不必等待图像加载。代码：
1.jQuery.preloadImagesInWebPage = function()
2.{
3. for(var ctr = 0; ctr<arguments.length; ctr++)
4.{
5.jQuery("<img alt="">").attr("src", arguments[ctr]);
6.}
7.}
8.To use the above method, you can use the following piece of code:
9.$.preloadImages("image1.gif", "image2.gif", "image3.gif");
10.To check whether an image has been loaded, you can use the following piece of code:
11.$('#imageObject').attr('src', 'image1.gif').load(function() {
12.alert('The image has been loaded…');
13.});
以上就是所有的jQuery代码书写技巧，如果你也有其它的书写技巧，欢迎右下角留言与我们分享！
??达内web前端免费课程
达内web前端免费课程，针对零基础设置的HTML5+CSS3+Java入门课程，只要你喜欢且想了解web前端，但是不知道自己学的会不？适不适合自己学？都可以通过这样无成本的方式，对自己进行一个深刻的认识，给自己一个接触互联网高薪技术的机会。
点击“阅读原文”直接抢占达内11月份免费训练营~
达内上市集团
40万学员的共同选择
QQ咨询：2421473554
长按二维码关注我们
点击
“阅读原文”抢报11月份免费课程名额！
相关文章
精彩导读
热门资讯
关注我们
