JQuery

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

JQuery库下载

官网下载地址：http://jquery.com/download/#Download_jQuery

JQuery安装

JQuery是一个JavaScript文件，使用

JQuery语法

基础语法： $(selector).action()
- 美元符定义JQuery
- 选择符（selector） “查询”和”查找”HTML元素
- JQuery的action()执行对选中元素的操作
JQuery选择器
1. 元素选择器
  
  JQuery使用CSS选择器来选取HTML元素。
```
   $("p") 选取<p>元素

   $("p.intro")选取所有class=“intro”的<p>元素

   $("p#demo")选取所有id="demo"的<p>元素
```
1. 属性选择器
  
  使用XPath表达式来选择带有指定属性的元素
```
   $("[href]")选取所有带有href属性的元素

   $("[href='#']")选取所有href值等于"#"的元素

   $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

   $("[href\$='.jpg']")选取所有 href 值以 ".jpg" 结尾的元素。
```
1. CSS选择器
  
  改变HTML元素的CSS样式。
  
  $(“p”).css(“background-color”,”red”);
  
  把所有p元素的背景颜色改为红色。
JQuery事件

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

通常会把 jQuery 代码放到部分的事件处理方法中

JQuery**名称冲突**

使用noConflict()解决
```
var jq = jQuery.noConflict();
```
这一句使用jq来代替美元符。

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突，则重命名 jQuery 库
JQuery效果

隐藏/显示

隐藏——hide()方法

显示——show()方法
```
$("#hide").click(function(){

  $("p").hide();

});

$("#show").click(function(){

  $("p").show();

});
```
语法：
```
$(selector).hide(speed,callback);

$(selector).show(speed,callback);

//speed参数设定显示/隐藏的速度，可以取以下值："fast"、"slow"和毫秒数

//callback参数定义隐藏或显示完成后所执行的函数名称
```
toggle()——显示被隐藏的元素，并隐藏已显示的元素。
```
$("button").click(function(){

  $("p").toggle();

})
```
语法：
```
$(selector).toggle(speed,callback);
```
淡入淡出

fadeIn()——淡入已隐藏的元素，语法：
```
$(selector).fadeIn(speed,callback);

//speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒

//callback 参数是 fading 完成后所执行的函数名称
```
fadeOut()——淡出可见元素,语法：
```
$(selector).fadeOut(speed,callback);
```
fadeToggle()——在 fadeIn() 与 fadeOut() 方法之间进行切换，语法：
```
$(selector).fadeToggle(speed,callback);
```
fadeTo()——允许渐变为给定的不透明度（值介于 0 与 1 之间），语法：
```
$(selector).fadeTo(speed,opacity,callback);

//必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
```
滑动
- slideDown()——向下滑动
- slideUp()——向上滑动元素
- slideToggle()——slideDown() 与 slideUp() 方法之间进行切换
语法：
```
$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒

//可选的 callback 参数是滑动完成后所执行的函数名称
```
实例：
```
<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".flip").click(function(){

    $(".panel").slideToggle("slow");

  });

});

</script>

<style type="text/css">

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<div class="panel">

<p>W3School - 领先的 Web 技术教程站点</p>

<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

</div>

<p class="flip">请点击这里</p>

</body>

</html>
```
动画

animate()方法——创建自定义动画，语法：
```
$(selector).animate({params},speed,callback);

//必须的params参数定义形成动画的CSS属性

//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

//可选的 callback 参数是动画完成后所执行的函数名称。
```
提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

停止动画

stop()方法——停止当前动画。
```
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Stop Animate</title>

    <script src="js/jquery-3.2.1.min.js"></script>

    <script>

        $(document).ready(function () {

            $("#flip").click(function () {

                $("#panel").slideDown(5000);

            });

            $("#stop").click(function () {

                $("#panel").stop();

            });

        });

    </script>

    <style type="text/css">

        #panel,#flip {

            padding:5px;

            text-align:center;

            background-color:#e5eecc;

            border:solid 1px #c3c3c3;

        }

        #panel {

            padding:50px;

            display:none;

        }

    </style>

</head>

<body>

    <button id="stop">停止滑动</button>

    <div id="flip">点击这里，向下滑动面板</div>

    <div id="panel">Hello world!</div>

</body>

</html>
```
*注意：*stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

CallBack函数

Callback 函数在当前动画 100% 完成之后执行。

Chaining

通过 jQuery，您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

JQuery HTML

获取内容和属性
```
text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

attr() 方法用于获取属性值
```
添加元素
```
append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容
```
删除元素
```
remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素
```
获取并设置 CSS 类
```
addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性
```
css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的 CSS 属性的值，请使用如下语法：

css(“propertyname”);

如需设置指定的 CSS 属性，请使用如下语法：

