jQuery官方教程之频繁被问的问题汇总

jQuery 专栏收录该内容
4 篇文章 0 订阅

全部翻译自jQuery官网,转载请注明出处。原文地址


1、我怎么样通过class和ID来选择一个条目?


下面的代码选择了ID为”myDivId”的元素,由于ID是唯一的,所以得到的结果要么为空要么是唯一的,这取决于是否有ID定义为”myDivId”的元素。

$( "#myDivId" );

下面的代码选择了class定义为”myCssClass”的元素,由于任意数量的元素都可以使用同一个class,所以该代码选择的元素数量也是任意的。

$( ".myCssClass" );

一个包含了被选择元素的jQuery对象可以像平常那样赋值给一个JS变量。

var myDivElement = $( "#myDivId" );

通常,一个jQuery对象中的元素,可以被别的jQuery方法调用。

var myValue = $( "#myDivId" ).val(); // 得到表单输入值

$( "#myDivId" ).val( "hello world" ); // 设置表单输入值

2、当我有一个DOM元素时,该怎么选择元素?


如果你有一个包含了很多内容的DOM元素,并且想从中选择一些其他元素,那么就简单的把它包裹进一个jQuery对象就行了。

var myDomElement = document.getElementById( "foo" ); // 一个普通DOM元素

$( myDomElement ).find( "a" ); // 得到所有该DOM元素中的"a"元素

许多人想把一个DOM元素或者jQuery对象和CSS选择器连结起来,例如:

$( myDomElement + ".bar" ); // 这相当于 $( "[object HTMLElement].bar" );

!很不幸,你不能把字符串和object对象连结。


3、我如何测试一个元素是否定义了特殊的class?


.hasClass()方法解决了这个普遍的问题

$( "div" ).click(function() {

    if ( $( this ).hasClass( "protected" ) ) {

        $( this )
            .animate({ left: -10 })
            .animate({ left: 10 })
            .animate({ left: -10 })
            .animate({ left: 10 })
            .animate({ left: 0 });
    }
});

你可以对属性选择器单独使用 .is() 方法来得到更高级的匹配。

if ( $( "#myDiv" ).is( ".pretty.awesome" ) ) {

    $( "#myDiv" ).show();

}

注意,这个方法也可以用来测试其他事情,例如,你可以测试一个元素是否处于隐藏状态(通过使用自定义的:hiddern 选择器)

if ( $( "#myDiv" ).is( ":hidden" ) ) {

    $( "#myDiv" ).show();

}

4、如何判断一个元素是否存在?


对你的选择器返回的jQuery集合使用.length 属性。

if ( $( "#myDiv" ).length ) {

    $( "#myDiv" ).show();

}

注意,并不是必须要判断元素是否存在,下面这段代码,如果元素存在在显示,如果不存在则不执行任何操作,并且不会报错。

$( "#myDiv" ).show();

5、我如何判断一个开关元素的状态?


你可以通过:visible:hidden 选择器来判断一个元素的可见状态。

var isVisible = $( "#myDiv" ).is( ":visible" );

var isHidden = $( "#myDiv" ).is( ":hidden" );

如果你只是简单的根据元素的可见性来操作元素的话,那只要简单的使用:visible:hidden 在选择表达式中即可。例如:

$( "#myDiv:visible" ).animate({

    left: "+=200px"

}, "slow" );

6、如何通过ID选择那些用到了CSS特性的元素?


由于jQuery使用CSS语法来选择元素,一些符号会被错认为CSS符号。例如,ID属性,在一个首字母之后,可能会使用冒号:和句号.,除了字母、数字、连字符、下划线以外,使用冒号”:”和句号”.”在一个jQuery选择器的上下文内是会产生问题的,因为他们分别代表了伪类(pseudo-class)和类(class).

为了能让jQuery按照字符的字面意思而不是CSS符号,在它们前面必须被双反斜杠“//”隔开。

// 不起作用:
$( "#some:id" )

// 有用!
$( "#some\\:id" )

// 不起作用:
$( "#some.id" )

// 有用!
$( "#some\\.id" )

下面这个函数用于对一个ID字符串进行以“#”开头转码。

function jq( myid ) {

    return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );

}

上面这个函数可以被这么用:

$( jq( "some.id" ) )

7、如何 使能(enable)/使不能(disable) 一个表单元素 ?


你可以使用.prop() 方法:

// Disable #x
$( "#x" ).prop( "disabled", true );

// Enable #x
$( "#x" ).prop( "disabled", false );

8、如何改变单选框或复选框的选中状态?


你可以使用.prop() 方法:

// Check #x
$( "#x" ).prop( "checked", true );

// Uncheck #x
$( "#x" ).prop( "checked", false );

9、如何获得一个已选选项的文本内容?


通常我们选择一个元素,只为了获取两个值,一个是用来发送给服务器的,这个简单:

$( "#myselect" ).val();
// => 1

另一个是你选择的条目的文本内容,例如我们使用如下的例子:

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

如果你想得到“Mr”这个值,而不是仅仅得到“1”,那么你就要这么做:

$( "#myselect option:selected" ).text();
// => "Mr"

10、如何改变一个长度为10的list中第3个元素的值?


无论:eq() 还是 .eq() 方法,都可以得到你需要的条目,然而,想要改变其文本,就要先得到这个文本。

// 这个不管用,.text()会返回一个String字符串而不是一个jQUery对象
$( this ).find( "li a" ).eq( 2 ).text().replace( "foo", "bar" );

// 这个管用:
var thirdLink = $( this ).find( "li a" ).eq( 2 );

var linkText = thirdLink.text().replace( "foo", "bar" );

thirdLink.text( linkText );

第二个例子保存了要修改的内容,然后用要修改的内容去替换旧的内容,记住,.text() 获取,.text("foo") 设置。


11、如何从一个jQuery对象中取出一个原生DOM元素?


一个jQuery对象就像一个包裹着一个或多个原生DOM元素的类似数组的东西,为了得到一个真正的DOM元素的引用(不是jQuery对象),你有两种选择。
第一种(最快速)就是使用数组符号:

$( "#foo" )[ 0 ]; // 等价于document.getElementById( "foo" )

第二种,是使用.get() 函数:

$( "#foo" ).get( 0 ); // 同第一种,但速度稍慢.

你可以使用.get() 方法不加任何参数来获取一个真实DOM元素的数组。


以上就是官网对于频繁被问的问题给出的解答,翻译不容易,转载请注明出处,谢谢!

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值