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 元素选择器基于元素名选取元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>标题</h2> <p>段落。</p> <p>另一个段落。</p> <button>点击隐藏P标签内容</button> </body> </html>
2. #id 选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <p>段落</p> <p id="test">另一个段落</p> <button>点击隐藏id</button> </body> </html>
3.class选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">标题</h2> <p class="test">段落。</p> <button>点击隐藏所有class</button> </body> </html>
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 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):
<head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="my_jquery_functions.js"></script> </head>