jquery总结

JQuery

jQuery是由几个外国哥们封装的js代码库（就是对js原生代码进行了方法封装），目的是为了简化原生代码的繁琐操作，口号是：write less do more。

特点：开源、插件极多、主要简化的是js原生的DOM操作还有ajax请求

目前版本：1x、2x、3x版本，各个版本没有较大区别，唯一比较重大的改变就是从2x版本开始，jQuery不再兼容IE低版本。
1.在 head标签中 或者 body标签后 引入jQuery.js
2.jQuery声明了一个全局对象：jQuery，通过它来调用jQuery封装的操作方法

1、选择器（DOM获取操作）

jQuery提供的获取元素方法，需要选择器字符串作为参数，获取文档中所有符合选择器要求的DOM
jQuery支持所有CSS选择器
jQuery还添加了一些CSS不支持的选择器
语法：返回符合选择器要求的元素集合，该集合由jQuery进行封装，可以调用jQuery提供的操作方法。
foreach() 只能循环 对象和数组

1. :eq(n) 选择器: 获得索引n的元素（最外层符合）
console.log($('li:eq(2)'));
2. :lt(n) 选择器: 获得索引小于n的元素
console.log($('li:lt(2)'));
3. :gt(n) 选择器: 获得索引大于n的元素
console.log($('li:gt(2)'));
4. :odd 选择器: 获得索引为奇数的元素
console.log($('li:odd'));
5. :even 选择器: 获得索引为偶数的元素
console.log($('li:even'));
6. :empty 选择器: 获得内容为空（不包含文本和子元素）的元素
console.log($('li:empty'));
方法：
1. eq(n): 获得索引为n的元素
console.log($('li').eq(3));
console.log($('li:eq(3)'));
2. get(n): 获取索引为n的原生DOM
console.log($('li').get(3));

2.原生DOM 与 jQueryDOM 相互转化

注意：
1. 原生方法获得到的是原生DOM或DOM集合，可以调用或访问原生的方法和属性
2. jQuery方法获得到一定是jQuery包装后的元素集合，只能调用或访问jQuery的方法或属性
$('li').eq(2).style.color = "red";
$('li').get(2).style.color = "red";
//jQueryDOM 转 原生DOM：通过 get()方法 进行转化
var jqDOM = $('li').eq(3);
console.log(jqDOM);
var oriDOM = jqDOM.get(0);
console.log(oriDOM);
//原生DOM 转 jQueryDOM：通过 $()方法 进行转化
var oriDOM = document.querySelector('li');
console.log(oriDOM);
var jqDOM = $(oriDOM);
console.log(jqDOM);

3.DOM操作（ 增删改查）

    //增
    //创建DOM: $(tagString)
    var $h = $('<h1 class="title"> jQuery 创建DOM </h1>');
    console.log($h);

    //添加
        (1) A.append(B)， 将B追加到A的末尾， 方法返回A自身
        $('body').append($h);

    (2) B.appendTo(A)， 将B追加到A的末尾， 方法返回B自身
    $h.appendTo($('body'));
    console.log($h.appendTo('body'));

    (3) A.prepend(B)， 将B添加到A的首位
    (4) B.prependTo(A)， 将B添加到A的首位

   (5) A.after(B)， 在A的后面插入B， 返回A
        console.log($('li:eq(2)').after($('<li>6</li>')));

    (6) A.before(B)， 在A的前面插入B， 返回A
          console.log($('li:eq(3)').before($('<li>7</li>')));
    //删除
    (1) A.remove()， 将A从它的父元素中删除， 返回A
         console.log($('li:eq(2)').remove());

    (2) A.empty()， 将A的内容置空， 返回A
        $('ul').empty().append($('<li>10</li>').css('color', 'red'));
        console.log($('ul').empty());
    //修改
        A.replaceAll(B)， 用A替换B， B必须是文档中已经存在的元素， 返回A
         console.log($('<li>10</li>').replaceAll($('li:eq(2)')));
    //克隆
    A.clone()， 克隆A， 只有深克隆， 连同A的内容一并克隆。
    $('ul').clone().appendTo('body');
