jquery 入门

jquery基本使用

1. jQuery官网
2. 版本：1.X,2.X兼容低版本浏览器，官网不在更新，3.X不兼容低版本浏览器，官网在维护更新
3. Jquery入口函数：$(function（{ }）)

jQuery对象和DOM对象

1. 用原生JS获取来的对象就算DOM对象

 var myDiv= doucument.querySelector(‘div’);//myDiv就算DOM对象

2. 用Jquery方式获取的对象就算Jquery对象（本质：通过$把DOM元素进行包装）

$(‘div’)

3. Jquery对象就算Jquery对象，DOM对象就算DOM对象，二者不一致

jQuery对象和DOM对象互相转换

4. DOM对象转jQuery对象，有以下2步

 （1）获取元素DOM对象：myDiv=doucument.querySeiector('div')
 （2）$(myDiv)

5. JQuery对象转DOM对象，有一下2种方式

   （1）$('div')[索引]
   （2）$('div').get(索引)

jQuery 常用API

jQuery基础选择器

jQuery层级选择器

jQuery隐式迭代

1.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法

（1）获取4个div元素

console.log($("div"))

(2)给4个div设置背景颜色为粉色 Jquery对象不能使用Style

$("div").css("background","pink");

(3)把3个li包含的字体颜色改为红色

$("ul li").css("color","red")

jQuery筛选选择器

1.筛选出我们需要的元素

(1)筛选出< ui>标签里面的< li>中的第一个标签体的内容改红色

$(function(){
    $("ui li:first").css("colr","red")
})

（2）筛选出< ui>标签里面的< li>中的第三个标签体的内容改红色

$(function(){
    $("ui li:eq(2)").css("colr","red")})

jQuery筛选方法–筛选父子元素

（1）筛选出class="son"的父级元素

$(function(){
    
   $(".son").parent// 返回的是最近一级的父元素
   })

（2）把 我是屁 筛选出来

$(function(){
    
   $(".nav").childern("p")//相当于子代选择器 ui>li
   })

案例——下拉菜单

Jquery其他筛选方法

（1）筛选出class=“item” 所有的兄弟元素,改颜色为红色

$($function(){
    
   $("ol.item").siblings("li").css("color","red")
})

jQuery排他思想

（1）选中的按钮背景色改变

function(){
    
  //1.隐式迭代，给所有的按钮绑定了点击事件
  $("button").click(function(){
    
  //2. 当前被点击的元素变化背景色
  $(this).css("background","pink");
  //3. 隐式迭代  其余的兄弟去掉背景颜色
  $(this).siblings("button").css("background", "")
  })
})

JQuery常用API—样式操作

1.JQuery样式操作

1.1操作原生css

$(fuction(){
    
   console.log($("div").css("width");//打印样式
   $("div").css("width","300px");
    $("div").css("width",300);
  $("div").css({
    width:400,heigh:400,backgroundColor:"red"})
})

1.2.类操作

//1.添加类 addClass()
$("div").click(function(){
    
    $(this).addClass("current");
});
//2.删除类 removeClass()
$("div").click(function(){
    
     $(this).removeClass("current");
})
//3.切换类 toggleClass()
$("div").click(function(){
    
     $("div").toggleClass("current");
})

2.tab栏切换效果

$(function(){
    
   1.点击上部得li，给当前得li添加current类，其余得兄弟移除类
   $(".tab_list li").click(function(){
    
   //链式编程
    $(this).addClass("current").siblings().removeClass("current");
    2.点击同时得到li得索引号
    var index=$(this).index();
    $(".tab_con .item").eq(index).show().siblings().hide();
     })
})

3.jQuery动画效果

//1.隐藏  hide()
$("button").eq(0).click(function(){
    
   $("div").hide(1000,function(){
    
   alert(1);//以1秒得速度隐藏后执行函数
       });
})；
//2.显示  show()
 $("button").eq(1).click(function(){
    
    $("div").show(1000,function(){
    
     alert(1);//以1秒得速度隐藏后执行函数
    });
})
//3.切换   toggle()
$("buntton").eq(2).click(function(){
    
  $("div").toggle(1000,function(){
    
   alert(1);//以1秒得速度隐藏后执行函数
    });
})

 $("button").eq(0).click(function() {
    
                // 下滑动 slideDown()
                $("div").slideDown();
            })
  $("button").eq(1).click(function(){
    
               // 上滑动 slideUp()
                $("div").slideUp(500);
           })
  $("button").eq(2).click(function(){
    
               //滑动切换 
               $("div").slideToggle(500);
  })