初学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");//js
var $tp = $('#tag-p');//jQuery
var $tpi = $('#tag-p i')
alert($tp);//通过jQuery获取元素返回jQ对象,通过原生js获取返回js对象
$(tp).html("js转jQ");//js转jQ
alert($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",//第一种书写形式
    		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文档