关于 jQuery

186 阅读1分钟

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的值