JQuery基础介绍

JQ的好出

轻量级,核心文件几十kb,不影响页面加载速度
款浏览器兼容
链式编程和隐士迭代,大大提高开发效率
丰富的插件生态圈,列入树形图 轮播图 日期控件等等
免费 开源

入口函数

$(function () {

           })

便于记忆,页面加载完成后才执行,局部作用域隔离变量,防止命名冲突

JQ对象和DOM对象

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

JQ对象和DOM对象的转换

把 jq 对象转成原生的 DOM 对象: $(selector)[0]

        var div = $('div')
        console.log(div.get[0]); // get(索引) 转生 
            原生DOM元素
        console.log(div[0] == document.querySelector('div')); //true

把原生的 DOM 对象转成 jq 对象: $(dom对象)

  var div1 = $(document.querySelector('div')) //jq 对象
        console.log(div1);
        div1.hide()

JQ的选择器

      console.log($('.box')); //根据类名获取元素

      console.log($('#foo')); //根据id属性获取元素

      console.log($('h2')); //根据标签名获取元素

      console.log($('ul>li')); //根据子代选择器获取元素

      console.log($('ul span')); //根据后代选择器获取元素

      console.log($('[class = current]')); //根据属性选择器获取元素

JQ筛选选择器

     1. 获取第一个子元素
        console.log($('li:first'));

     2. 获取最后一个子元素
        console.log($('li:last'));

     3. 获取第 index 个子元素 (jq 当中元素的索引 index 从 0 开始)
        console.log($('li:eq(0)'));

     4. 获取索引号为奇数odd的元素
        console.log($('li:odd'));

      5. 获取索引号为偶数的元素
        console.log($('li:even'));

JQ筛选方法

    1. 获取父元素
        parent( )

    2. 获取指定的祖先元素
        parents( )

    3.获取所有的子元素
       children( )

    4.查找获取所有的后代元素（包括子和孙）
        find( )

    5. 获取所有的兄弟元素（不包括自己）
        siblings( )

其他筛选方法

1. 获取上一个元素
                prev( )

2.获取前面所有的元素
                 prevAll( )

3. 获取下一个元素
                 next( )

4.获取后面所有的元素
                 nextAll( )

5. 判断某个元素是否包含某个特定的类名
                 hasClass( )

6. (重要)获取第 n 个元素 （元素索引 n 从 0 开始）
                 eq(  )

隐士迭代

循环遍历Jquery获取的所有元素进行样式属性等操作
Jquery 当中可以对一组元素直接绑定事件.修改样式,修改属性

JQ事件绑定

jq事件绑定： jq对象.事件名称(function () { })
注意:事件名称不加 on