整理jQuery技巧,前端开发很实用

前些日子做了个前端项目,整理jQuery技巧如下:


初始化

$(document).ready(function(){});
$(function(){});

替代$
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

选择器
$(this)     当前 HTML 元素
$("p")     所有 <p> 元素
$("p.intro")     所有 class="intro" 的 <p> 元素
$(".intro")     所有 class="intro" 的元素
$("#intro")     id="intro" 的 第一个元素
$("ul li:first")     每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")     所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")     id="intro" 的 <div> 元素中的所有 class="head" 的元素


事件
$(document).ready(function)     将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)     触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)     触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)     触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)     触发或将函数绑定到被选元素的鼠标悬停事件


效果
$(selector).hide()     隐藏被选元素
$(selector).show()     显示被选元素
$(selector).toggle()     切换(在隐藏与显示之间)被选元素
$(selector).slideDown()     向下滑动(显示)被选元素
$(selector).slideUp()     向上滑动(隐藏)被选元素
$(selector).slideToggle()     对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()     淡入被选元素
$(selector).fadeOut()     淡出被选元素
$(selector).fadeTo()     把被选元素淡出为给定的不透明度
$(selector).animate()     对被选元素执行自定义动画

callback
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。

html操作
$(selector).html(content)     改变被选元素的(内部)HTML
$(selector).append(content)     向被选元素的(内部)HTML 追加内容
$(selector).prepend(content)     向被选元素的(内部)HTML “预置”(Prepend)内容
$(selector).after(content)     在被选元素之后添加 HTML
$(selector).before(content)     在被选元素之前添加 HTML

设置css属性
$(selector).css(name,value)     为匹配元素设置样式属性的值
$(selector).css({properties})     为匹配元素设置多个样式属性
$(selector).css(name)     获得第一个匹配元素的样式属性值
$(selector).height(value)     设置匹配元素的高度
$(selector).width(value)     设置匹配元素的宽度

jQuery AJAX 请求
请求     描述
$(selector).load(url,data,callback)     把远程数据加载到被选的元素中
$.ajax(options)     把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)     使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)     使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback)     使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)     加载并执行远程的 JavaScript 文件

jQuery 遍历函数

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
函数     描述
.add()     将元素添加到匹配元素的集合中。
.andSelf()     把堆栈中之前的元素集添加到当前集合中。
.children()     获得匹配元素集合中每个元素的所有子元素。
.closest()     从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.contents()     获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
.each()     对 jQuery 对象进行迭代,为每个匹配元素执行函数。
.end()     结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
.eq()     将匹配元素集合缩减为位于指定索引的新元素。
.filter()     将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()     获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
.first()     将匹配元素集合缩减为集合中的第一个元素。
.has()     将匹配元素集合缩减为包含特定元素的后代的集合。
.is()     根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。
.last()     将匹配元素集合缩减为集合中的最后一个元素。
.map()     把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
.next()     获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()     获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
.nextUntil()     获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
.not()     从匹配元素集合中删除元素。
.offsetParent()     获得用于定位的第一个父元素。
.parent()     获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
.parents()     获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
.parentsUntil()     获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
.prev()     获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.prevAll()     获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
.prevUntil()     获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
.siblings()     获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
.slice()     将匹配元素集合缩减为指定范围的子集。

closest([expr]) 最小父元素 找到立即返回

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值