$(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("HelloWorld!");
  选择器(selector)和事件(events)
  选择DOM元素
  选择一个IDorderedlist的元素,相当于javascript中的document.getElementById("orderedlist"),jquery中只需要$("#id")其中的id为元素的ID,元素为任意元素!addClass为把这个元素的cssclass改为red

$(document).ready(function(){
    $("#orderedlist").addClass("red");
});

      $("#id > xx") 这种表示ID的元素下的所有元素标记为xx的元素设置CSSClass, 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();
    });
}); 


这个代码只是IDform的表单执行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//当文档载入后从此处开始执行代码
});


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值