//查询（ 获取元素， 根据关系获取元素）
  //父关系
        (1) A.parent()： 获得A的父元素
        $('li:eq(2)').parent().css('background-color', 'red');
        (2) A.parents()
        (3) A.parentsUntil()
  //子关系：
        A.children()： 获得A的子元素集合， 可以填写选择器字符串为参数， 会自动获取符合选择器要求的子元素。
      console.log($('div').children('span'));
  //兄弟关系：
    A.next()： 获得A的下一个兄弟元素
        console.log($('li:eq(2)').next());

    A.nextAll()： 获得A后面所有的兄弟元素
        console.log($('li:eq(2)').nextAll());
    A.nextUntil()

    A.prev()： 获得A的上一个兄弟元素
        console.log($('li:eq(2)').prev());

    A.prevAll()： 获得A前面所有的兄弟元素
        console.log($('li:eq(2)').prevAll());
    A.prevUntil()

    A.siblings()： 获得A所有的兄弟元素
        console.log($('li:eq(2)').siblings());

4.DOM属性的操作

    1. A.attr()：读写A的属性值，setAttribute() 和 getAttribute() 的封装
     参数：
     （1）string类型，表示属性名
     （2）无类型要求，表示属性值
     当一个参数时是读取，两个参数时是设置，当第二个参数值为null时是删除
    // 设置属性
     $('div').attr('id','box');
    // 读取属性
       console.log($('div').attr('id')); // 'box'
    // 删除
     $('div').attr('id',null);
      console.log($('div').attr('id')); // undefined

    // 类名的操作
     A.addClass()： 为A添加类名
     $('div').get(0).className += " A";
     $('div').addClass('A');
     A.removeClass()： 删除类名
     $('div').removeClass('box');
     A.toggleClass()： 切换类名，如果类名已经存在就删除，不存在就添加
     $('div').toggleClass('box');

    // 内容或文本设置
     text() / html(): 对应了原生的 innerText 和 innerHTML
     如果方法无参数，那就是读取值；如果方法有参数，那就是设置值
    // 读取
        console.log($('.btn').eq(5).html());
    // 设置
    $('.btn:eq(5)').html('AD');
    $('.btn:eq(5)').get(0).innerHTML = "SS";

     表单元素的value
     val(): 对应了原生的 value
    //  如果方法无参数，那就是读取值；如果方法有参数，那就是设置值
    // 读取
      console.log($('input').val());
    // 设置
    $('input').val('QWER');

5. DOM 大小及位置

（1). jQuery读取DOM宽高
    1. width() / height()
// 读取，只会读取盒模型 内容 宽度
 console.log($('.A').width());
// 设置，设置盒模型内容宽度（纯数字或带单位的字符串都可以）
$('.A').width(200);

 2. innerWidth() / innerHeight()
// 读取，只会读取盒模型 内容+内边距 宽度
console.log($('.A').innerWidth());
// 设置，如果存在内边距，设置的值会保留内边距，自动修改内容宽度
$('.A').innerWidth(200);

3. outerWidth() / outerHeight()
// 读取，读取完整盒模型宽度 内容+内边距+边框
console.log($('.A').outerWidth());
// 设置，保留原有的内边距和边框值，剩余部分自动分配给内容宽度
 $('.A').outerWidth(200);

(2).读取位置
1. offset()返回一个位置对象，left属性和top属性表示位置
// 不管元素是否存在定位父级，读取的始终都是元素边缘到视窗边缘的距离
 console.log($('.B').offset().left);

 2. position()返回一个位置对象，left和top属性表示位置
// 如果元素存在定位父级，读取的是元素边缘到定位父级边缘的距离，如果不存在定位父级，读取的是元素边缘到视窗边缘的距离
 console.log($('.B').position());

 3.滚动偏移
 scrollTop() / scrollLeft()
// 当无参数时读取滚动偏移，当有参数时设置滚动偏移（number）
 $('.A')[0].onscroll = function(){
     // 读取滚动偏移
      console.log(this.scrollTop);
    console.log($(this).scrollTop());
 }

6.事件

1.点击事件
     $('.box').click(function(){
         $('.box').css('background','green')
     })
    $('.box').on('click'，function(){
         $('.box').css('background','green');
     })
2.移出事件
 $('.box').off('click');