• jqery


    1. append()和prepend()

    假设

    <div class='a'> //<---you want div c to append in this
    <div class='b'>b</div>
    </div>
    1
    2
    3
    1
    2
    3
    使用

    $('.a').append($('.c'));
    1
    1
    效果如下:

    <div class='a'> //<---you want div c to append in this
    <div class='b'>b</div>
    <div class='c'>c</div>
    </div>
    1
    2
    3
    4
    1
    2
    3
    4
    同样使用

    $('.a').prepend($('.c'));
    1
    2
    1
    2
    效果如下:

    <div class='a'> //<---you want div c to append in this
    <div class='c'>c</div>
    <div class='b'>b</div>

    </div>
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    2. 使用after()和before()

    同样使用假设代码:

    $('.a').after($('.c'));
    1
    1
    效果如下:

    <div class='a'>
    <div class='b'>b</div>
    </div>
    <div class='c'>c</div>
    1
    2
    3
    4
    1
    2
    3
    4
    同样使用before()

    $('.a').before($('.c'));
    1
    1
    效果如下:

    <div class='c'>c</div>
    <div class='a'>
    <div class='b'>b</div>
    </div>
    1
    2
    3
    4
    1
    2
    3
    4
    总结:

    append() & prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() & before()是在元素的外面插入内容(其内容变成元素的兄弟节点)。

    =======================================================
    filer()和children()和find()的区别 (2012-11-14 14:35:41)转载▼
    标签: 杂谈
    .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。
    .find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。
    .filter(selector)方法是返回匹配元素集合中每个元素的筛选。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。


    jquery之empty()与remove()区别
    要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置。
    remove([expr])则是把其从dom中删除,而不会保留其所占的位置。
    例:
    <p>Hello</p>
    World
    <p>welcome</p>
    执行$("p").empty()其结果是
    <p></p>
    World
    <p></p>

    执行$("p").remove()其结果是
    World


    =====================================
    HTML中jQuery控制button按钮可点击、不可点击
    1.首先来说button按钮不可点击
    1.1第一种(html代码中控制)
    [cpp] view plain copy print?
    <button id="button_id" disabled="disabled">按钮不可点击</button>

    1.2第二种(jquery控制)
    [cpp] view plain copy print?
    $("#button_id").attr('disabled',true);

    2.按钮可点击
    2.1第一种(html代码中控制,默认)
    [cpp] view plain copy print?
    <button id="button_id">按钮可点击</button>

    2.2第二种(jquery控制)
    [cpp] view plain copy print?
    $("#button_id").attr('disabled',false);

    =================================================


    $('button').click(function(){
    $(this).css('background','red')
    });
    ============================

    $('#exmp_form input').each(function(){
    var idName= this.id;
    $('#idName').val();
    });
    //exmp_form 为你的表单ID
    //遍历每个input元素
    //idName 为input 元素对应的id值
    //用jquery语法 $('#idName').val(); 获得值

    ==============================================================
    <a>是没有VALUE的,不过你要是想用这个值可以使用Jquery来实现
    如:<a id="aa" href="" value="123">aa</a>
    $("#aa").attr("value")得到的值就是123


    ============================================================
    $("input[id^='code']");//id属性以code开始的所有input标签
    $("input[id$='code']");//id属性以code结束的所有input标签
    $("input[id*='code']");//id属性包含code的所有input标签
    $("input[name^='code']");//name属性以code开始的所有input标签
    $("input[name$='code']");//name属性以code结束的所有input标签
    $("input[name*='code']");//name属性包含code的所有input标签

    ===================================
    Jquery的parent和parents(找到某一特定的祖先元素)
    关于Jquery的parent和parents

    parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
    parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
    可以看出parent取的很明确,就是当前元素的父元素;parents则是当前元素的祖先元素。下面列出例子说明:
    <div id='div1'>
    <div id='div2'><p></p></div>
    <div id='div3' class='a'><p></p></div>
    <div id='div4'><p></p></div>
    </div>

    $('p').parent()取到的是div2,div3,div4
    $('p').parent('.a')取到的是div3
    $('p').parent().parent()取到的是div1,这点比较奇特;不过Jquery对象本身的特点决定了这是可行的。
    $('p').parents()取到的是div1,div2,div3,div4
    $('p').parents('.a')取到的是div3

    parent(exp)用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。

    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("#btn1").click(function(){
    alert($(this).parent().next().html());
    });
    });
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td><input id="btn1" class="btn" type="button" value="test"/></td>
    <td>some text</td>
    </tr>
    </table>
    ....
    其中:
    this.parent()是input前面的td
    this.parent().parent()获取的是tr
    this.parent().parent().parent()获取的是table
    this.parent().next()获取的是td相临的td
    另例子中:

    <div><p>Hello</p><p>Hello</p></div>

    $("p").parent() 得到的是:<div><p>Hello</p><p>Hello</p></div>对象,因为p标签的父标签是div.

    ==========================================
    var a = "iamstring.";
    var b = 222;
    var c= [1,2,3];
    var d = new Date();
    var e = function(){alert(111);};
    var f = function(){this.name="22";};

    最常见的判断方法:typeof
    alert(typeof a) ------------> string
    alert(typeof b) ------------> number
    alert(typeof c) ------------> object
    alert(typeof d) ------------> object
    alert(typeof e) ------------> function
    alert(typeof f) ------------> function
    ================================

  • 相关阅读:
    生成二维码
    IIS与Apache同时使用80端口
    C# 时间类型
    EXT 省市三级联动及默认选择
    拼音首字母查询汉字内容
    web.config
    使用input=file上传
    Js 扩展
    Linux 调试错误
    图的最短路径Dijkstra
  • 原文地址:https://www.cnblogs.com/konglxblog/p/8728819.html
Copyright © 2020-2023  润新知