下载 jQuery和使用

共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。这两个版本都可从 jQuery.com 下载。如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 或者百度等，加载 CDN jQuery 核心文件。使用的时候需要在head中引入，如下图：

百度CDN引入地址：http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

jQuery 库引入

另外在做移动端时可以选择Zepto来代替JQ，因为Zepto相对于JQ来说要轻便一些，用法类似于JQ，下载地址：http://www.css88.com/doc/zeptojs/

一、选择器

jq的选择器与css选择器基本一致所有的css选择器在jq中都可以使用。

#div1 id选择器
div 标签名选择器
.div1 class选择器
jq代码和html代码如下：

html代码

    // id选择器
    $('#div1').css({
        'background-color': 'red'
    })

    // class选择器

    $('.box').css('color','#fff')

    // 标签名选择器,根据下标选择第二个标签

    $('div:eq(1)').css({
        'font-size': '4em'
    })

选择器效果图-1

header h1 子级选择器
header>h1 直接子级选择器
:first第一个
:last 最后一个
:even所有偶数
:odd所有奇数
:eq(2)根据下标进行选择，下标从0开始
[title]根据属性选择

    // 直接子级选择器
    $('.list>h1').css('color','red')
    // 子级选择器
    $('.list p').css('color','blue')
    // 第一个
    $('li:first').css('font-size','2em')
    // 最后一个
    $('li:last').css('text-indent','2em')
    // 奇数
    $('li:odd').css({
        'background-color': 'red',
        'font-size': '4em'
    })
    // 偶数
    $('li:even').css({
        'background-color': 'orange',
        'font-size': '2em'
    })
    //根据属性选择
    $('[title]').css({
        'color': '#fff'
    })

html代码

选择器效果图-2

二、筛选

eq(2) 下标从零开始
first() 获取第一个元素
last() 获取最后一个元素
children() 获取所有子元素
parent() 获取父级元素

html代码如上图，效果图如下：

    // 通过筛选获取元素
    // 通过下标获取第5个元素
    $('li').eq(4).css('color','orange')
    // 获取第一个元素
    $('h1').first().css('color','orange')
    // 获取最后一个元素
    $('li').last().css('font-size','3em')
    // 获取所有子元素
    $('.list').children().css({
        'background-color': 'hotpink',
        'list-style': 'none'
    })
    // 获取父级元素
    $('p').parent().css('color','#fff')

筛选效果图

三、属性

attr（'title'）获取属性值
attr（'title','hehe'）设置属性值
attr（{ title: ' eeee ' , style: ' background-color: red ; '}）同时设置多个属性值
removeAttr（'title'）移除属性值
addClass（'page'）添加class值
removeClass（'page'）移除class的值
toggleClass（‘hah’）添加或移除class的值
html（）获取标签内容，类似innerHTML
val（）获取表单元素的值

    // 获取属性值
    $('#div1').attr('id')

    // 设置属性值
    $('input').attr('type','number')

    // 同时设置多个属性值
    $('div').attr({
        title: '我是一个div',
        style: 'font-size: 2em'
    })

    // 分别移除id和title的值
    $('.box:eq(0)').removeAttr('id')
    $('input').removeAttr('title')

    // 添加class值
    $('input').addClass('text')


    // 移除class值
    $('input').removeClass('text')

    // 添加或者移除class值
    $('input').click(function(){
        $(this).toggleClass('box')
    })

    // 获取标签内容
    $('#div1').html()

    // 获取表单元素的值
    $('input').val()