首页 > 技术文章 > js jquery 常用函数集合

mcll 2019-11-14 11:07 原文

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", width: "300px", left: '200px', top: '200px' }, 'slow')

推荐阅读