jQuery 如何获取元素
它首先提供一个函数,然后让这个函数去接收选择器,当你调用这个函数时,你给它传入什么选择器它就可以获取到这些元素
例:(jQuery()简写为$())
$('.test') //获取到页面class选择器为test元素
$('#test')//获取到页面ID选择器为test元素
$('input[name=first]') // 获取到选择name属性等于first的input元素
jQuery 的链式操作是怎样的
在获取到选择器元素后,可将它进行一系列的操作。当你用api调用了一个函数后它又会重新返回这个api,然后继续使用它。
例:
//const api1 = jQuery('.test')
//const api2 = api1.find('.child').addClass('red').addClass('.blue')
//const oldApi = api2.end().addClass('yellow')
$(.test)//不返回元素们,返回api对象
.find('.child')// 在test上找到 child选择器
.addClass('blue')//在child选择器添加 blue选择器
.end()//回到test上
.addClass('yellow')//在test 上添加yellow选择器
jQuery 如何创建元素
直接把要创建的标签放到里面即可 $(html标签),但是它只是创建了对象没有添加到文档节点上。以下有四种方法添加上去
例:
$('<div>Hello</div>');//直接创建标签
$('body').append('<div>1</div>')//在body添加小儿子
$('body').prepend('<div>1</div>')//在body添加大儿子
$('#test').after('<div>1</div>')//在test上添加弟弟
$('#test').before('<div>1</div>')//在test上添加哥哥
jQuery 如何移动元素
在移动元素中有两组方法来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。
例:
//第一组方法
$('div').insertAfter($('p'));//把div移动到p元素后面
//第二组方法
$('p').after($('div'));//把p移动到div元素前面
//第一组方法返回div元素,第二组方法返回p元素
.insertAfter()和.after()//在现存元素的外部,从后面插入元素
.insertBefore()和.before()//在现存元素的外部,从前面插入元素
.appendTo()和.append()//在现存元素的内部,从后面插入元素
.prependTo()和.prepend()//在现存元素的内部,从前面插入元素
jQuery 如何修改元素的属性
attr()可以对属性进行操作
例:
$('div').attr('title','hello')//div上增加了title属性,值为hello
$('div').attr('title')//返回title的值