jQuery基础知识概述

发布时间:2019-05-24 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了jQuery基础知识概述脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1.了解jQuery

  • 是什么? :

    • 一个JS函数库:wrITe less,do more

    • 封装简化DOM操作

  • 为什么要用它?:

    • 强大的选择器:方便快速的查找DOM元素

    • 隐式遍历:可以一次操作多个元素

    • 读写合一:读数据/写数据用的是一个函数

    • 链式调用:可以通过 . 不断的调用jquery对象的方法

    • 事件处理

    • DOM操作

    • 样式操作

    • 动画

    • 浏览器兼容

  • 如何使用:

    • 引入jquery库

      • 本地引入和CDN远程引入

    • 使用jQuery

      • 使用jQuery函数:$或jQuery

      • 使用jQuery对象:$xxx(执行$()得到的)

2.jQuery的两把利器

  • 1.jQuery核心函数

    • 理解:

      • 即:$或jQuery

      • jQuery 定义了这个全局的函数供我们使用,它既可以作为一般函数调用,切传递的参数类型不同/格式不同,功能就完全不同
        也可以作为对象调用其定义好的方法,此时$就是一个工具对象

    • 作为函数调用$( ):

      • 1.参数为函数:当DOM加载完成后,执行此回调函数

      • 2.参数为选择器字符串:查找所有匹配的标签,并将其封装成jQuery对象

      • 3.参数为DOM对象:将DOM对象封装成jQUERY对象

      • 4.参数为htML标签字符串(用的少):创建标签对象,并封装成jQuery对象

    • 作为对象使用$.xxx( ):

      • 发送ajax请求的方法:

        • $.ajax()

        • $.get()

        • $.post()

        • ......

      • 其他工具方法:

        • $.each():隐式遍历数组

        • $.trim():去除字符串两端的空格

        • $.parseJSON():将JSON格式的字符串转化为对应的JavaScript对象

        • ......

  • 2 jQuery核心对象

    • 理解:

      • 即:执行jQuery核心函数返回的对象

      • jQuery对象内部包含的是DOM元素对象的伪数组(可能只有一个元素),jQuery对象拥有很多的属性和方法,让程序员更方便快捷的操作DOM

    • 属性/方法:

      • 基本行为:

        • size()/length:包含的DOM元素个数

        • [index]/get(index):得到对应位置的元素

        • each():遍历包含的所有DOM元素

        • index():得到在所在兄弟元素中的下标

      • 属性:操作内部标签的属性或值

      • CSS:操作标签的样式

      • 文档:对标签进行增删改操作

      • 筛选:根据指定的规则过滤内部的标签

      • 事件:处理事件监听

      • 效果:实现动画效果

3.使用jQuery核心函数

  • 选择器

    • 是什么,怎么用?

      • 具有特定规则(css选择器)的字符串

      • 用来查找DOM元素:$(selecter),根据选择器规则在整个文档中查找所有匹配的元素的数组,并将其封装成jQuery对象返回

      • 只有调用$(),并将选择器作为参数传入才能起作用

    • 分类

      • 基本选择器

        • #id:id选择器

        • element:元素选择器

        • .class:属性选择器

        • *:任意元素

        • selecter1,selecter2,selecterN:组合选择器

        • selecter1selecter2selecterN:相交选择器

      • 层次选择器--查找子元素,后代元素,兄弟元素的选择器

        • ancestor descendant 在给定的祖先元素下的后代元素中匹配元素

        • parent>child:在给定的父元素下的子元素中匹配元素

        • prev+:匹配下一个兄弟元素

        • PRev~:匹配后面所有兄弟元素

      • 过滤选择器--在原有选择器匹配的元素中进一步进行过滤的选择器

        • :First

        • :last

        • :eq(index)

        • :lt

        • :gt

        • :odd

        • :even

        • :not(selector)

        • :hidden

        • :visible

        • [attrName]

        • [attrName=value]

        • ......

      • 表单选择器

        • 表单:

          • :input

          • :text

          • :checkbox

          • :radio

          • :checked: 选中的

          • ......

        • 表单对象属性

          • :enabled

          • :disabled

          • :checked

          • :selected

  • 工具

    • $.each():遍历数组或对象中的数据

    • $.trim():去除字符串两边的空格

    • $.tyPE(obj):得到数据的类型

    • $.isarray():判断是否是数组

    • $.isFunction:判断是否是函数

    • ......

  • ajax

    • ajax()

    • get()

    • post()

    • ......

