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封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
随机推荐
- svn的使用技巧
就是如果想一个文件在提交的时候不被上传,可以设置忽略这样提交的时候就不会被上传
- Oracle数据库游标精解
游标 定义:标识结果集中数据行的一种容器(CURSOR),游标允许应用程序对查询语句返回的行结果集中的每一行进行相同或不同的操作,而不是一次对整个结果集进行同一种操作.实际上是一种能从包括多条数据记录 ...
- Appium+python测试app实例
Appium和selenium差不到,只是一个用于测web,一个用于测APP.下面记录一下我搭的测试框架,同样是基于PO模式,用的unittest. 最后测试报告如下: 1.1 代码结构 这 ...
- 新概念英语(1-65)Not a Baby
新概念英语(1-65)Not a Baby Does Jill take the key to the front door? A:What are you going to do this even ...
- Spring入门(3-1)Spring的标签命名空间
1.标签命名空间声明: 2.标签命名空间使用 标签默认的命名空间是 security:,可以不用带 security:,直接写标签,如: <http <authentication-ma ...
- 2.x与3.x差异、条件语句、数据类型、其他
一.输入(raw_input)=====>python2.x版本 #!/usr/bin/env python # -*- coding: utf-8 -*- # 将用户输入的内容赋值给 name ...
- c# 工具类(字符串和时间,文件)
using System; using System.IO; using System.Text.RegularExpressions; using System.Windows.Browser; n ...
- Linux下内存问题检测神器:Valgrind
在写大型C/C++工程时难免会发生内存泄漏现象,系统编程中一个重要的方面就是有效地处理与内存相关的问题.你的工作越接近系统,你就需要面对越多的内存问题.有时这些问题非常琐碎,而更多时候它会演变成一个调 ...
- 使用 Docker 一步搞定 ZooKeeper 集群的搭建
背景 原来学习 ZK 时, 我是在本地搭建的伪集群, 虽然说使用起来没有什么问题, 但是总感觉部署起来有点麻烦. 刚好我发现了 ZK 已经有了 Docker 的镜像了, 于是就尝试了一下, 发现真是爽 ...
- django实现model中choices类型字段,后台自由配置
该功能主要试用于项目中有大量需要动态配置的字典字段,字典建议做缓存处理. 定义字典类型表,字典值两张表 2.配置对应的字典值 3.重写model的init方法,动态赋值choice 4.列表界面效果 ...