一、引入
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
jQuery把所有功能全部封装在一个全局变量jQuery中,而$
是变量jQuery的别名。
$
本质上是一个函数,但函数也是对象,$
除了可以直接调用外,也有很多其他属性。
$
占用
如果这个变量被占用了,还不能改,就只能使用jQuery这个变量
$; // jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)
原理是jQuery在占用
$
之前,先在内部保存了原来的$,调用jQuery.noConflict()
时会把原来保存的变量还原
二、jQuery对象
返回的对象是jQuery对象:类似数组,它的每个元素都是一个引用了DOM节点的对象
——返回对象[<div id="abc">...</div>]
——如果不存在,返回 []
总之选择器不会返回undefined
或者null
jQuery对象和DOM对象之间可以互相转化(一般直接用jQuery对象)
var div = $('#abc'); // jQuery对象
var divDom = div.get(0); // 假设存在div,获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象
三、选择器
- 按ID查找:
var div = $('#abc');
- 按tag查找:
var ps = $('p'); // 返回所有<p>节点
- 按class查找:
var a = $('.red'); // 所有节点包含class="red"都将返回
var a = $('.red.green'); // 注意没有空格!
- 按属性查找:
var email = $('[name=email]'); // 找出<??? name="email">
按属性查找还可以使用前缀查找或者后缀查找:
var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"
var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
// 例如: class="icon-clock", class="abc icon-home"
- 组合查找
- 多项选择器
多项选择器就是把多个选择器用,
组合起来一块选 【不会有重复元素】
$('p,div'); // 把<p>和<div>都选出来
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来
- 层级选择器
因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择。
层级之间用空格隔开。 - 子选择器
>
<child>
节点必须是<parent>
节点的直属子节点: $('parent>child')
$('ul.lang>li.lang-javascript');
// 可以选出[<li class="lang-javascript">JavaScript</li>]
- 过滤器(Filter)
:
它通常附加在选择器上,帮助我们更精确地定位元素。
$('ul.lang li:first-child');// 选出第一个元素
$('ul.lang li:last-child'); // 选出最后一个元素
$('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
-
表单相关
:input
:选择<input>
,<textarea>
,<select>
和<button>
;
:file
:选择<input type="file">
;
:checkbox
:选择复选框,和input[type=checkbox]一样;
:radio
:选择单选框,和input[type=radio]一样;
:focus
:选择当前输入焦点的元素
:checked
:选择当前勾上的单选框和复选框,获得用户选择的项目
:enabled
:选择可以正常输入的<input>
、<select>
等,也就是没有灰掉的输入;
:disabled
:和:enabled正好相反,选择那些不能输入的。 -
可见 / 隐藏
$('div:visible'); // 所有可见的div
$('div:hidden'); // 所有隐藏的div
-
查找
子节点中查找:find()
从当前节点开始向上查找:parent()
同一层级:next()
和prev()
-
过滤
过滤掉不符合选择器条件的节点:filter()
把DOM节点转化为其他对象:map()
var arr = langs.map(function () {
return this.innerHTML;
}).get();
// 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
- jQuery对象如果包含了不止一个DOM节点:
first-child:first()
last-child:last()
截取对象:slice()
四、DOM操作
- 修改Text和HTML
text()
:获取节点的文本
html()
:获取节点的原始HTML文本
jQuery对象的另一个好处是:即使不存在设置的节点,代码不会报错(免去了许多 if 语句)
- 修改CSS:
css('name', '