`
八贤王
  • 浏览: 39573 次
社区版块
存档分类
最新评论

$(document).ready(function()

 
阅读更多
$(document).ready(function()
页面加载完成后开始运行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() { alert("你好"); }); ``` 或者简写为: ```javascript $(document).ready(function() { alert("你好"); }); ``` **第二种:直接传递函数给jQuery** ```javascript jQuery...

    $(document).ready(function() {})不执行初始化脚本

    $(document).ready(function() { // 在这里编写你的初始化脚本 }); ``` 在这个例子中,当DOM完全加载时,`function() { ... }`中的代码会被执行。通常,这比`window.onload`事件更早触发,因为它等待的是DOM的加载...

    jquery中的$(document).ready()使用小结

    $(document).ready(function(){…. })这个函数是用来取代页面中的[removed]; document.ready()和传统的方法&lt;body onload=”load()”&gt; 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和...

    Jquery中$(document).ready(function(){ })函数的使用详解

    jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作. 比如jquery写法:$(“div p”); // (1)$(“div.container”); // ...

    jquery操作菜单

    $(document).ready(function(){ $(".menu ul li ul").hide(); $(".menu&gt;ul&gt;li&gt;a").on('click',function(){ $(".menu&gt;ul&gt;li&gt;a").css('background-image',"url('../image/collapsed.gif')"); $(".menu ul li ul...

    Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解

    $(document).ready(function() { alert("hello"); }); 这行代码将会在页面加载完成后立即显示一个包含“hello”的对话框。它等同于传统的JavaScript写法: ('hello');"&gt; 但在使用JQuery时,我们倾向于将表现和...

    JQuery 引发两次$(document.ready)事件

    $(document).ready(function() { $("#a1").appendTo($("#a2")); }); alert('a1'); &lt;div id="a2"&gt;&lt;/div&gt; ``` `$("#a1")`被移动到了`$("#a2")`的内部,导致包含在`a1`中的`&lt;script&gt;`标签被再次执行,因此`...

    浅析document.ready和[removed]的区别讲解

    $(document).ready(function () { alert("我的第一个jQuery代码!"); }); ``` 这段代码会在DOM解析完毕后立即显示警告框,用户无需等待所有资源加载完毕。 相比之下,`window.onload`是JavaScript原生的事件,它在...

    jQuery之$(document).ready()使用介绍

    $(document).ready(function() { // 所有代码将在这里执行,一旦DOM加载完毕 }); ``` - 使用简写形式: ```javascript $(function() { // 同样是在DOM加载完毕后执行 }); ``` #### 4. 优势分析 相较于直接...

    多个$(document).ready()的执行顺序实例分析

    在给出的实例代码中,我们有三个不同的`$(document).ready()`声明,每个声明中还包含了嵌套的`$(function() {...})`,这是一个简写的`$(document).ready()`形式。这些嵌套的函数会按照它们的嵌套层次执行,而不是...

    Jquery中$与$.fn的区别实例.zip

    $(document).ready(function() { // DOM已准备就绪,可以进行操作 }); ``` 上述代码等同于: ```javascript $(function() { // DOM已准备就绪,可以进行操作 }); ``` `$.fn`,全称`jQuery.fn`,实际上是jQuery...

    jquery的$(document).ready()和onload的加载顺序

    3. 使用jQuery的`$.holdReady(true)`和`$.holdReady(false)`组合,来控制`$(document).ready`的执行时机。 4. 如果可能,避免在frame中加载页面,或者确保frame内页面的资源都能正确访问。 理解`$(document).ready...

    CSS3的仿windows8 Metro风格界面布局效果.zip

    $(document).ready(function () { var $box = $('.box'); $('.metro li').each(function () { var color = $(this).css('backgroundColor'); var content = $(this).html(); $(this).click(function ()...

    用javascript实现jquery的document.ready功能的实现代码

    ### 使用JavaScript实现jQuery的`document.ready`功能 在前端开发中,经常需要用到DOM操作,而这些操作往往需要等到整个文档加载完成之后才能进行。在jQuery中,提供了非常方便的`$(document).ready()`方法来帮助...

    $(document)

    ### $(document).ready(function(){ })函数详解 在前端开发领域,尤其是使用JavaScript及其库进行页面交互设计时,`$(document).ready(function(){ })` 函数是开发者经常接触到的一个重要概念。本文将详细介绍这一...

    jquery.table2excel.js

    $(document).ready(function() { //导出excel $("#output").click(function(){ var myDate = new Date(); $("#example").table2excel({ exclude: ".noExl", name: "Excel Document Name.xlsx", filename: ...

Global site tag (gtag.js) - Google Analytics