当前位置: 首页 > news >正文

jQuery学习和知识点总结归纳

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作。

jQuery简介

jQuery是一个实用的JavaScript库。jQuery极大地简化了JS对DOM的操作,实现一些常用的方法,jQuery还可以链式操作。

jQuery的基本用法

<script src="js/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("p").click(function(){
      $(this).hide();
    });
  });
</script>

jQuery常用的选择器和事件

$() – 使用CSS选择器匹配元素

jQuery的事件和JS的事件基本相同,在使用的时候,去掉JS事件前面的on即可。

jQuery常用的事件:

  • load:当文档加载时运行脚本
  • blur:当窗口失去焦点时运行脚本
  • focus:当窗口获得焦点时运行脚本
  • change:当元素改变时运行脚本
  • submit:当提交表单时运行脚本
  • keydown:当按下按键时运行脚本
  • keypress:当按下并松开按键时运行脚本
  • keyup:当松开按键时运行脚本
  • click:当单击鼠标时运行脚本
  • dblclick:当双击鼠标时运行脚本
  • mousedown:当按下鼠标按钮时运行脚本
  • mousemove:当鼠标指针移动时运行脚本
  • mouseout:当鼠标指针移出元素时运行脚本
  • mouseover:当鼠标指针移至元素之上时运行脚本
  • mouseup:当松开鼠标按钮时运行脚本
  • abort:当发生中止事件时运行脚本

jQuery常用的效果方法

  • $(selector).hide() – 隐藏被选的元素
  • $(selector).show() – 显示被选的元素
  • $(selector).toggle() – 对被选元素进行隐藏和显示的切换
  • $(selector).slideDown() – 通过调整高度来滑动显示被选元素
  • $(selector).slideToggle() – 对被选元素进行滑动隐藏和滑动显示的切换
  • $(selector).slideUp() – 通过调整高度来滑动隐藏被选元素
  • $(selector).fadeIn() – 逐渐改变被选元素的不透明度,从隐藏到可见
  • $(selector).fadeOut() – 逐渐改变被选元素的不透明度,从可见到隐藏
  • $(selector).fadeTo() – 把被选元素逐渐改变至给定的不透明度
  • $(selector).animate() – 对被选元素应用“自定义”的动画

