jQuery详细知识点汇总

淩亂°似流年 2022-11-21 04:08 259阅读 0赞

## 概念 ##

jQuery是一个快速、简洁的javascript库，宗旨为 Write less. Do more

## 特点 ##

*  轻量级，文件小
 *  跨浏览器兼容
 *  链式编程、隐式迭代
 *  对事件、样式、动画支持，简化了DOM操作
 *  支持插件扩展开发

## 基本使用 ##

入口函数：等着页面DOM加载完毕后再执行js代码

$(document).ready(function () { 
                $('div').hide()
    })

$(function(){ 
                $('div').css('backgroundColor','green')
    })

## 顶级对象 ##

*  $是jQuery的别称
 *  $同时也是jquery顶级对象，相当于原生javascript中的window,把元素用其封装成jQuery对象，就可以调用jquery对象

## DOM对象和jQuery对象转换 ##

*  DOM对象：原生js获取的对象，可以使用 javasctipr的属性和方法
 *  jQuery对象，通过jQuery方法获取，只可以使用jQuery方法

DOM对象
     var div = document.querySelector('div')
     
     jQuery对象
     $('div')

## 转换 ##

*  DOM对象转换成jQuery对象 ： $(DOM对象)
 *  jQuery对象转换成DOM对象  
    1. $('div‘)\[index\]  
    2. $(‘div’).get(index)

## 选择器 ##

*  子代选择器： $(“div>li”)
 *  后代选择器： $("div li ")

## 隐式迭代 ##

*  定义：遍历内部DOM元素（伪数组形式储存）的过程叫做 隐式迭代
 *  理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环操作

## 筛选选择器 ##

*  :first  
    $(“li:first”) 获取第一个li元素
 *  :last  
    $(“li:last”)获取最后一个li元素
 *  :eq(index)  
    $(“li:eq(2)”)获取到的li元素中，索引号为2的元素，索引号从0开始  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU_size_16_color_FFFFFF_t_70_pic_center]

## 排他思想 ##

$(function(){ 
                $('button').click(function(){ 
                //当前元素背景颜色更改为黄色
                    $(this).css('background','yellow')
                //其他元素背景颜色改为之前的默认
                    $(this).siblings('button').css('background','')
                })
            })

同样效果用原生javascript实现

## 样式操作 ##

*  参数只写属性名，则返回属性值  
    $(‘div’).css(“width”)
 *  参数是属性名和属性值，逗号隔开  
    $(‘div’).css(“height”,“100px”)
 *  参数是对象形式，设置多组属性，属性名和属性值用冒号，属性之间用逗号
 *  操作类样式  
    添加类 $(“div”).addClass(“current”)  
    删除类 $(“div”).removeClass(“current”)  
    切换类 $(“div”).toggleClass(“toggle”),可配合transition动画使用

## jQuery动画效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU_size_16_color_FFFFFF_t_70_pic_center 1]

*  自定义动画 animte  
    animate(params,\[speed\],\[easing\],\[fn\])

## 属性操作 ##

*  自有属性 $(“a”).prop(“href”)
 *  自定义属性，类似 js中 getAttribute() 与 setAttribute()  
    attr(“属性”), attr(“属性”，“属性值”)  
    $(“index”)  
    $(“index”,“3”)

## 内容文本值 ##

*  获取元素内容 html()
 *  获取元素文本内容 text()

## 元素操作 ##

*  遍历元素  
    1.$(“div”).each(function(index,DOMEle)\{XXX\})

$(function(){ 
                $("div").each(function(index,domEle){ 
                    console.log("你真棒");
                })
            })

注意：domEle是一个dom对象，需要转换成dom对象 ，$(jquery对象)

2.$.each(function(index,DOMEle){xxx}),此方法与上面方法功能一样，此方法更侧重处理数据

$.each(function(index,DOMEle){ 
                console.log("计算请用我")
            })

## 创建、添加、删除元素 ##

*  创建元素

var li = $("<li></li>")

*  内部添加元素  
    1.前面添加  
    2.后面添加

$("ul").prepend(li)
    $("ul").append(li)

*  外部添加元素

var div = $("<div>后妈生的</div>")
            $('.test').after(div)
            $('.test').before(div)

*  删除、清空元素

$("ul").remove()
    $("ul").empty()  =  $("ul").html('')

## 事件注册 ##

*  element.事件（function()\{\}）$(“div”).click(function()\{\})
 *  element.on(“事件”，\[selector\],function()\{\})

$("div").on({  
                mouseOver:function(){ 
                    console.log("over执行了")
                }, mouseDown:function(){ 
                    console.log("down执行了")
                }}
            )

*  on()注册事件的优势：可以绑定多个事件；可以事件委派操作 ；可以给动态创建的元素绑定事件

$("ul li").onclick(function(){ 
                console.log("绑定在li身上的事件触发了");
            }) $("ul").on("click","li",function(){ 
                console.log("绑定在ul身上，实际上li触发的事件执行了")
            })

## 事件解绑 ##

*  off()
 *  `$("div").off()`div身上所有事件都已解绑
 *  one(),事件只可触发一次

## 自动触发事件 ##

*  元素.事件（）
 *  元素.trigger(“事件”)
 *  元素.triggerHandler(“事件”)，不会触发元素的默认事件

## 事件对象 ##

*  element.on(events,\[selector\],function(event)\{\})
 *  阻止默认事件 event.preventDefault()
 *  阻止冒泡事件 event.stopPropogation()

$(document).on("click",function(){ 
                console.log("点击了Document");
            }) $("div").on("click",function(event){ 
                console.log("点击了div");
                event.stopPropagation()
            })

## 对象拷贝 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU_size_16_color_FFFFFF_t_70_pic_center 2]

## 多库共存 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/bd68bbe9f5554159b5733d2d77932034.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020103017565616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201031125727292.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201031125853910.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pa2VfOTU=,size_16,color_FFFFFF,t_70#pic_center