ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

jQuery 基础

2022-08-07 13:03:16  阅读：207  来源： 互联网

标签：jQuery 元素 基础 selector 事件 选择器 fn


jQuery 基础

JavaScript 库

jQuery 本质是 JavaScript 库(library)

JavaScript 库: 一个封装特定方法或函数的集合

常见的 JavaScript 库:

  • jQuery
  • Prototype
  • YUI
  • Dojo
  • Ext JS
  • 移动端的 zepto

jQuery 基本使用

jQuery 库包含以下功能：

  • HTML 元素选取及操作
  • HTML 事件函数
  • CSS 操作
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

jQuery 版本

  • 1x: 兼容 IE 678 等低版本浏览器，不再维护
  • 2x: 不兼容 IE 678 等低版本浏览器，不再维护
  • 3x: 不兼容 IE 678 等低版本浏览器，目前维护

jQuery 的入口函数

文档就绪事件是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作

$(function(){
    ...         // 此处是页面 DOM加载完毕的入口
});

// 等价
$(document).ready(function(){
    ...
});

相当于原始 JS 中的 DOMContentLoaded

不同于原生的 JS 中 load 事件

$ 是 jQuery 的顶级对象，它代指 jQuery

jQuery(function(){
    ...         // 此处是页面 DOM加载完毕的入口
});

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法：

$(selector).action()
  • 美元符号定义 jQuery
  • 选择器 selector: "查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作

选择器基于已经存在的 CSS 选择器，适用于大多数 CSS 选择器书写只需要以字符串形式

常用: 全选择器, ID 选择器, 类选择器, 标签选择器, 并集选择器, 交集选择器, 子选择器, 后代选择器 ...

比如：

$('.name');
$('#user');
$('div');
$('div span');
$("ul li:first-child");

注意：jQuery 对象只能使用 jQuery 方法，DOM 对象使用原生的 JavaScript 属性或方法

jQuery 对象 与 DOM 对象 转换

$(DOM对象);

jQuery对象[index];

// 或
jQuery对象.get(index);

jQuery 常用 API

CSS 相关

jQuery 设置样式

$(selector).css('属性', '值');

$(selector).css('属性'); // 不给值，就是单纯返回对应值

多属性赋值，可以以对象形式传入

$(selector).css({
    width: 400,
    height: 400
});

设置类样式方法:

  • addClass("className"): 添加
  • removeClass("className"): 移除
  • toggleClass("className"): 切换

className 类名，不需要 .

不影响原本的类名，与原生 JS 不同

筛选选择器:

  • :first: 获取第一个元素
  • :last: 获取最后一个元素
  • :eq(index): 指定索引号 index 的元素
  • :odd: 索引号为奇数的元素
  • :even: 索引号为偶数的元素

筛选方法:

  • parent(): 查找父元素
  • children(selector): 查找子元素
  • find(selector): 查找后代元素
  • siblings(selector): 查找同级元素，不包括自身
  • nextAll([expr]): 查找当前元素之后的同级元素
  • prevtAll([expr]): 查找当前元素之前的同级元素
  • hasClass(class): 检查当前元素是否含有某种特定的类名，有返回 true
  • eq(index): 使用 index 检索

隐式迭代: 自动遍历内部【伪数组形式存储】 DOM 元素的过程

链式编程

$("button").css("color", "red").siblings().css("color", "blue");

jQuery 效果

显示隐藏

  • show()

    show([speed,[easing], [fn]])
    • 参数都可以省略
    • speed: 动画时长(ms), 预设速度 ("slow", "normal", "fast")
    • easing: 指定切换效果，默认 "swing", 可用参数 "linear" 匀速
    • fn: 回调函数

  • hide()

    hide([speed,[easing], [fn]])

  • toggle()

    toggle([speed,[easing], [fn]])

滑动

  • slideDown()

    slideDown([speed,[easing], [fn]])

  • slideUp()

    slideUp([speed,[easing], [fn]])

  • slideToggle()

    slideToggle([speed,[easing], [fn]])

事件切换

  • hover()

    hover([over,] out)
    • over: 鼠标移到元素上触发
    • out: 鼠标离开元素上触发

动画排队

  • stop(): 停止上一次动画

淡入淡出

  • fadeIn(): 淡入

    fadeIn([speed,[easing], [fn]])

  • fadeOut(): 淡出

    fadeOut([speed,[easing], [fn]])

  • fadeToggle(): 切换

    fadeToggle([speed,[easing], [fn]])

  • fadeTo(): 透明度修改

    fadeTo([speed, opacity, [easing], [fn]])
    • opacity: 透明度 (0 ~ 1)

自定义动画

  • animate()

    animate(params, [speed, [easing], [fn]])

    • params: 想要修改的样式属性，以对象形式传入

      注意：属性名不可以带引号，如果是复合属性使用小驼峰命名法

