网站首页 » 前端开发 » jQuery » JavaScript + jQuery 常用方法整理
上一篇:
下一篇:

JavaScript + jQuery 常用方法整理

JavaScript 方法大全

元素操作

方法名 套路 注释
elementFromPoint() document.elementFromPoint(x,y) 通过点坐标来获取元素
classList element.classList element.classList 返回 一个包含所有 CLASS 类名的数组
属性:
length,返回 class 类的个数;
方法:
add(class1, class2, …) // 添加一个或多个 CLASS 类,若存在则不添加。
remove(class1, class2, …) // 删除一个或多个 CLASS 类,即使类名不存在也不会报错。
contains(class) // 判断是否含有某个 CLASS 类,返回 true 或者 false。
item(index) // 返回下标(索引值)对应的 CLASS 类,无则返回 null。
toggle(class, true | false) 切换 CLASS 类。第二个参数可选,是否强制添加或者删除类名。
getElementsByClassName() document.getElementsByClassName() 通过类名获取元素
getElementsByTagName() document.getElementsByTagName() 通过标签名获取元素
appendChild() target.appendChild(node); 向节点添加最后一个子节点
var target = document.getElementById(“ul”);
var node = document.createElement(“LI”);
var textnode = document.createTextNode(“d”);
node.appendChild(textnode);
target.appendChild(node);

事件监听

方法名 套路 注释
addEventListener() document.getElementById(‘ael’).addEventListener(“click”,function(e){console.log(e);},false); 给元素添加监听事件,可添加多个。除 IE 外的其它浏览器用这个
attachEvent() document.getElementById(‘ael’).attachEvent(“onclick”,function(e){console.log(e);},false); 给元素添加监听事件,可添加多个。IE 用这种方法

数据处理

方法名 套路 注释
JSON.parse() JSON.parse(str) 把字符串转化为 JSON 数据,注意:字符串要这样写否则会报错 var a = ‘{“name”:1}’,一定要用单引号包裹字符串,里面的属性名用双引号包裹
JSON.stringify() JSON.stringify(str) 把 JSON 数据转化为字符串
Math.floor() Math.floor(number) 向下取整
Math.cell() Math.cell(number) 向上取整
Math.round() Math.round(number) 四舍五入
Math.min() Math.min(number1,number2,number3…) 返回最小值
Math.max() Math.max(number1,number2,number3…);Math.max.apply(Math,attrValues);在数组中找最大值 返回最大值
Math.abs() Math.abs(number); 返回绝对值
match() str.match(strTarget); 返回一个数组,无则返回 null
search() str.search(strTarget); 返回第一个匹配项的索引,无则返回 -1
replace() replace(oldValue,newValue); 替换字符串,若要全部替换传正则:/oldValue/g
slice() arrayObject.slice(start,end); 可从已有的数组中返回选定的元素(新的数组),包含从 start 到 end (不包括end)的 arrayObject 中的元素。您可使用负值从数组的尾部选取元素,如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
splice() arrayObject.splice(index,howmany,item1,…..,itemX); 添加|删除项目,返回被删除的项目(数组),该方法会改变原始数组。index 为添加或者删除项目的位置,负数则从数组经结尾处开始,howmany 必需,要删除的数量,为 0 则不删除项目,item1,…..,itemX 向数组中添加新的项目

其它

方法名 套路 注释
eval() eval(string) ECMAScript 解析器(执行字符串)

jQuery 方法大全

获取/设置元素内容

方法名 套路 注释
html() 获取:$(“p”).html()
设置:$(“p”).html(“yunkus.com”)
获取元素中的内容(包含 html 标签),把先把元素里的所有内容清空后再往里面添加内容。
text() 获取 $(“p”).text()
设置:$(“p”).text(“yunkus.com”)
获取元素中的内容(不包含 html 标签)
append() $(“p”).append(“yunkus.com”) 向指定元素内尾部添加内容,保留原来内容
prepend() $(“p”).prepend(“yunkus.com”) 向指定元素内开始处添加内容,保留原来内容
after() $(“p”).after(“yunkus.com”) 向指定元素后添加内容,可添加多个。
before() $(“p”).before(“yunkus.com”) 向指定元素前面添加内容,可添加多个。
remove() $(“p”).remove(“.target”) 删除类名为 target 的所有 p 元素。
empty() $(“p”).empty() 删除所有 p 元素里的内容。

各种宽高距离

方法名 套路 注释
.width() $(window).width() 获取浏览器窗口宽度,可传一个数值设置宽度
.height() $(window).height() 获取浏览器窗口高度,可传一个数值设置高度
.offset() $(“p”).offset().top 获取元素距浏览器顶部距离
.offset() $(“p”).offset().left 获取元素距浏览器左部距离
.outerWidth() $(“p”).outerWidth(true) 获取文档元素的总宽度(包括:padding、border)
.outerHeight() $(“p”).outerHeight(true) 获取文档元素的总高度(包括:padding、border)
.scrollTop() $(document).scrollTop() 获取滚动条到顶部的垂直高度(滚动距离),传值可设置
.scrollLeft() $(document).scrollLeft() 获取滚动条到左边的水平距离(滚动距离)
.position() $(“p”).position() 获取元素离最近的父元素(设置了position:relative)的距离

显示隐藏元素

方法名 套路 注释
show() $(“p”).show() 淡入淡出显示元素,可给方法传值,控制显示动效
hide() $(“p”).hide() 淡入淡出隐藏元素,可给方法传值,控制显示动效
fadeIn() $(“p”).fadeIn() 淡入淡出显示元素,可给方法传值,控制显示动效
fadeOut() $(“p”).fadeOut() 淡入淡出隐藏元素,可给方法传值,控制显示动效
fadeToggle() $(“p”).fadeToggle() 淡入淡出显示隐藏元素,fadeIn 和 fadeOut 的合体,可给方法传值,控制显示动效
slideDown() $(“p”).slideDown() 展开显示元素,可给方法传值,控制显示动效
slideUp() $(“p”).slideUp() 收起隐藏元素,可给方法传值,控制显示动效
slideToggle() $(“p”).slideToggle() 展开收起显示隐藏元素,slideDown 和 slideUp 的合体,可给方法传值,控制显示动效

数据处理

方法名 套路 注释
$.parseJSON() $.parseJSON(‘{“yunkus”:”云库网”}’) 把字符串转化为 JSON 数据(注意:key 值要用双引号)
$.parseHTML() str = “<span>云库网:</span><p>http://yunkus.com</p>”;
$.parseHTML(str)
返回解析指定HTML字符串后的DOM节点数组(同级元素),如本例返回:[span, p],如果字符中含有脚本,那么你就得给parseHTML中传个true,如:
str = ‘<span>云库网:</span><p>http://yunkus.com</p><script>console.log(“云库网”)</script>’;
html = $.parseHTML(str,true);
$(“body”).append(html); //要添加到页面中,脚本才会执行
$.inArray() $.inArray(targetValue,array) 返回targetVaule在数组中的位置,无则返-1
$.each()  $.each(arr,function(index,value){
console.log(“第”+ index +”个,值为:”+value);
});
可遍历数组,对象,console.log(this) 会打印出当前遍历元素
  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-jquery-frequently-used-method-collection/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END