Jquer的常用方法..

博主： Moody
发布时间：2021 年 06 月 20 日
2240 次浏览
暂无评论
2352字数
分类：前端

![jquery][1]

##JQ入口函数##
    $(function(){})
    $(document).ready(function(){})

##获取标签##
    id选择器$("#id名字")通过ID选中标签
    class选择器$(".class名字")通过class选择标签
    标签选择器$("div")获取同一类标签的所有元素
    交集选择器$("li.ac")交集元素
    全选选择器$("*")匹配所有元素
    并集选择器$("div,p,li")选取多个元素

##jq扩展方法##
    筛选获取css选择器集合指定下标 eq（）；
    parent（）； 查找父级
    children（）； 获取子元素
    find（）； 指定后代
    siblings（）； 兄弟元素

##注册事件##
    $(xx).on('事件名',处理函数)；
    事件委托 $(父盒子).on('事件名',‘筛选器’,处理函数)；

##操作类样式##
    addClass 添加
    removeClass 删除
    toggleClass 切换
    hasclass 查找有返回true

##显示隐藏##
    show（）显示
    hide（）隐藏
    toggle（）切换

##滑入滑出##
    slideDown（）滑入
    slideUp（）滑出
    slideToggle（）切换

##淡入淡出##
    fadeIn（）淡入
    fadeOut（）淡出
    fadeToggle（）切换
    fadeTo（） 透明度

stop() 停止
    animate（）动画

##事件解绑##
    off（） 不传参全部解绑 ， 传参解绑指定事件

##one方法##
    $("#btn1").one("click", function() {
    console.log("--------------");
    });

##代码主动触发事件##
    js代码：
      原生解绑onclick（）-偶尔用
      原生解绑click（）
      创建自定义事件 new CustomEvent - 常用
    jq代码：
      $('css选择器').click（）；
      $('css选择器').trigger();
      $('css选择器').triggerHandler();
  
    onclick() 不可以冒泡
    click（）可以冒泡
    trigger（）可以冒泡
    triggerHandler（）不可以冒泡
    stopPropagation（）阻止冒泡

##对象拷贝##
    $.extend(新对象 ， 被复制的对象 );
    $.extend(true， 新对象 ， 被复制的对象 );

##多库共存##
   什么是多库共存? 如果你同时引入多个插件,如果同名 $,后者会覆盖前者,这个时候,就需要给某一个插件改名,改它的全局变量的名字
    <div id="myDiv"></div>
    <script src="./js/jquery3.5.1.js"></script>
    <script>
    // 自己封装的插件 / 引入的其他插件, 也有个方法叫$
    // Jq 主动不用$ 用哪个变量名, 自己定
    let zs = jQuery.noConflict();
    </script>
    <script>
        // 自己的插件
        $ = function(){
        	console.log("我是自定义的$方法");
        }

console.log(zs("#myDiv"));
        $();
    </script>

##属性操作##
    原生操作ji属性
      setAttribute（）；
      getAttribute（）；
    ##jq操作属性##
      attr（）； 自定义属性
      prop（）；标准属性

##文本属性##
    text（）
    html（）
    val（）

##尺寸-位置##
    width（）计算宽度值
    innerwidth（）匹配当前元素内部区域宽度
    outerwidth（） 匹配元素外部区域
    outerwidth（true）计算边距在内 widyh_+padding+ border + margin

##位置##
    position（）匹配元素相对于父元素偏移
    offset（）相对于文档偏移

##卷入语法##
    scroll
    当用户滚动指定事件，触发
    scrollTop（）被卷曲的高度

##jq增删改##
    append（）添加 向元素内部追加
    prepend（）向元素内部前置添加
    before（）向元素之前插入
    after（）向元素之后插入
    remove（）删除
    clone（）克隆

[1]: https://z3.ax1x.com/2021/07/07/RHw76K.jpg

END

最后修改：2021 年 09 月 08 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

cuakdyolrw
博主真是太厉害了！！！
dwhnhwozkw
博主真是太厉害了！！！
ngkthyfpqb
博主真是太厉害了！！！
挺胸的男士
哈哈哈哈
挺胸的男士
?

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

Jquer的常用方法..

Moody • 2021 年 06 月 20 日

![jquery][1]

##JQ入口函数##
    $(function(){})
    $(document).ready(function(){})

##注册事件##
    $(xx).on('事件名',处理函数)；
    事件委托 $(父盒子).on('事件名',‘筛选器’,处理函数)；

##操作类样式##
    addClass 添加
    removeClass 删除
    toggleClass 切换
    hasclass 查找有返回true

##显示隐藏##
    show（）显示
    hide（）隐藏
    toggle（）切换

##滑入滑出##
    slideDown（）滑入
    slideUp（）滑出
    slideToggle（）切换

##淡入淡出##
    fadeIn（）淡入
    fadeOut（）淡出
    fadeToggle（）切换
    fadeTo（） 透明度

stop() 停止
    animate（）动画

##事件解绑##
    off（） 不传参全部解绑 ， 传参解绑指定事件

##one方法##
    $("#btn1").one("click", function() {
    console.log("--------------");
    });

##对象拷贝##
    $.extend(新对象 ， 被复制的对象 );
    $.extend(true， 新对象 ， 被复制的对象 );

console.log(zs("#myDiv"));
        $();
    </script>

##属性操作##
    原生操作ji属性
      setAttribute（）；
      getAttribute（）；
    ##jq操作属性##
      attr（）； 自定义属性
      prop（）；标准属性

##文本属性##
    text（）
    html（）
    val（）

##位置##
    position（）匹配元素相对于父元素偏移
    offset（）相对于文档偏移

##卷入语法##
    scroll
    当用户滚动指定事件，触发
    scrollTop（）被卷曲的高度

[1]: https://z3.ax1x.com/2021/07/07/RHw76K.jpg

Jquer的常用方法..

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

GIT的基本命令.

Mac 自带终端美化教程（oh my zsh）+ 配置

如何实现jwt鉴权机制

Office正版永久免费使用详细教程

Ajax

Jquer的常用方法..

Rust 方法和特性概览

Ajax

Mac 自带终端美化教程（oh my zsh）+ 配置

docker 简单入门。

Jquer的常用方法..

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Jquer的常用方法..

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款