• jQurey-基本知识点总结

    （一）jQurey基础知识

    1、官网下载：jQuery

    jQurey是一个js文件，直接存到项目文件中，然后跟平常文件js导入一致：

    2、jQurey语法

    jQurey语法主要包含三个部分：工厂函数、选择器和方法,如下

    $(selector).action();
    • 工厂函数$( )：美元符号“$”等价于jQuery，即$( )=jQuery( )。$( )的作用是将DOM对象转化为jQuery对象，只有将DOM对象转化为jQuery对象后，才能使用jQuery的方法
    • 选择器（selector）：获取需要操作的DOM元素
    • 方法action( )：jQuery把js中的一些事件，属性写成了方法，直接调用即可

    3、设置CSS属性值

    • jQuery对象.addClass([样式名])：添加一个或多个类样式
    • $(selector).css({"属性":"属性值","属性":"属性值",……})：增加css样式（可一个）
    • $(selector).removeClass(className1 className2 className3);移除css样式（可一个）

    （二）选择器

    选择器的作用，是选择到我们操作的dom对象，选择器的类型有：

    • 基本选择器
    • 层次选择器
    • 属性选择器
    • 基本过滤选择器
    • 表单属性过滤选择器

    1、基本选择器：

    选择器名称语法解释
    标签选择器（元素选择器）$(“html标签名”)获得所有匹配标签名称的于元素
    id选择器$("#id的属性值")获得与指定id属性值匹配的元素
    类选择器$(".class的属性值")获得与指定的class属性值匹配的元素

    2、层次选择器

    选择器名称语法解释
    后代选择器$("A B ")选择A元素内部的所有B元素
    子选择器$(“A > B”)选择A元素内部的所有B子元素
    兄弟选择器$(“A ~ B”)选择A元素和B元素之间的所有兄弟元素(不包括A元素,此兄弟元素必须是B类型)

    3、属性选择器

    选择器名称语法解释
    属性选择器$(“A[属性名]”)包含指定属性的选择器
    属性选择器$(“A[属性名=值]”)包含指定属性等于指定值的选择器
    复合属性选择器$(“A[属性名=值]… …”)包含多个属性条件的选择器

    4、基本过滤选择器

    选择器名称语法解释
    首元素选择器:first获得选择的元素中的第一个元素
    尾元素选择器:last获得选择的元素中的最后一个元素
    非元素选择器:not(selecter)不包括指定内容的元素
    偶数选择器:even偶数，从 0 开始计数
    奇数选择器:odd奇数，从 1 开始计数
    等于索引选择器:eq(index)指定索引元素
    大于索引选择器:gt(index)大于指定索引元素
    小于索引选择器:lt(index)小于指定索引元素
    标题选择器（h标签）:header获得标题元素，固定写法

    5、表单属性过滤选择器

    选择器名称语法解释
    可用元素选择器:enabled获得可用元素
    不可用元素选择器:disabled获得不可用元素
    选中选择器:checked获得单选/复选框选中的元素
    选中选择器:selected获得下拉框选中的元素

    （三）、DOM

    js的DOM对象与jQuery对象转换

    • js的DOM对象转换成jQuery对象，语法：$(js对象)

    • jQuery对象转换成js对象，语法：jquery对象[索引] 或 jquery对象.get(索引)

    1、文本与值

    方法解释
    val([value])获得/设置元素value属性相应的值
    text([value])获得/设置元素的文本内容
    html([value])获得/设置元素的标签体内容

    2、插入对象

    方法解释
    $("")创建A元素对象
    append(element)添加成最后一个子元素，两者之间是父子关系
    prepend(element)添加成第一个子元素，两者之间是父子关系
    before(element)添加到当前元素的前面，两者之间是兄弟关系
    after(element)添加到当前元素的后面，两者之间是兄弟关系

    3、删除对象

    方法解释
    remove()删除指定元素(子元素也全部被清空)
    empty()清空指定元素的所有子元素

    4、class操作

    方法解释
    addClass(value)addClass(类样式名) 给指定的对象添加新的类样式，指定类样式名字即可
    removeClass(value)removeClass(类样式名) 删除指定的类样式
    css(name[,value])获取/设置指定的CSS样式
    toggleClass(value)toggleClass(类样式名) 切换样式，如果没有类样式，则添加，如果有类样式，则删除

    （四）、事件

    jQuery中，事件分为两大类：简单事件（基础事件）和复合事件。

    jQuery中的简单事件，与JavaScript中的事件一样，都有window事件、鼠标事件、键盘事件、表单事件等，只是对应的方法名称略有不同。

    复合事件则是截取、组合用户操作，并且以多个函数作为响应而自定义的处理程序

    1、window事件

    2、鼠标事件

    事件说明
    click鼠标单击事件
    mouseover鼠标移入事件
    mouseout鼠标移出事件
    mousedown鼠标按下事件
    mouseup鼠标松开事件
    mousemove鼠标移动事件
    contextmenu禁用编辑

    3、键盘事件

    事件说明
    keydowm键盘按下
    keyup键盘松开

    4、表单事件

    事件说明
    focus获取焦点时触发的事件
    blur失去焦点时触发的事件
    select选中“单行文本框”或“多行文本框”中的内容时，触发的事件
    change

    用于“具有多个选项的表单元素：

    • 单选框选择某一项时触发。
    • 复选框选择某一项时触发。
    • 下拉菜单选择某一项时触发。

    5、事件进阶

    事件说明
    绑定事件

    $().on(type, fn)

    type：事件类型。例如单击事件是"click"，
    fn：匿名函数，即function(){}。

    解绑事件$().off(type)
    合成事件

    $().hover(fn1, fn2)
    fn1：表示鼠标（指针）移入事件触发的处理函数，

    fn2：表示鼠标（指针）移出事件触发的处理函数

    一次事件$().one(type, fn)
    自定义事件on()方法：定义一个事件。
    rigger()方法：触发自定义事件。

    6、event对象

    event对象：保存一个事件发生时，与这个事件有关的详细信息

    event属性：

  • 相关阅读:
    光学数值孔径
    深入探讨MySQL数据库的InnoDB存储引擎架构
    【Arma3脚本教程】一、基本介绍
    Windows环境MySQL8忘记密码文件解决方案
    ctfshow-ssti
    一幅长文细学Redis（一）——NoSQL数据库简介以及Redis安装
    Linux——手把手教你解决sudo指令无法使用的问题
    【MySQL】MySQL事务隔离机制与实现原理详解（MySQL专栏启动）
    1-Docker基础
    React基础知识点
  • 原文地址：https://blog.csdn.net/weixin_49349476/article/details/130765639