无需再百度,掌握这个超实用的jQuery使用方法,实用性高达99.9%

发表时间: 2017-07-22 20:36

Jquery加载方法举例:

<script type="text/javascript">

$(function () {

$('img').click(function(){

alert($(this).html()); //点击图片弹窗图片的html 信息

});

});

</script>

获取及修改属性值举例:

$('#imgbox-img').attr('show_flag',2); //修改id为imgbox-img的元素属性show_flag的值为2

获取及修改css举例:

$(‘.low’).css('color','#777777');//修改class为low的元素color值为#777777

获取元素值(html,text,css)举例:

$('.group_tag').css({'background' : 'url(img/tag2.png) no-repeat center'}); //修改背景图片

$('.group_tag').val();//取值

$('.group_tag').text('加载更多');//赋值文本信息

$('.group_tag').html();//获取html信息

获取及修改父类,子类,兄弟类元素值举例:

$("#show_msg").parent().prevAll('.time_tag').text(‘父级’);

备注:id为show_msg元素的父级的所有父级元素中包含class为time_tag的元素的文本内容修改为父级

$("#show_msg").parent().prevAll('.ext').children('.new_msg').text(‘子级’);

备注:修改id为show_msg的元素的父级的所有父级的子级中包含class为new_msg的元素的文本内容为子级

注:parent() 上一级父类 prevAll()所有向上兄弟类 prev()相邻向上兄弟类 children()子类

获取当前元素下标,及设置相应下标元素举例:

$('.right_nav a').click(function(){

var i = $('.right_nav a').index(this);//获取下标

$('.right_nav a').attr("class","normal"); //修改class名称

$('.right_nav a').eq(i).attr("class","checked");//修改某下标元素的class名称

});

遍历元素举例:

$("[name='checkbox'][checked]").each(function(){

$(this).removeAttr("checked");

});

备注:清除所有checkbox元素的checked属性

获取及修改图片src举例:

$('#imgbox-img').attr('src',src);

显示及隐藏标签举例:

$('.turn_left').show();

$('.turn_left').hide();

Jquery 的ajax POST使用举例:

$.post("wechat_group_move.php",{'mid':str,'group':group},function(result){

if(result==1)

{

window.location.reload();

}

});

Jquery 的ajax GET使用举例:

$.get("wechat_notice1.php?uid="+uid+"&show="+show,function(data,status){

if(data!=0){

alert(data);

}

});

jquery获取json数据并在页面中渲染举例:

var msg = eval("("+data+")");

for(var i=0;i<msg.length;i++)

{

var mid = msg[i].id;

var time = msg[i].time;

var con = msg[i].msg;

$("#show_msg"+mid).show();

$("#show_msg"+mid).parent().prevAll('.time_tag').text(time);

$("#show_msg"+mid).parent().prevAll('.ext').children('.new_msg').text(con);

$("#show_msg"+mid).parent().parent().parent().prev().prev('.group_user').children('img').show();

}

循环执行函数举例(与原生相同):

function get_msg(){

str = 1;

alert(str);

});

setTimeout(function(){

get_msg( );

},10000)

}