jQuery 基础学习笔记
1. jQuery 的执行时间:
$(document).ready(function(){--- jQuery functions go here ----// 保证当文档对象加载完成后,进行元素事件处理函数的绑定 });
jQuery 是基于事件相应机制进行处理的,为给定元素的事件绑定事件处理函数,当事件发生时,触发相关的函数。
2. 常用 函数
a.元素效果(隐藏和显示)
//语法: $(selector).hide(speed,callback); //隐藏元素;speed :"slow"、"fast" 或毫秒 ms 数值, callback:回调函数名 $(selector).show(speed,callback); //显示元素;speed :"slow"、"fast" 或毫秒 ms 数值, callback:回调函数名 $(selector).toggle(speed,callback); // 隐藏显示的元素,显示隐藏的元素;speed :"slow"、"fast" 或毫秒 ms 数值, callback:回调函数名 $(selector).fadeIn(speed,callback); //淡入效果显示被隐藏的元素; speed :"slow"、"fast" 或毫秒 ms 数值, callback:回调函数名 $(selector).fadeOut(speed,callback); //淡出效果隐藏已经显示的元素 speed :"slow"、"fast" 或毫秒 ms 数值, callback:回调函数名 $(selector).fadeTo(speed,opacity,callback); //淡出显示到 指定的透明度 $(selector).slideDown(speed,callback); //以下拉的效果显示被隐藏的元素 speed :"slow"、"fast" 或毫秒 ms 数值, callback:回调函数名 $(selector).slideUp(speed,callback); //以上拉的效果隐藏显示的元素 speed :"slow"、"fast" 或毫秒 ms 数值, callback:回调函数名 $(selector).slideToggle(speed,callback); //以下拉的效果显示被隐藏的元素,以上拉的效果隐藏显示的元素$(selector).animate(styles,options); //动画元素
2.元素内容的获取
<element type='...' name='...' value='.....'> 文本内容<element> </element> </element>$(selector).text(); // 获取或设置内容是元素标签里定义的除去其他标签的纯文本: 即上面的 :“文本内容” $(selector).html(); // 获取或设置 元素标签内的内容,包括其内的标签 即上面的 : “文本内容<element>.... </element>” $(selector).val(); // 获取或设置 元素 value 属性内的值$(selector).attr(attribute); // 获取元素 指定属性的值$(selector).attr(attribute,value); // 设置元素 指定属性的值$(selector).attr(attribute,function(index,oldvalue)); // 设置元素 指定属性的值 index: 元素的索引值,oldvalue :旧值$(selector).attr({attribute:value, attribute:value ...});// 同时设置多个值
3.元素属性操作
方法 | 描述 |
---|---|
addClass() | 向匹配的元素添加指定的类名。 |
attr() | 设置或返回匹配元素的属性和值。 |
hasClass() | 检查匹配的元素是否拥有指定的类。 |
html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
removeAttr() | 从所有匹配的元素中移除指定的属性。 |
removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
toggleClass() | 从匹配的元素中添加或删除一个类。 |
val() | 设置或返回匹配元素的值。 |
4.元素添加
before_area1 <element .........>prepend_area2 someContent append_area3</element>after_area4 $(selector).append(contnents); // 将 contents 添加到 append_area3 位置$(selector).prepend(contents); // 将 contents 添加到 append_area2 位置$(selector).before(contents); // 将 contents 添加到 append_area1 位置 $(selector).after(contents); // 将 contents 添加到 append_area4 位置这里的content可以是字符串表示的元素,也可以是元素变量,并且可以多元素添加。
5. 元素的删除
<div id='root'><div id='child'><div id='grandchild'>...</div></div> </div><script> var elements = $(selector).remove([filter]); //移除满足条件的元素和其子元素,并返回之,这个移除是让 此元素和子节点从 DOM对象结构上移除,并将其保存于jQuery对象内。 // filter 满足选择器语法 $(selector).empty(); //清空元素内的内容,包括text,和内的节点 <script>
6.样式表CSS 的使用
//获取指定的值 var value=css("propertyname");//设置值 css("propertyname","value");// 设置多个值 css({"propertyname":"value","propertyname":"value",...});
7.尺寸控制
$(selector).width() ; $(selector).height();$(selector).innerWidth() ; $(selector).innerHeight();$(selector).outerWidth([boolean]) ; $(selector).outerHeight([boolean]) ;//false,不加外边框;true,加外边框
8.选择器参考
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
element | $("p") | 所有 <p> 元素 |
.class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
:first | $("p:first") | 第一个 <p> 元素 |
:last | $("p:last") | 最后一个 <p> 元素 |
:even | $("tr:even") | 所有偶数 <tr> 元素 |
:odd | $("tr:odd") | 所有奇数 <tr> 元素 |
:eq(index) | $("ul li:eq(3)") | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
:lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
:not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
:header | $(":header") | 所有标题元素 <h1> - <h6> |
:animated | 所有动画元素 | |
:contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
:empty | $(":empty") | 无子(元素)节点的所有元素 |
:hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
:visible | $("table:visible") | 所有可见的表格 |
s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
[attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
[attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
:input | $(":input") | 所有 <input> 元素 |
:text | $(":text") | 所有 type="text" 的 <input> 元素 |
:password | $(":password") | 所有 type="password" 的 <input> 元素 |
:radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
:checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
:submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
:reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
:button | $(":button") | 所有 type="button" 的 <input> 元素 |
:image | $(":image") | 所有 type="image" 的 <input> 元素 |
:file | $(":file") | 所有 type="file" 的 <input> 元素 |
:enabled | $(":enabled") | 所有激活的 input 元素 |
:disabled | $(":disabled") | 所有禁用的 input 元素 |
:selected | $(":selected") | 所有被选取的 input 元素 |
:checked | $(":checked") | 所有被选中的 input 元素 |
转载于:https://www.cnblogs.com/louluan/p/3542053.html
jQuery 基础学习笔记相关推荐
- jQuery基础学习笔记(上)
1.简介及语法 认识jQuery 1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中. 2.什么事jQuery: jQuery是一个JavaScript函数库. 3 ...
- jQuery基础学习笔记(下)
8.jQuery的扩展与noConflict 1.jQuery扩展 <script src="../../jquery-2.1.3.min.js"></scrip ...
- jQuery基础学习笔记(中)
5.CSS操作及jQuery的盒子模型 1.jQuery CSS方法 <div></div> css.css .style1{width: 100px;height: 100p ...
- ASP.Net MVC开发基础学习笔记(5):区域、模板页与WebAPI初步
http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...
- guido正式发布python年份_Python 基础学习笔记.docx
Python 基础学习笔记 基于<Python语言程序设计基础(第2版)> 第一部分 初识Python语言 第1章 程序设计基本方法 1.1 计算机的概念 计算机是根据指令操作数据的设备, ...
- Python3 基础学习笔记 C09【文件和异常】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...
- Python3 基础学习笔记 C08 【类】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...
- Python3 基础学习笔记 C07【函数】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...
- Python3 基础学习笔记 C06【用户输入和 while 循环】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...
最新文章
- linux centos 查找命令 属于哪个安装包 所属软件包
- Android报表库aChartEngine系列
- 100多本python书,免费电子版下载
- [Java基础]Math类的常用方法
- mysql组件化_MySql笔记
- linux基础知识——创建进程
- alien指令 linux,使用alien命令让deb包和rpm包互相转换
- Javascript 通用Excel导出函数
- 凑算式——第七届蓝桥杯C语言B组(省赛)第三题
- 光立方体c语言程序,444光立方程序C语言源代码 - 444光立方程序怎么写 光立方原理图、源代码及制作教程...
- 信息系统分析与设计(自考)
- trouble processing xxxx.class: Ill-advised or mistaken usage of a core class (java.* or javax.*)
- 撤销git reset
- 《简单的逻辑学》阅读笔记(思维导图)
- Mac下载软件的网站
- 聚观早报|春节档新片预售总票房破千万;苹果获可折叠iPhone新专利
- Python基础详解(十三):(视频符号化)将视频转换成ASCII符号形式展示出来
- R语言-查看加载包、卸除加载包及安装包与卸载包
- ORACLE WITH与性能优化
- 计算机的定点运算器原理,优·计算机组成原理 定点运算器的组成和结构.doc