jQuery 控制元素属性

类似 css 样式获取

自带元素属性

  • prop("属性"): 获取
  • prop("属性", "属性值"): 设置

自定义元素属性

  • attr("属性"): 获取
  • attr("属性", "属性值"): 设置

数据缓存 data(): 可以在指定元素上存取数据，并不会修改 DOM 元素架构

页面刷新，数据将被移除

  • data("name"): 获取
  • data("name", "value"): 存储

同时可以获取 HTML5 自定义属性 data-index 得到的是数字型

jQuery 控制元素内容

  • 普通元素内容 html(): 等价原生 inner HTML
  • 普通元素文本内容 text(): 等价原生 inner Text
  • 表单的值 val(): 等价原生 value

jQuery 控制元素操作

遍历元素 each(fn(index, domEle)(){...})

  • each() 方法遍历匹配每一个元素
  • 回调函数 fn 中两个参数 index 索引号，domEle 是每个 DOM 元素对象
  • 使用 jQuery 方法，需要给这个 dom 元素转化为 jQuery 对象

遍历元素另一种方法使用 $.each(对象, fn) 方法，可以遍历任何对象

创建元素

$("HTML 标记语句");

let li = $("<li> xxx </li>");   // 创建元素

  • 内部添加: 父子

    • append(elem): 添加元素 elem 内部最后面
    • prepend(elem): 添加元素 elem 内部最前面

  • 外部添加: 兄弟

    • before(): 前
    • after(): 后
/**
 * <ul>
 *     \\ <li> xxx </li> 添加
 * </ul>
*/

let li = $("<li> xxx </li>");   // 创建元素
$("ul").append(li);

删除元素

  • element.remove(): 删除元素本身
  • element.empty(): 删除匹配元素所有子元素
  • element.html(""): 清空匹配元素

尺寸及位置操作

尺寸

  • width()/height()
  • innerWidth()/innerHeight(): 包含 padding
  • outerWidth()/outerHeight(): 包含 padding, border
  • outerWidth(true)/outerHeight(true): 包含 padding, border, margin

注意：

  • 参数为空，只是读其对应值
  • 参数为数字，即对应数字修改
  • 参数不用单位

位置

  • offset(): 相对于文档的偏移数值
  • pasition(): 带有定位的父级偏移数值
  • scrollTop()/scrollLeft(): 对于滚动条，卷去的数值

设置：传入对象即可

jQuery 事件

注册

语法：

element.事件(function(){})

处理

on() 方法在匹配元素上绑定一个或多个事件处理函数

element.on(events, [selector], fn)
  • events: 1~n 个用空格分隔的事件类型
  • selector: 元素的子元素选择器
  • fn: 回调函数
$(selector).on({
    mouseover: function(){},
    click: function(){}
});

// 如果事件处理程序相同
$(selector).on("mouseover click", function(){
    ... // 事件处理程序
});

on() 方法可以实现事件委派

事件委派：把原来给子元素的事件绑定到父元素上

$("ul").on("click", "li", function(){
    ... // 事件处理程序
});

// "li" 起到触发作用，"click" 是绑定在 "ul" 上

on() 方法 可以为动态创建的元素绑定事件

off() 方法可以解绑事件，移除on() 方法绑定的事件处理程序

$(selector).off();                  // 解绑所有事件
$(selector).off("click");           // 解绑指定事件
$(selector).off("click", "li");     // 解绑事件委托

如果只执行一次，使用 one() 绑定事件

自动触发事件 trigger()

element.click(); // 简写

element.trigger("type");    // 会触发元素默认行为

element.triggerHandler(type);   // 不会触发元素默认行为

jQuery 事件对象

事件被触发，就会有事件对象产生

element.on(events, [selector], function(event){})

event 事件对象

  • preventDefault(): 阻止默认行为
  • stopPropagation(): 阻止冒泡

jQuery 其它方法

对象拷贝

使用 $.extend() 方法

$.extend([deep], target, object, [objectN])
    // object --> target
  • deep: 拷贝模式，true 为深拷贝，默认 false 浅拷贝
  • target: 目标对象
  • object: 待拷贝对象
  • objectN: 其它拷贝对象

注意：

  • 拷贝会覆盖原有内容

多库共存

使用不同库，$ 可能存在冲突

解决方案

  • 方案一: $ --> jQuery

  • 方案二: jQuery 变量规定新的名称: $.noConfict()

    var xx = $.noConfict();

jQuery 插件

插件网址：

图片懒加载：只显示可视部分的图片，减少服务器的压力，推荐插件实现

全屏滚动: fullpage.js

标签：jQuery,元素,基础,selector,事件,选择器,fn
来源： https://www.cnblogs.com/shadow-/p/16558862.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有