jQuery 是一个 JavaScript 函数库,jQuery库包含以下特性(HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities)。
jQuery目前包含三个版本:jQuery的1.x、jQuery的2.x、jQuery的3.x(jquery-2.0以上版本不再支持IE 6/7/8),每个版本中都会有两个类型提供选择uncompressed(未压缩版,用于测试和开发), minified(压缩版,用于实际的网站中),jQurey下载引用地址:点击
jQuery的两种使用方式:
- 下载jQuery文件放到与页面相同的目录中使用
<script src="jquery-1.12.4.js"></script>
- 通过 CDN(内容分发网络) 引用jQuery
#百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> #微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script> #官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
jQuery与Dom对象之间的转换:
// $(Dom对象) =>jQuery对象
var a = document.getElementById("MySignature")
<div id="MySignature"></div>
$(a)
//输出:n.fn.init [div#MySignature, context: div#MySignature]0: div#MySignaturecontext: div#MySignaturelength: 1__proto__: Object(0)
//jquery对象[0] => Dom对象
$(a)[0]
//输出:<div id="MySignature"></div>
一、查找元素
1、jQuery常用选择器,直接找到某个或者某类标签:
1.1、id、class、标签、组合、层级查找元素
$('#id') //根据id查找元素
$(".c1") //根据class查找元素
$('a') //查找出所有标签为a的元素
$('a,.c2,#i10') //查找出所有标签为a、class=c2、id=i10的元素,并将匹配到的元素合并到一个结果内
$('#i10 a') //查找出id=i10标签下的所有的后代元素
$('#i10>a') //查找出id=i10标签下的子元素
$('#i10+a') //查找出id=i10标签的下一个兄弟元素
$('#i10~a') //查找出id=i10标签的下一个siblings元素
1.2、基本筛选器、属性查找元素
常用的基本筛选器 <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> $('li:first'); //匹配第一个li元素 $('li:last'); //匹配的最后一个li元素 $('li:eq(2)'); //匹配下标索引为2的li元素(从0开始) $('li:gt(2)'); //匹配下标索引大于2的li元素(从0开始) $('li:even'); //匹配下标索引为偶数li元素 $('li:odd'); //匹配下标索引为奇数li元素 属性 <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> $('[name]') //匹配具有name属性的所有标签 $('[name="milkman"]') //匹配name属性等于milkman的标签 $("input[name='milkman']") //匹配input标签下name属性等于milkman的标签 $("input[name!='milkman']") //匹配input标签下name属性不等于milkman的标签 $("input[name^='milk']") //匹配input标签下name属性以milk开头的标签 $("input[name$='man']") //匹配input标签下name属性以man结尾的标签 $("input[name*='man']") //匹配input标签下name属性包含man的标签