jquery选择器八大类_八大jQuery技巧和窍门

jquery选择器八大类

以下是jQuery的一些不错的技巧和窍门。 这个明智的javascript库可以完成很多工作，例如调整字体大小，禁用右键单击等。 您也可以对jQuery进行自定义编码，并像我所列出的那样执行出色的脚本。

1.字体调整

这将允许用户增加或减小网页的字体大小。 您必须指定希望字体可调整HTML元素的ID或CLASSES。

代码：

$(document).ready(function(){
	//ID, class and tag element that font size is adjustable in this array
	//Put in html or body if you want the font of the entire page adjustable
	var section = new Array('span','.section2');
	section = section.join(',');
	// Reset Font Size
	var originalFontSize = $(section).css('font-size');
	$(".resetFont").click(function(){
		$(section).css('font-size', originalFontSize);
	});

	// Increase Font Size
	$(".increaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*1.2;
		$(section).css('font-size', newFontSize);
		return false;
	});

	// Decrease Font Size
	$(".decreaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*0.8;
		$(section).css('font-size', newFontSize);
		return false;
	});
});+ |
- |
=
Font size can be changed in this section

  
  

   
   This won't be affected
  
  

  
  

   
   This one is adjustable too!
  
  

2.返回顶部按钮或链接

通过在链接或按钮上使用jQuery滚动效果，这是回到页面顶部的一种非常好的方法。

代码：

$('#top').click(function() {
	$(document).scrollTo(0,500);
}
Back to top

3.检测右击

考虑在网站上单击鼠标右键很重要。 因为有时我们可能想禁用网站上的右键单击功能。 因此，这就是我们将使用jQuery检测鼠标右键的方式。

代码：

$(document).bind("contextmenu",function(e){
	//you can enter your code here, e.g a menu list

	//cancel the default context menu
	return false;
});

4.在新窗口中打开

您可能知道，HTML中的'a'标签的Target属性未通过W3C验证，因此您将在此处遇到一些验证错误。 此jQuery代码将执行的操作是将目标属性替换为可以通过W3C验证的内容。 因此，这里有REL和一些jQuery代码。

代码：

$('a[rel=external]').attr('target','_blank');Queness in new window

5.切换到不同CSS样式

如果您想为您的网站设置多个样式表，那么这个样式表很适合您。

代码：

 $("a.cssSwitcher").click(function() {
	//swicth the LINK REL attribute with the value in A REL attribute
	$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
  rel="stylesheet" href="default.css" type="text/css"> 

Default Theme
Red Theme
Blue Theme 

6.获取鼠标指针的X和Y轴

此代码将仅获取鼠标指针的坐标。

代码：

$().mousemove(function(e){
    //display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

7.让所有人都可以点击

当您使用UL列表制作导航菜单时，这是一个非常有用的技巧。 当您单击LI区域（在链接外部）时，它将惊奇地在锚标记中搜索url，然后执行它。

代码：

$("ul li").click(function(){
  //get the url from href attribute and launch the url
  window.location=$(this).find("a").attr("href"); return false;
});

• home
• about
• contact

8.等高的列

这是非常有用的，尤其是当您希望列具有相同的高度时。

代码：

$(document).ready(function() {
    setHeight('.col');
});

//global variable, this will store the highest height value
var maxHeight = 0;

function setHeight(col) {
    //Get all the element with class = col
    col = $(col);

    //Loop all the col
    col.each(function() {

        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });

    //Set the height
    col.height(maxHeight);
}
  
  

   
   Column One
   
   

With Two Line
   
   

And the height is different
   
   

   
   


  
  

  
  

   
   Column Two
   
   

   
   


  
  

翻译自: https://www.sitepoint.com/top-8-jquery-tips-tricks/

jquery选择器八大类