jQuery 是一个 JavaScript 库。
下载 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()
参考网站
以上内容纯属个人理解，由于水平有限，若有错漏之处敬请指出斧正，小弟不胜感激。
