5个jQuery问题和解答
作者：互联网
5个jQuery问题和解答
学习jquery的过程本身就是问与答。下面根据实际解决5个问题。
我怎样用jQuery放大和缩小文本
先看看效果有几种方法实现，我们只专注于其中的一种。首先，我们添加的一些简单的标记：
<div>
<p id=”text”>
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text.
</p>
<a href=”#” id=”smallerTextLink”>Smaller Text</a><br>
<a href=”#” id=”largerTextLink”>Larger Text</a>
</div>
这是一常规的文本和两个超级链接。点击这些链接时将可以控制文本是否放大或缩小。现在来添加我们的jQuery代码。
$(document).ready(function()
{
$(’a').click(function()
{
var theElement = $(”#text”).css(”font-size”);
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);
if ( (this).id == “largerTextLink”)
{
textSize += 2;
}
else
{
textSize -= 2;
};
$(’p').css(”font-size”, textSize + unitOfMeasurement);
return false;
});
});
和平时一样，我们一步步来看看代码到底完成了什么事。
$(document).ready(function()
{
$(’a').click(function()
这是当HTML打开完成时，为HTML文档内的所有超链接<a>元素绑定了一个点击(click)事件函数。
var theElement = $(”#text”).css(”font-size”);
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);
在这，我们创建一些变量。HTML文档中ID为text的元素的font-size(字符尺寸)属性值将赋给变量”theElement”。”.css”方法可以获取或设置定指属性的值。当只在()内添加属性名称时（为.css方法提供一个属性名称参数），意思就是让jQuery去获取段落的font-size(字符尺寸)的值。这个值将返回数字和单位，也就是20px。我们需要将”20″和”px”分开。
“textSize”变量使用”parseFloat”方法。”parseFloat”能读取或解析字符串中的数字字符并返回这些值。既然如此，我们就用这种方法去掉font-size属性值中的”px”。”10″表示进制，我们就用这个10进制。
“unitOfMeasurement”只保存font-size属性值的最后两个字符(px)，也就是值的单位。我们需要用它来确保将来产生的一些新值的单位一致。
if ( (this).id == “largerTextLink”)
{
textSize += 2;
}
else
{
textSize -= 2;
};
if语句用于判断当前被点击的超链接元素<a>的ID是否为”largerTextLink”。如果是，我们要为textSize变量增加2px。类似textSize=textSize+2的写法。如果不是，那说明用户肯定点击了ID为”smallerTextLink”的超链接，这种情况下，我们要减掉textSize变量的2px。
$(’p').css(”font-size”, textSize + unitOfMeasurement);
return false;
最后，我们还要获取段落元素并为段落元素赋予新的值。font-size将被新的textSize变量的值取代，还要连接unitOfMeasurement变量作为单位。很简单，不是吗？
我怎样实现当点击图片后让它放大
看看效果这个比较容易，首先，我们加些简单的HTML。
<img src=”img/logo.gif” alt=”Logo” id=”image”>
<p>
Click To Zoom In
</p>
只有一个图片和一个段落。我们为什么不干脆用超链接而用段落呢。我只是想让你知道我可以为任何标记声明click事件。
$(document).ready(function()
{
$(”#image”).css(”width”, “100px”);
$(”#image”).toggle(function()
{
$(this).animate({width: “300px”}, 1000);
$(’p').text(”Click To Zoom Out”);
}, function(){
$(this).animate({width: “100px”}, 1000);
$(’p').text(”Click To Zoom In”);
});
});
一步一步来看，你知道要这样的……
$(document).ready(function()
{
$(”#image”).css(”width”, “100px”);
当html打开完成，我们要为ID为”image”的元素设置一个100px的宽度。这在第二步时不是十分有必要的，界时只是将其缩小回原样。
$(”#image”).toggle(function()
{
$(this).animate({width: “300px”}, 1000);
$(’p').text(”Click To Zoom Out”);
当ID为image的图片元素被点击，我们要调用toggle方法。用”toggle”方法，我们可以设置两个函数，第一个函数用于处理一次点击的响应，第二个函数用于处理再次点击的响应。这最适合用来处理一些类似“展开/收缩”的样式。
ID为image的图片元素第一次被点击，我们要获取”this”（就是被点击的图片对象）并赋予它一个动画。即在一秒钟内完成图片的宽度变换到300px（1000表示毫秒即一秒）
}, function(){
$(this).animate({width: “100px”}, 1000);
$(’p').text(”Click To Zoom In”);
第二次点击图片，就要将图片的宽度改回到100px，并更改段落的相应文本。
我怎样创建一个“阅读更多内容”的链接，该链接一被点击就展开并向用户显示更多的内容？
非常简单，先加点简单的html。
<p>
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. <span class=”readMore”>Read More</span>
</p>
<p>
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text.
</p>
这只是些常规的文本，文本位于两个段落标记内。并且还有一个class=”readMore”的span的标记。当这个标记被点击，我们就要移走它。
现在来看看jQuery!
$(document).ready(function()
{
$(’p:eq(1)’).hide();
$(’span.readMore’).css({”cursor” : “pointer”, “color” : “blue”, “font-size” : “.8em”}).click(function()
{
$(’p:eq(1)’).fadeIn(”slow”);
$(this).fadeOut(”normal”);
});
});
在这里，我们要隐含第二个段落，p:eq(1)，记住，javascript是以零为基准，也就是用0表示第一个元素或对象。所以，这里的”1″就相当于第二个段落。
$(’span.readMore’).css({”cursor” : “pointer”, “color” : “blue”, “font-size” : “.8em”}).click(function()
接着，我们获取class=”readMore”的span元素，并设置一些css属性。我们改变了这个元素的指针移到时的光标样式，为了让用户知道这是一个可以点击操作的地方。接下来我们会改变它的颜色，以一个随机的颜色来突显这个span标记。我们还将减小span标记文本的大小，就小一格吧。接下来我们为span标记设置一个点击事件函数。
$(’p:eq(1)’).fadeIn(”slow”);
$(this).fadeOut(”normal”);
当span标记被点击时，我们要获取第二个段落对象（p:eq(1)），并且让段落淡入。其中”this”（就是被点击的span标记对象）将会在0.4秒（默认）内完成淡出效果。
这就是操作的全部。
我怎样才能不论何时点击图片都会移动确切数量的像素？
5行代码我就可以解决问题，Bob!
<img src=”img/logo.gif” alt=”Detached Designs” id=”image”>
<a href=”#” id=”scroll”>Scroll</a>
简单的html，这只是一个图片和一个超链接。现在轮到jQuery了。
$(document).ready(function()
{
$(”#scroll”).click(function()
{
var theLeftAmount = $(”#image”).css(”left”);
var theNumber = parseFloat(theLeftAmount, 10);
theNumber += 25;
var amountToShift = theNumber + “px”;
$(”#image”).css(”left”, amountToShift); });
});
在这儿，我们来分析一下！
$(document).ready(function()
{
$(”#scroll”).click(function()
html打开完成了，我们要获取id为scroll的超链接元素对象，并为其声明一个点击事件函数。
var theLeftAmount = $(”#image”).css(”left”);
var theNumber = parseFloat(theLeftAmount, 10);
theNumber += 25;
var amountToShift = theNumber + “px”;
被点击后做些什么呢？这里，我们要创建一些变量。为使图片能够移动，我们还要改变它的CSS样式的”left”属性。这个”theLeftAmount”变量要保存图片的当前CSS样式的left属性值。这个图片的left属性如果在CSS文档里为”20px”……那么”theLeftAmount”变量也相应的是”20px”。
“theNumber”变量要对”theLeftAmount”变量进和分析，提取数值字符串和去掉”px”。那个”10″的参数表示进制，我们当然是要10进制。
接下来，我们将其自增25px。再创建一个新的变量叫”amountToShift”来接收”theNumber”变量，再加上单位，本例是”px”。
$(”#image”).css(”left”, amountToShift); });
最后，我们用新的值(amountToShift)来改变图片的left属性。
请记住，所有的这些例子里都是使用.css直接将样式添加到HTML中。我的本意是保持简单的叙述。理想的做法是，你要添加的样式可以放到样式表里，然后用.addClass方法来提取它们。
标签：jQuery,function,textSize,text,some,问题,点击,css,解答 来源： https://blog.51cto.com/u_11041969/2908895