jQuery常用的DOM元素操作方法

  • $(selector).parent() – 返回被选元素的直接父元素。
  • $(selector).parents() – 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>),可选参数来过滤对祖先元素的搜索
  • $(selector).children() – 返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索
  • $(selector).find() – 返回被选元素的后代元素,一路向下直到最后一个后代,可选参数来过滤对后后代元素的搜索
  • $(selector).siblings() – 返回被选元素的所有同胞元素。过滤对同胞元素的搜索。
  • $(selector).next() – 返回被选元素的下一个同胞元素。
  • $(selector).nextAll() – 返回匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
  • $(selector).prev() – 返回的是前面的同胞元素
  • $(selector).prevAll() – 返回匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
  • $(selector).first() – 将匹配元素集合缩减为集合中的第一个元素。
  • $(selector).last() – 将匹配元素集合缩减为集合中的最后一个元素。
  • $(selector).eq() – 指定索引的新元素。
  • $(selector).get() – 获得由选择器指定的 DOM 元素。
  • $(selector).index() – 返回指定元素相对于其他指定元素的 index 位置。
  • $(selector).each() 对对象进行迭代,为每个元素执行函数
  • $(selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素
  • $(selector).size() 返回被 jQuery 选择器匹配的元素的数量
  • $(selector).text() – 设置或返回所选元素的文本内容
  • $(selector).html() – 设置或返回所选元素的内容(包括 HTML 标记)
  • $(selector).val() – 设置或返回表单字段的值
  • $(selector).append() – 在被选元素的结尾插入内容
  • $(selector).prepend() – 在被选元素的开头插入内容
  • $(selector).after() – 在被选元素之后插入内容
  • $(selector).before() – 在被选元素之前插入内容
  • $(selector).remove() – 删除被选元素(及其子元素)
  • $(selector).empty() – 从被选元素中删除子元素
  • $(selector).removeAttr() – 从所有匹配的元素中移除指定的属性。
  • $(selector).clone() – 创建匹配元素集合的副本
  • $(selector).load() – 从服务器加载数据,然后把返回到 HTML 放入匹配元素

注:parent()、next()、prev()、first()、last()、eq()只返回一个元素。返回元素集合的函数都可以传传参数筛选,比如:parents()、siblings()、nextAll()、prevAll()、siblings()。

jQuery对CSS的操作

  • $(selector).height() – 设置或返回匹配元素的高度。
  • $(selector).width() – 设置或返回匹配元素的宽度。
  • $(selector).addClass() – 向被选元素添加一个或多个类
  • $(selector).removeClass() – 从被选元素删除一个或多个类
  • $(selector).toggleClass() – 对被选元素进行添加/删除类的切换操作
  • $(selector).css() – 设置或返回样式属性
  • $(selector).hasClass() 检查匹配的元素是否拥有指定的类。

jQuery其他知识点

  • $(selector).data() – 存储与匹配元素相关的任意数据
  • $(selector).removeData() – 移除之前存放的数据
  • $(selector).serialize() – 将表单内容序列化为字符串
  • $(selector).serializeArray() – 序列化表单元素,返回 JSON 数据结构数据

转载于:https://my.oschina.net/u/2399867/blog/681008

相关文章:

  • 如何判断链表是否是回文
  • igraph安装(R/Python)
  • 【学习笔记】屏幕尺寸的信息
  • 在Mac OS X上安装 Ruby运行环境
  • [译]CSS 居中(Center)方法大合集
  • java httpclient使用socks5代理(二)使用socks5代理服务
  • C#:为详情查看界面设计的万用TextBox自定义控件
  • JS --事件
  • Sublime Text 3 关闭自动提示
  • 用verilog模拟DDS产生正弦波信号
  • 第k个元素(模板)
  • 景德镇特色的部门级别与权限
  • swift 字符串创建类
  • push 和pop的区别
  • linux命令行模式下实现代理上网 专题
  • android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • HTTP中的ETag在移动客户端的应用
  • java B2B2C 源码多租户电子商城系统-Kafka基本使用介绍
  • Python socket服务器端、客户端传送信息
  • V4L2视频输入框架概述
  • Vue2.x学习三:事件处理生命周期钩子
  • webpack入门学习手记(二)
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 计算机在识别图像时“看到”了什么?
  • 数据仓库的几种建模方法
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • Mac 上flink的安装与启动
  • 格斗健身潮牌24KiCK获近千万Pre-A轮融资,用户留存高达9个月 ...
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (Redis使用系列) SpringBoot中Redis的RedisConfig 二
  • (二)基于wpr_simulation 的Ros机器人运动控制,gazebo仿真
  • (附源码)ssm捐赠救助系统 毕业设计 060945
  • (汇总)os模块以及shutil模块对文件的操作
  • (三)centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • (算法)Travel Information Center
  • 、写入Shellcode到注册表上线
  • .NET 5种线程安全集合
  • .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?
  • .NET 中创建支持集合初始化器的类型
  • .NET/C# 在代码中测量代码执行耗时的建议(比较系统性能计数器和系统时间)
  • .NET业务框架的构建
  • .py文件应该怎样打开?
  • /bin、/sbin、/usr/bin、/usr/sbin
  • /bin/rm: 参数列表过长"的解决办法
  • /etc/fstab和/etc/mtab的区别
  • /var/log/cvslog 太大
  • @property python知乎_Python3基础之:property
  • [AIGC] 使用Curl进行网络请求的常见用法
  • [Angular 基础] - 自定义指令,深入学习 directive
  • [AX]AX2012 SSRS报表Drill through action
  • [bzoj2957]楼房重建
  • [C++] 多线程编程-thread::yield()-sleep_for()
  • [CareerCup] 2.1 Remove Duplicates from Unsorted List 移除无序链表中的重复项
  • [CTSC2014]企鹅QQ