jQuery详细知识点汇总

概念

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开始
  

排他思想

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

同样效果用原生javascript实现

var button = document.querySelectorAll('button')
        for(var i =0;i<button.length;i++){
            button[i].onclick = function(){
                for(var j=0;j<button.length;j++){
                    button[j].style.backgroundColor = ""
                }
            this.style.backgroundColor = "red"
            }
        }

样式操作

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

jQuery动画效果

• 自定义动画 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()
        })

对象拷贝

多库共存