jQuery

Posted 2020-12-13 52580587zl

元素操作

　　1-创建元素

　　　　var div = $(‘<div></div>‘)

　　2-内部插入元素

　　　　（1）append( )向div元素中插入一个p元素，放在最后

　　　　　　$(‘div‘).append($(‘<p></p>‘))

　　　　（2）appendTo( )把p元素插入到div中，放在最后

　　　　　　$(‘<p></p>‘).appendTo($(‘div‘))

　　　　（3）prepend()向 div 元素中插入一个 p 元素，放在最前

　　　　　　$(‘div‘).prepend($(‘<p></p>‘))

　　　　（4）prependTo() 把 p 元素插入到 div 中去，放在最前

　　　　　　$(‘<p>hello</p>‘).prependTo($(‘div‘))

　　3-外部插入元素

　　　　（1）after（） 在 div 的后面插入一个元素 p

　　　　　　$(‘div‘).after($(‘<p></p>‘))

　　　　（2） before（）在 div 的前面插入一个元素 p

　　　　　　$(‘div‘).before($(‘<p></p>‘))

　　　　（3） insertAfter( )把 p 元素插入到 div 元素的后面

　　　　　　$(‘div‘).insertAfter($(‘<p></p>‘))

　　　　（4）insertBefore( )把 p 元素插入到 div 元素的前面

　　　　　　$(‘div‘).insertBefore($(‘<p></p>‘))

　　4-替换元素

　　　　（1）replaceWith（） 把 div 元素替换成 p 元素

　　　　　　$(‘div‘).replaceWith($(‘<p></p>‘))

　　　　（2） replaceAll（）用 p 元素替换掉 div 元素

　　　　　　$(‘<p></p>‘).replaceAll($(‘div‘))

　　5-删除元素

　　　　（1）empty（）删除元素下的所有子节点

　　　　　　$(‘div‘).empty()

　　　　（2）remove( )把自己从页面中移除

　　　　　　$(‘div‘).remove()

　　6-克隆元素 clone（）

　　　　　　克隆一个 li 元素

　　　　　　接受两个参数

　　　　　　参数1： 自己身上的事件要不要复制，默认是 false

　　　　　　参数2： 所有子节点身上的事件要不要复制，默认是 true

　　　　　　$(‘li‘).clone(  )

元素尺寸

　　原生js中没有元素相对页面的位置，有鼠标相对于页面的位置

　　1-操作元素的宽和高width（）、height（）不传参数是获取值，传入参数是设置值；获取时不含border和padding的值

　　　　$（‘div‘）.height()  或 $（‘div‘）.height(20px)

　　　　$(‘div‘).width( ) 或 $(‘div‘).width(30PX )

　　2-获取元素内置的宽和高,包含padding，不包含border

　　　　$(‘div‘).innerHeight( )

　　　　$(‘div‘).innerWidth()

　　3-获取元素外置的宽和高:outWidth()、outHeight()，可传入参数true或false.

　　　　不传参数时：只包含padding、border，传入true时包含padding、border、margin。

　　　　// 获取 div 元素内容位置的宽，包含 padding 和 border

　　　　$(‘div‘).outerWidth()

　　　　// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin

　　　　$(‘div‘).outerWidth(true)

元素位置

　　　1-元素相对页面的位置 offset（）

　　　　可以获取元素相对页面的位置，得到的是一个对象

　　　　传入值时，可以设置元素相对页面的位置

　　　　// 获取 div 相对页面的位置

　　　　$(‘div‘).offset() // 得到的是以一个对象 { left: 值, top: 值 }

　　　　// 给 div 设置相对页面的位置

　　　　$(‘div‘).offset({ left: 100, top: 100 })

　　　　// 获取定位到一个距离页面左上角 100 100 的位置

　　2-元素相对于父元素的偏移量 position（）

　　　　// 获取 div 相对于父元素的偏移量（定位的值）

　　　　$(‘div‘).position()

　　3-获取页面卷去的高度和宽度

　　　　window.onscroll = function () {

   　　　　 // 获取浏览器卷去的高度

   　　　　 console.log($(window).scrollTop())

　　　　　　}

　　　　window.onscroll = function () {

 　　　　   // 获取浏览器卷去的宽度

  　　　　  console.log($(window).scrollLeft())

　　　　　　}

元素事件

　　　　原生js中的事件都可以用，使用时不加on

　　　　$(‘button‘).click(function(){})

　　　　hover事件：鼠标的移入移出

 　　　　$(‘button‘).hover(function(){

        　　 console.log(‘移入‘) },function(){

        　　 console.log(‘移出‘) })

  可以用事件委托

　　　　例：给ul添加事件委托,使得button有点击事件

　　　　$(‘ul‘).on(‘click‘,‘button‘,function(){

　　　　Console.log(22)})

　　事件解绑

　　　　$(‘ul‘).off(‘click‘,‘button‘)

　　或者用delegate来进行事件委托

　　　　 $(‘ul‘).delegate(‘button‘,‘click‘,function(e){

         　　　　   console.log(3333) })

　　给事件只绑定一次：one

　　　　$(‘button‘).one(‘click‘,function(){  })

　　　　button的点击事件只触发一次

　　模拟触发事件：trigger

 　　　  $(‘button‘).trigger(‘click‘)//模拟触发点击

　　页面加载完毕：ready

　　

 

 

 

元素动画

　　括号中可以传3个参数（‘毫秒’，‘速度’，回调函数）

1. 给元素绑定一个隐藏动画hide

　　　　元素本身是display：block的状态，可以将其隐藏

　　　　$(‘div‘).hide( )// 给 div 绑定一个隐藏的动画

　 　2.给元素绑定一个显示动画 show

　　　　元素本身是display：none的状态，可以将其显示

　　　　$(‘div‘).show( )// 给 div 绑定一个显示的动画

　　3.给元素绑定一个切换动画 toggle

　　　　元素本身是显示，那么就隐藏，本身是隐藏那么就显示

　　　　$(‘div‘).toggle( )// 给 div 绑定一个切换的动画

　　4.显示改变高度slideDown（）

　　　　　　通过改变高度进行显示

　　5.隐藏改变高低slideUp（）

　　　　　　通过改变高度进行隐藏

　　 6.切换slide：slideToggle（）

　　　　　　通过改变高度，进行切换

　　 7.通过透明度进行隐藏、显示、切换的动画

　　　　fadeOut() 隐藏

　　　　fadeIn() 显示

　　　　fadeToggle()切换

　　　　fadeTo()  将透明度设置成多少

　　8.自定义动画：animate

  　　  $("#box").animate(

      　　   {width: 200,height: 200,

     　　　　  },   2000,

        　　 function () {

          　　　　 console.log("动画执行完毕");  } );

　　9.立刻停止动画 stop （）将其停在当前状态

　　10.立刻结束动画finish（）将动画停止在结束状态