css(“propertyname”,”value”);

如需设置多个 CSS 属性，请使用如下语法：

css({“propertyname”:”value”,”propertyname”:”value”,…});

尺寸

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

jQuery 遍历

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

jQuery nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的同胞元素。

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

jQuery first() 方法

first() 方法返回被选元素的首个元素。

jQuery last() 方法

last() 方法返回被选元素的最后一个元素。

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

jQuery not() 方法

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

jQuery - AJAX 简介

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：
```
$(selector).load(URL,data,callback);
```
必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
```
responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象
```
jQuery .get()方法.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：
```
$.get(URL,callback);
```
必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

jQuery .post()方法.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：
```
$.post(URL,data,callback);
```
必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

   $("[href]")选取所有带有href属性的元素

   $("[href='#']")选取所有href值等于"#"的元素

   $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

   $("[href$='.jpg']")选取所有 href 值以 ".jpg" 结尾的元素。

CSS选择器

改变HTML元素的CSS样式。

$(“p”).css(“background-color”,”red”);

把所有p元素的背景颜色改为红色。

JQuery 学习笔记-2017.05.22的更多相关文章

jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
jQuery 学习笔记
jQuery 学习笔记一.jQuery概述宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器和并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下本文实例讲述了j ...
jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
Effective STL 学习笔记： Item 22 ~ 24
Effective STL 学习笔记: Item 22 ~ 24 */--> div.org-src-container { font-size: 85%; font-family: monos ...
jQuery学习笔记之插件开发（4）
jQuery学习笔记之插件开发(4) github源码地址插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件这种类型的插件是把一些常用或者重复使用 ...

随机推荐

WEB开发框架性能排行与趋势分析
WEB开发框架性能基准测试解读与趋势分析 TechEmpower的<Web Framework Benchmarks>性能基准测试,是关注Web开发框架发展的重要途径.但是内容数据众多,每 ...
在FireFox浏览器上，用stopImmediatePropagation阻止冒泡鼠标滚动事件
楔子是不是在火狐用stopPropagation不太满意很久没有笑过又不知为何既然不快乐又不喜欢这里不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...
附件十四面3D模型的自动化生成
附件十四面的3D模型可以自动生成了 2017-10-14 刘崇军风螺旋线这个故事开始于大约半年前,偶然从电脑里翻到了曾经收藏的这本书<Automatic SketchUp>,英语+3D ...
C#语法之特性
在项目中经常可以看到在类属性上面有一个[]的东西,今天讲的东西就是它,它英文名是Attribute,中文名是特性. 一.什么是特性? 首先,我们肯定Attribute是一个类,下面是msdn文档对它的 ...
UIKit 框架之UIResponder
前面博客有讲触摸事件提过响应事件和响应者链,而管理响应者链的正是UIResponder. 一.代码 - (BOOL)application:(UIApplication *)application d ...
数据存储之第三方FMDB
上周四.周五在忙公司的事情和炒股,没来得及更新博客,这周就补一下,学习总结下FMDB. FMDB是对sqlite的封装,特别是在多线程情况下,使用sqlite是非常麻烦,而使用FMDB相对简单,下面是 ...
本地SQL数据库执行作业定时修改其他数据库内容
--exec sp_addlinkedserver 'xkp', ' ', 'SQLOLEDB', '192.168.66.66' 定义链接--exec sp_addlinkedsrvlogin ' ...
[日常] Go语言圣经--示例: 并发的Clock服务习题
练习 8.1: 修改clock2来支持传入参数作为端口号,然后写一个clockwall的程序,这个程序可以同时与多个clock服务器通信,从多服务器中读取时间,并且在一个表格中一次显示所有服务传回的结 ...
UML基础 UML对象图解析
本节向大家介绍一下UML对象图方面的内容,主要包括UML对象图概念介绍,表示法和用途等,希望通过本节的介绍大家对UML对象图有全面的认识,下面让我们一起来学习吧. UML对象图简介对象图(Objec ...
Java虚拟机--内存模型与线程
Java虚拟机--内存模型与线程高速缓存:处理器要与内存交互,如读取.存储运算结果,而计算机的存储设备和处理器的运算速度差异巨大,所以加入一层读写速度和处理器接近的高速缓存来作为内存和处理器之间的缓 ...

JQuery 学习笔记-2017.05.22

JQuery

JQuery库下载

JQuery安装

JQuery语法

JQuery选择器

JQuery事件

JQuery效果

隐藏/显示

淡入淡出

滑动

动画

停止动画

CallBack函数

Chaining

JQuery HTML

jQuery 遍历

jQuery - AJAX 简介

JQuery 学习笔记-2017.05.22的更多相关文章

随机推荐

热门专题