jQuery设计思想
用jQuery风格重新封装DOM
链式风格 也叫jQuery风格
window.jquery()是我们提供的全局变量 jQuery(选择器)用来获取对应的元素
口头约定jQuery对象代指jQuery函数构造出来的对象 一定要记清jQuery对象不是说jQuery这个对象
链式风格 查
jQuery（'#xxx'）返回值并不是元素 而是一个API对象
jQuery（'#xxx'）.find('.red')查找#xxx里的 .red元素
jQuery（'#xxx'）.parent()获取爸爸
jQuery（'#xxx'）.children()获取儿子
jQuery（'#xxx'）.siblings()获取兄弟
如果你嫌弃jQuery太长 也可以写window.$=window.jQuery
命名风格
下面的代码令人误解
const div=$('div#test')
我们会误解以为div是一个DOM
实际上div是jQuery构造的api对象
改成这样
const $div=$('div#test')
$div.appendChild不存在，因为它不是DOM的对象
$div.find存在 因为他是jQuery对象
所有$开头的对象都是jQuery对象
链式风格 查
$（'#xxx'）返回值并不是元素 而是一个API对象
$（'#xxx'）.find('.red')查找#xxx里的 .red元素
$（'#xxx'）.parent()获取爸爸
$（'#xxx'）.children()获取儿子
$（'#xxx'）.siblings()获取兄弟
一、jQuery 如何获取元素
jQuery的基本设计思想和主要用法,就是'选择某个网页元素,然后对其进行某种操作'
jQuery使用$(selector) 的方法获取页面的操作元素,selector接受字符串或着是元素组成的数组
我们可以使用DOM API的querySelectorAll 进行类似的实现
window.$ = window.jQuery = function (selectorOrArray) {
let elements
if(typeof selectorOrArray === 'string'){
elements = document.querySelectorAll(selectorOrArray)
}else if(selectorOrArray instanceof Array){
elements = selectorOrArray
}
return {//返回一个可操作elements的对象}
}
- 查找元素
当我们获取元素后,需要找到并操作其内部的元素时,可以调用jQuery对象里面的find()函数
find()函数的实现,需要使用for循环来遍历,并将新生成的数组放入$(selector)
find(selector){ let array = []
for(let i = 0; i < elements.length; i++){
array.concat(Array.from(elements[i].querySelectorAll(selector)))
}
return $(array)
}
遍历函数
在jQuery对象的操作方法中,遍历是经常用到的,那我们何不封装一个遍历函数each() 来调用呢?
each(fn){
for(let i = 0; i < elements.length; i++){
fn.call(null, elements, i)
}
return this
}
如此一来,有了each()函数,find() 函数就能更简洁的实现了,如下
find(selector){
let array = []
this.each(node => {
array.concat(Array.from(node.querySelectorAll(selector)))
})
return $(array)
}
二、jQuery 的链式操作是怎样的
jQuery设计思想之一,获取元素后,可以对它进行一系列的操作,并且所有操作可以连接在一起,称为链式操作,举个栗子: $('div').find('h3').eq(2).html('Hello')
分解开来，就是下面这样
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
从上面简易实现的代码可以看出，jQuery的操作函数运行后，都会返回一个jQuery对象，这样是的不同操作可以连在一起，这是jQuery最令人称道、最方便的特点
三、jQuery 如何创建元素与属性的处理
- 创建元素节点
$("<div></div>")
- 创建为文本节点
$("<div>我是文本节点</div>")
- 创建为属性节点
$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
这就是jQuery创建节点的方式，让我们保留HTML的结构书写方式，非常的简单、方便和灵活
四、jQuery 如何移动元素
jQuery设计思想之一，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
- 第一种方法是使用.insertAfter()，把div元素移动p元素后面：
$('div').insertAfter($('p'))
- 第二种方法是使用.after()，把p元素加到div元素前面：
$('p').after($('div'))
表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。
使用这种模式的操作方法，一共有四对：
.insertAfter()`和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()和.append()：在现存元素的内部，从后面插入元素
.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
五、jQuery 如何修改元素的属性
jQuery 提供多种修改元素的属性的方法：
- attr()函数获取标签的某个属性
$('#p').attr('class') //获取id为p的标签的属性值
- attr()修改或修改标签的属性值
$('#p').attr('class','red') //如果存在就是修改，如果不存在就是添加
- 3删除某个属性
$('#p').removeAttr('name')
- 添加class名称
$('#p').addClass('blue')
- 删除class名称
$('#p').removeClass('yellow')
- 有class就删除 没有就添加
$('#p').toggleClass('asdf')
- val()获取输入框内容
var s = $('input[name="user"]').val()
