jQuery常用方法

1.attr()
两个参数,可用作读取某个属性的值,或者修改某个属性的值,操作属性值为非布尔值的属性

//读取第一个div的title属性
console.log($('div:first').attr('title'))
给所有的div设置name属性(value为asdf)
$('div').attr('name', 'asdf')

2.removeAttr()
移除某个属性

移除所有div的title属性
$('div').removeAttr('title')

3.addClass()
给元素添加类名

给所有的div添加class='abc'
$('div').addClass('abc')

4.removeClass()
移除类名
5.html()
得到某个元素的文本内容

得到最后一个li的标签体文本
console.log($('li:last').html())

设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
$('li:first').html('<h1>mmmmmmmmm</h1>')

6.val()
获取元素的val值

得到输入框中的value值
console.log($(':text').val()) 

将输入框的值设置为asdasd
$(':text').val('asdasd') 

7.prop()
也是用作修改元素的某些属性的值,专门操作属性值为布尔值的属性
8.offset()
相对页面左上角的坐标,并且可以设置坐标

//获取坐标
var offset = $('.div1').offset()   //此方法返回的是一个对象,里面有left和top两个属性
console.log(offset.left, offset.top)
//设置坐标
 $('.div2').offset({
      left: 50,
      top: 100
    })

  1. position()
    相对于父元素左上角的坐标
var position = $('.div1').position()
console.log(position.left, position.top) 

10.first()
第一个元素

$lis.first().css('background', 'red')

11.last()
最后一个元素

$lis.last().css('background', 'red')

12.eq(index|-index)
根据索引来找到元素

$lis.eq(1).css('background', 'red')

13.filter(selector)
根据条件来过滤得到元素

ul下li标签中title属性为hello的
$lis.filter('[title=hello]').css('background', 'red')

14.not(selector)
根据条件来过滤元素

ul下li标签中title属性不为hello的
$lis.not('[title=hello]').css('background', 'red')

15.has(selector)
保留包含特定后代的元素

ul下li标签中有span子标签的
 $lis.has('span').css('background', 'red')

查找孩子,父亲,兄弟,后代元素
16.children()
查找孩子元素

ul标签的第2个span子标签
$ul.children('span:eq(1)').css('background', 'red')

17.find()
查找后代元素

ul标签的第2个span后代标签
$ul.find('span:eq(1)').css('background', 'red')

18.parent()
查找父元素

ul标签的父标签
$ul.parent().css('background', 'red')

19.prevAll()
查找前面的所有兄弟元素

id为cc的li标签的前面的所有li标签
var $li = $('#cc')
$li.prevAll('li').css('background', 'red')

20.nextAll()
查找后面的所有兄弟元素

id为cc的li标签的前面的所有li标签
var $li = $('#cc')
$li.nextAll('li').css('background', 'red')

21.siblings()
查找前后所有的兄弟元素

id为cc的li标签的所有兄弟li标签
$li.siblings('li').css('background', 'red')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容