jQuery知识点

jQuery

jQuery官网：https://www.jquery123.com/
jQuery中文网：https://www.jquery123.com/

jQuery对象

• $=jQuery
• 获取元素：$('选择器')
• 页面dom加载完毕：$(function() {...})
• DOM对象：通过原生方式获取到的
• jQuery对象：通过$('选择器')获取到的 【jQuery对象是以伪数组形式存储的】
• DOM对象转为jQuery对象：$(DOM对象)
• jQuery对象转为DOM对象：$('选择器').[index] 或 $('选择器').get(index)
• jQuery对象只能使用jQuery方法，DOM对象只能使用原生javascript属性和方法''

jQuery选择器

• 普通选择器

  • 全选 $('*')
  • 标签 $('tagName')
  • id $('#idName')
  • 类 $('.className')
  • 并集 $(' div,p,li')
  • 交集 $('nav.item')
  • 子代 $('ul>li')
  • 后代 $('ul li')

• jQuery筛选选择器

  • :first $('li:first') 第一个li元素
  • :last $('li:last') 最后一个li元素
  • :eq(index) $('li:eq(2)') 获取到的li中，索引是2的li元素
  • :odd $('li:odd') 获取到的li中，索引是奇数的li元素
  • :even $('li.even) 获取到的li中，索引是偶数的li元素

• jQuery筛选方法

  • parent() $('li').parent() 查找父级
  • children(selector) $('ul').children('li') 相当于 $('ul>li')
  • find(selector) $('ul').find('li') 相当于 $('ul li')
  • siblings(selectror) $('.first').siblings('li') 查找兄弟节点，不包括本身
  • nextAll([expr]) $('.first').nextAll() 查找.first元素之后的所有同辈元素
  • prevtAll([expr]) $('.last').prevtAll() 查找.last元素之前的所有同辈元素
  • hasClass(className) $('div').hasClass('aa') div中是否有类aa,有返回true
  • eq(index) $('li').eq(2) 相当于 $(li:eq(2))

补充

• 当前元素： $(this)
• 当前元素的索引号： $(this).index()
• 注册事件 ： $('选择器').事件(function(){...})
• 事件切换：hover([over],out) 【over相当于mouseenter,out相当于mouseleave】

element.hover(function(){},function(){})//第一个function相当于mouseenter,第二个相当于mouseleave
element.hover(function(){})//如果只写一个function那么，鼠标进入和离开都会触发这个函数

操作jQuery样式

获取样式值：element.css('样式属性')

设置样式：

• element.css('样式属性','值') 【如果值是数值可以直接写数字】
• element.css({样式属性:'值';样式属性:'值';...})【如果值是数值可以直接写数字,复合属性按驼峰命名法写】

添加类:element.addClass('className')

删除类:element.removeClass('className')

切换类:element.toggleClass('className')

【jQuery中的类操作，不影响原来的类】

jQuery动画

显示隐藏

• show([speed],[easing],[fn])

  【speed:'slow','normal','fast',或者毫秒数

  easing:'swing','linear'

  fn:是回调函数

  这些参数一般不写】

• hide()

• toggle()

滑动

• slideDown()
• slideUp()
• slideToggle()

淡入淡出

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo(time,transparency) 修改透明度，这两个参数必须写时间是毫秒，透明度是数值

停止动画

stop() 【停止上一次动画，该方法必须写在动画之前】

自定义动画

animate(params,[speed],[easing],[fn]) 【params是一个对象，想要修改的样式；后面三个参数可有可无】

 // 例如
    $('div').animate({
          left: 500,
          top:300,
          opacity:.5,
        },500)

jQuery属性操作

• 获取固有属性值：element.prop("属性名")

• 设置固有属性值：element.prop("属性名","属性值")

• 获取自定义属性值：element.attr("属性名") 【自定义和以data-开头的 都可以】

• 设置自定义属性值：element.attr("属性名","属性值")

• 获取数据函数：element.data('key')

• 设置数据缓存 ：element.data('key',value)

    //【data()数据是存放在元素的内存里面的，如果获取的是以data-开头的，获取或设置时data-可以省略】
    // <div index="1" data-index="2">我是div</div>
    // <span>123</span>

      $('span').data('uname', 'kris')
      console.log($('span').data('uname'));
      console.log($('div').data('index'));

jQuery文本属性

• 获取元素内容：element.html()*

• 设置元素内容：element.html('内容')

• 获取元素文本内容：element.text()

• 设置元素文本内容：element.text('文本')

• 获取表单值：element.val()

• 设置表单值：element.val('value')

jQuery元素操作

遍历元素

• object.each(function(index,domElement){...})
• $.each(object,function(index,domElement){...}) 【主要用于遍历数据(数组，对象)，处理数据】
• 【index是索引号；domElement是每一个DOM对象,不是jQuery对象】

创建元素

$("<tagName></tagName>")

添加元素

• 内部添加：

• element.append(内容) 【把内容放在element内部的最后】
• element.prepend(内容) 【把内容放在element内部的最前】

• 外部添加：

• element.after(内容) 【把内容放在element的后面】
• element.before(内容) 【把内容放在element前面】

删除元素

• element.remove() 删除element本身
• element.empty() 删除element中的所有子节点 【删除孩子】
• element.html("") 清除element中元素内容 【删除孩子】

jQuery大小-位置操作

jQuery事件

jQuery事件注册

//单个事件（mouseover,mouseout,blur,focus,change,keydown,keyup,resize,scroll)
element.事件(function(){...})

jQuery事件处理

• 注册事件

//语法
element.on(events,[selector],function(){...})//selector是element的子元素选择器
//例如：
 $('div').on({
      mouseenter: function () {
     ...
      },
      click: function () {
       ...
      }
    })
//如果多个事件处理程序一样，多个事件之间用空格隔开
$('div').on("click mouseover",function(){...})      

//on可以实现事件委托（委派）        
     $('ul').on('click', 'li', function () {
        console.log(1111);
      })
      // click绑定在ul身上，但是触发的对象是ul中的li
                                         
// on可以给动态创建的元素绑定事件
      $('ol').on('click', 'li', function () {
        console.log(22222);
      })
      let li = $("<li>我是后来的li</li>")
      $('ol').append(li)

• on可以实现事件委托（委派）

• on可以给动态创建的元素绑定事件

• 解绑事件

  element.off()//解绑element身上的所有事件
  element.off("事件1")//解绑element身上的事件1
  element.off("事件1",[selector])//解绑了element的子选择器selector身上的事件1
  //例如
    $("ul").off("click","li")
  

• one() 事件只能触发一次

//语法
element.one(event,function(){...})
//例如
      $('p').one("click", function () {
        console.log("p");
      })

• trigger()自动触发事件
  • element.事件()
  • element.trigger("事件")
  • element.triggerHandler("事件") 【不会触发元素默认行为】

  $("span").on("click",function() {
    alert(1111)
  })
      // $("span").click()
      // $("span").trigger("click")
      $("span").triggerHandler("click")

jQuery事件对象

element.on(events,[selector],function(e){console.log(e)})//selector是element的子元素选择器
//e就是事件对象

阻止默认行为：e.preventDefault()或者return false

阻止冒泡：e.stopPropagation()

jQuery对象拷贝

• $.extend([true/false],target,object1,object2...)
• true表示深拷贝，false表示浅拷贝,如果不写默认是false
• 把object...拷贝给taget

jQuery多库共存

• $相当于jQuery

• const xx =$.onConflict() 【此时xx就相当于是jQuery也就是$】

jQuery插件

jQuery之家： http://www.htmleaf.com/

jQuery插件库：http://www.jq22.com/

jQuery元素大小

• element.width()/height() 【width】
• element.innerWidth()/innerHeight() 【width+padding】
• element.outerWidth()/outerHeight() 【width+padding+border】
• element.outerWidth(true)/outerHeight(true) 【width+padding+border+margin】

jQuery元素位置

offset()获取或设置元素相对于文档的偏移量

• 获取：element.offset().top/left
• 设置：element.offset({top:xx,left:xx})

position()获取元素相对于带有定位父级的偏移量(如果父级没有定位，为文档为准)

• 获取：element.position().top/left

scrollTop()/scrollLeft() 获取或设置元素被卷去的头部/左侧

• 获取：element.scrollTop()/scrollLeft()

• 设置：element.scrollTop(值)/scrollLeft(值)

• 带有动画的返回顶部：element.animate({scrollTop:0})

 //元素才能做动画
      $('html,body').stop().animate({
          scrollTop: 0
        })