美文网首页
JQuery简单事件及基础方法

JQuery简单事件及基础方法

作者: 尘伽 | 来源:发表于2022-03-18 15:10 被阅读0次

    基础查找元素

    :eq(index)                   根据索引查找某个元素

    :gt(index)                       根据索引查找到指定元素之后的全部元素

    :odd                              查找该元素的奇数项

    :event                         查找到该元素的所有偶数项

    :first                           查找到第一个元素

    :last                             查找到最后一个元素

    :checked                       查找到被选中的input标签

    :not(类名)                        查找到被选中的input标签

    基础方法增删改查

    $('类名').attr('x','y')             设置属性(需要修改的属性名  要改成的结果)

    .attr('属性名')                     获取属性(正确返回属性名 错误返回undefined)

    .prop('属性名')                     获取属性(正确返回true错误返回false)

    .removeAttr('属性名')           移除属性(名为括号内名字的属性)

    .removeprop('属性名')              移除属性(名为括号捏名字的属性)

    .html('内容')                               html() == innerHTML

    .text('内容')                             text() == innerTEXT

    .html()                     获取标签内容

    .text()                            获取标签内容(不解析标签)

    .css('x','y')                    操作标签样式 (x为需要修改的标签名 y是要改成的标签样式)

    .addclass('类名')                           添加类名

    .removeclass('类名')                      删除类名

    toggleclass('类名')                 有括号内类名时则删除此类名 无此类名则添加此类名

    节点操作

    .childrem()                            所有子元素

    .parent()                               父元素

    .parents()                                所有祖先元素

    .prev()                                      获取上一个兄弟节点

    .prevAll()                                 自身之前的所有兄弟节点

    .next()                                     下一个兄弟节点

    .nextAll()                                   自身之后的所有兄弟几点

    .siblings()                                   同级的所有兄dei节点

    节点的创建及插入、删除

    var li = $('<li>')                     创建一个li并为其命名为li

    li.appendTo($('ul'))                将上面创建的li插入到ul中

    $('active').before($'<li>').html('hello')                 在名为active的li前面创建并插入一个内容为hello的li

    $('li').remove('active')                              删除名为active的li

    便利数组/对象

    .each(function(i,n){})             i 索引/键           n   元素/值

    .on('事件','函数')        .on('事件',''事件','事件',函数')            .on可以同时对一个元素设置多个事件

    获取元素的偏移量

    .offset()                                      获取元素相对于页面的偏移量 (无关定位)

    .position()                                     获取元素相对于父元素的偏移量  (不包含内部设置的外边距)

    获取元素的宽高

    Width()                                    获取内容区域宽    (无关边框线)

    .Height()                                  获取内容区域高    (无关边框线)

    .innerWidth()                            获取元素宽度 (包含补白不包括边框)

    .innerHeight()                         获取元素高度 (包含补白不包括边框)     

    .outerWidth()                            元素宽(包括补白包括边框)

    .outerHeight()                            元素高(包括补白包括边框)

    动画/显示与隐藏

    .show()                                     显示(无参数时直接显示  有参数时为动画效果  参数为时间)

    .hide()                                        隐藏(无参数时直接显示  有参数时为动画效果  参数为时间)

    .toggle()                                     显示/隐藏  (目标状态为显示时效果为隐藏  目标为隐藏状态时效果为)

    .slideDown()                              显示(增加高度式显示)

    .slideup()                                     隐藏(减少高度式隐藏)

    .slideToggle()                                显示/隐藏

    .fadeIn()                                          显示(渐变式显示)

    .fadeout()                                       隐藏(渐变式隐藏)

    .fadeToggle()                                   显示/隐藏

    .dadeTo('参数一','参数二')                 显示        (参数一为时间   参数二为透明度)

    .animate()                                            自定义动画

    .stop()                                                 停止动画

    相关文章

      网友评论

          本文标题:JQuery简单事件及基础方法

          本文链接:https://www.haomeiwen.com/subject/cipgdrtx.html