jQuery入门基础知识学习指南
104 浏览量
2020-11-27
01:31:55
上传
评论
收藏 79KB PDF 举报
jQuery入门基础知识学习指南入门基础知识学习指南
打开一个网页，如果 HTML 没有完全加载完毕，就去操作页面中元素是不安全的，但是监测 HTML 是否加载完毕呢？jQuery
提供了一个 $(document).ready() 方法，任何 ready 中的代码在 HTML 完全加载完成后才会被执行。
$(document).ready(function() {
console.log('ready!');
});
此外，它还有一个简写方式
$(function() {
console.log('ready!');
});
$(document).ready() 中并非只能执行匿名方法，执行一个已命名的方法也是可以的：
function readyFn() {
// code to run when the document is ready
}
$(document).ready(readyFn);
选择元素选择元素
jQuery 最基本的概念就是“选择一些元素，然后对它们做一些事情”。jQuery 支持大多数的 CSS3 选择器，另外还有一些非标
准的选择器，详情见 http://api.jquery.com/category/selectors/，下面是一些常见选择器的用法：
$('#myId'); // 此 ID 在页面中必须唯一
$('div.myClass'); // 如果指定了元素类型，那么性能会有所提升
$('input[name=first_name]'); // 速度有点慢，尽量避免这种用法
$('#contents ul.people li');
$('a.external:first');
$('tr:odd');
$('#myForm :input'); // 选择表单中的所有 input 类元素
$('div:visible');
$('div:gt(2)'); // 页面中除了前 3 个 DIV 之外的所有 DIV
$('div:animated'); // 所有正在执行动画的 DIV
需要注意的地方需要注意的地方
当使用 :visible 和 :hidden 这种伪选择器的时候，jQuery 实际上是去检测他们在页面中是否可见，还不是它们 css 中的 display
的值。也就是说，当一个元素在页面正的物理宽度和高度都大于 0，那么它就是可见的。但是 <tr> 例外，jQuery 会根据 <tr>
元素的 CSS 中 display 属性去判断元素是否可见。
jQuery 的具体实现方式可以参考一下代码：
jQuery.expr.filters.hidden = function( elem ) {
var width = elem.offsetWidth, height = elem.offsetHeight,
skip = elem.nodeName.toLowerCase() === "tr";
// does the element have 0 height, 0 width,
// and it's not a <tr>?
return width === 0 && height === 0 && !skip ?
// then it must be hidden
true :
// but if it has width and height
// and it's not a <tr>
width > 0 && height > 0 && !skip ?
// then it must be visible
false :
// if we get here, the element has width
// and height, but it's also a <tr>,
// so check its display property to
评论0