jQuery简单笔记
jQuery 是一个 JavaScript 库,简化了 JavaScript 的编程。
语法:$(selector).action()
selector 是字符串,表示HTML元素。
| 对象 | 符号 | 例子 | 效果 |
|---|---|---|---|
| 当前整个HTML | this | this | 选择整个HTML |
| 标签 | 标签名 | "p" | 选择所有<p>元素 |
| id | # | "#test" | 选择所有 id = "test"的元素 |
| class | . | ".test" | 选择所有 class = "test"的元素 |
| 链接 | [] | [href="test"] | 选择所有 href 等于 "test"的元素 |
| [href!="test"] | 选择所有 href 不等于 "test"的元素 | ||
| [href$="test"] | 选择所有 href 以 "test" 结尾的元素 | ||
| 表格 | ul li: | "ul li:first" | 选择每个 <ul> 的第一个 <li> 元素 |
以上三者可以合起来用:$("p#test.test")
action()列表:
| 隶属 | 名称 | 功能 |
|---|---|---|
| document | ready(function) | HTML文档加载完毕时执行function |
| window | 浏览器视口 | |
| 所有元素 | hide() | 隐藏所选元素 |
| show() | 显示所选元素 | |
| toggle() | 以上两者切换 | |
| fadeIn() | 渐渐隐藏 | |
| fadeOut() | 渐渐显示 | |
| fadeToggle() | 以上两者切换 | |
| slideUp() | 向上滑动隐藏元素 | |
| slideDown() | 向下滑动显示元素 | |
| slideToggle() | 以上两者切换 | |
| addClass() | 添加一个或多个类 | |
| removeClass() | 删除一个或多个类 | |
| toggleClass() | 以上两者切换 | |
| mouseover(function) | 鼠标悬停在元素上时执行function | |
| focus(function) | 元素获得焦点时执行function | |
| click(function) | 点击元素时执行function | |
| dblclick(function) | 双击元素时执行function | |
| attr() | 改变元素的属性 | |
| css() | 改变或返回元素的css属性 | |
| animate({dict参数}) | 执行动画以使元素符合参数指定内容(属性名用骆驼命名法) | |
| stop(bool,bool) | 停止动画 | |
| text() | 设置或返回所选元素的文本内容 | |
| html() | 设置或返回所选元素带 HTML 标记的内容 | |
| val() | 设置或返回表单字段的值 | |
| append(string) | 元素内容结尾添加 | |
| after(string) | 元素结束之后添加 | |
| remove() | 删除整个元素 | |
| empty() | 删除子元素 | |
| width() | 不包括 padding 和 border | |
| height() | 不包括 padding 和 border | |
| innerWidth() | 包括 padding | |
| innerHeight() | 包括 padding | |
| outerWidth() | 包括 padding 和 border | |
| outerHeight() | 包括 padding 和 border | |
当出现动画动作时,可以传入两个参数:
- 毫秒表示动作过渡时长。
- 回调,在动画完成后执行
可在数值前使用 += 和 -= 表示相对值。
在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
AJAX:
load()
get()
post()
jQuery简单笔记的更多相关文章
- jquery简单笔记(1) - 基础记录
一.dom对象及jquery对象相互转换 jquery对象转换成dom对象,即 [index] 和 get(index) 第一种方式: var $j = $('#id'); // jquery对象 v ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
- jQuery:自学笔记(2)——jQuery选择器
jQuery:自学笔记(2)——jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...
- jQuery:自学笔记(1)——基础入门
jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...
- jQuery学习笔记之插件开发(4)
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
随机推荐
- 详解JavaScript对象继承方式
一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数成为 Children 的方法,然 ...
- iot前台开发环境:前后台访问映射
一.前端映射- java代码 二.路由设置 -前台代码 三.访问应用
- intelj idea中JRebel激活
1.下载激活软件 https://github.com/ilanyu/ReverseProxy/releases/tag/v1.0 我这边下载的是: 2.双击运行 3.idea中, 不出意外,应该就激 ...
- 剑指offer-二叉树的下一个节点
题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 解题思路 分情况考虑如下: 若该节点为空,则直 ...
- Python open()函数文件打开、读、写操作详解
一.Python open()函数文件打开操作 打开文件会用到open函数,标准的python打开文件语法如下:open(name[,mode[,buffering]])open函数的文件名是必须的, ...
- 使用生成器把Kafka写入速度提高1000倍
title: 使用生成器把Kafka写入速度提高1000倍 toc: true comment: true date: 2018-04-13 21:35:09 tags: ['Python', '经验 ...
- Google Cardboard的九轴融合算法——基于李群的扩展卡尔曼滤波
Google Cardboard的九轴融合算法 --基于李群的扩展卡尔曼滤波 极品巧克力 前言 九轴融合算法是指通过融合IMU中的加速度计(三轴).陀螺仪(三轴).磁场计(三轴),来获取物体姿态的方法 ...
- mysql用limit时offset越大时间越长
首先说明一下MySQL的版本:mysql> select version();+-----------+| version() |+-----------+| 5.7.17 |+----- ...
- JS实现手机访问pc网址自动跳转到wap网站
之前写pc端直接跳转wap端一直是后端java写的,跟js一样都是根据navigator.userAgent来判断设备是电脑还是手机的,我知道这种前端也可已完成的功能,只是后台比较强势,本人本着以和为 ...
- C#使用AutoMapper6.2.2.0进行对象映射
先说说DTO DTO是个什么东东? DTO(Data Transfer Object)就是数据传输对象,说白了就是一个对象,只不过里边全是数据而已. 为什么要用DTO? 1.DTO更注重数据,对领域对 ...