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等
网友评论