首页 > 代码库 > js学习总结----jquery常用方法
js学习总结----jquery常用方法
http://jquery.cuishifeng.cn(可以看一下他的手册)
1、jQuery的回调函数
function fn1(value){ console.log(‘fn1函数‘+value) } function fn2(value){ console.log(‘fn2函数‘+value) } var $call = $.CallBacks();//创建一个回调函数的列表集合 $call.add(fn1)//向集合中增加一个叫做fn1的函数 $call.fire(100);//触发fire方法的时候,把回调函数集合中的方法执行,并且把对应的参数值传递给对应的方法->fn1:100 $call.add(fn2) $call.fire(200);//fn1:200 fn2:200 $call.remove(fn1);//在集合中移除fn1这个方法 $call.fire(200);//fn2:200 $(document).ready(function(){});<===>$(function(){}) //和原生JS中的window.onload对应 //window.onload的意思是:当页面中的HTML结构、图片、文字等多有资源都加载完成才触发这个行为,并且在页面中它只能执行一次,后面写的会覆盖前面的。 //$(document).ready(function(){}):只要HTML结构加载完成就会触发对应的行为,而且在一个页面中可以使用多次
2、属性操作方法
//所有的HTML都加载完成了,形成了一个闭包 $(function(){ /* attr:获取和设置元素的自定义属性,等价于原生JS中的set/getAttribute removeAttr:移除 */ var $box = jQuery("#box"); $box.attr(‘fq‘,200); console.log($box.attr(‘fq‘)); $box.attr(‘fq‘,1000); $box.attr({ index:1, name:‘fq‘ }) $box.removeAttr(‘fq‘); /* prop:获取和设置元素的自定义属性(和attr是不同的两套方式,两者之间不能相互混用,用attr获取的只能用attr删除或者修改或者获取,prop同理) removeProp 注意:prop内置的属性可以在HTML结构中体现出来,但是不是内置的属性是体现不出来的(但是可以获取到值) attr和prop的区别: attr一般都用来设置和操作元素的自定义属性的; prop一般用来操作元素的内置属性的(尤其是表单元素的操作我们大部分都在使用prop) */ var $box = jQuery("#box"); $box.prop(‘fq‘,100); /* jQuery(selector,context) context一般不需要传递,默认是document,但是我们也可以指定具体的上下文来获取需要的元素 addClass/removeClass/toggleClass(toggle系列都是之前有就是移除,没有就是新增) 通过jQuery选择器获取到一个集合,然后让集合直接的调用jQuery中提供的方法,相当于给集合中的每一个元素都调取了对应的方法(jQuery内置循环操作) each:可以遍历jQuery集合中的每一项(和数组中的forEach类似) */ $box.addClass(‘w100‘) $box.removeClass(‘w100‘) $box.toggleClass(‘w100‘) })
/* css:获取或者设置(批量设置)当前元素的样式值 offset:不管父级参照物是谁,获取当前元素距离body的偏移距离/position:获取当前元素距离父级参照物的偏移距离 scrollTop/scrollLeft:获取/设置滚动条卷去的高度/宽度 width/height:获取或者设置元素的width/height innerWidth/innerHeight:获取/设置元素可视区域的宽高(获取的时候等价于clientWidth/clientHeight),设置的时候,保留padding的值,把width值进行改变(width的值最小是0) outerWidth/outerHeight:获取/设置元素可视区域的宽高(包含边框),设置具体值的时候和上边的效果一样。如果传递进来的参数是true,默认的把margin的值也计算在内了。 */
3、文档处理
/* append:向指定元素的末尾位置追加一个新的元素 容器.append(元素) appendTo 元素.appendTo(容器) prepend/prependTo:向指定元素的开头位置追加一个新的元素 after/before:在当前元素的后面/前面追加新的元素 insertAfter/insertBefore:把选择器获取到的元素追加到指定元素的后面或者前面 */ var oDiv = document.createElement(‘div‘); oDiv.id = "div5"; $box.append(oDiv); $(oDiv).appendTo($box); $(oDiv).insertAfter($box)//把创建的oDiv追加到$box的后面(和$box是同级的) /* replaceAll(selector):用匹配的结果替换所有的selector匹配的元素 remove:把匹配的结果在页面中移除掉 */ $(oDiv).replaceAll("ul")//页面中所有的ul都用oDiv给替换掉 $box.remove(); $(‘ul‘).remove("#ul2")
4、筛选:
/* eq(index)、first()、last()、hasClass(strClass)检测当前元素中是否包含某一个样式类名 filter、children、find:常用的三个筛选方法 filter:同级过滤 首先通过选择器获取一个集合,在获取的内容中在进行二次筛选 children:子集过滤 find:后代过滤 map:遍历jQuery集合中的每一项,并且可以支持返回值把每一项进行修改,类似于数组中的map这个方法 parent:父亲节点 parents:所有的父亲节点(从当前开始一直找到HTML,把每一级都记录下来) next、nextAll、siblings、prev、prevAll */ $(‘div‘).hasClass(‘w1‘); $box.children()//还可以通过传递参数来进行筛选 $box.find()//结果是一个空集合 $box.find(‘li‘) $("div").filter("#div4")
js学习总结----jquery常用方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。