zoukankan      html  css  js  c++  java
  • jquery 选择器(selector)和事件(events)

    页面加载完成后开始运行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//当文档载入后从此处开始执行代码
    });

  • 相关阅读:
    hdu 2485 Destroying the bus stations 迭代加深搜索
    hdu 2487 Ugly Windows 模拟
    hdu 2492 Ping pong 线段树
    hdu 1059 Dividing 多重背包
    hdu 3315 My Brute 费用流,费用最小且代价最小
    第四天 下载网络图片显示
    第三天 单元测试和数据库操作
    第二天 布局文件
    第一天 安卓简介
    Android 获取存储空间
  • 原文地址:https://www.cnblogs.com/zhaoyueplc/p/3769645.html
Copyright © 2011-2022 走看看