jQuery(2)

元素操作

  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

  jQuery(2)

 

 

 

元素动画

  括号中可以传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()将动画停止在结束状态

jQuery(2)

上一篇:关于jQuery AJAX get() ,post() ,ajax()方法用法


下一篇:webpack的入门实践,看这篇就够了