jQuery 功能概述

 特殊函数 jQuery

• jQuery （选择器）用于获取对应的元素
• 但它却不返回这些元素
• 相反，它返回一个对象，称为 jQuery 构造出来的对象
• 这个对象可以操作对应的元素

 jQuery 是构造函数吗?

是

• 因为 jQuery 函数确实构造出了一个对象

不是

• 因为不需要写 new jQuery() 就能构造一个对象
• 构造函数都要结合 new 才行

结论

• jQuery 是一个不需要加 new 的构造函数
• jQuery 不是常规意义上的构造函数

 jQuery 对象代指 jQuery 函数构造出来的对象

• jQuery 对象不是说 jQuery 是一个对象 

相关术语 

• Object 是个函数
• Object 对象表示 Object 构造出的对象
• Array 是个函数
• Array 对象/数组对象表示 Array 构造出来的对象
• Function 是个函数
• Function 对象/函数对象表示  Function构造出来的对象 

命名风格 

• 在 jQuery 对象前加上 $
• const $div = $('div#test')
• $div.appendChild 不存在，因为他不是 DOM 对象
• $div,find 存在，因为他是 jQuery 对象

使用原型

• 把共有属性（函数）全都放到 $.prototype
• $fn = $.prototype
• 让 api.__proto__指向 $.fn

jQuery 用到的设计模式

• 不用 new 的构造函数
• $ （支持多种参数），这个模式叫做重载
• 用闭包隐藏细节
• $div.test() 既可读也可写 ，getter/setter
• $,fn 是 $.prototype 的别名
• jQuery 针对不同浏览器使用不同代码，这叫适配器

jQuery 如何获取元素

$('#xxx') 返回值并不是一个元素，而是 api 对象

$('#xxx').find('.red') 查找 #xxx 里的 .red 元素

$('#xxx').parent() 获取爸爸

$('#xxx').children() 获取儿子

$('#xxx').siblings() 获取兄弟

$('#xxx').index() 获取排行老几 （从0开始）

$('#xxx').next() 获取弟弟

$('#xxx').prve() 获取哥哥

$('.red').each(fn) 遍历并对每个元素执行 fn

jQuery 的链式操作是怎样的

jQuery 的链式操作就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以以链条的形式写出来，使用 .end 可以使结果集后退一步：

jQuery('.test') 
    .find('.child')
    .addClass('red') 
    .addClass('blue')
    .addClass('yellow') 
    .end()
    .addClass('yellow')

jQuery 如何创建元素

　$('<p>Hello</p>');

　$('<li class="new">new list item</li>');

　$('ul').append('<li>list item</li>');

jQuery 如何移动元素

$( 'body').append('<div>1</div>') 添加小儿子

$ ('body').prepend(div或$div) 添加大儿子

$ ('#test').after(div或 $div) 添个弟弟

$('#test').before(div或 $div) 添个哥哥

jQuery 如何修改元素的属性

$div,test(?) 读写文本内容

$div.html(?) 读写 html 内容

$attr('title,?') 读写属性

$div.css({color:'red'}) 读写style

$div.addClass('blue') 添加 class

$div.removeClass('blue') 删除 class

$div.hasClass('blue') 检查被选元素是否包含指定的 class

 *本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源