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 基础学习笔记相关推荐

  1. jQuery基础学习笔记(上)

    1.简介及语法 认识jQuery 1.jQuery:     jQuery库可以通过一行简单的标记被添加到网页中. 2.什么事jQuery:     jQuery是一个JavaScript函数库. 3 ...

  2. jQuery基础学习笔记(下)

    8.jQuery的扩展与noConflict 1.jQuery扩展 <script src="../../jquery-2.1.3.min.js"></scrip ...

  3. jQuery基础学习笔记(中)

    5.CSS操作及jQuery的盒子模型 1.jQuery CSS方法 <div></div> css.css .style1{width: 100px;height: 100p ...

  4. ASP.Net MVC开发基础学习笔记(5):区域、模板页与WebAPI初步

    http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...

  5. guido正式发布python年份_Python 基础学习笔记.docx

    Python 基础学习笔记 基于<Python语言程序设计基础(第2版)> 第一部分 初识Python语言 第1章 程序设计基本方法 1.1 计算机的概念 计算机是根据指令操作数据的设备, ...

  6. Python3 基础学习笔记 C09【文件和异常】

    CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...

  7. Python3 基础学习笔记 C08 【类】

    CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...

  8. Python3 基础学习笔记 C07【函数】

    CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...

  9. Python3 基础学习笔记 C06【用户输入和 while 循环】

    CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...

最新文章

  1. linux centos 查找命令 属于哪个安装包 所属软件包
  2. Android报表库aChartEngine系列
  3. 100多本python书,免费电子版下载
  4. [Java基础]Math类的常用方法
  5. mysql组件化_MySql笔记
  6. linux基础知识——创建进程
  7. alien指令 linux,使用alien命令让deb包和rpm包互相转换
  8. Javascript 通用Excel导出函数
  9. 凑算式——第七届蓝桥杯C语言B组(省赛)第三题
  10. 光立方体c语言程序,444光立方程序C语言源代码 - 444光立方程序怎么写 光立方原理图、源代码及制作教程...
  11. 信息系统分析与设计(自考)
  12. trouble processing xxxx.class: Ill-advised or mistaken usage of a core class (java.* or javax.*)
  13. 撤销git reset
  14. 《简单的逻辑学》阅读笔记(思维导图)
  15. Mac下载软件的网站
  16. 聚观早报|春节档新片预售总票房破千万;苹果获可折叠iPhone新专利
  17. Python基础详解(十三):(视频符号化)将视频转换成ASCII符号形式展示出来
  18. R语言-查看加载包、卸除加载包及安装包与卸载包
  19. ORACLE WITH与性能优化
  20. 计算机的定点运算器原理,优·计算机组成原理 定点运算器的组成和结构.doc

热门文章

  1. Codeforces Round #131(Div. 2)
  2. 李爽久:平安云如何解决金融同业互联专线痛点
  3. 工控随笔_04_西门子_解决Step 7软件因授权问题不能打开的方式和方法
  4. Android 使用Adapter适配器模式实现无线轮播BannerView
  5. 敏捷与DevOps整合之道
  6. 《MonoTouch开发实践指南》一1.2 创建MonoTouch应用程序
  7. 要是想让程序跳转到绝对地址是0x100000去执行
  8. tomcat手动发布
  9. PHP各种魔术方法测试
  10. 北大百年讲堂创新大会小游记