1. 内部插入方法
// 获取boxlet$box=$('.box')// 给append按钮注册点击事件$('.append').click(function(){// 创建一个p标签let$p=$('<p>')$p.text('append')// append()方法，用于在元素的内部的下面插入元素// 方式：A.append(B) 就是将B插入到A里面的下面$box.append($p)})// 给appendTo按钮注册点击事件$('.appendTo').click(function(){// 创建一个p标签let$p=$('<p>')$p.text('appendTo')// appendTo()方法，也是用于在元素的内部的下面插入元素// 方式：A.appendTo(B) 就是将A插入到B里面的下面$p.appendTo($box)})// 给prepend按钮注册点击事件$('.prepend').click(function(){// 创建一个p标签let$p=$('<p>')$p.text('prepend')// prepend()方法，用于在元素的内部的上面插入元素// 方式：A.prepend(B) 就是将B插入到A里面的上面$box.prepend($p)})// 给prependTo按钮注册点击事件$('.prependTo').click(function(){// 创建一个p标签let$p=$('<p>')$p.text('prependTo')// prependTo()方法，也是用于在元素的内部的上面插入元素// 方式：A.prepend(B) 就是将A插入到B里面的上面$p.prependTo($box)})
2. 外部插入方法
// 获取boxlet$box=$('.box')// 给after按钮注册点击事件$('.after').click(function(){// 创建一个p标签let$p=$('<p>')$p.text('after')// after()方法，用于在元素外面的下面插入元素// 方式：A.after(B)，是将B插入到A的下面$box.after($p)})// 给insertAfter按钮注册点击事件$('.insertAfter').click(function(){// 创建一个p标签let$p=$('<p>')$p.text('insertAfter')// insertAfter()方法，也是用于在元素外面的下面插入元素// 方式：A.insertAfter(B)，是将A插入到B的下面$p.insertAfter($box)})// 给before按钮注册点击事件$('.before').click(function(){// 创建一个p标签let$p=$('<p>')$p.text('before')// before()方法，用于在元素外面的前面插入元素// 方式：A.before(B)，是将B插入到A的前面$box.before($p)})// 给insertBefore按钮注册点击事件$('.insertBefore').click(function(){// 创建一个p标签let$p=$('<p>')$p.text('insertBefore')// insertBefore()方法，也是用于在元素外面的前面插入元素// 方式：A.insertBefore(B)，是将A插入到B的前面$p.insertBefore($box)})
3. 扩展方法
// 从后台返回的手机号码lettel_no='15912345678'$('.tel').text($.telEncry(tel_no))// 从后台返回换一个时间letdate=newDate()$('.time').text($.getMiniDate(date))console.log('------------------------');letgdz={sayHi:function(){console.log('我叫高德正');}}letyrl={play:function(){console.log('我会玩...');}}letwx={eat:function(){console.log('我很能吃...');}}// extend方法，传一个对象，表示将该对象的成员扩展给jquery// 传多个对象，表示将后面对象的成员扩展给第一个对象。$.extend(gdz,yrl,wx)console.log(gdz);// $ 表示jquery自身对象// $(选择器) 表示jquery包装过后的dom对象$('.tel').red()$('.time').green()
4. on方法和off方法
// on方法，可以通过父级给子级注册事件方法，并且可以注册多个functiontext(){$(this).html('我是box1')}functioncolor(){$(this).css('color','green')}$('.box').on('click','.box1',text)$('.box').on('click','.box1',color)// off方法，可以通过父级移除子级里面的事件方法$('.box').off('click',color)// on方法的第二个参数不传，就是给自己添加事件$('.box2').on('click',function(){$(this).html('哈哈！我是box2')})$('.box2').on('click',function(e){e.stopPropagation()$(this).css('color','blue')})
5. 节流方法和防抖方法
// 在指定的时间内只触发一次行为：节流lettime1=null//定义一个节流时间$('.jl').mousemove(function(){if(newDate()-time1>=1000){console.log('节流移动...');// 触发一次行为后，更新节流时间time1=newDate()}})// 连续行为只触发一次：防抖lettime2=null//定义一个防抖时间$('.fd').mousemove(function(){if(newDate()-time2>=1000){console.log('防抖移动...');}// 更新防抖时间time2=newDate()})
