$(document).ready()
来源:互联网 发布:犀牛o2o源码 编辑:程序博客网 时间:2024/06/05 18:32
页面加载完成后开始运行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("HelloWorld!");
选择器(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子元素呢?你可以这样写:
<pre name="code" class="javascript">$(document).ready(function(){ $("li").not("[ul]").css("border", "1px solidblack");});
find(expr)在匹配的对象中继续查找符合表达式的对象
<p>Hello</p><p id="a">Hello Again</p><pclass="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 pointsomewhere 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//当文档载入后从此处开始执行代码});
- document.ready()
- $( document ).ready()
- $(document).ready()
- $(document).ready()
- jQuery慎用$(document).ready
- jQuery $(document).ready()介绍
- $(document).ready(function()
- $(document).ready(function()
- $(document).ready(function()
- $(document).ready(function()
- $(document).ready 缺少对象
- $(fn) 与 $(document).ready()
- $(document).ready()详解
- $(document).ready说明
- $(document).ready(function()
- $(document).ready(function()
- jQuery(document).ready(function(){});
- $(document).ready(function(){ });
- 易语言学习第十一课
- CString用法
- 有符号十六进制转十进制 c++
- [BZOJ1467]Pku3243 clever Y(扩展BSGS)
- 字符串反转引发的char str[]="abc"和char *str="abc"思考
- $(document).ready()
- OpenCv学习笔记---OpenCv中支持向量机模块SVM------源代码分析
- 隐形变量赋值,隐藏参数,隐藏传参
- 2016sdau课程练习专题二 1020
- 345. Reverse Vowels of a String 【E】
- mysql一些实用的语句
- DayDayUP_Linux运维学习_oracle11g安装教程
- ios UITableView实现单击提示,滑动删除,多选行等操作
- ACM2-1003