1.JS存在的问题:

• 1. 浏览器兼容问题
• 2. 存在复杂的dom操作
• 3. 复杂的特效和动画的实现
• 4. 请求网络数据存在跨域问题

2.jquery优势:

• 1. 几乎不存在浏览器兼容问题
• 2. 轻松实现 Dom操作 和 特效和动画的实现
• 3. 多种方式的网络请求方案

3.引用jQuery类库

<script src="js/jquery-1.11.3.min.js"></script>

4.jQuery常用语法

• 1.jQuery对象

$()

• 2.拿到对应的标签 Css选择器

$('#main .word')
console.log($('p'));

• 3.查看拿到的标签中的属性值

 console.log($('.word').attr('class'));

• 4.改变拿到的标签中的属性值

 $('img').attr('src', 'image/img_02.jpg');
 $('img').attr('width', '100px');

• 5.查看标签中内容

console.log($('p').text());

• 6.改变标签中内容

$('p').text('我是MT');

• 7.事件

7.1.从下标取值

eq(0)

7.2.显示

$('button').eq(0).on('click', function () {
           $('p').show();
           $('img').show();
 });

7.3.隐藏

$('button').eq(1).on('click', function () {
            $('p').hide();
            $('img').hide();
 });

7.4.切换

// 2000是时间
$('button').eq(2).on('click', function () {
            $('p').toggle(2000);
            $('img').toggle(2000);
});

• 8.遍历

 var datas = [10,21,222,3232,4];
 $.each(datas, function (index, value) {
      console.log(index, value);
 });

• 9.取出对应的下标

// 取出数组datas中222的下标
console.log($.inArray(222, datas));

• 10.写css

$('.word').css({
       background:'red',
       border:'1px solid green'
});

5.实战应用

• 窗口滚动的时候

$(window).on('scroll', function () {});

• 拿到最后一个盒子

var lastBox = $('#main>div').last();

• 取出最后一个盒子高度的一半 + 头部偏离位置

var lastBoxDis = $(lastBox).outerHeight() * 0.5 + $(lastBox).offset().top;

• 求出浏览器的高度

var clientHeight = $(window).height();
var screenWidth = $(window).width();

• 求出页面偏离浏览器的高度

var scrollTopHeight = $(window).scrollTop();

• 拿到所有的盒子

var allBox = $('#main>.box');

• 取出其中一个盒子的宽度

var boxWidth = $(allBox).eq(0).outerWidth();

• 父标签居中

$('#main').css({
    'width': cols * boxWidth + 'px',
    'margin': '0 auto'
 });

• 创建一个类名为box的div，添加到id为main的标签中作为子标签

var newBox = $('<div>').addClass('box').appendTo($('#main'));