初学jQuery使用方法

jQuery引用

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>//先引用jQuery源包 ???<script> ???????$("p:odd").html("偶数标签");//对标签调用操作 ???</script>//even奇数；gt()大于；lt(小于)

jQuery方法

jQuery完整使用方法参考http://jquery.cuishifeng.cn/手册

获取元素

$(‘#tag-p i‘).eq(0).html(‘<h1>good<h1>‘);//选择对应的索引值去修改1$(‘#tag-p i:eq(1)‘).html(‘<h1>good<h1>‘);//选择对应的索引值去修改2

js和jQuery互换

var tp = document.getElementById("tag-p");//jsvar $tp = $(‘#tag-p‘);//jQueryvar $tpi = $(‘#tag-p i‘)alert($tp);//通过jQuery获取元素返回jQ对象,通过原生js获取返回js对象$(tp).html("js转jQ");//js转jQalert($tp.get(0).innerHTML = "jq转js");//jQ转js$tp[0].innerHTML = "jq转js";//第二种方法alert($tpi.html());//默认获取是第一个元素

css操作

$(‘img‘).attr("src");//获取元素属性$(‘p‘).addClass("on");//为标签添加样式$(‘p‘).toggleClass("on");//反向添加样式，如果有则清除，没有则添加var $p = $(‘p‘);//统一添加样式 ???????$p.css({ ???????????"background":"pink",//第一种书写形式 ???????????width:300,//第二种书写形式 ???????????"height":"30px" ???}); ???alert($(‘#box‘).offset().left);//弹出左边距离alert($(‘#box‘).position().top);//弹出定位的距顶端距离alert($(‘#box‘).outerWidth());//弹出包括外边距$(window).scroll(function(){ ???????????console.log( $(window).scrollTop() ); ???????})//滚动属性，实时打印出滚动距离 ???????$(‘.box2‘).appendTo($(‘#box‘));//将前面的元素添加到后面元素里$(‘#box‘).css("background","green").find(‘.box3‘).css("background","skyblue").siblings().css("background","orange");//除了box3为skyblue颜色，其他为orange//on的作用$(‘#list li‘).click(function(){ ???????????alert( $(this).index() ); ???????})//点击元素弹出索引值$(‘#list‘).on(‘click‘,‘li‘,function(){ ???????????alert( $(this).index() ); ???????} );//on事件对新增加的元素li也起作用$(‘#list‘).append("<li>4</li>").append("<li>5</li>");//在后面增加元素

效果

$(‘#btn‘).click(function(){ ???????????$(‘#box‘).hide(2000).show(1000);//用2000ms的速度隐藏样式,并在1000ms内还原 ???????})$(‘#btn‘).click(function(){ ???????????$(‘#box‘).hide(2000,function(){ ???????????????$(this).show(‘fast‘); ???????????});//使用回调函数的方法实现效果，效果与上面一样 ???????})$(‘#btn‘).click(function(){ ???????????$(‘#box‘).toggle(‘fast‘); ???????});//逆向变换*///创建自定义动画函数（animate）$(‘#box‘).hover(function(){ ???????????$(this).stop(true,flase).animate({ ???????????????"width":‘600px‘, ???????????????"border-radius":"150px" ???????????},1000); ???????},function(){ ???????????$(this).stop(true,false).animate({ ???????????????"width":"150px", ???????????????"baorder-radius":"0" ???????????},2000) ???????})

注：效果实现方法有多中，具体可参考jQuery文档

初学jQuery使用方法

原文地址：https://www.cnblogs.com/zhuzq/p/9534642.html