jQuery操作

最新推荐文章于 2022-10-05 11:00:19 发布

£無知***

最新推荐文章于 2022-10-05 11:00:19 发布

阅读量118

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/ly_521_xsy/article/details/100585716

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

事件操作

事件	使用方法
click	点击事件： $( ).click( function ( ) { } )
hover	鼠标移入事件：$( ).hover( function ( ) { },function ( ) { } )
change	表单事件(输入变化并且失去焦点时触发) ： $( ).change( function ( ) { } )
on	通用事件：$( ).on( ‘事件’ ,function ( ) { } )
input	表单事件(输入时触发) ：$( ).on( ‘input’ ,function ( ) { } )
ready	DOM加载完成触发： $(document).ready( function ( ) { })
one	绑定一次型事件(函数最多只能被执行一次) ： $( ).one( ‘事件’ , function ( ) { } )
off	移除事件绑定： $( ).off(‘事件’,回调函数的名称)
trigger	通过代码触发事件：$( ).trigger(‘事件’) )

动画操作

状态	方法
显示、隐藏	显示： show() 、隐藏：hide() 【显示则隐藏，隐藏则显示：toggle()】
渐变	渐变进：fadeIn() 、渐变出：fadeOut() 【fadeToggle()】
滑动	滑动上： slideUp() 、滑动下：slideDown() 【slideToggle()】

自定义动画

animate()：

语法：$( ).animate({key:value }, 动画时间, 'linear', function () { })

eg： $('#start').click(function () {
            // 有些属性不支持动画
            // para1:object，需要动画的样式 key-value 对象
            // para2：动画时间，可以缺省，默认为400
            // para3：动画速率函数，可以缺省
            // para4：动画结束的回调函数 
            $('div').animate({
                height: 400,
                'font-size': 70
            }, 4000, 'linear', function () {
                console.log('动画完成');
                // delay() : 延迟时间
            }).delay(1000).animate({
                height: 200,
                'font-size': 16
            }, 4000)
        })

stop()

    $('div').stop(true, false)
        参一: 是否清除动画队列
        参二: 是否跳到动画的结束

属性操作

一、attr( )

赋值：

添加单个属性：$('p').attr('id', 'ly')
添加多个属性：('p').attr( { title: 'p标签', class: 'xsy' } )
利用回调函数添加：$('p').attr('id', function (index, value) { }）

取值：

获取jQuery对象中第一个标签的属性值：var res = $('p').attr('id')

移除：

$('p').removeAttr('title')

二、prop( )

prop() 方法也是操作标签的属性，只不过是标签jsDOM对象中的属性

attr( )与attr( )区别：

  console.log($('input').attr('checked'));     // checked
  console.log($('input').prop('checked'));     // true / false

注：Boolean类型的属性，采用prop取值；可以得到 true 或 false，便于使用。

三、自定义属性data()

data()方法可以获取data-属性的值，参数是对应的内容

eg：var value = $('p').data('color')

四、标签的内容操作

给标签添加内容：$( ).val(内容)
获取标签里面的内容：$( ).html()

五、表单元素的内容操作

向输入框中添加内容：$( ).val(内容)
获取输入框里的内容：$( ).val()

六、快速获取整个表单的数据

获取表单内容：$(this).serialize()
获取到的数据格式是数组：$(this).serializeArray()

标签操作

一、标签的增加

1.内部插入：

追加（在底部加入）：
eg：
    $('ul').append('<li>2222</li>')
    $('<li>3333</li>').appendTo('ul')

插入（在顶部添加）：
eg：
    $('ul').prepend('<li>0000</li>')
    $('<li>-1-1-1</li>').prependTo('ul')

2.外部插入：

后面插入：
eg：
    $('li:eq(0)').after('<li>aaaa</li>')
    $('<li>AAAA</li>').insertAfter('li:eq(0)')

前面插入：
eg：
    $('li:eq(0)').before('<li>bbbb</li>')
    $('<li>BBBB</li>').insertBefore('li:eq(0)')

3.包裹标签：

把找到的每一个标签外层都包裹一个父标签(后面的包裹前面的)：

eg： $('li').wrap('<div></div>')

删除直属父标签：

eg：$('li').unwrap()

把找到符合的所有标签外层包裹一个父标签：

eg：$('li').wrapAll('<div></div>')

把找到的每一个【标签内部的内容】都包裹一个父标签：

eg： $('li').wrapInner('<div></div>')

二、标签的替换

替换所找到的标签 （后面的替换前面的）：
eg：
   $('li:eq(0)').replaceWith('<li>-------</li>')
   $('<li>++++++</li>').replaceAll('li:eq(0)')

三、标签的筛选、过滤


根据索引获取标签	$( ).eq(index)
筛选获取第一个标签	$( ).first()
筛选获取最后一个标签	$( ).last()
根据条件查找标签（filter：过滤）	$( ).filter(条件)
判断找的标签里有没有这个条件	$( ).is( ) 【满足：true 不满足：false】
映射关系	$ ( ).map(function(index,ele){ })
找满足条件的标签	$( ).has( )
不要满足条件的，返回剩下的	$( ).not( )
取一部分	$( ).slice(从哪个索引开始【包含】,到哪个索引结束)

四、标签的查找

1.找直属子标签：

$( ).children()

2.找父标签：


向上找最近的父标签	$( ).closest( )
找一个父标签	$( ).parent( )
找所有的父标签	$( ).parents( )
找所有的父标签，遇到xxx结束，不包含遇到的那个标签	$( ).parentsUntil(xxx)
找定位的父标签，如果没有就是 html	$( ).offsetParent()

3.找相邻标签：


上一个相邻标签	$( ).prev( )
找上面同层级所有	$( ).prevAll( )
找上面同层级直到遇到xxx停止查找（不包含xxx）	$( ).prevUntil( )
找下一个相邻标签	$( ).next( )
找下面同层级所有	$( ).nextAll( )
找下面同层级直到遇到xxx停止查找（不包含xxx）	$( ).nextUntil( )
找所有相邻标签	$( ).siblings( )