jQuery 选择器
jQuery选择器是什么?
jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置。了解jQuery选择器是打开高效开发jQuery之门的钥匙。一个典型的jQuery选择器句法形式:
$(selector).methodName();
selector是一个字符串表达示,用于识别DOM中的元素,然后使用jQuery提供的方法集合加以设置。
大多数情况下jQuery支持这样的操作:
$(selector).method1().method2().method3();
这个实例表示隐含DOM中id=”goAway”的元素,然后为其添加一个class=”incognito”属性。
$('#goAway').hide().addClass('incognito');
提示一下:当选择器表达示匹配多个元素时,可以象JavaScritp数组操作一样,方便灵活地利用数组指针进行选取。这是例子:
var element = $('img')[0];
匹配表达示的元素中,第一个元素对象将赋给变量element。
基本选择器
1.元素选择器
jQuery 元素选择器基于元素名选取元素。
php中文网(php.cn) 标题
段落。
另一个段落。
2. #id 选择器
php中文网(php.cn) 段落
另一个段落
3.class选择器
php中文网(php.cn) 标题
段落。
4.element选择器
将p元素的文字大小设置为12px:
$(document).ready(function () {
$('p').css('font-size', '12px');
});
5. * 选择器
$(document).ready(function () {
// 遍历form下的所有元素,将字体颜色设置为红色
$('form *').css('color', '#FF0000');
});
6. 并列选择器
$(document).ready(function () {
// 将p元素和div元素的margin设为0
$('p, div').css('margin', '0');
});
其他的层级选择器,过滤选择器将会在以后的章节中逐步介绍。
独立文件中使用 jQuery 函数
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时,会将函数直接添加到
部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):