Jquery学习1

1.什么是JQuery

JQuery是一个可以简化JavaScript编程的JavaScript库。

2.JQuery可以做什么

jQuery 库包含以下特性：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

3.知识准备

在学习JQuery之前，我们需要具备HTML、CSS、JavaScript知识

4.使用JQuery

4.1 JQuery的安装

前面我们说到JQuery是一个可以简化JavaScript编程的JavaScript库，所以在我们使用JQuery之前，我们需要引入JQuery的库，引入JQuery的库有两种方法：

1.从网上下载JQuery的库，添加到我们的项目中，在使用JQuery的页面中引入

2.使用Google或微软的CDN来引入

推荐使用第二种方法，因为使用ＣＤＮ可以提高网站的响应速度，给用户更好的访问速度体验。

4.2  JQuery的语法

基础语法是：$(selector).action()

美元符号定义 jQuery

选择符（selector）“查询”和“查找” HTML 元素

jQuery 的 action() 执行对元素的操作

$(this)：代表当前HTML元素

 

在使用JQuery操作HTML元素时，我们往往需要加上$(document).ready(function{.......});，因为如果在文档加载之前执行JQuery操作可能会失败

4.3  JQuery的选择器

4.3.1  JQuery的元素选择器

JQuery使用CSS选择器来选取HTML元素。

$("p")：选取<p>元素

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

$("p#demo")：选取所有id="demo"的<p>元素

4.3.2  JQuery的属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

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

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

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

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

4.3.3  JQuery的CSS选择器

JQueryCSS选择器可用于改变HTML元素的CSS属性

4.4  JQuery的事件

4.5  JQuery的效果

4.5.1  隐藏与显示效果

hide()和show()

toggle()

4.5.2  淡入淡出效果

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

4.5.3  滑动效果

slideDown()

slideUp()

slideToggle()

4.5.4  动画

animate()

4.5.5  JQuery stop()

stop()：停止滑动或者动画

4.5.6  JQuery Callback

4.5.7  JQuery Chaining

4.6  JQuery&&HTML

4.6.1  JQuery 获取

获取内容 ：

text()：设置或获取所选元素的文本内容

html()：设置或获取所选元素的文本内容（包含HTML标记）

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

获取属性值：

attr()：获取所选元素的属性值

4.6.2  JQuery  设置

4.6.3  JQuery 添加

append()：在被选元素的结尾插入内容

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

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

before()：在被选元素之前插入内容

4.6.4  JQuery 删除

remove()：删除被选元素及其子元素

empty()：从被选元素中删除子元素

4.6.5  JQuery CSS类

addClass()：向被选元素添加一或多个类

removeClass()：向被选元素删除一个或多个类

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

css()：设置或返回样式属性

4.6.6  JQuery css()

4.6.7  JQuery 尺寸

jQuery 提供多个处理尺寸的重要方法：

width()：

height()：

innerWidth()：

innerHeight()：

outerWidth()：

outerHeight()：

4.7  JQuery遍历

4.7.1  JQuery遍历

4.7.2  JQuery遍历--祖先

向上遍历DOM树：

parent()：返回被选元素的直接父元素

parents()：返回被选元素的所有祖宗元素，也可通过带参数的方法返回指定的祖宗元素

parentsUntil()：返回介于当前元素和指定元素之间的所有祖宗元素

4.7.3  JQuery遍历--后代

向下遍历DOM树

children()：返回被选元素的所有直接子元素，也可通过指定参数来获取满足条件的子元素

find()：返回被选元素的所有后代元素，直至最后一个后代元素

4.7.4  DOM树中水平遍历

siblings()：返回被选元素的所有同胞元素，也可通过指定 参数获取特定的同胞元素

next()：返回被选元素的下一个同胞元素

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

nextUntil()：返回介于被选元素和指定参数元素之间的所有跟随同胞元素

prev()：

prevAll()：

prevUntil()：

4.7.5  JQuery遍历--过滤

first()：返回被选元素的首个元素

last()：返回被选元素的最后一个元素

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

filter()：返回被选元素中匹配指定参数的元素

not()：返回被选元素中不匹配指定参数的元素

4.8  JQuery--Ajax

Ajax可以与服务器交换数据，可以在不重新加载所有页面的情况下，对部分页面进行刷新。

4.8.1  Ajax简介

Ajax = 异步的JavaScript和XML（Asynchronous Javascript and XML）

4.8.2  JQuery load()方法

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

语法：$(selector).load(URL,data,callback)

URL：规定需要加载的URL

data：规定与请求一同发送的查询字符串键/值对集合

callback：load方法完成后执行的函数。

responseTxt：包含调用成功时的结果内容

statusTXT：包含调用的状态

xhr：包含XMLHttpRequest对象

4.8.3  get()和post()方法

用于通过Http  get或post请求从服务其请求数据

get请求：从指定的资源请求数据。基本用于从服务器获得数据，有可能返回缓存数据

post请求：向指定的资源提交要处理的数据。可用于从服务器获取数据，但不会缓存数据

$.get()：通过Http Get请求从服务器上请求数据

$.get(URL,callback)

URL：希望请求的URL

callback：请求成功后执行的函数名

$.post()：通过Http Post请求从服务器上请求数据

$.post(URL,data,callback)

URL：希望请求的URL

data：连同请求发送的数据

callback：请求成功后执行的函数

4.9  noConflict()

避免在同一个项目中使用不同的框架均以$作为简写的情况

$.noConflict();会释放对$标识符的控制，但释放后jQuery中需使用jQuery代替$,或者创建自己的简写

var jq = $.noConflict();