jQuery技术

web前端必学的8个jQuery小贴士和技巧!

字号+ 作者:H5之家 来源:H5之家 2016-12-13 13:04 我要评论( )

在过去几年中,jQuery一直是使用最为广泛的Java脚本库。今天达妹姜维各位web开发者提供8个最实用的jQuery代码片段,掌握这8大技巧,HR必疯抢你,有

在过去几年中,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 swap

Swap 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月份免费课程名额!

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Jquery常用技巧收集整理篇

    Jquery常用技巧收集整理篇

    2016-12-11 12:08

  • [译] 人人须知的 jQuery 技巧

    [译] 人人须知的 jQuery 技巧

    2016-12-10 17:04

  • 10款web前端基于Jquery的动画源码

    10款web前端基于Jquery的动画源码

    2016-12-07 10:00

  • 有效提高 jQuery 代码效率的25个技巧(4)

    有效提高 jQuery 代码效率的25个技巧(4)

    2016-11-29 13:00

网友点评