美文网首页
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事件操作和插件

    jQuery事件操作 简单方式注册事件 语法:jQuery对象.事件名(事件处理程序) on方法注册事件 注册简单...

  • jqurey事件

    jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML...

  • JavaScript之jQuery

    九、jQuery 目录:初识jQuery及公式、jQuery选择器、jQuery事件、jQuery操作DOM元素 ...

  • jQuery的基础事件篇

    基础事件 1.绑定事件 jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数:bind(ty...

  • jQuery事件与动画

    一. 事件绑定 on() 方法 在被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 ...

  • jQuery|事件处理有一个on就够了

    on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 起,on() 方法...

  • JQuery写拓展

    基础 $.extend()扩展JQuery静态方法,$.fn.extend()扩展JQuery实例方法静态方法: ...

  • jQuery 方法总结及几个常用插件

    jQuery 中的事件方法 jQuery 中的页面效果中使用到的方法 jQuery 中的插件总结

  • Jquery第一天JQ选择器及简单使用

    一、Jquery介绍及简单使用 (一) 介绍 Jquery是什么,其实就是别人封装好的方法,它把各个功能都考虑到...

  • jQuery |AJAX load() 方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 load() ...

网友评论

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

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