JQuery常见的语法以及简单例子总结

1.$是jquery核心函数

2.jquery对象是执行jquery函数返回的数据（对象）

3.选择器是具有特点格式的字符串（如#id ）-----给jquery核心函数使用

一.方法

1.搜索与参数表示的对象匹配的元素，并返回相应元素的索引值值

$('#act li').index();
如果找到了匹配的元素，从0开始(0,1,2..)返回；如果没有找到匹配的元素，返回-1。

2.attr()/val()/html()/text() 

text()- 设置或返回所选元素的文本内容

html()- 设置或返回所选元素的内容（包括 HTML 标记）

val()- 设置或返回表单字段的值

attr()方法用于获取属性值。

3.removeClass()/addClass()/toggleClass()
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作

4. before()/after()/prepend()append()
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

5.first()/last()

first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素。

6.eq()

eq()方法返回被选元素中带有指定索引号（是从0开始）的元素。

$("body").find("div").eq(2).addClass("blue");//指第三个。

$('li').eq(-2).css('background-color','red');//倒数第二个

7.动画效果

①hide() 和 show() 

$(".test").hide() - 隐藏所有 class="test" 的所有元素
$(selector).show(speed,callback);
注意：可以使用 toggle() 方法来切换 hide() 和 show() 方法。

②.滑动方法（slideDown()/slideUp()）

 $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });

③fadeIn淡入和fadeOut淡出（切换fadeToggle(),透明度fadeTo()）

透明度fadeTo(“slow”,0.33);

④animate()自定义动画

 $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });

8.Is()使用于点击按钮，元素显示与不显示，或是选中还是不选中

  $(botton).click(function(){
      if($(this).is(:visble)){    //如果元素显示
              元素隐藏
      }else{
             元素显示
       }
})

var jj=$('.showmore .jj');
$(jj).hide();
$('.showmore a').click(function(){
    if($(jj).is(":visible")){
	    $(jj).hide();
     }else{
	$(jj).show();
     }
})

9.each()遍历

自动在li添加递增data-index

$('.bank_navs ul li').each(function(i){ //自动在li添加递增data-index
                $(this).attr('data-index',i); 
            });

二.简单的操作

1.小图片连接到缩略图的位置

	$('.list_project .box2 .list ul li').click(function(){
		$('.list_project .box2 .list ul li').removeClass('select');
		$(this).addClass('select');
		$('.list_project .box1 .thumb img').attr('src',$(this).find('img').attr('src'));
	})

$('.list_project  .box1 .thumb img')  这是缩略图

2.获取所有li中的id

①遍历

$("#filelist li").each(function(){
    console.log($(this).attr('id'))
})

②for

var select_id=[];
var checked_li=$("#filelist li");
for(var i=0;i<checked_li.length;i++){
	select_id[i]=checked_li[i].id;  
}
console.log(select_id)

3.分享qq空间，新浪，人人网，微博等平台

<div class="bshare-custom icon-medium">
	<a title="分享到QQ空间" class="bshare-qzone"></a>
	<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
	<a title="分享到人人网" class="bshare-renren"></a>
	<a title="分享到腾讯微博" class="bshare-qqmb"></a>
	<a title="分享到网易微博" class="bshare-neteasemb"></a>
	<a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
	<span class="BSHARE_COUNT bshare-share-count">0</span>
</div>
<script src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"></script>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>