jQuery 常用API
jQuery 常用API
- 1、jQuery 选择器
- 1.1 、jQuery 基础选择器
- 1.2 、jQuery 层级选择器
- 1.3 、隐式迭代（重要）
- 1.4 、jQuery 筛选选择器
- 1.5、 jQuery 筛选方法（重点）
- 1.6 、jQuery 里面的排他思想
- 1.7、 链式编程
- 2、jQuery 样式操作
- 2.1 、操作 css 方法
- 2.2 、设置类样式方法
- 2.3、 类操作与className区别
- 3、jQuery 效果
- 3.1 、显示隐藏效果
- 3.1.1、显示效果
- 3.1.2、隐藏效果
- 3.1.3切换效果
- 3.2 、滑动效果
- 3.2.1下滑效果
- 3.2.2上滑效果
- 3.2.3滑动切换效果
- 3.3 、事件切换
- 3.4 、动画队列及其停止排队方法
- 3.5 、淡入淡出效果
- 3.5.1、淡入效果
- 3.5.2、淡出效果
- 3.5.3、淡入淡出效果切换
- 3.6、 自定义动画 animate
- 4、jQuery 属性操作
- 4.1、 设置或获取元素固有属性值 prop()
- 4.2、 设置或获取元素自定义属性值 attr()
- 4.3、 数据缓存 data()
- 5、jQuery 文本属性值
- 6、jQuery 元素操作
- 6.1、 遍历元素
- 6.2、 创建元素
- 6.3、 添加元素
- 6.3.1、内部添加
- 6.3.2、外部添加
- 6.4、 删除元素
- 7、jQuery 尺寸、 位置操作
- 7.1 jQuery 尺寸
- 7.2 jQuery 位置
- 7.2.1、 offset() 设置或获取元素偏移
- 7.2.2、 position() 获取元素偏移
- 7.2.3、 scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
- 8、资料来源：黑马程序员
1、jQuery 选择器
1.1 、jQuery 基础选择器
1.2 、jQuery 层级选择器
代码：
效果：
1.3 、隐式迭代（重要）
代码：
效果：
1.4 、jQuery 筛选选择器
代码：
效果：
1.5、 jQuery 筛选方法（重点）
代码：
效果：
代码：
效果：
1.6 、jQuery 里面的排他思想
代码：
效果：
1.7、 链式编程
代码：
效果：
2、jQuery 样式操作
2.1 、操作 css 方法
代码：
效果：
2.2 、设置类样式方法
代码：
效果：
2.3、 类操作与className区别
代码：
效果：
3、jQuery 效果
3.1 、显示隐藏效果
3.1.1、显示效果
3.1.2、隐藏效果
3.1.3切换效果
代码:
效果：
3.2 、滑动效果
3.2.1下滑效果
3.2.2上滑效果
3.2.3滑动切换效果
代码：
效果：
3.3 、事件切换
3.4 、动画队列及其停止排队方法
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style><script src="jquery.min.js"></script>
</head><body><ul class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li></ul><script>$(function() {// 鼠标经过// $(".nav>li").mouseover(function() {// // $(this) jQuery 当前元素 this不要加引号// // show() 显示元素 hide() 隐藏元素// $(this).children("ul").slideDown(200);// });// // 鼠标离开// $(".nav>li").mouseout(function() {// $(this).children("ul").slideUp(200);// });// 1. 事件切换 hover 就是鼠标经过和离开的复合写法// $(".nav>li").hover(function() {// $(this).children("ul").slideDown(200);// }, function() {// $(this).children("ul").slideUp(200);// });// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数$(".nav>li").hover(function() {// stop 方法必须写到动画的前面$(this).children("ul").stop().slideToggle();});})</script>
</body></html>
3.5 、淡入淡出效果
3.5.1、淡入效果
3.5.2、淡出效果
3.5.3、淡入淡出效果切换
代码：
效果：
3.6、 自定义动画 animate
代码：
效果：
4、jQuery 属性操作
4.1、 设置或获取元素固有属性值 prop()
4.2、 设置或获取元素自定义属性值 attr()
4.3、 数据缓存 data()
5、jQuery 文本属性值
6、jQuery 元素操作
主要是遍历、 创建、 添加、删除元素操作。
6.1、 遍历元素
6.2、 创建元素
6.3、 添加元素
6.3.1、内部添加
6.3.2、外部添加
6.4、 删除元素
7、jQuery 尺寸、 位置操作
7.1 jQuery 尺寸
7.2 jQuery 位置
7.2.1、 offset() 设置或获取元素偏移
7.2.2、 position() 获取元素偏移
7.2.3、 scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
8、资料来源：黑马程序员
总结
写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 java开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。
由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的Gitee获取。
还有 高级java全套视频教程 java进阶架构师 视频+资料+代码+面试题！
全方面的java进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。
jQuery 常用API相关推荐
- jQuery常用API（六）
目录 7. jQuery尺寸.位置操作 7.1 jQuery尺寸 7.2 jQuery位置 1.offset()设置或获取元素偏移 2. position()获取元素偏移 3. scrollTop() ...
- jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
- 笔记--jQuery常用API，事件，其他方法
1. jQuery 选择器 1.1 jQuery 基础选择器 原生js获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准. 1.2 jQuery 层级选择 ...
- 前端的第二十四天（jQuery入门、常用API）
前端的第二十四天(jQuery入门.常用API) 一.jQuery入门 1.jQuery 概述 2.jQuery 的基本使用 官网地址:点我跳转 各个版本的下载:点我跳转 二.jQuery常用API ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jquery for循环_前端基础入门五（掌握jQuery的常用api，实现动态效果）
jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果. 为什么要学习jQuery? [01-让div显示与设置内容.html] 使 ...
- JsRender 前端渲染模板常用API学习
JsRender 常用API 1. $.templates() $.templates()方法是用来注册或编译模板的,使用的情况有以下几种. 把html字符串编译编译成模板 获取使用script标签声 ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- c++ string replace_JAVA应用程序开发之String类常用API
[本文详细介绍了JAVA应用开发中的String类常用API,欢迎读者朋友们阅读.转发和收藏!] 1 基本概念 API ( Application Interface 应用程序接口)是类中提供的接口, ...
- 常用API（Object、String、StringBuffer、用户登陆注册)
常用API 今日内容介绍 u Object u String u StringBuilder 第1章 Java的API及Object类 在以前的学习过程中,我们都在学习对象基本特征.对象的使用以及对象 ...
最新文章
- 2019牛客第四场I题 string
- php判断ip跳转城市,PHP判断IP并转跳到相应城市分站的方法
- 如何对android菜单,Android菜单构造技巧
- HTTP协议通信原理
- Mapgis图转换为可导入软件的shp
- angular 字符串转换成数字_Angular日期在TypeScript中格式化转换应用
- mysql主主互备架构
- 【图像数据增强】Mixup、Cutout、Random Erasing、CutMix、Mosaic等详解
- java 内置jetty_内置jetty
- 学习JavaScript数据结构与算法 — 散列表
- strtus2 与springmvc
- ALDS1_7_C:Tree Walk
- 还是忍不住说说特斯拉的恐怖
- Vue3中Compositions API的使用(二)
- Android实现横幅通知
- 推荐系统学习之评测指标
- 王道计算机组成原理课代表 - 考研计算机 第五章 中央处理器 究极精华总结笔记
- 计算机毕业设计Java苹果酒店住房管理(源码+系统+mysql数据库+lw文档）
- git笔记（团队协作教程，GitHub操作）
- qq邮箱服务器连接错误代码,qq邮箱错误代码103打不开是怎么回事