JQuery

Posted 2020-09-05 情镌三分木，相思万骨书

• JQuery的选择器:
•      jquery就是通过jquery包装Dom对象后产生的对象
       jquery对象是jquery独有的,如果一个对象是jquery对象,那么就可以使用jquery里的方法
       jquery就是js的类库.
       jquery的引入<script src="jquery.js" ></script>
  • js与jq相互转换 
         DOM对象是否可以调用JQuery对象上支持的方法
                 alert(document.getElementById(“dv”).html());  不支持
           JQuery对象是否可以调用DOM对象上支持的方法
                 alert($(“#dv”).innerHTML);                 不支持
           如何将DOM对象转换为JQuery对象
                $(dm);
           如何将JQuery对象转换为DOM对象
                $(“div”).get(0);
                $(“div”)[0];

  • jq的选择器
  • • 基本选择器
    • • ID选择器                          $("#id")
      • 类选择器                    $(" . class ");
      • 标签选择器                 $("div");
      • 通配符选择器              $("*");
      • 群组选择器                 $("h2.h3,.class,#id");
    • 层级选择器 ----> 从父子关系和兄弟关系进行选择页面节点
    • • $("a   b") :                          : a节点的所有后代节点b都被选中
      • $("a   >  b"):                       :a节点的所有子节点b都被选中
      • $("a   +  b"):                       :a节点之后的第一个兄弟节点b
      • $("a  ~  b "):                       :a节点之后的所有兄弟节点b
    • 过滤选择器
    • • 基本过滤选择器
      • •           从位置的角度来对页面的标签进行过滤选择
        •           $("tagName:first");
        •           $("tagName:last");
        •           $("tagName:eq(2)");
        •           $("tagName:gt(2)");
        •           $("tagName:lt(2)");
        •           $("tagName:odd");
        •           $("tagName:even");
        •           $(":header");
        •           $(":animated");
        •           $("tagName:not(.one)")
      • 内容过滤选择器
      • •        节点值是否为空,节点上的文本中是否包含指定的字符串,子元素中的class值是否为指定的值
        •         $("tagName:empty");  $("tagName:parent");
        •         $("tagName:contains(‘aaa‘)");
        •         $("tagName:has(.one)");
      • 可见性过选择器
      • •          从节点的属性来过滤筛选节点:有无属性,属性值等于,不等于,包含,是**开头,是**结尾,多重过滤
        •           $("tagName:[id]");
        •           $("tagName:[id=‘cc‘]");
        •           $("tagName:[id!=‘cc‘]");
        •           $("tagName:[title^=‘cc‘]");
        •           $("tagName:[title$=‘cc‘]");
        •           $("tagName:[title*=‘cc‘]");
        •           $("tagName:[title*=‘cc‘][name=‘ee‘][id!=‘ff‘]");
      • 属性过滤器
      • •         根据页面上的元素是否显示来选择节点
        •          $("tagName:visible");
        •          $("tagName:hidden");
        •          $("tagName :hidden"); 选中标签tagName下所有隐藏的元素,包括隐藏表单组件
      • 子元素过滤器
      • •              选择父元素下的子元素(第1个,最后1个,唯一的一个,第几个子元素)
        •               $("tagName :first-child");  $("tagName :last-child");
        •               $("tagName :only-child");   $("tagName :nth-child(2)");
      • 表单对象属性过滤
      • • 从表单组件的可用还是不可用来进行选择节点
    • 表单选择器         
    • • :input              选取所有的input,textarea,select,button元素    集合元素
      • input               选取所有的input元素    集合元素
      • :text                选取所有的单行文本框    集合元素
      • :password        选取所有的密码框    集合元素
      • :radio               选取所有的单选框    集合元素
      • :checkbox        选取所有的多选框    集合元素
      • :submit            选取所有的提交按钮    集合元素
      • :image             选取所有的图像按钮    集合元素
      • :reset               选取所有的重置按钮    集合元素
      • :button            选取所有的按钮    集合元素
      • :file                 选取所有的上传域    集合元素
      • :hidden           选取所有的不可见元素    集合元素
      •     $("#form :hidden);
      •        * $("#form :hidden);
      •         * $("#form :input");   $("#form input");
      •         * $("#form :button);