• js jquery 常用函数集合


    getAttribute:根据属性值,获取到属性名
    querySelector:返回匹配指定选择器的第一个元素
    addEventListener:事件委托,事件冒泡(一般是在js中的写的html,需要触发事件时使用)

    ,,,,,,,,,,,,,,,,,,,,,,,,,,,

    1.appendTo:动态创建一个元素,并追加到指定的元素里
    例子:$('<div><p>hello</p></div>').appendTo('body')

    2.contains:匹配包含给定文本的元素

    例子:<div>John Resig</div>
    <div>George Martin</div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn
    $("div:contains('John')")
    结果:[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

    3.has:匹配含有选择器所匹配元素的元素
    例子:<div><p>Hello</p></div>
    <div>Hello again!</div>
    $("div:has(p)").addClass("test");
    结果:[ <div class="test"><p>Hello</p></div> ]

    4.hidden:查找所有不可见的元素
    例子:<table>
    <tr style="display:none"><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
    <input type="hidden" name="id" />
    </table>
    $("tr:hidden")
    结果:[ <tr style="display:none"><td>Value 1</td></tr> ]
    $("input:hidden")
    [ <input type="hidden" name="id" /> ]

    5.visible:查找所有的可见元素
    例子:<table>
    <tr style="display:none"><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
    </table>
    $("tr:visible")
    结果:[ <tr><td>Value 2</td></tr> ]

    6.attr:匹配给定的属性,设置属性值(不包含:!== 以...开头:^= 以...结尾:$= 包含...:*=)
    例子:<input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />
    $("input[name='newsletter']").attr("checked", true);//找到name='newsletter,添加属性
    结果:[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

    7.first-of-type:满足条件的第一个元素
    例子:
    <div id="n1">
    <div id="n2" class="abc">
    <label id="n3">label1</label>
    <span id="n4">span1</span>
    <span id="n5" class="abc">span2</span>
    <span id="n6">span3</span>
    </div>
    <div id="n7">
    <span id="n8" class="abc">span1</span>
    <span id="n9">span2</span>
    </div>
    </div>
    $(".abc:first-of-type");
    结果:[<div id="n2" class="abc>,<span id="n8" class="abc">span1</span>]

    8.trim:清除字符串末尾两端的空格

    9.nextall:某一个元素后面所有的同级元素
    例子:
    $("div:first").nextAll().nextAll().addClass("after");

    10.remove:移除某一个元素
    例子:$("p").remove();

    11:after:某一个元素后插入内容
    例子: $("p").after("<p>Hello world!</p>");

    12:substring,substr,slice:字符串截取
    substring(开始下标,结束下标(不包含结束下标,可选))=》必须为非负整数
    substr(开始下标,长度(可选))=》开始下标可以为负数,-1代表字符串最后一个字符,-2代表倒数第二个字符
    slice(开始下标,结束下标(可选))=》开始下标可以为负数,同上;结束下标不包含结束下标

    13:toLocaleUpperCase || toUpperCase:字符串所有小写转换为大写

    var str="Hello World!"
    document.write(str.toLocaleUpperCase()) //HELLO WORLD

    14.split:字符串按照_分割成字符串
    15.replace:字符串替换
    16.string.charAt(8) 返回字符串下标中的第几位
    17.14<<2 :14转化为二进制向左移2位,然后再将二进制转化为十进制
    18.concat:数组里添加对象

    19.~~:数字取整

    20:replaceWith:用指定的元素替换为被选元素(jquery)
    <p>This is another paragraph.</p>
    $("p").replaceWith("<b>Hello world!</b>");//Hello world!

    21:prop,attr:用于设置或返回元素的属性
    prop:建议是标签固有属性时使用
    例子:
    <a href="http://www.baidu.com" target="_self" class="btn">百度</a>
    console.log($('a').prop('href'))
    attr:建议是自定义属性时使用
    例子:
    <a href="http://www.baidu.com" target="_self" class="btn" action="1">百度</a>
    console.log($('a').attr('action'))

    22.siblings:返回所有被选元素的所有同级元素(不包含本身)
    例子:
    <ul>ul (父节点)
    <li>li (类名为"star"的上一个兄弟节点)</li>
    <li>li (类名为"star"的上一个兄弟节点)</li>
    <li class="start">li (兄弟节点)</li>
    <li>li (类名为"star"的下一个兄弟节点)</li>
    <li>li (类名为"star"的下一个兄弟节点)</li>
    </ul>
    $("li.start").siblings().css({"color":"red","border":"2px solid red"});
    console.log($("li.start").siblings().length)//4

    23:event.stopPropagation(),event.preventDefault(),return false;阻止事件冒泡

    event.stopPropagation():组织事件向上蔓延,影响到父级,例如:点击链接仍会跳转

    event.preventDefault():影响到父级的上一级,例如:点击链接不会跳转

    return false;阻止默认事件,相当于同时调用event.stopPropagation()和event.preventDefault()例如:点击链接不会跳转

    24::eq() 选择带有index值的元素(从0开始)
    例子:$("p:eq(1)")

    25:trigger:触发被选元素的指定事件类型
    例子:
    <input type="text" name="FirstName" value="Hello World" />
    <button>激活 input 域的 select 事件</button>
    $("input").select(function(){
    $("input").after("文本被选中!");
    });
    $("button").click(function(){
    $("input").trigger("select");
    });

    26:prev:匹配到元素紧邻的前一个同胞元素,可以进行筛选
    例子:
    $("p").prev(".selected").css("background", "yellow");

    27:isPlainObject:函数用于判断指定参数是否是一个纯粹的对象。
    纯粹的对象是指该对象是通过“{{}}”或“new Object”创建的
    $.isPlainObject(要判定的对象)

    28:parent:查看指定元素的父级
    例子:$("span").parent().parent().parent().css({"color":"red","border":"2px solid red"});

     29:clone:克隆标签

    $("p").clone()

    30:parents:所有的父级元素
    例子: $("b").parents()//从b的父级到父级的父级到。。。。。。知道html级

    31:toFixed:数组转化为字符串,指定到小数点后几位数字
    例子:
    var num = 5;
    num =num.toFixed(2);//5.00

    var num = 5.5555555555555555;
    num =num.toFixed(2);//5.56

    32:animate({参数},动画运行时间,动画完毕后执行的参数):执行一个基于css属性的自定义动画

    例子:

     $('.square').animate({ height: "300px",  "300px", left: '200px', top: '200px' }, 'slow')
  • 相关阅读:
    java 线程 Lock 锁使用Condition实现线程的等待(await)与通知(signal)
    A计划(三维dfs)
    最少拦截系统(线性dp)
    疯狂的采药(完全背包)
    Modular Inverse (拓展欧几里得求逆元)
    斐波那契数列的3种求法及几种素数筛法
    Magic Odd Square (思维+构造)
    Marlin (思维)
    qdu_组队训练(ABCFIJK)
    2018蓝桥编程题6-9+ 50%的10
  • 原文地址:https://www.cnblogs.com/mcll/p/11855653.html
Copyright © 2020-2023  润新知