4.使用jQuery对象

  • jQuery对象使用特点

    • 链式调用:调用jQuery对象的任何方法后返回的还是当前jQuery对象,可以多次调用

    • 读写合一:读:内部第一个 DOM元素, 写:内部所有的DOM元素

  • 属性/文本

    • 操作标签的属性, 标签体文本

      • attr(name) / attr(name, value): 读写非布尔值的标签属性

      • prop(name) / prop(name, value): 读写布尔值的标签属性

      • removeAttr(name)/removeProp(name): 删除属性

      • addClass(classValue): 添加class

      • removeClass(classValue): 移除指定class

      • val() / val(value): 读写标签的value

      • html() / html(htmlString): 读写标签体文本

  • CSS模块

    • 设置CSS样式/读取CSS值

      • css(styleName):读取css值

      • css(styleName,value):设置一个样式

      • css({多个键值对}):设置多个样式

    • 获取/设置元素的位置数据

      • offset():相对页面左上角的坐标

      • position():相对于父元素左上角的坐标

      • scrollTop()/scrollLeft():读写元素/页面的滚动条的坐标

        • 得到页面滚动条的scrollTop:
          $(document.body).scrollTop()+$(document.html).scrollTop();

        • 设置页面滚动条的scrollTop:
          $('body,html').scrollTop(value);

    • 获取/设置元素的寸数据

      • 不包括内边距和边框的尺寸

        • height()

        • width()

      • 包括内边距,但不包括边框的尺寸

        • innerHeight()

        • innerWidth()

      • 包括内边距和边框的尺寸

        • outHeight()

        • outWidth()

  • 文档模块

    • 添加节点

      • 向当前匹配的所有元素内部的最后/最前面插入指定内容

        • append(content)

        • prepend(content)

      • 将指定内容插入到当前所有匹配元素的最后/最前

        • after(content)

        • before(content)

    • 替换节点

      • replaceWidth(content):用指定内容替换 所有匹配的元素

    • 删除节点

      • empty():删除所有匹配元素的子元素(掏空)

      • remove():删除所有匹配的元素(自己及内部都删除)

  • 筛选模块

    • 过滤

      • 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回

      • first()

      • last()

      • eq(index)

      • filter(selecter)

      • not(selecter)

      • has(selecter)

    • 查找后代/父/兄弟元素

      • 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回

      • children():子元素

      • find():后代元素

      • parent():父元素

      • prevAll():前面的所有兄弟元素

      • siblings():所有的兄弟元素

  • 事件模块

    • 绑定事件

      • on('eventName',function(){}):通用的事件绑定方法

      • eventName(function(){})

      • hover(function(){},function(){}):同时绑定鼠标移入和移出事件

    • 解绑事件

      • off('eventName')

    • 事件委托

      • 理解:通过事件冒泡将子元素的事件委托给父元素处理,事件监听绑定在父元素上,但事件发生在子元素上,最终调用事件回调函数的是子元素:event.target

      • 绑定事件委托监听

        • delefate(selecter(子元素),'eventName',function(event){})

      • 解绑事件监听

        • undelegate('eventName')

    • 相关知识

      • 事件坐标

        • 相对可视窗口左上角:event.clientX/eventclientY
          *相对页面左上角:event.pageX/event.pageY

        • 相对当前元素左上角:event.offsetX/event.offsetY

      • 阻止事件冒泡:event.stopPropagation();

      • 取消事件的默认行为:event.preventDefault();

  • 动画效果

    • 滑动动画

      • 不断改变元素的高度来实现

      • slideDown():带动画的展开

      • slideUp():带动画的收缩

      • slideToggle():切换展开和收缩

    • 淡出淡入动画

      • 不断改变元素的透明度来实现

      • fadeIn():带动画的显示

      • fadeOut():带动画的隐藏

      • fadeToggle():带动画的切换显示和隐藏

    • 显示/隐藏

      • show():显示

      • hide():隐藏

      • toggle():切换显示隐藏

    • 自定义动画

      • aniMATE({结束时的样式},time,function(){}) :自定义动画效果

      • stop():停止动画

  • jQuery插件

脚本宝典总结

以上是脚本宝典为你收集整理的jQuery基础知识概述全部内容,希望文章能够帮你解决jQuery基础知识概述所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。