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
        })

jQuery知识点

jQuery

jQuery对象

jQuery选择器

普通选择器

jQuery筛选选择器

jQuery筛选方法

补充

操作jQuery样式

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

设置样式：

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

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

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

jQuery动画

显示隐藏

滑动

淡入淡出

停止动画

自定义动画

jQuery属性操作

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

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

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

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

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

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

jQuery文本属性

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

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

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

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

获取表单值：element.val()

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

jQuery元素操作

遍历元素

创建元素

添加元素

删除元素

jQuery大小-位置操作

jQuery事件

jQuery事件注册

jQuery事件处理

jQuery事件对象

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

阻止冒泡：e.stopPropagation()

jQuery对象拷贝

jQuery多库共存

jQuery插件

jQuery元素大小

jQuery元素位置

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

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

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

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

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