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

ゝ一世哀愁。 2021-09-13 14:48 255阅读 0赞

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

![Center][]

$('.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空间，新浪，人人网，微博等平台

![20170714110838467][]

[Center]: /images/20210813/0a68e317202242bcbbded8d2b8c98cee.png
[20170714110838467]: /images/20210813/b0e5da135e4a4133accbfdca3d8a0c74.png