• jquery----中级函数


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .div1{ 1000px; height: 800px; background: yellow; color: red; font-size: 18px;}
    </style>
        <script src='../jquery-3.1.1.min.js'></script>
        <script>
        $(function(){
            // $('div').parents('body').css('background','red');
            // $('span').siblings().css('background','yellow');
              // $('h2').clone().appendTo('h3');
              // $('span').wrap('<div>');
              // $('span').wrapInner('<div>');
              // $('h1').unwrap();
    
              // var elem=$('h1');
              // var elem2=elem.add('h3');
              // elem2.css('background','red');
               // $('li').slice(1,4).css('background','blue');
                // console.log($('form').serialize());
                console.log($('form').serializeArray());
            
        });
        </script>
    </head>
    <body>
    <div class="div1">
              get()下标,和lenght属性 get()可以把jquery转成原生的js<br/>
              参数就是集合的下标    用法$('div').get(0).interHtml;   <br/>
              for(i=0; i<$('li').get().length; i++){};  无参数时会循环集合<br/>
              outterWidth(); 可以获取隐藏元素的属性,<br/>
              offsetWidth(); 不可以获取隐藏元素的属性;<br/>
              .html()可以获取写入dom节点标签; .text()只能读取文本可写入文本<br/>
              .remove()删除对象和对象事件; .detach();删除对象但是不删除对象事件<br/>
              $(function(){...})Dom加载完执行函数   $(document).ready();页面加载完执行<br/>
    
               $('.div2').parents()获取当前元素的祖先节点();参数就是筛选的功能;可以过滤多个属性<br/>
              $('.div2').closest(); 获取元素最近的父级节点();必须要写筛选的参数,不支持多个<br/>
              $('div2').siblings();找所有兄弟节点,参数也是筛选功能;<br/>
              $('div2').nextAll();找上面的兄弟节点;<br/>
              $('div2').prevAll(); 找下面的兄弟节点;<br/>
              Until()截止;<br/>
              $('div2').parentsUntil();父级截止-参数为截止节点;<br/>
              $('div2').nextUntil();找上面截止的兄弟节点; 参数为截止的兄弟节点<br/>
              $('div2').prevAll();找下面截止的兄弟节点; 参数为截止的兄弟节点<br/>
    
              $('div2').clone();克隆节点 无参数的时候不克隆事件;参数为true时克隆事件<br/>
               $('span').wrap('');外部包装;每个标签包装一个; $('span').wrapAll('');<br/>
               $('span').wrapInner('');内部包装;     unwrap();删除包装(不包括body)<br/>
                $('li').slice(1,4); 从参数1,到参数2;选中;<br/>
                 $('form').serialize();sting形成的串联;$('form').serializeArray()串联成数组形式<br/>
    </div>
    <div class="div2">
    <span>1span</span>
    <span>2span</span>
    <h1>h1</h1><h2>h2</h2><h3>h3</h3>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <form>
    <input type="text" name="a" value='1'/>
    <input type="text" name="b" value='2'/>
    <input type="text" name="c" value='3'/>
    </form>
    </div>    
    </body>
    </html>
  • 相关阅读:
    简单好用的日历排期控件
    Ext.js create store
    Ext.js页面添加元素
    Ext.js Tree
    前端设计的七大法则
    如何写软件开发相关文档,它包含哪些种类和内容
    行内文字末尾下降
    正则表达式
    滚动加载数据
    location.hash来保持页面状态
  • 原文地址:https://www.cnblogs.com/hack-ing/p/6158606.html
Copyright © 2020-2023  润新知