jQuery-知识点

陆玖柒
126 阅读5分钟

jQuery简介

jQuery是一个高效、精简并且功能丰富的JavaScript工具库。
query本身是选择的意思，主要对JavaScript中的选择元素的方法进行了大量的优化。

入口函数

当dom结构加载完毕之后立刻执行

$(function(){}) //第一种方法 较为常用

$(document).ready(function(){}) //第二种方法

与window.onload相比

  • 执行时机更早 只要元素结构加载完毕之后就执行
  • 多次添加不会覆盖
  • 可以简写：$(function(){})

jq对象和dom对象

jq的方法和dom方法不能相互混用

相互转换

dom转为jq $(dom元素)

jq转dom jq对象的本质是一个伪数组，里面的每一个成员都是dom元素$jq[索引] $jq.get(索引)

基础选择器

$('id选择器')
$(标签选择器')
$('类选择器')
$('元素 > 子元素')  //子代选择器
$('元素  后代元素')  //后代选择器
$('选择器.选择器') //交集选择器
$('选择器，选择器，选择器....') //并集选择器

筛选选择器

:eq(索引)，索引从0开始
:first:取第一个
:last:取最后一个
:odd:奇数个元素
:even:偶数个元素，第一个元素是索引0

筛选方法

children() //如果没有参数，获取所有的直接子元素，如果有参数就获取指定类型的子元素
find() //如果没有参数，获取所有的后代元素，如果有参数就获取指定类型的后代元素
parent() //获取直接父元素，只能获取一级
parents() //获取所有父级元素 参数选父元素即可
eq() //获得索引对应的元素 索引从0开始
siblings() //获取当前元素的所有兄弟元素(不包含自己)
next() //下一个元素
nextAll() //后面所有的兄弟元素
prev() //上一个
prevAll() //前面所有的兄弟元素

样式操作

css

$jq.css(样式名称，样式值) //单组样式
$jq.css({样式名称：值，样式名称：值}) //多组样式
$jq.css(样式名称) //只能获取满足条件的第一个元素的样式

类名操作

addClass //添加样式
removeClass //移除样式
toggleClass //切换样式，如果没有就添加，如果有就移除
hasClass //判断元素是否有某个名称的样式，如果有就返回true,否则返回false

动画

参数

fadeIn|fadeOut|fadeToggle[speed,[easing],[fn]]) 参数都可以省略。

  1. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  2. easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  3. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

显示隐藏

show() //显示
hide() //隐藏
toggle() //切换
//细节：如果没有传递参数，则没有动画

展开合并

slideDown() //向下展开
slideUp() //向上展开
slideToggle() //切换向上、向下展开
//细节：如果没有传递参数也有默认的动画

淡入淡出

fadeIn() //透明度从0 到1
fadeOut() //透明度从1到0
fadeToggle() //切换透明度
fadeTo() //到指定的0-1之间的透明度 opacity 透明度必须写，取值 0~1 之间。

自定义动画

实现位置，或者大小等数值动画

语法：animate({样式属性}，时间，速率曲线，回调函数)

动画队列和停止动画

所有触发的动画都会添加到动画队列，队列中的动画会依次执行

stop停止动画，将当前动画之前的所有动画都停止

代码：写在动画之前

// 为每个li元素添加事件
      $lis.on('mouseenter', function () {
        $(this).stop().animate({ width: 800 }).siblings().stop().animate({ width: 100 })
      })
      // 鼠标移出事件
      $('#box').on('mouseleave', function () {
        $lis.stop().animate({ width: 240 })
      })

属性操作

prop

  • 操作内置属性，对自定义属性不起作用
  • prop(属性名称)：获取指定的属性值
  • props(属性名称，值)：为指定的属性设置值

attr

  • 可以操作内置属性，也可以操作自定义属性，建议只操作自定义属性
  • attr(属性名称)：获取指定的属性值
  • attr(属性名称，值)：为指定的属性设置值

data

  • 实现数据缓存，可以在元素上添加属性但是不会影响dom结构(看不到，但果可以获取到)
  • data():可以获取所有元素上设置的自定义属性值，并且返回一个对象

细节：对于checked,disabled,selected只能使用prop来操作

内容文本值

text()

  • 获取或设置标签之间的文本内容，将内容当成普通字符串处理
  • text()没有参数就是获取
  • text()有参数就是设置

html()

  • 获取或设置标签之间的文本内容，如果有html结构会解析结构
  • html()没有参数就是获取，获取到的是html结构
  • html()有参数就是设置，如果有html结构会解析结构

val()

  • 主要是操作表单元素
  • 设置或获取表单元素的value属性
  • 如果没有参数就是获取，有参数就是设置

元素操作

遍历

$.each(object,funciton(index,value){}):可以遍历对象，也可以遍历数组

jq对象.each(function(index,value){})

创建对象

$('标签结构')

添加对象

添加做父子

prepend():添加做为第一个子元素

append():添加做为最后一个子元素 //父元素.append(子元素)

添加做兄弟

before():放在元素的前面 

after:放在元素的后面 //元素.after(要放的元素)

删除对象

remove():自己也干掉，子元素也干掉

empty():只干掉子元素，保留自己

html(''):覆盖内容，清除内容

尺寸、位置操作

尺寸

image.png

offset

offset() 设置或获取元素偏移

offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。返回一个对象

可以设置元素的偏移：offset({ top: 10, left: 30 });

position() 获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。

该方法只能获取

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

scrollTop() 方法设置或返回被选元素被卷去的头部。

多库共存

jQuery使用作为标示符，但是如果与其他框架中的作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权

var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

当调用text()方法后，方法返回的对象已经不再是原始的$(this)了，这个时候可以使用prevObject或者end()方法进行修正

avatar
文章
阅读
粉丝