JQuery基础（一）

JQuery是一个快速简介的js库，j是javaScript,Q是query查询.是一个js文件，把原生js的方法和函数封装好存放到里面，方便使用

  1.jq的优点：

  1.1 轻量级，核心文件才几十kb，不会影响页面加载速度

  1.2 跨浏览器兼容，基本兼容了现在主流的浏览器

  1.3 链式编程，隐式迭代

  1.4 对事件，样式，动画支持，简化dom操作

  1.5 支持插件，免费，开源

  jq的两种入口,加上都是在页面加载完成之后执行操作

  $().ready(function() {

  })

  $(function() {

  })

  2.JQuery中的顶级对象是$==jQuery

    2.1        使用原生js获取的对象就是dom对象

    2.2        使用jq获取的元素就是jq对象

    2.3        DOM对象和jq对象的相互转换

    DOM转JQ

    var div () =document.querySelector('div')

    $(div) = $(document.querySelector('div'))

    JQ转DOM

    $(对象)[index(索引号)]

    $(对象).get[index(索引号)]

    3.JQuery选择器

    3.1  基础选择器

    $('name=passwoed') // 属性选择器  适用于key=value情况

    $('选择器')  //  里面选择器直接写 CSS 选择器即可，但是要加引号

    id选择器 $('#id') // 获取指定id的元素

    类选择器 $('.class') //获取某一类的元素

    全选择器 $('*')  // 匹配所有元素

    标签选择器 $('div') // 获取某一类标签的所有元素

    并集选择器  $('div.p.li') // 获取多个元素

    交集选择器 $('li.current') // 交集元素

    3.2        层级选择器

  3.2.1 子代选择器 $('ul>li') // 获取的是亲儿子

    后代选择器 $('ul li') // 获取的是所有后代元素

    3.3         筛选选择器

    :first   $('li:first')  // 获取第一个元素

    :last   $('li:last') // 获取第二个元素

    :eq(index)  $('li:eq(index)') =$('li').eq(index) //  获取的li元素中，选择第index个元素

    :odd  $('li:odd') // 获取的li元素中，选择索引号为奇数的元素

    :even $('li:even') // 获取的li元素中，选择索引号为偶数的元素

    4.JQuery更改样式

    4.1基本格式

    $('div').css('属性'，'值')

    5.JQuery 效果

    显示隐藏：show()/hide()/toggle() v  // 没有动画效果

    滑入滑出： slideDown() / slideUp() / slideToggle()  // 有动画效果

    淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;   // 有动画效果

带动画效果的操作前边加个stop(),进行下一个动画时，停止上一个动画