包裹节点:
$('strong').wrap('<b></b>');
可以使用的方法:
1.wrapAll()方法
该方法会将所有匹配的元素用一个元素来包裹。
$('strong').wrapAll('<b></b>');
2.wrapInner()方法
该方法将每一个匹配的子元素(包括文本节点)用其他结构化的标记包裹起来。$('strong').wrapInner('<b></b>');
获取元素的属性
var $para = $("p");var p_txt = $para.attr('title');
console.log(p_txt);
设置<p>元素的属性值
$('p').attr('title','your title');
//设置多个属性
$('p').attr({'title':'your title','name':'aaa'});
删除属性:
$('p').removeAttr('name');
1.attr()获取样式
2.addClass()追加样式
3.removeClass()移除样式
4.toggleClass()切换样式
5.hasClass()判断是否存在class
1.html()方法
<p title="请选择你最喜欢的水果"><strong>你喜欢的水果是?</strong></p>
$p_html = $('p').html();
lg($p_html);
$('p').html('<strong>你最喜欢的水果是???</strong>');
2.text()方法
<p title="请选择你最喜欢的水果"><strong>你喜欢的水果是?</strong></p>
var p_text = $('p').text();
lg(p_text);
$('p').text('你最不喜欢的水果是?');
3.val()方法
<input type="text" id="address" value="请输入邮箱地址"/>
$("#address").focus(function(){ // 地址框获得鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==this.defaultValue){
$(this).val(""); // 如果符合条件,则清空文本框内容
}
});
事件绑定与冒泡处理:
1.bind()方法
<input type="button" value="点我">
$('input[type=button]').bind('click',function(){
lg('hello world');
});
2.on()方法
on()方法结构和使用与bind()没有任何区别。
新版本的jQuery里面都是使用on()方法,bind()方法已经不再使用了。
<input type="button" value="点我">
$('input[type=button]').bind('click',function(){
lg('hello world');});
3.阻止冒泡
$('input[type=button],div,body,html').on('click',function(event){
lg('click');
event.stopPropagation();
});
4.绑定多个事件
$('input[type=button]').on({
hover:function(){
$(this).css('color','red');
},
mouseout:function(){
$(this).css('color','#fff');
},
click:function(){
alert('aaa');
}
});
5.事件解绑
$('input[type=button]').on('click',function(){
lg('click');
$(this).unbind('click');
});
1. show() 方法和 hide() 方法
$('p').toggle(function(){
$(this).hide(2000);
},function(){
$(this).show(2000);
})
2.fadeIn()和fadeOut()方法
$('p').toggle(function(){
$(this).fadeOut();
},function(){
$(this).fadeIn();
})
3.slideUp()方法和slideDown()方法
$('p').toggle(function(){
$(this).slideUp();
},function(){
$(this).slideDown();
})
jQuery中任何动画效果,都可以指定3种速度参数。slow,normal和fast,使用时记得加上引号。
4.animate()方法
$('#panel').click(function(){
lg('click');
$(this).animate({left:'+=500px'}, 3000);
});
//多重动画
$('#panel').click(function(){
lg('click');
$(this).animate({left:'+=500px',top:'+=500px'}, 30000);
});