jquery $(document).ready(function()介绍
来源:互联网 发布:淘宝 化妆镜 宣传语 编辑:程序博客网 时间:2024/04/28 09:51
window.onload = function(){ alert("welcome"); }
这样的写法作用是希望在页面加载完,自动执行定义js代码(function)。
$(document).ready(function(){.... })这个函数是用来取代页面中的window.onload;
document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。
Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。
<script type="text/javascript">$(document).ready(function () {
alert("我的第一个jQuery代码!");
});
</script>
这段代码的意思是:当Dom Tree加载完成后,显示警告信息。document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。
最后要注意两点:
确保在 <body> 元素的onload事件中没有注册函数,否则可能不会触发$(document).ready()事件。(
我尝试用下面的例子来演示这个情况,但是没有成功,所以我想这种情况只是可能发生。)
<html>
<head>
<title>My second jQuery</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
//下面是load的函数含有jquery注册函数$
function load(){
$("p").append("<b>Hello</b>");
}
//下面是jQuery的代码
$(document).ready(function () {
$("p").append("我的第一个jQuery代码!");
$("p").append("<b>Hello</b>");
});
</script>
</head>
<body onload="load()">
<h2>jQuery 简单例子2</h2>
<p>I would like to say: </p>
</body>
</html>
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
页面加载完成后开始运行do stuff when DOM is ready 中的语句!
$(document).ready(function() {// do stuff when DOM is ready
});
选择器
$(“a”)是一个jquery的选择器(selector)
$("")其中的字段就是元素的标记。比如$("div")就是<div></div>
click是函数对象的一个方法。方法为点击鼠标事件!
例:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
$("div").click $("div")就是页面中所有的 div标签 这句话就是给所有的标签为div的元素 绑定了一个click事件 即当所有div 被鼠标单 击的时候 执行 alert("Hello World!");
选择器(selector)和事件(events)
选择DOM元素
选择一个ID为orderedlist的元素,相当于javascript中的document.getElementById("orderedlist"),jquery中只需要$("#id")其中的id为元素的ID,元素为任意元素!addClass为把这个元素的css的class改为red
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
$("#id > xx") 这种表示ID的元素下的所有元素标记为xx的元素设置CSS的Class, id为元素的id xx为元素的标记例<div><li><a>等!
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
这个代码只是ID为form的表单执行reset()方法。但是万一你有很多个表单需要执行呢?那么你可以这样写:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});另外一个你必须面对的问题是选择某个或某几个元素。Jquery提供了filter()和not()方法。当filter()是过滤一些适合filter()表达式元素,而not()是删除和not()表达式相反的元素。当你想选择所有的li元素,并且不包含ul子元素呢?你可以这样写:
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});find(expr) 在匹配的对象中继续查找符合表达式的对象
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
Query代码及功能:
function jq(){
alert($("p").find("#a").html())
}
在$("p")对象中查找id为a的对象存疑:
结果是除了包含ul子元素的li,其他所有的li都得到了一个border.可能你也想选择有name属性的anchor(<a>):
$(document).ready(function() {
$("a[@name]").background("#eee");
});
要匹配属性的值(value),我们可以用”*=”来代替”=”
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
直到现在,我们已经学到了很多选择器的使用。这里还有种情况你需要选择前一个或后一个元素。想一想starterkit.htm里的FAQ,当你click问题的时候,它是怎么实现隐藏和显示的呢?代码是这样的:
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
因为上面只有唯一一个选择器(#faq),我们用chain来减少代码的长度和提高代码的易读性和表现性.这里要说明一下,如果按原文翻译过来我想很多人都看不懂,感觉他自己也没怎么说明白。我说说我自己的理解:
‘dd’和‘dt’都是#faq的子元素,find()的作用就是找到它的子元素。End()应该和next()搭配的,end()实质上是把 ‘dd’过滤了,也就是next()的时候实质上是参考的’dt’。这样每个’dt’的next就是‘dd’,挺容易实现的。要是还不明白你可以边参考边照着做一遍。
除了同属元素外,我们也可以选择父元素:
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
很容易看懂,p就是a的父元素。
(document)意思是说,获取整个网页文档对象(类似的于window.document),$(document).ready意思就是说,获取文档对象就绪的时候。
$(document).ready(function() {
// do stuff when DOM is ready//当文档载入后从此处开始执行代码
});
- jquery $(document).ready(function()介绍
- jQuery(document).ready(function(){});
- $(function(){}) ,$(document).ready(function(){}) ,jQuery(function($){ }) , (function($){})
- jQuery $(document).ready()介绍
- $(function(){})与(function($){})(jQuery)、$(document).ready(function(){})
- $(document).ready(function() 具体介绍
- JQuery中$(function(){})和$(document).ready(function(){})
- jQuery中级--$(function() {})和$(document).ready(function(){ })
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})
- jquery中$(document).ready(function(){})的实现
- jQuery之$(document).ready()使用介绍
- jQuery之$(document).ready()使用介绍
- jQuery之$(document).ready()使用介绍
- jQuery之$(document).ready()使用介绍
- jQuery之$(document).ready()使用介绍
- jquery中关于 (function($){...})(jQuery)与$(document).ready();的区别
- $(document).ready(function()
- $(document).ready(function()
- C语言union关键字
- 注册(十) 重注册没有带鉴权信息
- 获取网络对时
- 10天学会SEO:第一天 SEO基础知识(一)
- PhotoshopCS5第二篇 管理图像和使用绘图辅助工具
- jquery $(document).ready(function()介绍
- 一些被忽略的CSS
- 编程之美—队列中取最大值操作问题
- UML 关联、组合、聚合的区别
- 商品扩展属性一个参考
- JQuery操作select中的option
- maven通过jetty插件运行内存溢出的问题
- 【Unity 3D】学习笔记八:GroupView控件(群组视图)
- gdb调试memcached