jQuery 函数整理
- show(参数)
//显示，添加参数表示动画时间，动画同时控制宽高
$("div").show(1000).html('哈哈哈')
- hide(参数)
//隐藏，添加参数表示动画时间，动画同时控制宽高
$('div').hide(1000)
- html('参数')
没有参数为获取值
//html 添加文本，括号内是字符串，无法输入标签
$("div").show(1000).html('哈哈哈')
-
text('参数') 与 html('类似')
当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。
没有参数为获取值，有参数为设置值，此时会覆盖原有内容 -
ready()
$(document).ready(function(){})
//功能类似
window.onload = function(){}
//前者可以多次执行，function(){}是作为参数传递进去，所以并不会覆盖；后者只能执行一次，function(){} 作为值，是赋值操作
//前者加载不包括外部资源图片，只是 DOM 树加载完成之后就执行，比后者执行快
- noConflict()
解除绑定 $ 符号
$.noConflict();
//解除之后要使用 jQuery 对象就使用jQuery前缀
jquery.('div').hide(1000)
- addClass()
添加类名
$('div').addClass('current');
- removeClass()
删除类名
$('div').removeClass('current');
- taggleClass()
切换类名，如果存在类名那么删除，如果不存在类名那么添加
$('div').taggleClass('current');
- css()
所有关于样式 .style 的操作都在此方法内进行
//键值对的形式
$div.css({
'width': '500px',
'height': '500px',
'background': 'red'
})
$div.css('width','500px');
- val()
主要用于 input标签自带属性如：src\href\value 等属性控制，带参数代表设置，不带参数代表获取
$('input').val('1233');
$('input').val();
- 尺寸函数
var w = $("#small").width()
var h = $("#small").height()
var iw = $("#small").innerWidth()
var ih = $("#small").innerHeight()
var ow = $("#small").outerWidth()
var oh = $("#small").outerHeight()
var owm = $("#small").outerWidth(true)
var ohm = $("#small").outerHeight(true)
- attr()
获取或设置属性值
//带参数为设置
$(selector).attr(attribute,value)
$('a').attr('target','_self')
//获取规定参数的属性的值
$(selector).attr(attribute)
//使用函数来设置属性和值
$(selector).attr(attribute,function(index,oldvalue))
//键值对的方式设置多个属性和值
$(selector).attr({attribute:value, attribute:value ...})
$('a').attr({
'href': 'http://www.baidu.com',
'target': '_blank'
})
- parent()
获得父元素
$("#filter").parent().css("background-color", "blue")
- parents()
获得父元素及所有祖先元素
$("#filter").parents().css("background-color", "blue")
- child()
获得子元素标签
$('div').child()
- children()
获得所有子元素标签
$('div').children()
- siblings()
获得兄弟元素标签
$(this).css('background', 'red').siblings().css('background', 'green');
- next()
next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。
//.next(selector)
$("#ul1").next("div").css("background-color", "red")
- eq()
eq() 选择器选取带有指定 index 值的元素。返回的是一个 jQuery 对象可以直接使用 jQuery 方法
$(":eq(index)")
$(".class").eq(0).css("background-color", "green")
-
mouseenter()
鼠标进入事件，从子元素进入不会再次触发事件 -
mouseover()
鼠标滑过事件，从子元素进入会再次触发事件 -
mouseleave()
鼠标离开事件，进入子元素不会再次触发事件 -
mouseout()
鼠标划出事件，进入子元素会再次触发事件 -
hover(fn,fn)
监控鼠标移入移出，功能等于 mouseenter() 和 mouserleave,带两个参数前一个表示移入，后一个表示移出；如果只有一个参数则表示移入移出做相同方法
$('li').hover(function () {
$(this).children('.filmContent').addClass('current').parent().siblings().children('.filmContent').removeClass('current');
})
- index()
返回指定元素相对于其他指定元素的 index 位置。返回的是相对其父元素的位置
$('li').hover(function () {
console.log($(this).index());
})
-
event.stopPropagation()
阻止冒泡，因为是事件对象，所以要穿如 event 做参数 -
toggle()
切换动画状态，如果可见那么切换成不可见，如果不可见那么切换成可见
$(selector).toggle(speed,callback,switch);
$('.ad').toggle(1000);
- slideToggle();
通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
$(selector).slideToggle(speed,callback);
$(this).children('.secondMenue').stop().slideToggle(200);
- slideUp()
隐藏动画，向上滑动卷起
$(this).siblings().children('.secondMenue').stop().slideUp(200);
- slideDown(参数1,fn)
展示动画，向下滑动；参数1是执行动画时间，fn 是回调
$(this).siblings().children('.secondMenue').stop().slideDown(200);
- stop();
结束动画,两个参数，前面是是否结束全部动画，后面是否直接跳到动画结尾(没有动画)，是布尔类型
$(selector).stop(stopAll,goToEnd)
- addBack();
当前jQuery对象可能是通过调用其它jQuery对象的特定方法创建的，使用该函数将返回一个新的jQuery对象，该对象包含了当前jQuery对象和之前创建它的jQuery对象的所有匹配元素。
$('.box2').parent().addBack().css('background', 'cyan');
- fadeIn(参数1，参数2); fadeOut()
淡入淡出动画,参数1是动画时间单位毫秒，参数2是透明度范围0~
$('.ad').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
- delay();
延迟动画,参数是时间单位毫秒
$('.ad').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
- fadeToggle();
切换，原来是淡入切换成淡出，原来是淡出切换成淡入
$('.ad').fadeToggle(1000);
- animate(prop,speed,easing,callback);
自定义动画,prop 是属性， speed 是速度（可以填时间），easing 是动画方式（渐快、渐慢、先慢后快等等，一些特殊的动画方式需要引入插件使用）；动画是队列形式执行，先进先出
$('div').animate({
'width': '1000px'
}, 1000, function () {
console.log('动画结束');
});
- each();
each() 方法规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element));
$('li').each(function () {
// this == DOM对象
$(this).slideUp(2000);
// console.log(index + value);
})
- jQuery 动态创建标签节点
var $newTag = $('<li>新增的节点</li>');
- a.append(b);
把 b 添加到 a里， a 是 b 的父标签节点 - b.appendTo(a);
这对方法是将节点添加到父节点中的最后位置
$('.red').append($newTag);
$newTag.appendTo($('.red'))
- a.prepend(b);
- b.prependTo(a);
这对标签是将 b 添加到 a 标签的第一个位置
$newTag.prependTo($('.red'));
$('.red').prepend($newTag);
- a.before(b);
- b.innerBefore(a);
兄弟关系添加，将 b 添加到 a 前面
$('.red').before($newTag);
$newTag.innerBefore($('.red'));
- a.after(b);
- b.innerAfter(a);
兄弟关系添加节点，将 b 添加到 a 节点后面
$('.red').after($newTag);
$newTag.innerAfter($('.red'));
- remove();
删除节点，参数是指向节点的 className id tag 等等
$('.red>li:first').remove();
- empty();
清空节点中的内容，也可以用 html('');
$('.red>li:first').empty();
$('.red>li:first').html('');
注意要清空自带属性要使用 val('')
- trim()
去除空格、tab
$.trim(content).length <= 0
- focus();
获得焦点
$('.content').focus();
- blur();
失去焦点
$('.content').blur();
- clone(参数)；
复制节点，参数是布尔类型，默认是 false 浅赋值，仅仅赋值这个节点，不赋值事件；clone(true);时为深赋值,会赋值这个事件
var $cloneTag = $pTag.clone(true);
- a.replaceWith(b)
用 b 节点来替换 a 节点
var $pTag = $('p');
var $newTag = $('<h1>0000</h1>');
$pTag.replaceWith($newTag)
- 事件对象的一些属性方法
- event.target
获得调用此方法的具体对象
function test(event){
console.log(event.target);
}
- event.type
获得调用此方法的事件行为（onclick\mouseover）
function test(event){
console.log(event.type)
}
- event.data
获得调用此方法同时传入的参数
function 事件data() {
$('ul').click({'name': 'sz'}, exec);
function exec(event) {
console.log(event.data);
}
}
- event.result
获得项链函数的返回值
var num = 0;
function test(){
$('p').click(function(event){
return num++;
})
$('p').click(function(event){
alert(event.result);
})
}
- on()
- 事件绑定
//绑定单个事件
$('p').on('click',function(){
console.log('xxxx');
})
//绑定多个事件，同一个回调函数,中间用空格隔开
$('p').on('click mouseenter',function(event){
console.log('xxx' + event.type)
})
//绑定多个事件，多个回调函数，用键值对的方式
$('p').on({
'click':cE,
'mouseenter':function(){
console.log('鼠标移入');
}
})
function cE(){
console.log('单击事件')
}
- 事件委托
on(type,selector,data,fn)
//body被点击，小king执行 function
$('body').on('click','.king', function () {
console.log('我是小king, 处理事件');
})
- off();
解除事件绑定
$('p').off('click', cE);
- one();
一次性事件，只执行一次
$('p').one({
'click':function(){
console.log('xxxx');
}
})
//内部实现原理就是结尾解除绑定
$('p').click(function(){
console.log('xxxx');
})
- 阻止事件默认行为
一些事件会有默认行为，比如a 标签点击会跳转、form中 Input 标签会提交
event.preventDefault
$(':submit').click(function (event) {
console.log('xxxx');
event.preventDefault();
})
- trigger();
手动触发事件，会触发默认事件，会触发冒泡事件(a标签存疑，老师示例时候出现问题)
$(':submit').trigger('click');
- triggerHandle();
手动触发事件，不会触发默认事件，不会触发冒泡事件
$('.box3').triggerHandler('click');
- 命名空间
$('.box').on('click.xx', function () {
console.log('click.xx');
})
$('.box').on('mouseenter.xx', function () {
console.log('mouseenter.xx');
})
$('.box').on('click.lisi', function () {
console.log('click.lisi');
})
function haha() {
console.log('1');
}
$('.box').click(haha)
$('.box').click(function () {
console.log('2');
})
$('.box').on('click.one', function () {
console.log('1');
})
$('.box').on('click.two', function () {
console.log('2');
})
$('.box').off('.one');
$('.box').trigger('click.lisi');
网友评论