jQuery的作者是John Resig
jQuery官网
jQuery
实质上是一个函数,它接收一个节点或者选择器作为参数,调用相关API
便可实现遍历和操作HTML
文档,能让事件处理、动画和 Ajax 操作更加简单。
一个简单的实例:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>//引入jQuery
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="">选项1</div>
<div class="">选项2</div>
</ul>
</body>
</html>
CSS
.red{
color:red;
}
JS
var $div = $('div')
$div.addClass('blue') // 可将所有 div 的 class 添加一个 red
$div.text('hi') // 可将所有 div 的 textContent 变为 hi
在页面引入jQuery
在 head
中或在 body
中添加script
标签,src
指向 jquery.js
或 jquery.min.js
文件的地址
使用 jQuery
获取页面中id
为 xxx
的元素
$('#xxx')
或 jQuery('#xxx')
问题一
请说出 div
和 $div
的联系和区别
区别:
div
返回一个HTML DOM Object
$div
返回一个 jQuery Object,
两者不等价
$div
是包装了dom
对象后产生的,无法使用dom
对象的任何方法,比如$('#x').innerHTML
为了区分两种情况,如果是dom
对象,前面加$
。
div
变$div
对于已经是一个dom对象,只需要用$()
把dom
对象包装起来,就能获得一个jQuery
对象了
$div
变div
两种方法:
-
jQuery
对象是一个数据对象,通过[index]
的方法,得到相应的dom
对象
var $x = $('#x') //jQuery对象
var x = $x[0] //DOM对象
- jQuery本身提供方法,通过get(index)方法,得到相应的dom对象
var $v = $('#v') //jQuery对象
var v = $v.get(0) //DOM对象
div
的属性和方法:
- getElementById(id) // 获取带有指定 id 的节点(元素)
- appendChild(node) // 插入新的子节点(元素)
- removeChild(node) // 删除子节点(元素)
- innerHTML // 节点(元素)的文本值
- parentNode // 节点(元素)的父节点
- childNodes // 节点(元素)的子节点
- attributes // 节点(元素)的属性节点
...
$div
的属性方法: //就是jQuery对象的属性和方法
- addClass 增加一个class
- after在每个匹配的元素之后插入内容
- animate 创建自定义动画的函数
- append向每个匹配的元素内部追加内容
- appendTo把所有匹配的元素追加到另一个指定的元素元素集合中
- attr设置或返回被选元素的属性值
...
问题二
<ul>
<li></li>
<li></li>
</ul>
请写出 $('li')
的结构。
$('li')
是一个对象,它自身的key
有length
,它的原型(共享属性)为 jQuery.prototype
,jQuery.prototype
的 key
有 addClass
、removeClass
和css
等