2018.3.26课堂笔记

包裹节点:

$('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);
});

猜你喜欢

转载自blog.csdn.net/readygoing/article/details/79700172