设计模式
- 不用new构造函数
- 重载,$(支持多种参数)
- 闭包隐藏细节
- getter/setter
- 别名($.fn是 $.prototype的别名)
- 适配器模式
如何获取元素
jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。
将选择表达式放入构造函数jQuery(),它的简写为$(),然而它不返回这些元素,而是返回一个对象,称为jQuery构造出来的对象。 这个对象可以操作对应的元素。 表达式可以为CSS选择器
$(document) //选择整个文档对象
$('#name') //选择id为name的网页元素
$('div.my')//选择class为my的div元素
$('input[name=first]') // 选择name属性等于first的input元素
jQuery特有的表达式
$('a:first') //选择网页中第一个a元素
$('ul>li') //选择ul里的li元素
$('tr:odd') //选择表格的奇数行
$('div:animated') // 选择当前处于动画状态的div元素
如何查找元素
通过获取的结果集进行筛选,选择符合条件的结果
$('#xxx').find('.red') //查找#xxx里class为red的元素
$('#xxx').parent() //获取#xxx的爸爸
$('#xxx').children() //获取#xxx的儿子
$('#xxx').siblings() //获取#xxx的兄弟
$('#xxx').index() //获取#xxx在兄弟之间排行老几(从0开始)
$('#xxx').next() //获取弟弟
$('#xxx').pre() //获取哥哥
$('.red').each(fn) //遍历并对每个元素执行fn
链式操作是怎样的
原理:关键就在于对象里的方法有:return this。这就是说调用了方法之后把对象给返回了回来,这样可以继续调用这个对象了。
window.jQuery = function (selector){
const elements = document.querySelectorAll(selector);
return {
addClass(className){
for (let i = 0; i < elements.length; i++) {
elements[i].classList.add(className);
}
return this;
}
}
}
// jQuery(".test")
// .addClass("blue")
// .addClass("red")
在选中网页中的元素后,可以对它进行一些操作,并且让所有操作可以连接在一起,以链条的形式写出来,如下所示。
$('div').find('ul').eq(2).html('helloworld').end()
拆解开来如下所示:
$('div')
.find('h1') //找到h1元素
.eq(2) //找到其中第三个hl元素
.html('HelloWorld') //将它的内容改成HelloWorld
.end() //退回到选中所有的h1元素那一步
如何创建元素
只需要将新元素直接传入jQuery的构造函数就可以了。因为利用了函数的重载,可以接受不同的参数,可以鉴别是选择器还是标签。
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('<div><span>1</span></div>').appendTo(document.body)
//创建div然后插入到body里
$('body').append(div或$div)
//添加小儿子(末尾添加)
$('body').prepend(div或$div)
//添加大儿子(开头添加)
$('body').after(div或$div)
//添加弟弟
$('body').before(div或$div)
添加哥哥
如何删除元素
删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
清空元素内容(但是不删除该元素)使用.empty()。
如何移动元素
有两种方法可以操作元素在网页中的位置移动。这两种方法操作视角不同,返回的元素不一样
- 直接移动该元素
$('div').insertAfter($('p'));//把div元素移动p元素后面
- 移动其他元素,使目标元素达到想要的位置
$('p').after($('div'));//把p元素加到div元素前面
这样的操作方法,总共有四对。
-
.insertAfter()和.after():在现存元素的外部,从后面插入元素
-
.insertBefore()和.before():在现存元素的外部,从前面插入元素
-
.appendTo()和.append():在现存元素的内部,从后面插入元素
-
.prependTo()和.prepend():在现存元素的内部,从前面插入元素
如何修改元素的属性
可以使用同一个函数,来完成取值和赋值达到修改元素。
$('div').text() //读写文本内容
$('div').HTML() //读写HTML内容
$('div').attr('title',?) //读写属性
$('div').style({color:'red'}) // 读写style
$('div').addClass('red') // 添加类名/removeClass/hasClass
$('div').on('click',fn) //鼠标点击触发
$('div').off('click',fn) //鼠标点击后移除