一个jQuery的使用实例

2019-08-01 本文已影响0人不明suoyi

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;
}


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等

一个jQuery的使用实例

猜你喜欢

热点阅读